/*
 * Janda Events — Corporate/Private Events and Public Venue Bookings.
 *
 * Figma "Corporate & Private Events" (1440×7719 / 428×9700) and
 * "Venue Booking" (1440×5140 / 428×6289).
 *
 * Both frames are mostly sections that already exist — the hero, the dark intro
 * band, Featured Talent, the expanding event rail, the FAQ, testimonials and the
 * closing CTA. Only three shapes are new, and each is used by both pages, so
 * they are written once here and driven by a field prefix.
 */

/* ==========================================================================
   Tile row — occasion types, venue list

   Figma: 323-wide cards, 1px border, 12px radius, an 11px inset photo, a teal
   display title and one line of copy. The row runs off the right of the frame.
   ========================================================================== */

.tile-row {
	padding-block: var(--space-48);
	overflow: hidden;
	background-color: #fcfcfc;
}

/*
 * Both frames straddle this row across the boundary above it: the cards are
 * lifted so their tops sit on the dark band and their bottoms on the light
 * ground. Three things make that work —
 *
 *   the row moves up by the overlap, and drops its top padding so the cards
 *   start exactly at the new top edge;
 *   its ground is painted from the overlap down instead of filling the box, or
 *   it would cover the very band it is supposed to sit on;
 *   `clip` rather than `hidden` on the horizontal axis, because `hidden` forces
 *   the vertical axis to scroll too and would crop the lifted cards.
 *
 * This block used to be desktop-only, on the reading that the 428 frame kept
 * the row below the band. It does not — JE-41. Measured off the mobile exports:
 * Venue card top y=1535 against a band bottom of y=1692 (157px, 49% of the
 * 318px card) and Corporate card top y=1586 against y=1746 (160px); 158 splits
 * them. Both leave 200px of dark below the band's media.
 *
 * Two classes deliberately: the desktop `.tile-row` rule further down this
 * sheet also sets padding-block, and a single class would lose to it.
 */
.tile-row.tile-row--overlap {
	position: relative;
	z-index: 1;
	margin-top: -158px;
	padding-top: 0;
	overflow-x: clip;
	overflow-y: visible;
	background-color: transparent;
	background-image: linear-gradient(to bottom, transparent 158px, #fcfcfc 158px);
}

/*
 * The band above grows to hold the overlap: the frames leave 200px (428) and
 * 242px (1440) of dark below their media where the default band leaves 64, and
 * the cards drop into the difference.
 */
.we-intro:has(+ .tile-row--overlap) {
	padding-bottom: 200px;
}

/* 1440 lifts by 135 — Venue card top y=1331 against a band bottom of y=1466,
   Corporate y=1361 against y=1496. Both exports agree to the pixel. */
@media (min-width: 64em) {
	.tile-row.tile-row--overlap {
		margin-top: -135px;
		background-image: linear-gradient(to bottom, transparent 135px, #fcfcfc 135px);
	}

	.we-intro:has(+ .tile-row--overlap) {
		padding-bottom: 242px;
	}
}

.tile-row__inner {
	width: 100%;
	max-width: calc(var(--container) + (var(--gutter) * 2));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.tile-row__title {
	margin: 0 0 var(--space-32);
	color: var(--c-primary-500);
	text-align: center;
}

/*
 * Same bleed as the Add To The Experience rail: anchored on the container's
 * left, cut by the screen on the right. min() keeps the plain -gutter pull
 * below the container width.
 */
.tile-row__rail {
	gap: 17px;
	margin-left: calc(var(--gutter) * -1);
	margin-right: min(
		calc(var(--gutter) * -1),
		calc((var(--container) + (var(--gutter) * 2) - 100vw) / 2 - var(--gutter))
	);
	padding: 0 var(--gutter) var(--space-8);
	list-style: none;
}

/*
 * 322, the card's width in both 428 frames — Venue and Corporate both put its
 * left border on x=24 and its right on x=345, with the next card opening at
 * 365. It was min(300px, 78%), and at 428 the percentage bound, giving 296:
 * that is why the Corporate tile's copy ran to five lines there where the frame
 * runs four. The percentage stays as the guard below 428 — it keeps a slice of
 * the next card visible on a narrower phone — but 86 rather than 78, so that at
 * 428 itself (a 380px rail content box) the flat 322 is the one that wins.
 */
.tile-row__rail > li {
	display: flex;
	flex: 0 0 auto;
	flex-basis: min(322px, 86%);
}

.tile-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 11px;
	/*
	 * Solid #3E3E3E, not the 16%-alpha --c-border: sampled off both exports on
	 * the light ground below the band, where the edge reads rgb(62,62,62) — the
	 * Corporate card's left border at (48, 1700) and the Venue mobile card's at
	 * (24, 1840). Same value the package card cites (Figma 51340:4623).
	 */
	border: 1px solid var(--c-body);
	border-radius: var(--radius-lg);
	background-color: var(--c-white);
}

.tile-card__media {
	margin: 0 0 var(--space-16);
}

.tile-card__media img {
	width: 100%;
	height: auto;
	/*
	 * 301x171 in every export: Corporate 1440 (x 59..359, y 1371.5..1542.5),
	 * Venue 1440 and Venue/Corporate 428 all measure the same box. The old
	 * 301/160 and the two sizes its comment claimed were both wrong, and left
	 * the photo — and so the card — 11px short.
	 */
	aspect-ratio: 301 / 171;
	object-fit: cover;
	border-radius: var(--radius-lg);
}

.tile-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	padding: 0 var(--space-8) var(--space-8);
}

.tile-card__title {
	margin: 0;
	color: var(--c-primary-500);
	font-family: var(--font-display);
	font-size: var(--fs-display-lg);
	line-height: var(--lh-display);
	letter-spacing: 0;
}

/*
 * 16/24, not 14/22.4. "Professional" measures 92px in both the 1440 and the 428
 * Corporate export against 80px on the build — 1.15x, which is 16 against 14 —
 * and the frames' line pitch is 24. At 14px the copy wrapped to three lines
 * where both frames wrap to four, which is most of why the card ran short.
 */
.tile-card__text {
	margin: 0;
	color: var(--c-body);
	font-size: var(--fs-body-md);
	line-height: var(--lh-body);
}

@media (min-width: 64em) {
	.tile-row {
		padding-block: var(--space-64);
	}

	/* Four across the container, 17px apart — see the rail comment above for
	   why this measures against --container and not the rail's own 100%. */
	.tile-row__rail > li {
		flex-basis: calc((min(100%, var(--container)) - 51px) / 4);
	}
}

/* ==========================================================================
   Split band — copy in one column, a photo in the other
   ========================================================================== */

.split-band {
	padding-block: var(--space-48);
	overflow: hidden;
	background-color: var(--c-white);
}

.split-band--tint {
	background-color: #fcfcfc;
}

/* Special Offers "Who Are Wedding Bundle Packages For?" sits on the same
   off-white the Vibes band uses. */
.split-band--mist {
	background-color: var(--c-ground-mist);
}

.split-band__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-32);
	width: 100%;
	max-width: calc(var(--container) + (var(--gutter) * 2));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.split-band__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-24);
	min-width: 0;
}

.split-band__title {
	margin: 0;
	color: var(--c-primary-500);
}

/*
 * 18/27, not the inherited 16/24. Measured off the frame's own export of this
 * band (tools/figma-assets/51284-5064.png): the heading's lines sit 58-60
 * apart, which is the 48 display on 1.2, and the copy's sit 27 apart — 18 on
 * the same 1.5 the rest of the body scale uses. It also puts this lead-in back
 * on the 18 every other lead-in on the page runs at, and on the 18/600 its own
 * bullet list was already measured to (JE-35).
 */
.split-band__text {
	color: var(--c-body);
	font-size: var(--fs-body-lg);
	line-height: var(--lh-body);
}

.split-band__text p {
	margin: 0;
}

.split-band__text p + p {
	margin-top: 1em;
}

/*
 * 18/27 semibold, gap 12 — same spec as the Experience page's list, and
 * measured the same way (JE-35). On the Venue 1440 export the nine benefit
 * items measure 363/376/456/364/346/430/459/…/431px wide; rendering them at
 * 18px/600 predicts 362/376/456/364/344/430/458/…/431. The row pitch is 39
 * (27 line box + 12 gap), and the two lines of the one item that wraps sit 27
 * apart, which is the line-height on its own.
 */
.split-band__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	margin: 0;
	padding-left: 1.25em;
	color: var(--c-body);
	font-size: var(--fs-body-lg);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-body);
	list-style: disc outside;
}

/* ::marker only honours a handful of properties, and font-family is one of
   them — the disc is drawn from the font, so it has to be named here or the
   bullet comes from the serif face. The weight now comes from the list itself. */
.split-band__list li::marker {
	font-family: var(--font-body);
}

/*
 * Bullets that open on a bolded clause run to several lines each, so they get
 * the looser spacing the Special Offers frame gives them.
 *
 * This variant keeps the old 16/24 regular: its frame sets the opening clause
 * in bold against regular running text, and the semibold above would flatten
 * that to 600-against-700 and lose the distinction. Its line pitch measures 24
 * within an item against the Experience list's 27, so the smaller size is the
 * frame's too. Note the Special Offers export is 1486 wide, not 1440 — see the
 * trap in docs/design-qa-map.md — so nothing here rests on an x-position.
 */
.split-band__list:has(strong) {
	gap: var(--space-16);
	font-size: var(--fs-body-md);
	font-weight: var(--fw-regular);
}

/* Stacked photo-first — the Special Offers frame leads its 428 layout with the
   photo, where the Venue frames lead with the copy. Bounded to the stacked
   case: with two columns the photo belongs in whichever one the source order
   and --reverse put it. */
@media (max-width: 63.999em) {
	.split-band--media-first .split-band__media {
		order: -1;
	}
}

.split-band__media {
	margin: 0;
	min-width: 0;
}

/*
 * Biased above centre. The band draws a 420-tall landscape box, and the
 * Celebrants photo behind it is a 1904x2560 portrait — cover shows only the
 * middle 44% of it, which cut the couple's heads off. 25% keeps faces in on the
 * tall crops and barely moves the landscape ones, where almost the whole frame
 * is visible either way.
 */
.split-band__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 25%;
	border-radius: var(--radius-lg);
}

/*
 * The Celebrants photo is a 1904x2560 portrait — far taller than any other
 * split-band image — so the wider the viewport, the less of it the 520-tall
 * bleed box shows: 53% of the frame at 1440 but only 30% at 2560. Measured
 * against the source, his hairline is at 18.5% and her chin at 42.5%, so the
 * window has to span 24% of the frame, and at 2560 there is only 29.6% to
 * spend. 20% is the one setting that clears his head and keeps her chin in at
 * every width: 14.1-43.7% at 2560, widening to 4.6-81.5% at 1024.
 */
[data-section="cel_who"] .split-band__media img {
	object-position: 50% 20%;
}

@media (min-width: 64em) {
	.split-band {
		padding-block: var(--space-64);
	}

	.split-band__inner {
		flex-direction: row;
		align-items: center;
		gap: var(--space-48);
	}

	.split-band__copy {
		flex: 0 0 45.8%; /* 616 / 1344 */
	}

	.split-band__media {
		flex: 1 1 0;
	}

	.split-band__media img {
		height: 420px;
	}

	/* The Special Offers frame runs its photo taller than the Venue ones. */
	.split-band--mist .split-band__media img {
		height: 468px;
	}

	/* Photo first in the source stays photo-last on mobile, where the copy
	   should lead; order flips it back only once there are two columns. */
	.split-band--reverse .split-band__copy {
		order: 2;
	}

	.split-band--reverse .split-band__media {
		order: 1;
	}

	/*
	 * Runs off whichever frame edge the photo sits against, same construction
	 * as the Add To The Experience rail.
	 */
	.split-band--bleed .split-band__media {
		margin-right: min(
			calc(var(--gutter) * -1),
			calc((var(--container) + (var(--gutter) * 2) - 100vw) / 2 - var(--gutter))
		);
	}

	.split-band--bleed.split-band--reverse .split-band__media {
		margin-right: 0;
		margin-left: min(
			calc(var(--gutter) * -1),
			calc((var(--container) + (var(--gutter) * 2) - 100vw) / 2 - var(--gutter))
		);
	}

	.split-band--bleed .split-band__media img {
		height: 520px;
		border-radius: 0;
	}
}

/* ==========================================================================
   Client logo strip
   ========================================================================== */

.logo-strip {
	padding-block: var(--space-40);
	padding-inline: var(--gutter);
	background-color: #f7f7f7;
}

.logo-strip__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
}

.logo-strip__title {
	margin: 0;
	color: var(--c-primary-500);
	font-family: var(--font-display);
	font-size: var(--fs-display-lg);
	line-height: var(--lh-display);
	text-align: center;
}

/*
 * One full-bleed line that scrolls, not a block that wraps — JE-39.
 *
 * The docblock on page-logos.php used to argue the row wraps on purpose. Both
 * exports say otherwise. At 428 the band runs y=4663..4910 — 248px, including a
 * two-line heading — and holds a single row of logo boxes at y=4819..4883;
 * three wrapped rows could not fit in it, and the row is cut by the frame's
 * left edge (a mark occupying x=0..27 with no left margin). At 1440 the eight
 * marks span x=38..1439, so that row is wider than the 1344 container and runs
 * to the frame's right edge rather than sitting centred inside it.
 *
 * So it is one rail at both widths, built like .artist-gallery__rail rather
 * than the shared .rail: no scroll snapping, because snapping pulls the rail
 * onto an item boundary and destroys exactly the part-cropped view the frames
 * show. The bleed is the tile rail's — anchored on the container's left, cut by
 * the screen on the right — with the gutter restored as padding so the first
 * mark still lands on the container's line.
 */
.logo-strip__list {
	display: flex;
	align-items: center;
	gap: var(--space-32);
	margin-left: calc(var(--gutter) * -1);
	margin-right: min(
		calc(var(--gutter) * -1),
		calc((var(--container) + (var(--gutter) * 2) - 100vw) / 2 - var(--gutter))
	);
	padding: 0 var(--gutter) var(--space-8);
	overflow-x: auto;
	scrollbar-width: none;
	list-style: none;
}

.logo-strip__list::-webkit-scrollbar {
	display: none;
}

/* app.js picks up [data-drag-scroll] on any element; only the cursor and the
   drag-time selection guard are CSS, and those live on .rail in
   shared-sections.css, which this rail deliberately is not. */
.logo-strip__list[data-drag-scroll]:not(.is-marquee) {
	cursor: grab;
}

.logo-strip__list[data-drag-scroll].is-dragging {
	cursor: grabbing;
	user-select: none;
}

/*
 * Auto-running — see .marquee__track in components.css, and .pkg-moments__rail
 * in package.css for the same wiring. app.js clones the run, hands the items to
 * a track and translates it by exactly one run's width, so the loop is seamless
 * rather than a rewind; it holds while hovered or focused within, and stands
 * down entirely under reduced motion, where the hand-scrollable rail above is
 * what is left. The rail passes its gap to the track — its own goes to zero once
 * the track owns the spacing — and stops advertising a drag it can no longer
 * perform, since the marquee makes the box overflow-hidden.
 */
.logo-strip__list.is-marquee {
	--marquee-gap: var(--space-32);

	cursor: default;
}

/*
 * The logos are supplied at different aspect ratios and several sit on their
 * own solid black or white tile, so they are boxed to a common height and left
 * to find their own width — equalising on width would squash the wide marks.
 * 64px at 428, where the four visible boxes all measure y=4819..4883, and 96px
 * at 1440. That 2:3 is the whole row's: the same three tiles measure 123/85/65
 * wide at 428 against 184/128/96 at 1440, every one of them 0.67.
 *
 * The cap is the widest mark in the frame — 92.5 GOLD FM, drawn 243x54 at 1440
 * and so 162 at 428. Without it a 4.5:1 tile would render 432 wide at a 96px
 * box height and swamp the row.
 */
.logo-strip__item {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	height: 64px;
}

.logo-strip__item img {
	width: auto;
	max-width: 163px;
	height: 100%;
	object-fit: contain;
}

/* Same rail at 1440, two thirds larger. The gaps are not scaled with it: the
   frame runs 40-41px between marks at 1440 and 32-33 at 428, measured between
   tiles whose ink fills their box (SEA / Leather Doctor / Queensland Club) so
   the two logos drawn smaller than their box do not inflate the reading. */
@media (min-width: 64em) {
	.logo-strip {
		padding-block: var(--space-48);
	}

	.logo-strip__list {
		gap: var(--space-40);
	}

	.logo-strip__list.is-marquee {
		--marquee-gap: var(--space-40);
	}

	.logo-strip__item {
		height: 96px;
	}

	.logo-strip__item img {
		max-width: 244px;
	}
}