/* ==========================================================================
   Package single — the four package frames

   Hero, description with spec cards, Every Moment Matters, the process
   accordion, then the shared One Team / testimonials / FAQ / CTA partials.
   Horizontal measurements are fractions of the 1344 container.
   ========================================================================== */

/* --- hero ---------------------------------------------------------------- */

.pkg-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 640px; /* the 428 frames draw the same hero band as .we-hero */
	padding-top: 88px;
	overflow: hidden;
	isolation: isolate;
	color: var(--c-white);
	background-color: var(--c-primary-900);
}

.pkg-hero__media { position: absolute; inset: 0; z-index: -1; }
.pkg-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.pkg-hero__media::after { content: ""; position: absolute; inset: 0; background-image: var(--hero-wash); }

.pkg-hero__inner {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	max-width: calc(var(--container) + (var(--gutter) * 2));
	margin-inline: auto;
	padding-inline: var(--gutter);
	/* Mirrors the header's 88 so `center` is the band's centre — see
	   .we-hero__inner. The 428 package frame puts the title/copy group's ink
	   centre at 322 against the band's 320. */
	padding-bottom: 88px;
}

/* Sized by its content below 64em: letting it grow banked every spare pixel
   between the title and the copy and pushed the copy flat onto the angled
   divider, where the frame leaves 166 under it. Pinned again at 64em, where
   the 1440 frames do pin. */
.pkg-hero__headline {
	display: flex;
	flex: 0 0 auto;
	align-items: flex-start;
	justify-content: center;
	text-align: center;
}

.pkg-hero__title {
	margin: 0;
	color: #f6fffe;
	font-size: clamp(2.5rem, 1.1rem + 3.6vw, var(--fs-display-4xl));
}

.pkg-hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-24);
	max-width: 420px;
	margin-top: var(--space-24); /* the frames' constant title-to-copy gap */
}

/* 18/27 — the hero excerpt's own line measures 340px in the Celebrant +
   Soundtrack + MC export; rendered here it is 344 at 18px and 267 at 14.
   docs/type-scale-audit.md #3. */
.pkg-hero__text { margin: 0; color: #effcfc; font-size: var(--fs-body-lg); line-height: var(--lh-body); }

.pkg-hero__angle { position: absolute; inset: auto 0 0; color: var(--c-white); line-height: 0; pointer-events: none; }
.pkg-hero__angle .icon { display: block; width: 100%; height: var(--hero-angle-h); }

@media (min-width: 64em) {
	/* 740 to match the frame, and the same height .we-hero uses at this
	   breakpoint — the package frames draw the identical hero band. */
	.pkg-hero { min-height: 740px; padding-top: 121px; }
	.pkg-hero__inner { justify-content: flex-start; padding-bottom: 0; }
	.pkg-hero__headline { flex: 1 1 auto; padding-top: 54.5px; }
	.pkg-hero__content { margin-top: 0; margin-left: 76px; padding-bottom: 120px; }
}

/* --- description + video + spec cards ------------------------------------ */

.pkg-intro { padding-block: var(--space-64); background-color: var(--c-white); }

.pkg-intro__inner {
	display: grid;
	gap: var(--space-32);
	width: 100%;
	max-width: calc(var(--container) + (var(--gutter) * 2));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.pkg-intro__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-16); }
.pkg-intro__title { margin: 0; color: var(--c-black); }
/* 18/27 — "popular" measures 65px in the export against 67 rendered at 18px,
   and the export's line pitch is 27 = 18 x 1.5. docs/type-scale-audit.md #4. */
.pkg-intro__text { margin: 0; color: var(--c-body); font-size: var(--fs-body-lg); line-height: var(--lh-body); }

/* The 428 frame draws the poster 380×440 — a near-square well, not the 600×440
   landscape well of the 1440 frame. Measured on
   .../Celebrant + Soundtrack + MC/celebrant-soundtrack-mc-mobile.jpg: photo
   x 24..403, y 1096..1535. Carrying the desktop ratio down gave 380×278.7. */
.pkg-intro__media { position: relative; margin: 0; aspect-ratio: 380 / 440; overflow: hidden; background-color: var(--c-black); }
.pkg-intro__media :is(iframe, video, embed, object) { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pkg-intro__media img { width: 100%; height: 100%; object-fit: cover; }

/*
 * One card per row at 428, four across from 64em. The 428 frame stacks them
 * full width (x 24..403, so 380 with the page gutters) with a 16px gap — the
 * two-up grid that was here squeezed each card to 182 and wrapped the copy to
 * a ragged four columns of text.
 */
.pkg-specs {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-16);
	width: 100%;
	max-width: calc(var(--container) + (var(--gutter) * 2));
	margin: var(--space-40) auto 0;
	padding-inline: var(--gutter);
	list-style: none;
}

/*
 * 428: the icon sits inline to the left of the title and the copy runs under
 * the *title*, indented past the icon — measured on the mobile frame, where
 * both the title and every body line start at x 80 inside the card, i.e.
 * 24 padding + 32 icon + 24 gap. The markup is three flat children
 * (icon / h3 / p), so this is a two-column grid with named areas rather than
 * the flex row + wrapper .artist-facts uses; the geometry is identical.
 *
 * The icon spans both rows rather than owning row 1: the frame's card is only
 * as tall as title + 8 + copy, so an icon that forced its own 32px row pushed
 * the copy down 5 and the card 4 past the frame. This is .artist-facts'
 * flex-row-plus-wrapper geometry, reached without the wrapper.
 *
 * This *is* the same card as .artist-facts on the artist singles, and the two
 * frames agree: 32px icon, 24 padding, 24 between icon and words, 8 between
 * title and copy, both at 18/150%. Card heights land 112 / 139 / 166 for one /
 * two / three lines of copy against this frame's 113 / 140 / 167 — the same
 * 1px offset .artist-facts carries against its own export. The design system
 * is consistent here; the values were re-measured off this frame, not copied.
 */
.pkg-specs__item {
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr);
	grid-template-areas:
		"icon title"
		"icon text";
	align-items: start;
	/* The grid stretches every card to the tallest in its row; without this the
	   surplus is shared out *between* the rows and the shorter cards' titles
	   drift down. The frames keep all four titles on one line. */
	align-content: start;
	column-gap: var(--space-24);
	row-gap: var(--space-8);
	padding: var(--space-24);
	border: 1px solid #ececec;
	border-radius: var(--radius-lg);
	background-color: #fafafa;
}

.pkg-specs__icon { grid-area: icon; color: var(--c-primary-500); }
.pkg-specs__icon .icon { display: block; width: 32px; height: 32px; }

/* Top-aligned with the icon, not centred against it: the frame puts the title's
   cap top 32 from the card's outer edge, which is 1 border + 24 padding + the
   7px cap inset of an 18/27 line box. */
.pkg-specs__title {
	grid-area: title;
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-body-lg);
	font-weight: var(--fw-medium);
	line-height: 1.5;
	letter-spacing: 0;
	color: #1d1d1e;
}

/* 18/150%, not 12. Both frames set a 27px line pitch here — the mobile cards
   step 113 → 140 → 167 as the copy runs to one, two and three lines, and the
   1440 card's three lines step the same way. The same call .artist-facts__text
   records for the identical card. */
.pkg-specs__text { grid-area: text; margin: 0; font-size: var(--fs-body-lg); line-height: 1.5; color: var(--c-body); }

@media (min-width: 64em) {
	.pkg-intro__inner { grid-template-columns: minmax(0, 1fr) 44.64%; column-gap: var(--space-64); align-items: center; }
	.pkg-intro__copy { max-width: 560px; }
	/* The 1440 frame draws the poster 600×440 at x 792..1391, y 804..1243. */
	.pkg-intro__media { aspect-ratio: 600 / 440; }
	.pkg-specs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 17px; }

	/*
	 * 324×263 cards on the 1440 frame (borders at x 48/371/388/711/… and
	 * y 1308/1570), with the icon back above the words: 32 padding, 40 under
	 * the icon, 8 under the title. Equal heights come from the grid, so the
	 * shortest card still reaches the tallest one's baseline box.
	 */
	.pkg-specs__item {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"icon"
			"title"
			"text";
		row-gap: var(--space-8);
		padding: var(--space-32);
	}

	/* 32 + the grid's 8 = the frame's 40 between the icon and the title. */
	.pkg-specs__icon { margin-bottom: var(--space-32); }
	.pkg-specs__icon .icon { width: 40px; height: 40px; }
}

/* --- Every Moment Matters ------------------------------------------------ */

.pkg-moments {
	display: flex;
	flex-direction: column;
	gap: var(--space-32);
	padding-block: var(--space-64);
	background-color: var(--c-ground-mist);
}

.pkg-moments__title { margin: 0; padding-inline: var(--gutter); text-align: center; color: var(--c-primary-500); }

.pkg-moments__rail {
	display: flex;
	gap: var(--space-24);
	margin: 0;
	padding: 0;
	overflow-x: auto;
	scrollbar-width: none;
	list-style: none;
	cursor: grab;
}

/* Auto-running — see .marquee__track in components.css. The rail hands its gap
   to the track, and stops advertising a drag it can no longer perform. */
.pkg-moments__rail.is-marquee {
	--marquee-gap: var(--space-24);

	cursor: default;
}

.pkg-moments__rail::-webkit-scrollbar { display: none; }
.pkg-moments__item { flex: 0 0 auto; }
/* 25% down, as the artist card frames its portraits — keeps faces in the square. */
.pkg-moments__item img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.pkg-moments__item--short { width: 240px; height: 240px; }
.pkg-moments__item--tall { width: 300px; height: 300px; }

@media (min-width: 64em) {
	.pkg-moments { gap: var(--space-48); }

	/*
	 * Figma alternates 400 and 540 squares 60px apart, all centred on one
	 * axis, with the row wider than the frame so it is cut at BOTH edges —
	 * not just the right the way the card rails are.
	 *
	 * 2062 is that row: 400 + 540 + 402 + 540 + three 60px gaps. Pulling the
	 * rail left by half the overflow centres it, and min() stops the pull
	 * going positive once the screen is wide enough to hold the whole row.
	 */
	.pkg-moments__rail {
		gap: 60px;
		align-items: center;
		margin-left: min(0px, calc((100vw - 2062px) / 2));
	}

	.pkg-moments__rail.is-marquee {
		--marquee-gap: 60px;
	}

	.pkg-moments__item--short { width: 400px; height: 400px; }
	.pkg-moments__item--tall { width: 540px; height: 540px; }
}

/* --- more packages ------------------------------------------------------- */

.pkg-related { padding-block: var(--space-64); background-color: var(--c-white); }

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

.pkg-related__title { margin: 0; text-align: center; color: var(--c-primary-500); }

.pkg-related__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: var(--space-24);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * .card-package carries a fixed 323px width for the rails it usually sits in.
 * In this grid the track can be narrower than that — 293px at 1024 — and the
 * card was overflowing its own cell. Here it fills the track instead.
 */
.pkg-related__grid .card-package {
	width: 100%;
}

/*
 * The grid items already stretch to the tallest card in the row, but a
 * list-item child does not fill its item — .card-package is an <article>
 * inside the <li> and sizes to its own content, so the cards ended at three
 * different heights (504.6 / 472.6 / 442.6 at 1440) and their "View Package"
 * links never lined up. Making each item a flex container stretches the card
 * inside it; .card-package__body already has flex:1 and .card-package__link
 * margin-top:auto, so the footers land on a common floor.
 *
 * Same rule, same reason as .home-why-us__rail > li (home.css) — that is the
 * only other place template-parts/cards/package-card.php is rendered.
 */
.pkg-related__grid > li {
	display: flex;
}

/* --- intro video play button --------------------------------------------- */

.pkg-intro__media { position: relative; }

/*
 * Centred over the poster, same disc as the artist cards use. The whole figure
 * is not the trigger — a button that size would swallow any future caption.
 */
.pkg-intro__play {
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: var(--radius-circle);
	background-color: rgba(255, 255, 255, 0.92);
	color: var(--c-primary-500);
	cursor: pointer;
	transition: scale var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.pkg-intro__play .icon {
	width: 22px;
	height: 22px;
	/* The glyph's mass sits left of centre; nudge it back onto the disc's axis. */
	margin-left: 3px;
}

.pkg-intro__play:hover {
	background-color: var(--c-white);
	scale: 1.06;
}

@media (prefers-reduced-motion: reduce) {
	.pkg-intro__play {
		transition: background-color var(--dur-fast) var(--ease);
	}

	.pkg-intro__play:hover {
		scale: 1;
	}
}