/*
 * Janda Events — front-page sections.
 *
 * Hero     Figma 51284:4601 (1440×980)   / 51288:3382 (428×720)
 * Why Us   Figma 51288:10779 (1440×1120) / 51288:10949 (428×1252)
 */

/* ==========================================================================
   Hero
   ========================================================================== */

.home-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 720px;
	padding-top: 88px; /* header sits over the hero */
	overflow: hidden;
	color: var(--c-white);
	isolation: isolate;
	background-color: var(--c-primary-900);
}

.home-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.home-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * This hero was the only one carrying no wash at all, which left the white
 * headline and the copy column sitting straight on the photo. The frame darkens
 * it exactly as it darkens every other hero — see --hero-wash.
 */
.home-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--hero-wash);
}

.home-hero__inner {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
	max-width: calc(var(--container) + (var(--gutter) * 2));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.home-hero__headline {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-block: var(--space-40);
}

/*
 * "Simplify+Amplify" is one unbreakable token roughly 7.56× the font size
 * wide. At the designed 48px it fits the 428 frame's 380px column exactly, but
 * not a 375px screen's 327 — so below the source frame the headline steps down
 * just enough to keep that token on one line instead of breaking mid-word.
 */
.home-hero__title {
	max-width: 1008px;
	margin: 0;
	font-size: min(clamp(2.5rem, 2.1541rem + 3.1621vw, var(--fs-display-4xl)), 13.2vw - 6.3px);
	color: #f6fffe;
	text-align: center;
}

.home-hero__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-24);
	max-width: 368px;
	margin-inline: auto;
	padding-bottom: var(--space-96);
	text-align: center;
}

.home-hero__text {
	margin: 0;
	color: var(--c-primary-50);
	font-size: var(--fs-body-lg);
	line-height: var(--lh-body);
}

.home-hero__angle {
	position: absolute;
	inset: auto 0 0;
	color: var(--c-ground-dark);
	line-height: 0;
	pointer-events: none;
}

.home-hero__angle .icon {
	display: block;
	width: 100%;
	height: var(--hero-angle-h);
}

@media (min-width: 64em) {
	.home-hero {
		min-height: 980px;
		padding-top: 121px;
	}

	/*
	 * Figma centres the headline in a 494px box (51284:4604) that occupies only
	 * 435 of the column and overflows the rest (51284:4603), which is what puts
	 * the title's top at y=272 rather than the 242.5 that centring in 435 gives.
	 * The negative margin reproduces that overflow, so the copy block below
	 * still starts at y=556 as the frame does.
	 */
	.home-hero__headline {
		flex: 0 0 auto;
		height: 494px;
		margin-bottom: -59px;
		padding-block: 0;
	}

	/* Copy sits 124px from the frame edge; 48px of that is the inner gutter. */
	.home-hero__content {
		align-items: flex-start;
		margin-inline: 0;
		margin-left: 76px;
		padding-bottom: 0;
		text-align: left;
	}
}

/* ==========================================================================
   Why Us + package rail
   ========================================================================== */

.home-why-us {
	display: flex;
	flex-direction: column;
	padding-bottom: var(--space-32);
	background-color: var(--c-white);
}

/* Figma fixes the band's height (944 mobile / 756.5 desktop) rather than
   letting it hug its content, which is what positions the overlapping rail. */
.home-why-us__band {
	min-height: 944px;
	padding: var(--space-32) var(--gutter) 200px;
	background-color: var(--c-ground-dark);
	color: var(--c-text-on-dark);
}

/* Figma 51288:10951 — copy stack and feature image, 40px apart on mobile. */
.home-why-us__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-40);
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
}

/* Figma 51288:10952 */
.home-why-us__copy {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
}

.home-why-us__intro {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}

.home-why-us__title {
	margin: 0;
	color: #f2efea;
}

.home-why-us__lead {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-24);
}

.home-why-us__text {
	margin: 0;
	font-size: var(--fs-body-lg);
	line-height: var(--lh-body);
	color: rgba(255, 255, 255, 0.7);
}

.home-why-us__media {
	height: 340px;
	margin: 0;
}

.home-why-us__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The rail rides up over the band's bottom padding. */
.home-why-us__rail-wrap {
	margin-top: -160px;
}

/*
 * The rail starts at the container's left edge and runs off the right of the
 * viewport, as the design does — the last card is meant to be cut by the frame.
 * Capping it at the container width instead left a widening gap on the right as
 * the screen grew (461px of dead space at 2560).
 *
 * The left inset repeats the container's own centring maths against the wrap,
 * which is viewport-width; 100% is used rather than 100vw so a scrollbar cannot
 * push it out.
 */
.home-why-us__rail {
	gap: 17px;
	margin: 0;
	padding: 0 0 var(--space-8)
		max(var(--gutter), calc((100% - var(--container)) / 2));
	scroll-padding-inline-start: max(var(--gutter), calc((100% - var(--container)) / 2));
	list-style: none;
}

/*
 * The list items stretch to the tallest card, but a list-item child does not
 * fill them — so the cards were ending at different heights and their bottoms
 * never lined up. Making each item a flex container stretches the card inside.
 */
.home-why-us__rail > li {
	display: flex;
}

/*
 * The service cards carry no width of their own — .card-experience is the
 * shared component and each rail sizes its own columns. Same figures the Add
 * To The Experience rail uses: 323 capped to 78% narrow so the next card peeks,
 * and four across the container 17px apart from 64em.
 *
 * Scoped to the service card so a page that hand-picks whyus_cards still gets
 * the package card at its own width.
 */
.home-why-us__rail > li:has(.card-service) {
	flex-basis: min(323px, 78%);
}

@media (min-width: 64em) {
	.home-why-us__rail > li:has(.card-service) {
		flex-basis: calc((min(100%, var(--container)) - 51px) / 4);
	}
}

@media (min-width: 64em) {
	.home-why-us {
		padding-bottom: var(--space-64);
	}

	.home-why-us__band {
		min-height: 756.5px;
		padding-block: var(--space-64) 200px;
	}

	/*
	 * Fluid from the breakpoint up; the exact Figma tracks are pinned once the
	 * full 1344 container fits (84em). min-width:0 lets both columns shrink
	 * past their min-content — without it the 64px heading's longest word
	 * forces the row wider than the container.
	 */
	.home-why-us__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-48);
	}

	.home-why-us__copy {
		flex: 1 1 43.6%; /* 586 / 1344 */
		min-width: 0;
	}

	.home-why-us__media {
		flex: 1 1 44.64%; /* 600 / 1344 */
		min-width: 0;
		height: 440px;
	}

	.home-why-us__rail-wrap {
		margin-top: -136px;
	}

	/* Full-bleed to the right at every size — see the base rule above. */
	.home-why-us__rail {
		max-width: none;
		margin-inline: 0;
	}
}

/* ==========================================================================
   Hero video — Figma uses a still; the client supplied a looping clip
   ========================================================================== */

.home-hero__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ==========================================================================
   Janda Story — Figma 51284:4636 (1441x699)
   ========================================================================== */

/* Figma 51284:4636 pads 64 top and bottom, and the band above closes with its
   own 64 — the 128 between the rail and the photo is the design's, not a
   doubled gap. */
.home-story {
	padding-block: var(--space-32);
	padding-inline: var(--gutter);
	background-color: var(--c-white);
}

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

.home-story__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-40);
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
}

/* 380x440 on the mobile frame (51288:11086). Without this the photo fell back
   to its own 4:3 and the section came up 160px short of the design. */
.home-story__media {
	position: relative;
	aspect-ratio: 380 / 440;
	margin: 0;
	overflow: hidden;
}

.home-story__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.home-story__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-24);
}

.home-story__intro {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}

/* Figma 51284:4645 — 578 wide, which wraps it to the designed four lines
   rather than three across the full 649 column. */
.home-story__title {
	max-width: 578px;
	margin: 0;
	color: var(--c-primary-500);
}

.home-story__text {
	color: var(--c-body);
	font-size: var(--fs-body-lg);
}

.home-story__text p {
	margin: 0;
}

/* The frame sets the two paragraphs as one text block with an empty line
   between them, so the gap is a full 27px line rather than a 18px em. */
.home-story__text p + p {
	margin-top: 1.5em;
}

/* The circular wordmark straddles the image/copy seam (Figma 51284:4648). */
.home-story__ring {
	display: none;
	color: #949590;
}

@media (min-width: 64em) {
	.home-story__inner {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		gap: var(--space-48);
	}

	/*
	 * overflow is visible from here up so the ring can hang below the photo.
	 * The crop it was doing is already handled by the image's own
	 * `object-fit: cover` inside a fixed aspect-ratio box, so nothing spills.
	 */
	.home-story__media {
		flex: 0 0 48.29%; /* 649 / 1344 */
		aspect-ratio: 649 / 499;
		height: auto;
		overflow: visible;
	}

	.home-story__copy {
		flex: 0 1 48.29%;
	}

	/*
	 * The ring straddles the photo's bottom-right corner — "over the seam", as
	 * the section note says — not the middle of the picture. Measured off the
	 * Homepage frame, where the photo is 649x499 and the ring 238: its right
	 * edge sits 4px inside the photo's, and it hangs 68px below the bottom.
	 *
	 * Those three numbers are expressed against the photo rather than as the
	 * literal pixels they started as, because the container scales past 1440 and
	 * the photo scales with it. Pinned, the ring stayed put while the picture
	 * grew out from under it — 92px adrift at 1780 and 189px at 2560, by which
	 * point it sat wholly inside the photo with its type back on the picture.
	 */
	.home-story__ring {
		display: block;
		position: absolute;
		right: 0.616%;   /* 4 / 649 */
		bottom: -13.627%; /* 68 / 499 */
		width: 36.672%;  /* 238 / 649 */
		height: auto;
		aspect-ratio: 1;
		pointer-events: none;
	}

	.home-story__ring .icon {
		width: 100%;
		height: 100%;
	}
}

/* ==========================================================================
   SEO copy block — Figma 51284:5064 (1440x632)
   ========================================================================== */

.home-seo {
	padding-block: var(--space-32);
	padding-inline: var(--gutter);
	background-color: var(--c-white);
}

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

.home-seo__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-40);
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
}

.home-seo__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 33px;
}

.home-seo__title {
	margin: 0;
	color: var(--c-primary-500);
}

.home-seo__text {
	color: var(--c-body);
	font-size: var(--fs-body-lg);
}

.home-seo__text p {
	margin: 0;
}

/* As in the story block — the frame's paragraph break is a whole blank line. */
.home-seo__text p + p {
	margin-top: 1.5em;
}

/* 380x280.735 on the mobile frame (51288:11232), which sits above the copy. */
.home-seo__media {
	order: -1;
	aspect-ratio: 380 / 280.735;
	margin: 0;
}

.home-seo__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 64em) {
	.home-seo__inner {
		flex-direction: row;
		align-items: center;
		gap: 5.95%; /* 80 / 1344 */
	}

	.home-seo__copy {
		flex: 0 1 47.02%; /* 632 / 1344 */
	}

	/* Back to source order — the desktop frame puts the photo on the right. */
	.home-seo__media {
		order: 0;
		flex: 0 0 47.02%;
		aspect-ratio: 632 / 467;
		height: auto;
	}
}

/* Pin the Figma tracks once the full 1344 container fits. */
/*
 * Above the breakpoint the tracks are percentages of the container rather than
 * the raw Figma pixels, so as the container grows past 1344 every column keeps
 * the ratio the design specifies instead of the slack piling into one gap.
 */
@media (min-width: 84em) {
	.home-why-us__inner {
		gap: 9.15%; /* 123 / 1344 */
	}

	.home-why-us__copy {
		flex: 0 1 43.6%;
	}

	.home-why-us__media {
		flex: 0 0 44.64%;
		aspect-ratio: 600 / 440;
		height: auto;
	}

	.home-story__media,
	.home-story__copy {
		min-width: 0;
	}
}

/* Guard the other two-column sections against the same min-content squeeze. */
.home-story__copy,
.home-story__media,
.home-seo__copy,
.home-seo__media {
	min-width: 0;
}

/* ==========================================================================
   Why Us rail — arrows

   The same pair the Wedding Packages rails carry (.wp-experience__nav): a
   centred row under the rail, grey disc back and filled teal disc forward, at
   the .rail-btn base size. They used to be 3.5rem white discs pinned over the
   rail's left and right edges, which read as a different control to the one
   the rest of the site uses for the same job.

   app.js hides them when the cards already fit and disables each end.
   ========================================================================== */

.home-why-us__rail-wrap {
	position: relative;
}

.home-why-us__nav {
	display: flex;
	justify-content: center;
	gap: var(--space-8);
	margin-top: var(--space-24);
}

.home-why-us__nav .rail-btn--prev .icon {
	rotate: 180deg;
}

/* Faded rather than gone, so the pair never looks lopsided at either end. */
.home-why-us__nav .rail-btn[disabled] {
	opacity: 0.45;
}