/**
 * FROM THE LOUNGE (04)
 *
 * White band: heading left, intro right, then a full-bleed ribbon of photos.
 *
 * Measured from the design (1440 frame):
 *   heading  x 138, 385 wide; intro x 972, 355 wide — bottom-aligned
 *   photos   share a 474px height, widths follow each image's own ratio
 *   gaps     20px
 *   ribbon   runs x -635 → 1504, i.e. past both edges — a marquee mid-scroll
 *
 * Same CSS-only marquee as the partners strip: the track holds the list twice
 * and shifts exactly -50%, so the loop is seamless with nothing measured at
 * runtime and no JS.
 */

@layer components {
	.lounge-gallery {
		background-color: var(--clr-bg);
		padding-block: var(--section-space);
	}

	.lounge-gallery__head {
		display: grid;
		gap: var(--space-l) var(--space-2xl);
		align-items: end;                      /* intro sits on the heading's baseline */
		margin-block-end: var(--space-3xl);
	}

	@media (min-width: 60rem) {
		.lounge-gallery__head { grid-template-columns: 1fr 30.5%; }
	}

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

	.lounge-gallery__title {
		margin: 0;
		/* 385 / 129 = 2.98em — holds the design's line break. */
		max-inline-size: 3.1em;
	}

	.lounge-gallery__intro {
		margin: 0 0 var(--space-2xs);
		color: var(--clr-text-muted);
		max-inline-size: 24rem;
	}

	/* ---- Ribbon --------------------------------------------------------- */

	.lounge-gallery__viewport { overflow: hidden; }

	.lounge-gallery__track {
		display: flex;
		align-items: center;
		gap: var(--gallery-gap, 1.25rem);      /* 20px measured */
		inline-size: max-content;
	}

	.lounge-gallery--scrolling .lounge-gallery__track {
		animation: dl-gallery-marquee var(--gallery-duration, 60s) linear infinite;
	}
	/*
	 * Pause on hover, and on KEYBOARD focus only.
	 *
	 * :focus-within was wrong here: closing the lightbox returns focus to the
	 * thumbnail that opened it, and that thumbnail is inside the viewport — so
	 * the ribbon stayed frozen until the user clicked somewhere else.
	 *
	 * :has(:focus-visible) still pauses for someone tabbing through the photos,
	 * which is the case that actually needs it, but not for focus restored
	 * after a mouse interaction.
	 */
	.lounge-gallery--scrolling .lounge-gallery__viewport:hover .lounge-gallery__track,
	.lounge-gallery--scrolling .lounge-gallery__viewport:has(:focus-visible) .lounge-gallery__track {
		animation-play-state: paused;
	}

	@keyframes dl-gallery-marquee {
		from { transform: translate3d(0, 0, 0); }
		to   { transform: translate3d(-50%, 0, 0); }
	}

	.lounge-gallery__item {
		flex: 0 0 auto;
		margin: 0;
		border-radius: var(--radius-card);
		overflow: hidden;
		background-color: var(--clr-bg-alt);
	}

	/*
	 * Shared height, width from each photo's own ratio. Definite block-size
	 * rather than a max, and flex: 0 0 auto, so neither flex stretch nor an
	 * unresolved intrinsic size can distort them.
	 */
	.lounge-gallery__item img {
		display: block;
		/* Design measures 474px; run taller so the photography carries more
		   weight against the very large heading above it. */
		block-size: var(--gallery-height, 35rem);       /* 560px */
		inline-size: auto;
		max-inline-size: none;
		object-fit: cover;
	}

	@media (max-width: 61.999rem) {
		.lounge-gallery { --gallery-height: 24rem; --gallery-gap: 0.875rem; }
	}
	@media (max-width: 39.999rem) {
		.lounge-gallery { --gallery-height: 17rem; }
	}

	/*
	 * Reduced motion: stop it and hand control back rather than leaving photos
	 * drifting. The duplicate pass is decorative once nothing moves.
	 */
	@media (prefers-reduced-motion: reduce) {
		.lounge-gallery--scrolling .lounge-gallery__track { animation: none; }
		.lounge-gallery--scrolling .lounge-gallery__viewport {
			overflow-x: auto;
			scrollbar-width: thin;
		}
		.lounge-gallery--scrolling .lounge-gallery__track > [data-duplicate] { display: none; }
	}
}