/**
 * LOUNGE HERO
 *
 * Full-bleed photograph with the copy over it and the booking card floated to
 * the right. Measured from the product page: band 813 tall, heading display-2
 * at 0.78, meta line, then three pills.
 */

@layer components {

	.lounge-page {
		background-color: var(--clr-bg-deep);
		color: var(--clr-text);
	}

	/*
	 * The partners strip paints --clr-bg, which is --black-900 in a dark
	 * context — a shade off the true black this page runs on, and it showed as
	 * a line where the two met.
	 */
	.lounge-page .partners {
		background-color: var(--clr-bg-deep);
	}

	/*
	 * The product page runs wider than the rest of the site. Measured: content
	 * spans 20 to 1400 of the 1440 frame, against the 1164 column the home page
	 * uses — a deliberately more immersive layout, so it gets its own width
	 * rather than being squeezed into the site wrapper.
	 */
	.lounge-page {
		/*
		 * .wrapper computes min(100% - gutter*2, --wrapper-max), so widening it
		 * means moving those two knobs, not setting a max-inline-size — which
		 * loses to the inline-size already on the element.
		 *
		 * 1400 content with a 20px gutter reproduces the frame exactly at 1440.
		 */
		--wrapper-max: 87.5rem;                /* 1400px */
		--gutter: 1.25rem;                     /* 20px */

		/*
		 * One knob for the rhythm down this page. --section-space is the site's
		 * 128px band padding, which is right for the home page's full-width
		 * bands but too airy here, where sections stack in a column beside the
		 * booking rail. The design's own gaps run 45–92, so 80 sits in the
		 * middle of them.
		 */
		--section-gap: clamp(var(--space-2xl), 5.6vw, 5rem);
	}

	.lounge-hero {
		position: relative;
		isolation: isolate;
		overflow: hidden;
		display: flex;
		align-items: center;
		min-block-size: min(50.8125rem, 100svh);   /* 813px, measured */
		padding-block: var(--space-4xl) var(--space-3xl);
		background-color: var(--clr-bg-deep);
	}

	.lounge-hero__media {
		position: absolute;
		inset: 0;
		z-index: -2;
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
	}

	/*
	 * Darkened from the left, where the heading sits, and kept lighter on the
	 * right so the photograph still reads behind the booking card.
	 */
	.lounge-hero::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background-image:
			linear-gradient(to right, rgb(0 0 0 / 0.9) 0%, rgb(0 0 0 / 0.62) 55%, rgb(0 0 0 / 0.5) 100%),
			linear-gradient(to bottom, rgb(0 0 0 / 0.62) 0%, rgb(0 0 0 / 0.12) 32%);
		pointer-events: none;
	}

	.lounge-hero__inner {
		display: grid;
		gap: var(--space-2xl);
		align-items: center;
	}

	@media (min-width: 64rem) {
		.lounge-hero__inner {
			/* Copy left, card right — the card is 452 of the 1164 column. */
			grid-template-columns: minmax(0, 1fr) 28.25rem;
			gap: var(--space-3xl);
		}
	}

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

	.lounge-hero__copy {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.breadcrumb {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-2xs);
		font-size: var(--fs-eyebrow);
		font-weight: var(--weight-semibold);
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--clr-text-inverse-subtle);
	}

	.breadcrumb a {
		color: inherit;
		text-decoration: none;
	}
	.breadcrumb a:hover,
	.breadcrumb a:focus-visible {
		color: var(--clr-accent);
	}
	.breadcrumb [aria-current="page"] { color: var(--clr-text); }

	.lounge-hero__title {
		margin-block: var(--space-m) 0;
		font-size: var(--fs-display-2);
		line-height: var(--lh-display-2);
		letter-spacing: var(--track-display-2);
		font-weight: var(--weight-bold);
		text-transform: uppercase;
		text-wrap: initial;                    /* the break is authored */
		color: var(--cream-100);               /* #f2eee6 in the design */
	}

	.lounge-hero__meta {
		margin-block: var(--space-l) 0;
		font-size: var(--fs-body);
		line-height: 1.4;
		color: var(--clr-text-inverse-soft);
	}

	/* ---- Pills ----------------------------------------------------------- */

	.lounge-hero__pills {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2xs);
		margin-block: var(--space-l) 0;
		padding: 0;
		list-style: none;
	}

	.pill {
		padding: 0.5rem 1rem;
		border: 1px solid var(--clr-border);
		border-radius: var(--radius-pill);
		font-size: 0.6875rem;                  /* 11px */
		font-weight: var(--weight-semibold);
		line-height: 1.2;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--clr-text-inverse-soft);
	}

	/* ---- Card placement --------------------------------------------------- */

	@media (max-width: 63.999rem) {
		.booking-card { max-inline-size: 28.25rem; }
	}
}