/**
 * STICKY CTA
 *
 * Fixed bar at the foot of the window. Measured from the 1440 frame: 90 tall
 * including a 6px gold rule, title 22 Bold, detail 16 Light, button 185x48 with
 * square corners — deliberately not the pill used everywhere else.
 */

@layer components {

	.sticky-cta {
		container-type: inline-size;
		container-name: stickybar;
		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		z-index: var(--z-sticky);

		background-color: var(--clr-bg-deep);
		color: var(--clr-text);
		border-block-start: 6px solid var(--clr-accent);

		/*
		 * Parked off-screen rather than display:none so it can slide. It also
		 * carries [hidden] until the script takes over, which keeps it out of
		 * the layout entirely when JS never runs.
		 */
		transform: translateY(100%);
		transition: transform var(--transition-slow);
		will-change: transform;
	}

	.sticky-cta[hidden] {
		display: none;
	}

	.sticky-cta.is-visible {
		transform: translateY(0);
	}

	.sticky-cta__inner {
		display: flex;
		align-items: center;
		gap: var(--space-l);
		/* 37 left / 20 right, measured. */
		padding-inline: clamp(var(--space-s), 2.55vw, 2.3125rem) clamp(var(--space-s), 1.4vw, 1.25rem);
		min-block-size: 5.25rem;               /* 84px + the 6px rule = 90 */
	}

	.sticky-cta__title {
		margin: 0;
		font-size: 1.375rem;                   /* 22px */
		font-weight: var(--weight-bold);
		line-height: 1.2;
		letter-spacing: 0.02em;
		text-transform: uppercase;
		white-space: nowrap;
	}

	.sticky-cta__rule {
		inline-size: 1px;
		block-size: 1.9375rem;                 /* 31px, measured */
		background-color: rgb(255 255 255 / 0.3);
		flex: none;
	}

	.sticky-cta__detail {
		margin: 0;
		font-size: 1rem;                       /* 16px */
		font-weight: var(--weight-light);
		line-height: 1.3;
		letter-spacing: 0.02em;
		text-transform: uppercase;
	}

	/*
	 * Square, not the pill. The bar is a strip of chrome rather than part of the
	 * page, and the design squares the button off to say so.
	 */
	.sticky-cta__button {
		margin-inline-start: auto;
		flex: none;
		min-inline-size: 11.5625rem;           /* 185px, measured */
		--btn-height: 3rem;                    /* 48px */
		font-size: 0.75rem;                    /* 12px */
		letter-spacing: 0.09em;
		border-radius: 0;
	}

	/* ---- Narrow screens ------------------------------------------------- */

	@media (max-width: 47.999rem) {
		.sticky-cta__inner {
			gap: var(--space-s);
			min-block-size: 4.25rem;
		}

		/*
		 * The date-and-price line is the first thing to go: the lounge name and
		 * the button are what the bar is for, and three items across a phone
		 * would squeeze the button to nothing.
		 */
		.sticky-cta__rule,
		.sticky-cta__detail {
			display: none;
		}

		.sticky-cta__title {
			font-size: 1rem;
			white-space: normal;
		}

		.sticky-cta__button {
			min-inline-size: 0;
			padding-inline: var(--space-m);
		}
	}

	/*
	 * On a lounge page the bar is a mobile answer only. From 64rem the booking
	 * rail is sticky and already keeps the price and the button in reach, so a
	 * second permanent CTA would be the same offer twice.
	 */
	@media (min-width: 64rem) {
		.sticky-cta--lounge { display: none; }
	}

	/*
	 * Narrow bar. The label is the greedy part — 14px at 0.11em tracking plus
	 * 24px of padding either side left the lounge name so little room it broke
	 * onto three lines and made the bar a third of the screen. Shrinking the
	 * label and its padding buys the name back its width.
	 */
	@container stickybar (max-width: 30rem) {
		.sticky-cta__inner {
			gap: var(--space-2xs);
			min-block-size: 3.5rem;
			padding-inline: var(--space-s) 0.625rem;
		}

		.sticky-cta__title {
			font-size: 0.8125rem;              /* 16 → 13 */
			line-height: 1.15;
			letter-spacing: 0.01em;
		}

		.sticky-cta__button {
			--btn-height: 2.5rem;              /* 48 → 40 */
			padding-inline: 0.75rem;
			font-size: 0.6875rem;              /* 14 → 11 */
			letter-spacing: 0.05em;
		}

		/* The outbound arrow is worth less than the words at this size. */
		.sticky-cta__button .btn__ext { display: none; }
	}
}