/**
 * BUTTON
 *
 * Measured from the design: 48px tall, ~22px horizontal padding, pill radius,
 * Geist Bold 14px uppercase with 0.11em tracking.
 *
 * The primary fill uses --clr-accent, so a button inside [data-lounge] picks up
 * that lounge's colour with no extra CSS.
 */

@layer components {
	.btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-2xs);

		min-block-size: var(--btn-height, 3rem);          /* 48px */
		padding-inline: var(--btn-padding, 1.375rem);     /* 22px */

		font-family: var(--font-text);
		font-size: var(--fs-ui);
		font-weight: var(--weight-bold);
		line-height: var(--lh-ui);
		letter-spacing: var(--track-ui);
		text-transform: uppercase;
		text-decoration: none;
		white-space: nowrap;

		border: 1px solid transparent;
		border-radius: var(--radius-pill);
		cursor: pointer;

		transition:
			background-color var(--transition-fast),
			border-color var(--transition-fast),
			color var(--transition-fast);
	}

	/* Gold fill. White label is 2.25:1 — below AA, accepted as a brand decision. */
	.btn--primary {
		background-color: var(--clr-accent);
		color: var(--clr-accent-text);
	}
	.btn--primary:hover,
	.btn--primary:focus-visible {
		background-color: color-mix(in srgb, var(--clr-accent) 85%, black);
		color: var(--clr-accent-text);
	}

	/* Outlined. Follows the surrounding text colour, so it works on any band. */
	.btn--ghost {
		background-color: transparent;
		border-color: currentcolor;
		color: currentcolor;
	}
	.btn--ghost:hover,
	.btn--ghost:focus-visible {
		background-color: currentcolor;
	}
	/* Flip the label to the band's background so it stays readable when filled. */
	.btn--ghost:hover > span,
	.btn--ghost:focus-visible > span {
		color: var(--clr-bg);
	}

	/*
	 * Outlined in the accent rather than the text colour.
	 *
	 * Over photography a white outline reads as an empty form field, so the big
	 * CTA outlines in gold and keeps the label white. Hovering fills it gold to
	 * match the primary button beside it.
	 */
	.btn--ghost-accent {
		background-color: transparent;
		border-color: var(--clr-accent);
		color: currentcolor;
	}
	.btn--ghost-accent:hover,
	.btn--ghost-accent:focus-visible {
		background-color: var(--clr-accent);
		color: var(--clr-accent-text);
	}

	/*
	 * Big CTA pair — 54px tall with 18px labels.
	 *
	 * min-inline-size is what evens the pair up: the design's two buttons are
	 * 256 and 290 wide for labels of very different lengths, which padding
	 * alone cannot produce. A 256px floor plus 24px padding lands on both.
	 */
	.btn--lg {
		--btn-height: 3.375rem;                     /* 54px */
		--btn-padding: 1.5rem;                      /* 24px */
		min-inline-size: 16rem;                     /* 256px */
		font-size: 1.125rem;                        /* 18px */
		letter-spacing: 0.02em;
	}

	/* Header CTA — nav-sized type rather than button-sized. */
	.btn--sm {
		--btn-height: 3rem;
		--btn-padding: 1.25rem;
		font-size: var(--fs-eyebrow);
		letter-spacing: 0.12em;
	}

	.btn--block { display: flex; inline-size: 100%; }

	/* Outbound arrow for links that leave the site (tickets are sold off-site). */
	.btn__ext {
		font-size: 0.85em;
		opacity: 0.75;
	}
}