/* ==========================================================================
   BKA 2026 v5 · 6/8 HOME – brief items 11–16.
   hero (photo + title + donation card) · mission sentence · 2025 results ·
   three stories. Every section is a full-bleed band with its own tone.
   ========================================================================== */

/* Hero --------------------------------------------------------------------- */
.v5-home-hero {
	--v5-home-media-h: 100%;
	position: relative;
	display: grid;
	min-height: clamp(38rem, calc(100svh - var(--v5-header-h)), 50rem);
	overflow: hidden;
	background: #1d171b;
	color: #fff;
	isolation: isolate;
}
.v5-home-hero__media {
	position: absolute;
	z-index: -1;
	inset: 0;
	display: block;
}
.v5-home-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.v5-home-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(var(--v5-scrim), .62) 0%, rgba(var(--v5-scrim), .3) 34%, rgba(var(--v5-scrim), 0) 58%),
		linear-gradient(0deg, rgba(var(--v5-scrim), .58) 0%, rgba(var(--v5-scrim), 0) 46%);
}
.v5-home-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(22rem, 26.5rem);
	gap: 2.5rem clamp(2rem, 4vw, 5rem);
	align-items: center;
	padding-block: clamp(2.5rem, 5vh, 4.5rem);
}
.v5-home-hero__copy { align-self: center; padding-bottom: clamp(1rem, 4vh, 3rem); }
.v5-home-hero__title {
	margin: 0;
	color: #fff;
	/* Final review 2026-11-13: smaller, so the line does not reach the child on the photo. */
	font-size: clamp(2.5rem, 1rem + 3vw, 3.875rem);
	line-height: 1;
	text-wrap: initial;
}
.v5-home-hero__title span { display: block; white-space: nowrap; }
.v5-home-hero__title span + span { color: #fff; }
.v5-home-hero__donate { align-self: center; justify-self: end; width: 100%; max-width: 26.5rem; }

/* Mission sentence ----------------------------------------------------------- */
.v5-mission {
	padding-block: clamp(2.25rem, 1.75rem + 2vw, 3.75rem);
	text-align: center;
}
.v5-mission__text {
	max-width: 76rem;
	margin: 0 auto;
	color: var(--v5-red);
	font-size: clamp(1.625rem, 1.05rem + 2.1vw, 2.875rem);
	line-height: 1.16;
	text-wrap: balance;
}
.v5-mission__word { display: inline-block; }
.has-js .v5-mission.is-pending .v5-mission__word { opacity: 0; transform: translateY(.45em); }
.v5-mission.is-visible .v5-mission__word {
	opacity: 1;
	transform: none;
	transition: opacity .7s var(--v5-ease), transform .9s var(--v5-ease);
	transition-delay: calc(var(--i, 0) * 34ms);
}

/* 2025 results --------------------------------------------------------------- */
.v5-impact { overflow: hidden; }
.v5-impact::before {
	content: "";
	position: absolute;
	top: -18rem;
	right: -14rem;
	width: 40rem;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, .13), rgba(255, 255, 255, 0) 66%);
	pointer-events: none;
}
.v5-impact__head {
	position: relative;
	margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.v5-impact__report {
	position: relative;
	margin: clamp(2rem, 1.5rem + 1.5vw, 3rem) 0 0;
	text-align: center;
}
.v5-impact__title {
	margin: 0;
	color: #fff;
	font-size: clamp(2.25rem, 1.3rem + 3.1vw, 4.25rem);
	line-height: 1.04;
}
.v5-impact__title span { display: block; }
.v5-impact__grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: clamp(.85rem, .5rem + .9vw, 1.5rem);
	margin: 0;
}
.v5-impact__item {
	display: flex;
	flex-direction: column;
	gap: .9rem;
	margin: 0;
	padding: clamp(1.4rem, 1rem + 1vw, 2rem) clamp(1.2rem, .9rem + .8vw, 1.6rem) clamp(1.5rem, 1rem + 1vw, 2rem);
	border-radius: var(--v5-radius);
	background: #fff;
	color: var(--v5-ink);
	box-shadow: 0 24px 48px -28px rgba(70, 0, 20, .55);
}
.v5-impact__value {
	display: grid;
	gap: 1.15rem;
	margin: 0;
	color: var(--v5-red);
	font-family: var(--v5-font-display);
	font-size: clamp(2.25rem, 1.5rem + 1.6vw, 3.25rem);
	line-height: 1;
}
.v5-impact__number { display: block; }
.v5-impact__unit { display: block; margin-top: .2rem; color: var(--v5-ink); font-size: .52em; line-height: 1.1; }
.v5-impact__icon {
	display: grid;
	place-items: center;
	width: 4.25rem;
	height: 4.25rem;
	border-radius: 50%;
	background: var(--v5-red-100);
	color: var(--v5-red);
}
.v5-impact__icon .v5-icon { width: 2.6rem; height: 2.6rem; }
.v5-impact__icon--pair {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .3rem;
	width: 6.25rem;
	border-radius: var(--v5-radius-pill);
}
.v5-impact__icon--pair .v5-icon { width: 2.3rem; height: 2.3rem; }
.v5-impact__text { margin: 0; color: var(--v5-ink-soft); font-size: .9688rem; font-weight: var(--v5-w-ui); line-height: 1.5; }

/* Three stories -------------------------------------------------------------- */
.v5-stories__title { margin: 0 0 clamp(2.5rem, 2rem + 2vw, 4rem); }
.v5-stories__title-lead {
	display: block;
	color: var(--v5-red);
	font-size: clamp(2.75rem, 1.5rem + 4.4vw, 5.75rem);
	line-height: .98;
}
.v5-stories__title-rest {
	display: block;
	margin-top: .65rem;
	color: var(--v5-ink);
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem);
	line-height: 1.15;
}
.v5-stories__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, .5rem + 1.6vw, 2rem);
	align-items: start;
}
.v5-story { margin: 0; }
.v5-story .v5-video { box-shadow: var(--v5-shadow-lift); }
.v5-story .v5-video.is-preview { cursor: default; }
.v5-story__title {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin: 1.15rem 0 0;
	color: var(--v5-ink);
	font-size: clamp(1.375rem, 1.1rem + .8vw, 1.875rem);
}

/* Responsive ---------------------------------------------------------------- */
@media (max-width: 75rem) {
	.v5-impact__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.v5-impact__item { grid-column: span 2; }
	.v5-impact__item:nth-child(n + 4) { grid-column: span 3; }
}

@media (max-width: 56rem) {
	/*
	 * The owner, 2026-11-14: on phones the „Támogatom” button is in the first screen. The photo takes the height left
	 * above the card's visible part (16.25rem: the card's 3.25rem overlap is already inside it), at least 14.5rem,
	 * at most 34rem (tablets as before).
	 */
	.v5-home-hero {
		--v5-home-media-h: clamp(14.5rem, calc(100vh - var(--v5-header-h) - 16.25rem), 34rem);
		display: grid;
		grid-template-rows: var(--v5-home-media-h) auto;
		min-height: 0;
		background: var(--v5-mist);
	}
	@supports (height: 100svh) {
		.v5-home-hero { --v5-home-media-h: clamp(14.5rem, calc(100svh - var(--v5-header-h) - 16.25rem), 34rem); }
	}
	.v5-home-hero__media { position: relative; grid-row: 1; grid-column: 1; z-index: 0; }
	.v5-home-hero__media::after {
		background: linear-gradient(0deg, rgba(var(--v5-scrim), .7) 0%, rgba(var(--v5-scrim), .25) 42%, rgba(var(--v5-scrim), 0) 65%);
	}
	.v5-home-hero__grid {
		position: relative;
		z-index: 1;
		grid-row: 1 / span 2;
		grid-column: 1;
		grid-template-columns: 1fr;
		grid-template-rows: var(--v5-home-media-h) auto;
		gap: 0;
		padding-block: 0 2.5rem;
	}
	.v5-home-hero__copy { align-self: end; padding-bottom: 4.75rem; }
	.v5-home-hero__title { font-size: clamp(2rem, 8vw, 3.25rem); }
	.v5-home-hero__title span { white-space: normal; }
	.v5-home-hero__donate { justify-self: stretch; max-width: none; margin-top: -3.25rem; }
	.v5-stories__grid { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 40rem) {
	/* The phone photograph (2:3): with the lower photo the child's face stays above the title. */
	.v5-home-hero__media img { object-position: 50% 52%; }
	.v5-impact__grid { grid-template-columns: 1fr; gap: .75rem; }
	.v5-impact__item,
	.v5-impact__item:nth-child(n + 4) { position: relative; grid-column: auto; gap: .35rem; padding: 1.15rem 1.25rem 1.2rem 5.6rem; }
	.v5-impact__value { gap: 0; font-size: 2.25rem; }
	.v5-impact__icon { position: absolute; top: 1.15rem; left: 1.15rem; width: 3.4rem; height: 3.4rem; }
	.v5-impact__icon .v5-icon { width: 2rem; height: 2rem; }
	.v5-impact__icon--pair { gap: .1rem; width: 4.1rem; height: 2.6rem; }
	.v5-impact__icon--pair .v5-icon { width: 1.6rem; height: 1.6rem; }
	.v5-impact__number { display: inline; }
	.v5-impact__unit { display: inline; margin: 0 0 0 .25rem; }
}

@media (max-width: 23rem) {
	.v5-home-hero__title span { white-space: normal; }
}