/**
 * HERO
 *
 * Two-panel, full-bleed. Measured from the design (1440x880 frame):
 *   image  x 0 → 667   (46.32%)
 *   copy   x 730 → 1400
 *   so the copy column has 63px of inset from the image edge and 40px from the
 *   frame edge.
 *
 * Only the image changes between slides; the copy is static. If per-slide copy
 * is added later, the copy block moves inside a second synced Embla instance —
 * the markup around it does not need to change.
 */

@layer components {
	.hero {
		--hero-height: clamp(34rem, 61vw, 55rem);   /* 880px at a 1440 viewport */

		position: relative;
		display: grid;
		grid-template-columns: 1fr;
		background-color: var(--clr-bg);
	}

	/*
	 * Two-column from 60rem up. The media is placed explicitly rather than
	 * reordered, because the copy comes first in the DOM: on mobile that gives
	 * the requested content-then-slider order for free, and everywhere it means
	 * the h1 leads the document rather than the carousel.
	 */
	@media (min-width: 60rem) {
		.hero {
			grid-template-columns: var(--hero-media-col, 46.32%) 1fr;
		}
		.hero__media { grid-area: 1 / 1; }
		.hero__copy  { grid-area: 1 / 2; }
	}

	/* ---- Media panel ------------------------------------------------ */

	.hero__media {
		position: relative;
		block-size: var(--hero-height);
		background-color: var(--clr-bg-inverse);
		overflow: hidden;
	}

	.hero__slider,
	.hero__viewport { block-size: 100%; }
	.hero__viewport { overflow: hidden; }

	.hero__track {
		display: flex;
		block-size: 100%;
		/* Embla's fade plugin stacks the slides; without it they lay side by side. */
	}

	.hero__slide {
		position: relative;
		flex: 0 0 100%;
		min-inline-size: 0;
		block-size: 100%;
	}
	.hero__slide img {
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
	}

	/*
	 * Scrim behind the slider UI. Same reasoning as the lounge card: the
	 * counter, progress bars and caption are white on uncontrolled photography,
	 * and a pale image at the bottom of the crop would swallow them.
	 */
	.hero__media::after {
		content: "";
		position: absolute;
		inset-block-end: 0;
		inset-inline: 0;
		z-index: 1;
		block-size: var(--scrim-height, 38%);
		background-image: linear-gradient(
			to top,
			rgb(0 0 0 / var(--scrim-strength, 0.6)) 0%,
			rgb(0 0 0 / calc(var(--scrim-strength, 0.6) * 0.4)) 50%,
			transparent 100%
		);
		pointer-events: none;
	}

	/* ---- Slider UI, overlaid bottom-left of the image ---------------- */

	.hero__ui {
		z-index: 2;
		position: absolute;
		inset-block-end: var(--space-l);          /* lines sit 39px from the bottom */
		inset-inline: 1.25rem;                     /* x=20 in the design */
		display: flex;
		flex-wrap: wrap;
		align-items: end;
		gap: var(--space-2xs) var(--space-s);
		color: var(--white);
		pointer-events: none;                      /* only the dots are interactive */
	}

	.hero__counter {
		flex-basis: 100%;
		margin: 0;
		font-family: var(--font-text);
		font-size: var(--fs-eyebrow);
		font-weight: var(--weight-bold);
		letter-spacing: 0.02em;
		text-transform: uppercase;
	}

	.hero__dots {
		display: flex;
		gap: 0.625rem;                             /* 10px measured */
		pointer-events: auto;
	}

	/* 105x4 in the design. Flexible so they adapt on narrow screens. */
	.hero__dot {
		inline-size: var(--dot-width, 6.5625rem);
		max-inline-size: 25vw;
		block-size: 0.25rem;
		padding: 0;
		border: 0;
		border-radius: 2px;
		background-color: rgb(255 255 255 / 0.35);
		cursor: pointer;
		transition: background-color var(--transition-slow);
	}
	.hero__dot:hover { background-color: rgb(255 255 255 / 0.6); }
	.hero__dot[aria-current="true"] { background-color: var(--clr-accent); }

	.hero__label {
		margin: 0;
		font-family: var(--font-text);
		font-size: var(--fs-eyebrow);
		font-weight: var(--weight-bold);
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}

	/* ---- Copy panel -------------------------------------------------- */

	.hero__copy {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-block: var(--space-3xl);
		padding-inline-start: var(--hero-copy-inset, 3.9375rem);  /* 63px */
		padding-inline-end: var(--space-l);
	}

	.hero__title {
		margin: 0;
		/* 771 / 154 = 5.006em — reproduces the design's line breaks at any size. */
		max-inline-size: 5em;
	}

	.hero__intro {
		max-inline-size: 32rem;                    /* design paragraph is 509px */
		margin-block: var(--stack-heading) 0;
		color: var(--clr-text-muted);
	}

	.hero__actions { margin-block-start: var(--stack-action); }

	.hero__eyebrow { margin: 0 0 var(--stack-eyebrow); }

	/* ---- Stacked layout ---------------------------------------------- */

	/* ---- Stacked (default, below 60rem) ------------------------------ */

	@media (max-width: 59.999rem) {
		/* Wider crop so the slider doesn't dominate once it sits below the copy. */
		.hero__media {
			block-size: auto;
			aspect-ratio: 4 / 3;
		}

		.hero__copy {
			padding-inline: var(--gutter);
			padding-block: var(--space-xl) var(--space-2xl);
		}

		.hero__ui { --dot-width: 4rem; }
	}
}

@layer components {
	/* Placeholder shown while no media is attached — dev aid, harmless in prod. */
	.hero__slide-placeholder {
		inline-size: 100%;
		block-size: 100%;
		background: linear-gradient(140deg, #2a2a2a, #0b0b0b 60%);
	}
	.hero__slide:nth-child(2) .hero__slide-placeholder {
		background: linear-gradient(140deg, #4a3b22, #0b0b0b 60%);
	}
	.hero__slide:nth-child(3) .hero__slide-placeholder {
		background: linear-gradient(140deg, #3a1416, #0b0b0b 60%);
	}
}