/**
 * Ecdysiz Components — primitive component styles.
 * Layer: @layer components.
 *
 * Consumes semantic tokens only — never primitives, never raw values.
 * Each primitive has a complete contract in docs/reference/components/.
 */

@layer components {

	/* ============================================================
	   BUTTON PRIMITIVE
	   .ecdysiz-btn — base
	   .ecdysiz-btn--secondary — secondary variant
	   .ecdysiz-btn--ghost — minimal variant
	   ============================================================ */

	.ecdysiz-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--ecdysiz-inline-sm);
		padding: var(--ecdysiz-stack-sm) var(--ecdysiz-inline-md);
		min-height: 2.75rem;
		font-family: var(--ecdysiz-family-sans);
		font-size: var(--ecdysiz-type-body);
		font-weight: var(--ecdysiz-weight-semibold);
		line-height: var(--ecdysiz-leading-tight);
		text-decoration: none;
		border: var(--ecdysiz-border-thin) transparent;
		border-radius: var(--ecdysiz-radius-control);
		background-color: var(--ecdysiz-color-primary);
		color: var(--ecdysiz-color-primary-on);
		cursor: pointer;
		transition: background-color var(--ecdysiz-motion-hover),
			border-color var(--ecdysiz-motion-hover),
			color var(--ecdysiz-motion-hover),
			transform var(--ecdysiz-motion-hover);
	}

	.ecdysiz-btn:hover {
		background-color: var(--ecdysiz-color-primary-hover);
		color: var(--ecdysiz-color-primary-on);
		text-decoration: none;
	}

	.ecdysiz-btn:active {
		transform: translateY(1px);
	}

	.ecdysiz-btn:disabled,
	.ecdysiz-btn[aria-disabled="true"] {
		opacity: var(--ecdysiz-60);
		cursor: not-allowed;
		pointer-events: none;
	}

	/* Secondary variant */

	.ecdysiz-btn--secondary {
		background-color: var(--ecdysiz-color-secondary);
		color: var(--ecdysiz-color-secondary-on);
	}

	.ecdysiz-btn--secondary:hover {
		background-color: var(--ecdysiz-color-secondary);
		color: var(--ecdysiz-color-secondary-on);
	}

	/* Ghost variant — outlined, transparent background */

	.ecdysiz-btn--ghost {
		background-color: transparent;
		color: var(--ecdysiz-color-primary);
		border-color: var(--ecdysiz-color-border);
	}

	.ecdysiz-btn--ghost:hover {
		background-color: var(--ecdysiz-color-surface-raised);
		color: var(--ecdysiz-color-primary);
		border-color: var(--ecdysiz-color-primary);
	}

	/* Size variants */

	.ecdysiz-btn--sm {
		padding: var(--ecdysiz-stack-xs) var(--ecdysiz-inline-md);
		min-height: 2.25rem;
		font-size: var(--ecdysiz-type-body-sm);
	}

	.ecdysiz-btn--lg {
		padding: var(--ecdysiz-stack-md) var(--ecdysiz-inline-lg);
		min-height: 3.25rem;
		font-size: var(--ecdysiz-type-body-lg);
	}

	/* ============================================================
	   CONTAINER PRIMITIVE
	   .ecdysiz-container — token-driven content-width centering
	   .ecdysiz-container--wide — ultra-wide content area
	   .ecdysiz-container--full — full-bleed (no max-width)
	   ============================================================ */

	.ecdysiz-container {
		width: 100%;
		max-width: var(--ecdysiz-content-width);
		margin-inline: auto;
		padding-inline: var(--ecdysiz-side-padding);
		container-type: inline-size;
	}

	.ecdysiz-container--wide {
		max-width: var(--ecdysiz-content-width-wide);
	}

	.ecdysiz-container--full {
		max-width: none;
		padding-inline: 0;
	}

	/* Responsive side padding — mobile gets tighter padding */

	@media (max-width: 767px) {
		.ecdysiz-container {
			padding-inline: var(--ecdysiz-side-padding-sm);
		}
	}

	/* ============================================================
	   CARD PRIMITIVE (SHELL)
	   .ecdysiz-card — base structural container
	   .ecdysiz-card__media — media slot
	   .ecdysiz-card__body — content slot
	   .ecdysiz-card__footer — footer slot
	   ============================================================ */

	.ecdysiz-card {
		display: flex;
		flex-direction: column;
		background-color: var(--ecdysiz-color-surface);
		color: var(--ecdysiz-color-text);
		border: var(--ecdysiz-border-thin) var(--ecdysiz-color-border);
		border-radius: var(--ecdysiz-radius-card);
		overflow: hidden;
		box-shadow: var(--ecdysiz-shadow-sm);
		transition: box-shadow var(--ecdysiz-motion-hover),
			transform var(--ecdysiz-motion-hover);
		container-type: inline-size;
	}

	.ecdysiz-card:hover {
		box-shadow: var(--ecdysiz-shadow-md);
	}

	.ecdysiz-card__media {
		display: block;
		width: 100%;
		aspect-ratio: 16 / 9;
		overflow: hidden;
		background-color: var(--ecdysiz-color-surface-raised);
	}

	.ecdysiz-card__media img,
	.ecdysiz-card__media video {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.ecdysiz-card__body {
		display: flex;
		flex-direction: column;
		gap: var(--ecdysiz-stack-sm);
		padding: var(--ecdysiz-stack-md);
		flex: 1 1 auto;
	}

	.ecdysiz-card__footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--ecdysiz-inline-md);
		padding: var(--ecdysiz-stack-md);
		border-top: var(--ecdysiz-border-thin) var(--ecdysiz-color-border-muted);
		background-color: var(--ecdysiz-color-surface-raised);
	}

	/* Card variants */

	.ecdysiz-card--flat {
		box-shadow: none;
	}

	.ecdysiz-card--elevated {
		box-shadow: var(--ecdysiz-shadow-md);
	}

	.ecdysiz-card--elevated:hover {
		box-shadow: var(--ecdysiz-shadow-lg);
	}

	/* Container-query: horizontal card layout when card is wide enough */

	@container (min-width: 30rem) {

		.ecdysiz-card--horizontal {
			flex-direction: row;
		}

		.ecdysiz-card--horizontal .ecdysiz-card__media {
			width: 40%;
			aspect-ratio: auto;
		}

		.ecdysiz-card--horizontal .ecdysiz-card__body {
			flex: 1 1 60%;
		}
	}
}