/* se-page-hero */

.se-phero {
	position: relative;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	isolation: isolate;
}

.se-phero--short  { min-height: min(62svh, 34rem); }   /* 544 */
.se-phero--medium { min-height: min(70svh, 38.75rem); } /* 620, the tickets hero */
.se-phero--large  { min-height: min(76svh, 45rem); }    /* 720, the line-up hero */
.se-phero--tall   { min-height: min(82svh, 48rem); }    /* 768, the stay heroes */
.se-phero--full   { min-height: 100svh; }

.se-phero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--se-cocoa);
}

.se-phero__shot {
	position: absolute;
	inset: -6%;
	will-change: transform;
}

.se-phero__shot .se-media {
	position: absolute;
	inset: 0;
}

/*
 * Figma anchors the hero copy to the bottom left, clear of the fixed header:
 * on the 760 tall stay frames the first line starts at y 149 (the header is
 * 132) and the last control ends 64 from the bottom. Reserving the header
 * height at the top means a long two line title pushes the block down rather
 * than sliding up behind the logo.
 */
.se-phero__body {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	gap: clamp(0.875rem, 1.35vw, 1.625rem);
	width: 100%;
	padding-block: calc(var(--se-header-h) + clamp(0.75rem, 1.04vw, 1.25rem)) clamp(2.5rem, 4.17vw, 5rem);
}

.se-phero__tab { margin-block-end: 0.25rem; }

/*
 * Over a bright daylight crowd the grey mono line is close to unreadable, so
 * Figma lifts it to 0.85 bone and carries the top fade further down the frame.
 */
.se-phero__eyebrow { color: rgba(243, 238, 229, 0.85); }

.se-phero .se-shade-top {
	height: 55%;
	background: linear-gradient(to bottom, rgba(11, 10, 9, 0.92), rgba(11, 10, 9, 0.45) 70%, rgba(11, 10, 9, 0));
}

.se-phero__title {
	color: var(--se-bone);
	max-width: 22ch;
}

.se-phero__intro {
	max-width: 46rem;
}

.se-phero__cta {
	margin-block-start: 0.75rem;
}

@media (max-width: 767px) {
	.se-phero--short { min-height: min(52svh, 28rem); }
	.se-phero--tall  { min-height: min(74svh, 42rem); }
	.se-phero--full  { min-height: min(100svh, 48.75rem); }

	/*
	 * The copy takes a far bigger share of a short phone hero than of a 720
	 * tall desktop one, so the fade has to start higher up. A three line title
	 * with an intro and two controls over a bright daylight crowd needs the
	 * same contrast at 390 as it has at 1920. Held in rem rather than a flat
	 * percentage so a full screen hero does not turn into a black panel.
	 */
	.se-phero .se-shade-bottom { height: max(42%, 24rem); }
	.se-phero__title { max-width: none; }
	.se-phero__cta { width: 100%; flex-direction: column; align-items: stretch; gap: 1rem; }
	.se-phero__cta .se-link { justify-content: center; }
}