/**
 * LOUNGE FEATURE (02) + NEXT LOUNGE CTA
 *
 * Dark band. Measured from the design (1440 frame):
 *   band        y 2276 → 3467, full bleed
 *   image       x 138, 454x665, badges overlaid at 14px inset
 *   copy        x 730 → ~1300
 *   meta cols   location at 730, packages at 968
 *   buttons     y 2916, 48px tall
 *
 * Every red in this section comes from --clr-accent, set per lounge from a
 * colour field. Nothing here hardcodes Ferrari red, so a Senna lounge in yellow
 * needs no CSS at all.
 */

@layer components {
	/*
	 * data-theme="dark" on the section remaps --clr-bg/--clr-text/--clr-border,
	 * so this component just uses the normal tokens. Reaching for --clr-*-inverse
	 * directly is what broke the ghost button: its hover flips the label to
	 * var(--clr-bg), which stayed white and vanished against the white fill.
	 */
	.lounge-feature {
		background-color: var(--clr-bg);
		color: var(--clr-text);
		padding-block: var(--section-space);
	}

	.lounge-feature__inner {
		display: grid;
		gap: var(--space-2xl) var(--space-l);
		align-items: start;
	}

	@media (min-width: 60rem) {
		.lounge-feature__inner {
			/*
			 * Measured: image 454 + gap 138 + copy 572 = the 1164 column. The
			 * gap is large on purpose — the copy is meant to sit well clear of
			 * the image, not tuck against it.
			 */
			grid-template-columns: 454fr 572fr;
			column-gap: clamp(var(--space-l), 9.6vw, 8.625rem);   /* → 138px */
		}
	}

	/* ---- Image with overlaid badges ---------------------------------- */

	.lounge-feature__media {
		position: relative;
		margin: 0;
		border-radius: var(--radius-card);
		overflow: hidden;
		background-color: #1a1a1a;
	}
	.lounge-feature__media img {
		inline-size: 100%;
		block-size: 100%;
		aspect-ratio: 454 / 665;
		object-fit: cover;
	}

	/*
	 * Scrim behind the overlaid event details and status pill.
	 *
	 * Photography is uncontrolled — a bright sky or pale tarmac at the top of
	 * the crop leaves white text and the pill barely readable. A gradient that
	 * fades to nothing keeps the picture intact while guaranteeing contrast
	 * where the text actually sits.
	 */
	.lounge-feature__media::before {
		content: "";
		position: absolute;
		inset-block-start: 0;
		inset-inline: 0;
		z-index: 1;
		block-size: var(--scrim-height, 45%);
		background-image: linear-gradient(
			to bottom,
			rgb(0 0 0 / var(--scrim-strength, 0.55)) 0%,
			rgb(0 0 0 / calc(var(--scrim-strength, 0.55) * 0.45)) 45%,
			transparent 100%
		);
		pointer-events: none;
	}

	.lounge-feature__overlay {
		position: absolute;
		inset-block-start: 0;
		inset-inline: 0;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-s);
		/*
		 * Measured: pill sits 18px from the top, the event text 33px — they are
		 * optically centred on each other rather than both flush to the top.
		 * align-items: center reproduces that; the inset gives it room to breathe.
		 */
		padding: var(--space-m) var(--space-s);
		pointer-events: none;
	}

	.lounge-feature__event {
		margin: 0;
		font-family: var(--font-text);
		font-size: var(--fs-eyebrow);
		font-weight: var(--weight-bold);
		line-height: 1.35;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--white);
		/* 170px in the design. Wide enough that the editor's own line breaks
		   decide where it wraps, rather than the box forcing extra ones. */
		max-inline-size: 11rem;
	}

	/* Status pill. Fill follows the lounge accent. */
	.lounge-status {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		flex: 0 0 auto;
		min-block-size: 3rem;
		padding-inline: 1.25rem;
		border-radius: var(--radius-pill);
		background-color: var(--clr-accent);
		color: var(--white);
		font-family: var(--font-text);
		font-size: var(--fs-eyebrow);
		font-weight: var(--weight-bold);
		letter-spacing: 0.08em;
		text-transform: uppercase;
		white-space: nowrap;
	}
	/*
	 * Live indicator. A steady dot with a ring expanding out of it — reads as
	 * "broadcasting" rather than the nervous blink a plain opacity flash gives.
	 *
	 * The ring is a pseudo-element so it can scale past the dot without
	 * affecting layout, and it sits behind via a negative z-index so the dot
	 * itself stays crisp.
	 */
	.lounge-status__dot {
		position: relative;
		inline-size: 0.5rem;
		block-size: 0.5rem;
		border-radius: 50%;
		background-color: rgb(255 255 255 / 0.9);
		animation: dl-live-dot 2.4s ease-in-out infinite;
	}

	.lounge-status__dot::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		border-radius: 50%;
		background-color: rgb(255 255 255 / 0.55);
		animation: dl-live-ring 2.4s ease-out infinite;
	}

	@keyframes dl-live-dot {
		0%, 100% { opacity: 1; }
		55%      { opacity: 0.55; }
	}

	@keyframes dl-live-ring {
		0%   { transform: scale(1);   opacity: 0.55; }
		70%  { transform: scale(3.2); opacity: 0; }
		100% { transform: scale(3.2); opacity: 0; }
	}

	/* Anything that pulses indefinitely has to be able to stop. */
	@media (prefers-reduced-motion: reduce) {
		.lounge-status__dot { animation: none; opacity: 1; }
		.lounge-status__dot::after { animation: none; opacity: 0; }
	}

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

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

	.lounge-feature__title {
		margin: 0;
		color: inherit;
		/* Long enough for "THE SCHUMACHER"; "LOUNGE" breaks explicitly. */
		max-inline-size: 5em;
	}

	.lounge-feature__intro {
		margin-block: var(--stack-heading) 0;
		max-inline-size: 29rem;
		color: var(--clr-text-muted);
	}

	/* ---- Meta row ----------------------------------------------------- */

	.lounge-meta {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-m) var(--space-2xl);
		margin-block-start: var(--space-2xl);
	}

	.lounge-meta__item { min-inline-size: 0; }

	.lounge-meta__label {
		margin: 0 0 var(--space-2xs);
		font-family: var(--font-text);
		font-size: var(--fs-eyebrow);
		font-weight: var(--weight-semibold);
		letter-spacing: var(--track-eyebrow);
		text-transform: uppercase;
		color: inherit;
	}
	.lounge-meta__label::before {
		content: "/// ";
		color: var(--clr-accent);
	}

	.lounge-meta__value {
		margin: 0;
		font-family: var(--font-display);
		font-size: var(--fs-display-4);
		line-height: var(--lh-display-4);
		text-transform: uppercase;
		color: inherit;
	}

	.lounge-feature__actions { margin-block-start: var(--space-2xl); }

	/* ---- Next lounge CTA ---------------------------------------------- */

	/*
	 * Sits on the same dark band as the lounge above it, so the two read as one
	 * block rather than two stacked sections.
	 */
	.next-lounge {
		background-color: var(--clr-bg-inverse);
		padding-block-end: var(--section-space);
	}

	/*
	 * The card is deliberately wider than the content column — 1400 of 1440 in
	 * the design — while its contents line back up with the 1164 wrapper. That
	 * is what the 118px inner padding is for.
	 */
	.next-lounge__container {
		/* 1400 of 1440 in the design — a 20px margin either side. */
		inline-size: min(100% - 2.5rem, 87.5rem);
		margin-inline: auto;
	}

	.next-lounge__card {
		position: relative;
		overflow: hidden;
		border-radius: var(--radius-xl, 2.5rem);
		background-color: var(--clr-bg);
		color: var(--clr-text);
		/*
		 * Derive the inset from the card's own width rather than hardcoding
		 * 118px: (cardWidth - wrapperMax) / 2 is exactly the centring maths the
		 * wrapper uses, so the card's content lines up with every other section
		 * wherever the wrapper is at full width — scrollbar included.
		 *
		 * Below roughly 1230px the wrapper is viewport-limited and the card can
		 * only be ~12px wider per side, so the "card wider than content" effect
		 * does not exist there anyway; the floor just keeps it comfortably
		 * padded instead.
		 */
		padding-block: var(--space-2xl);
		padding-inline: max(var(--space-l), calc((100% - var(--wrapper-max)) / 2));
	}

	@media (min-width: 60rem) {
		.next-lounge__card {
			display: grid;
			/* Measured: heading 602 + gap 108 + form 454. */
			grid-template-columns: 602fr 454fr;
			column-gap: clamp(var(--space-l), 7.5vw, 6.75rem);   /* → 108px */
			align-items: center;
			padding-block: var(--space-3xl);
		}
	}

	/*
	 * Pattern behind the heading.
	 *
	 * --next-pattern is set inline by the template when a pattern asset exists
	 * in the theme; otherwise this falls back to CSS stripes so the card never
	 * renders bare. Drop a file at assets/images/pattern-chevron.svg and it is
	 * picked up automatically.
	 */
	.next-lounge__card::before {
		content: "";
		position: absolute;
		inset-block: 0;
		inset-inline-start: 0;
		inline-size: var(--next-pattern-width, 71.3%);   /* 998 of 1400 */
		background-image: var(
			--next-pattern,
			repeating-linear-gradient(115deg, var(--clr-bg-alt) 0 10px, transparent 10px 22px)
		);
		background-size: var(--next-pattern-size, auto);
		background-repeat: var(--next-pattern-repeat, repeat);
		background-position: left center;
		opacity: var(--next-pattern-opacity, 1);
		pointer-events: none;
	}

	/*
	 * Stacked card: smaller chevrons, and only down the left side.
	 *
	 * At natural size across the full width the texture competed with the
	 * heading sitting on top of it. Halving the tile and pulling it back to the
	 * left keeps it as backing for the heading — which is its job in the design
	 * — and leaves the form on clean white.
	 *
	 * Declared on ::before, not the card: the template sets --next-pattern-size
	 * inline on the card, and a value set on the pseudo-element itself beats one
	 * inherited from its originating element.
	 */
	/*
	 * Wide card: fill the height exactly rather than tiling.
	 *
	 * The artwork is 346 tall and the card is 393, so repeating it put a seam
	 * about 24px down from the top edge — a band of mismatched chevrons across
	 * the top of the card. Scaling to the box height draws it once, so there is
	 * no seam to hide, and the top edge fades in the same way the mobile one
	 * fades out.
	 */
	@media (min-width: 60rem) {
		.next-lounge__card::before {
			--next-pattern-size: auto 100%;
			--next-pattern-repeat: no-repeat;
			mask-image: linear-gradient(to bottom, transparent 0, #000 9%);
		}
	}

	@media (max-width: 59.999rem) {
		.next-lounge__card::before {
			--next-pattern-width: 62%;
			--next-pattern-size: 28rem auto;   /* 448px — a little under half */

			/*
			 * Ending the box mid-tile leaves a hard vertical edge. Fade the last
			 * third instead so the texture dissolves into the card.
			 */
			mask-image: linear-gradient(to right, #000 55%, transparent 100%);
		}
	}

	.next-lounge__body { position: relative; }

	.next-lounge__title {
		margin: 0;
		max-inline-size: 8em;
	}

	.next-lounge__text {
		margin: 0 0 var(--space-l);
		color: var(--clr-text-muted);
		max-inline-size: 30rem;
	}

	/* ---- Signup form -------------------------------------------------- */

	.signup {
		display: flex;
		align-items: center;
		gap: var(--space-2xs);
		padding: 0.625rem;
		background-color: var(--clr-bg);
		border: 1px solid var(--clr-border);
		border-radius: var(--radius-pill);
		max-inline-size: 29rem;
	}
	.signup__input {
		flex: 1 1 auto;
		min-inline-size: 0;
		border: 0;
		background: none;
		padding-inline: var(--space-s);
		font-family: var(--font-text);
		font-size: var(--fs-body);
		color: var(--clr-text);
	}
	.signup__input:focus { outline: none; }
	.signup:focus-within {
		border-color: var(--clr-text);
	}
	.signup__button {
		flex: 0 0 auto;
		background-color: var(--clr-text);
		color: var(--clr-bg);
		border-color: var(--clr-text);
	}
	.signup__button:hover,
	.signup__button:focus-visible {
		background-color: var(--clr-accent);
		border-color: var(--clr-accent);
		color: var(--clr-accent-text);
	}

	@media (max-width: 30rem) {
		.signup {
			flex-direction: column;
			align-items: stretch;
			border-radius: var(--radius-lg);
		}
		.signup__input { padding-block: var(--space-2xs); }
		.signup__button { justify-content: center; }
	}
}