/* ==========================================================================
   BKA 2026 v5 · PAGE GROUP donation – Bankkártyás adományozás ·
   Rendszeres adományozói közösség (brief items 12, 20).
   The home hero for a subpage: full-bleed photograph, neutral scrim (never
   red), title on the image and the donation module as the floating card.
   The module itself is styled by donation.css (unchanged contract).
   ========================================================================== */

/* Hero ------------------------------------------------------------------- */
.v5-give-hero {
	--v5-give-media-h: 100%;
	position: relative;
	display: grid;
	min-height: clamp(36rem, calc(100svh - var(--v5-header-h)), 48rem);
	overflow: hidden;
	background: #1d171b;
	color: #fff;
	isolation: isolate;
}
.v5-give-hero--brand {
	background:
		radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 55%),
		linear-gradient(135deg, var(--v5-red) 0%, var(--v5-red-600) 100%);
}
.v5-give-hero__media {
	position: absolute;
	z-index: -1;
	inset: 0;
	margin: 0;
}
.v5-give-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.v5-give-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(var(--v5-scrim), .64) 0%, rgba(var(--v5-scrim), .32) 36%, rgba(var(--v5-scrim), 0) 60%),
		linear-gradient(0deg, rgba(var(--v5-scrim), .6) 0%, rgba(var(--v5-scrim), 0) 48%);
}
.v5-give-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(3rem, 6vh, 5rem);
}
.v5-give-hero__copy { align-self: end; padding-bottom: clamp(.5rem, 3vh, 2.5rem); }
.v5-give-hero__copy .v5-hero__eyebrow { margin-bottom: 1.25rem; }
.v5-give-hero__title {
	max-width: 13ch;
	margin: 0;
	color: #fff;
	font-size: clamp(2.75rem, 1rem + 4.2vw, 5.25rem);
	line-height: .98;
	text-wrap: balance;
}
.v5-give-hero__lead {
	max-width: 30ch;
	margin: 1.4rem 0 0;
	color: rgba(255, 255, 255, .94);
	font-family: var(--v5-font-display);
	font-size: clamp(1.375rem, 1.05rem + .9vw, 2rem);
	line-height: 1.22;
	text-wrap: balance;
}
.v5-give-hero__donate {
	align-self: center;
	justify-self: end;
	width: 100%;
	max-width: 26.5rem;
	scroll-margin-top: calc(var(--v5-header-h) + 1rem);
}

/* Bankkártyás: the 2025 sentence ----------------------------------------- */
.v5-give-intro { padding-block: clamp(4.5rem, 3rem + 5vw, 8rem); }
.v5-give-intro__inner { max-width: calc(64rem + 2 * var(--v5-gutter)); text-align: center; }
.v5-give-intro__statement {
	max-width: 24ch;
	margin: 0 auto;
	color: var(--v5-ink);
	font-family: var(--v5-font-display);
	font-size: clamp(2rem, 1.1rem + 2.7vw, 3.5rem);
	line-height: 1.12;
	text-wrap: balance;
}
.v5-accent {
	color: var(--v5-red);
	white-space: nowrap;
	background: linear-gradient(var(--v5-red-200), var(--v5-red-200)) 0 92% / 100% .16em no-repeat;
}
.v5-give-intro__text {
	max-width: 40rem;
	margin: 1.75rem auto 0;
	color: var(--v5-ink-soft);
	font-size: var(--v5-fs-lead);
	line-height: 1.6;
}

/* Bankkártyás: what an amount makes possible (red band, 2025 icon family) */
.v5-give-examples { overflow: hidden; padding-block: var(--v5-section-y-tight); }
.v5-give-examples::before {
	content: "";
	position: absolute;
	top: -16rem;
	right: -12rem;
	width: 36rem;
	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-give-examples__grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, .6rem + 1.2vw, 1.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
.v5-give-example {
	display: flex;
	flex-direction: column;
	gap: .9rem;
	margin: 0;
	padding: clamp(1.6rem, 1.1rem + 1.2vw, 2.4rem);
	border-radius: var(--v5-radius);
	background: #fff;
	color: var(--v5-ink);
	box-shadow: 0 24px 48px -28px rgba(70, 0, 20, .55);
}
.v5-give-example__icon {
	display: grid;
	place-items: center;
	width: 4.5rem;
	height: 4.5rem;
	margin-bottom: .4rem;
	border-radius: 50%;
	background: var(--v5-red-100);
	color: var(--v5-red);
}
.v5-give-example__icon .v5-icon { width: 2.75rem; height: 2.75rem; }
.v5-give-example__amount {
	color: var(--v5-red);
	font-family: var(--v5-font-display);
	font-size: clamp(2.25rem, 1.5rem + 1.7vw, 3.25rem);
	font-weight: var(--v5-w-display);
	line-height: 1;
}
.v5-give-example__text { color: var(--v5-ink-soft); font-size: 1.0625rem; font-weight: var(--v5-w-ui); line-height: 1.5; }

/* Rendszeres: introduction beside the thank-you photograph ---------------- */
.v5-give-story__grid {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
	gap: var(--v5-gap-lg);
	align-items: center;
}
.v5-give-story:not(.v5-give-story--photo) .v5-give-story__grid { grid-template-columns: minmax(0, 1fr); max-width: calc(52rem + 2 * var(--v5-gutter)); }
.v5-give-story__photo {
	overflow: hidden;
	border-radius: var(--v5-radius-lg);
	background: var(--v5-mist);
	box-shadow: var(--v5-shadow-lift);
	aspect-ratio: 4 / 3;
}
.v5-give-story__photo img { width: 100%; height: 100%; object-fit: cover; }
.v5-give-story__statement {
	margin: 0;
	color: var(--v5-ink);
	font-family: var(--v5-font-display);
	font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
	line-height: 1.26;
	text-wrap: pretty;
}
.v5-give-story__call {
	margin: 1.75rem 0 0;
	padding-left: 1.25rem;
	border-left: 4px solid var(--v5-red);
	color: var(--v5-red);
	font-family: var(--v5-font-display);
	font-size: clamp(1.25rem, 1.05rem + .6vw, 1.625rem);
	line-height: 1.3;
}

/* Responsive --------------------------------------------------------------- */
@media (max-width: 68.75rem) {
	.v5-give-examples__grid { grid-template-columns: 1fr; max-width: 40rem; margin-inline: auto; }
	.v5-give-example { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.35rem; row-gap: .35rem; align-items: center; }
	.v5-give-example__icon { grid-row: span 2; margin: 0; }
}

@media (max-width: 56rem) {
	.v5-give-hero {
		--v5-give-media-h: min(62svh, 30rem);
		grid-template-rows: var(--v5-give-media-h) auto;
		min-height: 0;
		background: var(--v5-mist);
	}
	.v5-give-hero--brand { background: linear-gradient(180deg, var(--v5-red) 0, var(--v5-red-600) var(--v5-give-media-h), var(--v5-mist) var(--v5-give-media-h)); }
	.v5-give-hero__media { position: relative; z-index: 0; grid-row: 1; grid-column: 1; }
	.v5-give-hero__media::after {
		background: linear-gradient(0deg, rgba(var(--v5-scrim), .74) 0%, rgba(var(--v5-scrim), .28) 44%, rgba(var(--v5-scrim), 0) 66%);
	}
	.v5-give-hero__grid {
		position: relative;
		z-index: 1;
		grid-row: 1 / span 2;
		grid-column: 1;
		grid-template-columns: 1fr;
		grid-template-rows: var(--v5-give-media-h) auto;
		gap: 0;
		padding-block: 0 2.5rem;
	}
	.v5-give-hero__copy { align-self: end; padding-bottom: 4.75rem; }
	.v5-give-hero__title { max-width: none; font-size: clamp(2.25rem, 8.6vw, 3.75rem); }
	.v5-give-hero__lead { margin-top: .9rem; font-size: clamp(1.2rem, 4.4vw, 1.5rem); }
	.v5-give-hero__donate { justify-self: stretch; max-width: none; margin-top: -3.25rem; }
	.v5-give-story__grid { grid-template-columns: 1fr; }
	.v5-give-story__photo { aspect-ratio: 3 / 2; }
}

@media (max-width: 40rem) {
	.v5-give-intro__inner { text-align: left; }
	.v5-give-intro__statement,
	.v5-give-intro__text { margin-inline: 0; }
	.v5-give-example { padding: 1.25rem 1.25rem 1.35rem; column-gap: 1rem; }
	.v5-give-example__icon { width: 3.5rem; height: 3.5rem; }
	.v5-give-example__icon .v5-icon { width: 2.1rem; height: 2.1rem; }
	.v5-give-example__amount { font-size: 2rem; }
	.v5-give-example__text { font-size: 1rem; }
}