/**
 * Hero section (blocks/hero). Figma: Home 171:945, Pricing 171:393, Rules & FAQs
 * 171:394 (the inner-page reference: every inner page is built the same way).
 *
 * The header pill sits absolutely over the top 96px, so the content clears it. The
 * framed photo overlaps a darker band (a full-bleed ::before behind the photo) and runs
 * past the bottom of the section, where the white wave cuts across it.
 *
 * Inner pages (1440): band 840 tall; title top 160 (96/86); tagline top 275 (21/32);
 * photo top 385, 1048 × 500 with a 5px border, 45 below the band; darker band from 657.
 * The title + tagline sit in a box sized for one title line and two tagline lines, so
 * the photo, and so the whole hero, is the same height on every page at every width.
 */

.kc-hero {
	--kc-hero-lower: var( --kc-dark-purple );
	--kc-hero-border: transparent;
	--kc-hero-overhang: clamp( 1.25rem, 3.125vw, 2.8125rem );
	--kc-hero-wave-h: clamp( 1.75rem, 5.972vw, 5.375rem );

	/* Inner-page type scale (the home style overrides it). */
	--kc-hero-title-fs: clamp( 2.25rem, 6.667vw, 6rem );
	--kc-hero-title-lh: 0.896;
	--kc-hero-tag-fs: clamp( 1rem, 1.46vw, 1.3125rem );
	--kc-hero-tag-lh: 1.524;
	--kc-hero-tag-gap: clamp( 0.75rem, 2.014vw, 1.8125rem );

	position: relative;
	isolation: isolate;
	overflow: hidden;
	/* The title starts 48 below the header pill on phones (pill bottom 80 at 390),
	   growing evenly to Figma's 160 at 1440 (home: 199, below). */
	padding-top: clamp( 8rem, 7.257rem + 3.048vw, 10rem );
	padding-bottom: 0;
	text-align: center;
}

.kc-hero--home {
	--kc-hero-overhang: clamp( 1.25rem, 3.243vw, 2.919rem );
	--kc-hero-title-fs: clamp( 2.75rem, 6.667vw, 6rem );
	--kc-hero-title-lh: 0.75;
	--kc-hero-tag-fs: clamp( 1.125rem, 1.667vw, 1.5rem );
	--kc-hero-tag-lh: 1.3334;
	--kc-hero-tag-gap: clamp( 1rem, 1.667vw, 1.5rem );

	padding-top: clamp( 8rem, 6.35rem + 6.762vw, 12.4375rem );
	background: var( --kc-lavender );
}

.kc-hero--band-blush {
	--kc-hero-lower: var( --kc-light-pink );
}

.kc-hero--band-cyan {
	--kc-hero-lower: var( --kc-lavender );
}

/* Home: the balloon photo fills the whole section. */
.kc-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	max-width: none !important;
	margin: 0 !important;
}

.kc-hero__bg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ------------------------------------------------------------ text ---- */

/* As wide as the photo, so a long title stays on one line (the tagline is narrower).
   margin-block 0: positions are measured from the section's top padding, so the
   layout's block gap (the home style's background div would trigger it) must not add. */
.kc-hero .kc-hero__content {
	position: relative;
	z-index: 1;
	max-width: 65.5rem;
	margin-block: 0;
}

.kc-hero--page .kc-hero__content {
	min-height: calc( var( --kc-hero-title-fs ) * var( --kc-hero-title-lh ) + var( --kc-hero-tag-gap ) + 2 * var( --kc-hero-tag-fs ) * var( --kc-hero-tag-lh ) );
}

.kc-hero .kc-hero__eyebrow {
	margin: 0 0 0.75rem;
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.kc-hero .kc-hero__title {
	margin: 0;
	color: var( --kc-dark-purple );
	font-size: var( --kc-hero-title-fs );
	line-height: var( --kc-hero-title-lh );
	text-wrap: balance;
	/* A word longer than the screen is wide breaks rather than running off the edge. */
	overflow-wrap: break-word;
}

.kc-hero .kc-hero__tagline {
	max-width: 53.75rem;
	margin: var( --kc-hero-tag-gap ) auto 0;
	color: var( --kc-dark-purple );
	font-size: var( --kc-hero-tag-fs );
	line-height: var( --kc-hero-tag-lh );
	text-wrap: balance;
}

.kc-hero--home .kc-hero__tagline {
	max-width: 46.5rem;
	letter-spacing: -0.02em;
}

.kc-hero .kc-hero__buttons {
	justify-content: center;
	gap: 0.75rem;
	margin-top: clamp( 1.75rem, 3.334vw, 3rem );
}

/* ----------------------------------------------------------- photo ---- */

.kc-hero .kc-hero__media {
	position: relative;
	z-index: 1;
	container-type: inline-size;
	max-width: 65.5rem;
	margin-top: clamp( 1.5rem, 3.195vw, 2.875rem );
	margin-bottom: calc( -1 * var( --kc-hero-overhang ) );
}

.kc-hero--home .kc-hero__media {
	max-width: 65.535rem;
	margin-top: clamp( 2.25rem, 3.928vw, 3.535rem );
}

/* The darker band behind the lower part of the photo, edge to edge. */
.kc-hero__media::before {
	position: absolute;
	top: 54.4%;
	bottom: -12.5rem;
	left: 50%;
	z-index: -1;
	width: 100vw;
	margin-left: -50vw;
	background: var( --kc-hero-lower );
	content: "";
}

.kc-hero--home .kc-hero__media::before {
	top: 58.5%;
}

.kc-hero .kc-hero__photo {
	margin: 0;
	overflow: hidden;
	border: 5px solid var( --kc-hero-border );
	border-radius: var( --kc-radius-card );
}

/* The photo keeps Figma's proportions (1048 × 500; home 1048 × 575) but never gets
   shorter than 240, so on phones it turns taller rather than a thin strip. Sized from
   its own width, so the hero shrinks smoothly as the screen narrows. */
.kc-hero .kc-hero__photo {
	height: max( 15rem, 100cqi * 500 / 1048 );
}

.kc-hero--home .kc-hero__photo {
	height: max( 15rem, 100cqi * 575.163 / 1048.556 );
}

.kc-hero__media--border-none .kc-hero__photo {
	border-width: 0;
}

.kc-hero__media--border-purple {
	--kc-hero-border: var( --kc-purple );
}

.kc-hero__media--border-pink {
	--kc-hero-border: var( --kc-pink );
}

.kc-hero__media--border-lavender {
	--kc-hero-border: var( --kc-lavender );
}

.kc-hero .kc-hero__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: calc( var( --kc-radius-card ) - 0.3125rem );
}

/* No photo: the text ends the band, so keep it clear of the wave. */
.kc-hero:not( :has( .kc-hero__media ) ) {
	padding-bottom: calc( var( --kc-hero-wave-h ) + clamp( 2.5rem, 4.167vw, 3.75rem ) );
}

/* ------------------------------------------------------------ wave ---- */

.kc-hero .kc-hero__wave {
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	z-index: 2;
	display: block;
	width: 100%;
	max-width: none;
	height: var( --kc-hero-wave-h );
	margin: 0 !important;
	color: var( --kc-white );
}

/* The wave is the top edge of the next section, so it takes that section's band colour
   (white when the next section has none). */
.kc-hero:has( + .has-kc-blush-background-color ) .kc-hero__wave { color: var( --kc-blush ); }
.kc-hero:has( + .has-kc-cyan-background-color ) .kc-hero__wave { color: var( --kc-cyan ); }
.kc-hero:has( + .has-kc-lavender-background-color ) .kc-hero__wave { color: var( --kc-lavender ); }
.kc-hero:has( + .has-kc-dark-purple-background-color ) .kc-hero__wave { color: var( --kc-dark-purple ); }

/* Narrow phones: a notch smaller, so a title like "Kiddoz Stories & Tips" stays on one
   line and a two-line tagline stays two lines, keeping every page hero the same height. */
@media ( max-width: 399px ) {
	.kc-hero--page {
		--kc-hero-title-fs: 2.125rem;
		--kc-hero-tag-fs: 0.9375rem;
	}
}

@media ( max-width: 781px ) {
	.kc-hero--home {
		--kc-hero-title-lh: 0.9;
	}

	/* A line break typed for the desktop layout would leave a short orphan line here. */
	.kc-hero .kc-hero__tagline br {
		display: none;
	}

	.kc-hero .kc-hero__photo {
		border-width: 4px;
	}

	.kc-hero__media--border-none .kc-hero__photo {
		border-width: 0;
	}
}