/* ==========================================================================
   DONATE & SUPPORT — hero + donation card · areas · form · tax panel · transparency · other ways
   Every class is prefixed `donate-`. Inside a tone, only semantic vars (--bg, --fg, --line, --accent …).
   ========================================================================== */

/* ---- 01 Hero ---------------------------------------------------------------- */
.donate-hero {
	--hero-min: 70svh;
	align-items: center;
}

@supports not (min-height: 1svh) {
	.donate-hero {
		--hero-min: 70vh;
	}
}

.donate-hero__media {
	position: absolute;
	inset: 0;
	z-index: -3;
	overflow: hidden;
	opacity: 0.34;
}

.donate-hero__veil {
	position: absolute;
	inset: 0;
	z-index: -2;
	pointer-events: none;
	background:
		radial-gradient(60% 55% at 78% 62%, rgba(244, 122, 31, 0.3), transparent 70%),
		radial-gradient(50% 60% at 12% 92%, rgba(217, 164, 65, 0.16), transparent 70%),
		linear-gradient(180deg, rgba(11, 9, 7, 0.8) 0%, rgba(11, 9, 7, 0.5) 45%, var(--sanctum-black) 100%);
}

/* warm diya light — the only motion here is a slow flame-like swell */
.donate-hero__glow {
	position: absolute;
	left: -10vmax;
	bottom: -26vmax;
	z-index: -2;
	width: min(70vmax, 900px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(255, 165, 80, 0.4), rgba(244, 122, 31, 0.12) 56%, transparent 74%);
	pointer-events: none;
	animation: donate-flame 6.5s ease-in-out infinite;
}

@keyframes donate-flame {
	0%,
	100% {
		opacity: 0.85;
		transform: scale(1);
	}
	36% {
		opacity: 1;
		transform: scale(1.05);
	}
	64% {
		opacity: 0.78;
		transform: scale(0.98);
	}
}

@media (prefers-reduced-motion: reduce) {
	.donate-hero__glow {
		animation: none;
	}
}

html.hs-reduced .donate-hero__glow {
	animation: none;
}

.donate-hero__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2.25rem;
	align-items: center;
	width: min(100% - 2 * var(--gutter), var(--container));
	margin-inline: auto;
}

/* Hindi accent beside the English eyebrow: Devanagari reads small at eyebrow size */
.donate-hero .eyebrow [lang='hi'] {
	font-size: 1.12em;
	font-weight: 600;
}

.donate-hero__title {
	margin: 0 0 1.25rem;
	font-size: clamp(2.6rem, 1.3rem + 4.4vw, 5.25rem);
	line-height: 1.02;
	letter-spacing: var(--tracking-display);
	text-wrap: balance;
}

.donate-hero__lead {
	max-width: 32rem;
	margin: 0;
	color: var(--fg-soft);
	font-size: var(--fs-lg);
	line-height: 1.6;
}

/* the brass diya is a desktop foreground object; phones and tablets keep the calm still poster */
.donate-hero__diya {
	display: none;
}

/* a decorative object, not a labelled box: the placeholder shows only the drawn lamp until the real model / poster arrives */
.donate-hero__diya .media-slot {
	overflow: visible;
	background: transparent;
}

.donate-hero__diya .media-slot__placeholder {
	overflow: visible;
	background: none;
	box-shadow: none;
}

.donate-hero__diya .media-slot__pattern,
.donate-hero__diya .media-slot__meta {
	display: none;
}

.donate-hero__diya .media-slot__art {
	inset: 0;
}

.donate-hero__card {
	width: 100%;
	max-width: 36rem;
}

@media (min-width: 1024px) {
	.donate-hero__inner {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		grid-template-areas:
			'copy card'
			'diya card';
		column-gap: 3rem;
		row-gap: 0.5rem;
	}

	.donate-hero__copy {
		grid-area: copy;
		align-self: end;
	}

	.donate-hero__diya {
		display: block;
		grid-area: diya;
		align-self: start;
		justify-self: start;
		width: clamp(140px, 14vw, 210px);
		margin-top: 0.5rem;
	}

	.donate-hero__card {
		grid-area: card;
		align-self: center;
		justify-self: end;
		max-width: none;
	}
}

/* short laptop screens: let the card start higher so the amounts, area and button stay above the fold */
@media (min-width: 1024px) and (max-height: 860px) {
	.donate-hero {
		padding-top: calc(var(--header-h) + 1.25rem);
		padding-bottom: 2.5rem;
	}
}

/* ---- Donation card (hero + form) --------------------------------------------- */
.donate-card {
	container-type: inline-size;
	position: relative;
	padding: clamp(1.25rem, 1rem + 1.4vw, 2.25rem);
	border-radius: var(--r-lg);
	background: var(--ivory-3);
	box-shadow: 0 0 0 1px rgba(217, 164, 65, 0.5), 0 44px 90px -38px rgba(0, 0, 0, 0.9), 0 0 100px -36px rgba(244, 122, 31, 0.45);
}

.donate-card::before {
	content: '';
	position: absolute;
	top: 0;
	right: 24px;
	left: 24px;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: linear-gradient(90deg, var(--saffron), var(--antique-gold));
}

/* the hero variant is the above-the-fold card, so it is a little tighter than the full form card */
.donate-card--hero {
	padding: clamp(1.15rem, 0.9rem + 1vw, 1.75rem) clamp(1.15rem, 0.9rem + 1.2vw, 2rem);
}

.donate-card--hero .donate-card__title {
	margin-bottom: 0.85rem;
}

.donate-card--hero .donate-card__group,
.donate-card--hero .field {
	margin-bottom: 0.85rem;
}

.donate-card--hero input[type='text'],
.donate-card--hero select {
	min-height: 48px;
	padding-block: 0.65rem;
}

.donate-card--hero .donate-card__trust {
	margin-top: 0.9rem;
	padding-top: 0.8rem;
}

.donate-card .eyebrow {
	margin-bottom: 0.5rem;
}

.donate-card__title {
	margin: 0 0 1.1rem;
	font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.05rem);
	line-height: 1.1;
}

.donate-card__title:focus {
	outline: none;
}

.donate-card__title:focus-visible {
	outline: 2px solid var(--accent-2);
	outline-offset: 4px;
}

.donate-card__text {
	margin: 0 0 1.25rem;
	color: var(--fg-soft);
}

.donate-card__group {
	min-width: 0;
	margin: 0 0 1.1rem;
	padding: 0;
	border: 0;
}

.donate-card__legend {
	display: block;
	width: 100%;
	margin: 0 0 0.6rem;
	padding: 0;
	color: var(--fg);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.donate-card__optional {
	color: var(--fg-muted);
	font-weight: 600;
}

.donate-card .field,
.donate-card .form__row {
	margin-bottom: 1.1rem;
}

.donate-card .form__row .field {
	margin-bottom: 0;
}

.donate-card__group .field:last-child,
.donate-card__group .form__row:last-child {
	margin-bottom: 0;
}

.donate-card .field__hint {
	margin: -0.25rem 0 0.85rem;
}

/* amount chips: 2 × n on narrow cards, one row of four once the card is wide enough */
.donate-amounts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.6rem;
}

@container (min-width: 23rem) {
	.donate-amounts {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.donate-amounts__chip {
	justify-content: center;
	width: 100%;
	padding-inline: 0.5rem;
	font-size: 0.98rem;
	font-variant-numeric: tabular-nums;
}

.donate-card .amount-input__prefix {
	font-family: var(--font-body);
}

/* forms.css resets the select chevron on ivory (its `.tone-ivory select { background }` shorthand); put it back, in the darker saffron that passes on white */
.donate-card select {
	background-color: var(--white);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8420C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-position: right 0.9rem center;
	background-repeat: no-repeat;
	background-size: 1.2rem;
}

.donate-card__summary {
	margin: 0 0 1rem;
	padding: 0.8rem 1rem;
	border: 1px solid rgba(244, 122, 31, 0.28);
	border-radius: 12px;
	background: rgba(244, 122, 31, 0.08);
	color: var(--fg);
	font-size: 0.95rem;
}

.donate-card__summary strong {
	color: var(--accent);
}

.donate-card__consent {
	margin-bottom: 1rem;
}

.donate-card__consent .check a {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.donate-card__submit {
	margin-top: 0.5rem;
}

/* main.js greys the link out until an amount is chosen; keep it clickable so donate.js can say why */
.donate-card .btn.is-disabled {
	pointer-events: auto;
	opacity: 0.6;
}

.donate-card__note {
	margin: 0.75rem 0 0;
	color: var(--fg-muted);
	font-size: 0.88rem;
	text-align: center;
}

.donate-card__trust {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin: 1.15rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--line);
	color: var(--fg-muted);
	font-size: 0.84rem;
	line-height: 1.5;
}

.donate-card__trust .icon {
	width: 1.05rem;
	height: 1.05rem;
	margin-top: 0.15em;
	color: var(--accent-2);
}

.donate-card__notice {
	margin: 0.25rem 0 1rem;
	border-color: rgba(244, 122, 31, 0.45);
	background: rgba(244, 122, 31, 0.08);
	color: var(--fg);
}

.donate-card__notice p {
	margin: 0;
}

.donate-card__embed {
	margin-bottom: 0.5rem;
}

/* without JS the controls are hidden; the payment link (or the polite notice) remains */
html:not(.hs-js) .donate-card__js {
	display: none;
}

/* ---- 02 Choose an area ------------------------------------------------------------------ */
.donate-areas__grid {
	display: grid;
	gap: 0.85rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.donate-area__body {
	gap: 0.5rem;
	padding: 0.9rem 0.9rem 1.1rem;
}

/* small thumbnails: keep the placeholder badge on one line */
.donate-area__media .media-slot__badge {
	padding: 0.25rem 0.6rem;
	font-size: 0.62rem;
	white-space: nowrap;
}

.donate-area__media .media-slot__badge i {
	display: none;
}

/* icon above the title on narrow cards (phones, 4-up desktop) so long names never clip or wrap unevenly;
   beside it on the wide 2-up tablet cards */
.donate-area__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.55rem;
}

.donate-area__icon {
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 12px;
}

.donate-area__icon .icon {
	width: 1.2rem;
	height: 1.2rem;
}

.donate-area__body .card__title {
	min-width: 0;
	font-size: 1.05rem;
	line-height: 1.2;
}

/* the whole card is the hit area (stretched ::after); the link box itself is also a comfortable 44px target */
.donate-area .card__title a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.donate-area__body .card__excerpt {
	font-size: 0.86rem;
	line-height: 1.5;
}

.donate-area__cta {
	display: none;
	margin-top: auto;
	padding-top: 0.5rem;
}

.donate-area__check {
	position: absolute;
	top: 0.7rem;
	right: 0.7rem;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--saffron);
	color: var(--sanctum-black);
	box-shadow: 0 8px 20px -8px rgba(244, 122, 31, 0.8);
	opacity: 0;
	transform: scale(0.6);
	transition: opacity var(--dur-fast) ease, transform var(--dur) var(--ease-out);
}

.donate-area.is-selected {
	border-color: var(--saffron);
	box-shadow: 0 0 0 2px var(--saffron), 0 24px 54px -28px rgba(168, 66, 12, 0.5);
}

.donate-area.is-selected .donate-area__check {
	opacity: 1;
	transform: none;
}

/* keyboard focus ring around the whole card (the link itself is only the title) */
.donate-area .card__title a:focus-visible {
	outline: none;
}

.donate-area .card__title a:focus-visible::after {
	outline: 2px solid var(--accent-2);
	outline-offset: -3px;
	border-radius: var(--r-lg);
}

@media (min-width: 768px) {
	.donate-areas__grid {
		gap: var(--gap);
	}

	.donate-area__body {
		gap: 0.55rem;
		padding: 1.25rem 1.35rem 1.4rem;
	}

	.donate-area__head {
		flex-direction: row;
		align-items: center;
		gap: 0.85rem;
	}

	.donate-area__icon {
		width: 3rem;
		height: 3rem;
		border-radius: 14px;
	}

	.donate-area__icon .icon {
		width: 1.5rem;
		height: 1.5rem;
	}

	.donate-area__body .card__title {
		font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem);
	}

	.donate-area__body .card__excerpt {
		font-size: var(--fs-sm);
	}

	.donate-area__cta {
		display: inline-flex;
	}
}

@media (min-width: 1024px) {
	.donate-areas__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/* four narrow columns: stack icon over title again, keep the call to action on one line */
	.donate-area__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.7rem;
	}

	.donate-area__cta {
		font-size: 0.92rem;
		white-space: nowrap;
	}
}

/* ---- 03 Donation form ------------------------------------------------------------------- */
.donate-form__layout {
	gap: 2.5rem 3.5rem;
}

.donate-form__head {
	margin-bottom: 1.5rem;
}

.donate-form__points {
	margin: 0 0 1.75rem;
}

/* those two points describe the interactive controls, which only exist with JS */
html:not(.hs-js) .donate-form__js {
	display: none;
}

.donate-form__help {
	margin: 0;
	color: var(--fg-soft);
}

.donate-form__help .link-arrow {
	margin-left: 0.4rem;
}

.donate-form__email {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin-top: 0.85rem;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.donate-form__email .icon {
	flex: none;
	color: var(--accent-2);
}

@media (min-width: 1024px) {
	.donate-form__intro {
		position: sticky;
		top: calc(var(--header-h) + 32px);
		align-self: start;
	}

	body.admin-bar .donate-form__intro {
		top: calc(var(--header-h) + 64px);
	}
}

/* ---- 04 Tax / registration panel ------------------------------------------------------------ */
.donate-tax__panel {
	padding: clamp(1.25rem, 1rem + 2vw, 2.5rem);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--surface);
	box-shadow: var(--card-shadow);
}

.donate-tax__head {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin-bottom: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--line);
}

.donate-tax__head .eyebrow {
	margin-bottom: 0.4rem;
}

.donate-tax__title {
	margin: 0;
	font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.3rem);
	line-height: 1.1;
}

.donate-tax__rows {
	display: grid;
	gap: 1.5rem 2rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.donate-tax__label {
	margin: 0 0 0.5rem;
	color: var(--accent);
	font-family: var(--font-body);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	line-height: 1.3;
	text-transform: uppercase;
}

.donate-tax__text {
	color: var(--fg-soft);
	font-size: 0.98rem;
}

.donate-tax__docs {
	margin-top: 1.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--line);
}

.donate-tax__rows + .donate-tax__docs {
	margin-top: 1.75rem;
}

.donate-tax__head + .donate-tax__docs {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* ---- Document lists (tax rows + transparency links) -------------------------------------------- */
.donate-docs {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.donate-docs__item {
	margin: 0;
}

.donate-docs--rows .donate-docs__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.85rem 1rem;
	align-items: center;
	padding: 1rem;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--surface-2);
}

.donate-docs__icon {
	width: 3rem;
	height: 3rem;
}

.donate-docs__title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.6rem;
	margin: 0;
	font-weight: 700;
	line-height: 1.35;
}

.donate-docs__meta {
	margin: 0.2rem 0 0;
	color: var(--fg-muted);
	font-size: 0.85rem;
}

.donate-docs__note {
	margin: 0.4rem 0 0;
	color: var(--fg-soft);
	font-size: 0.88rem;
}

.donate-docs__view {
	grid-column: 1 / -1;
	justify-self: start;
}

@media (min-width: 640px) {
	.donate-docs--rows .donate-docs__item {
		grid-template-columns: auto minmax(0, 1fr) auto;
	}

	.donate-docs__view {
		grid-column: auto;
		justify-self: end;
	}
}

.donate-docs--links {
	gap: 0.5rem;
}

.donate-docs__link {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	color: var(--fg);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.35;
}

a.donate-docs__link:hover {
	color: var(--accent);
}

.donate-docs__link .icon {
	flex: none;
	width: 1.1rem;
	height: 1.1rem;
	color: var(--accent-2);
}

.donate-docs--links .donate-docs__meta {
	display: block;
	margin: 0.1rem 0 0 1.65rem;
}

/* ---- 05 Transparency ----------------------------------------------------------------------- */
.donate-trust__grid {
	display: grid;
	gap: var(--gap);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
	.donate-trust__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.donate-trust__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.donate-trust__block .card__body {
	gap: 0.85rem;
}

.donate-links {
	display: grid;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.donate-links li {
	margin: 0;
}

.donate-links a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 36px;
	color: var(--fg-soft);
	font-size: 0.95rem;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.donate-links a:hover,
.donate-links a:focus-visible {
	color: var(--accent);
}

.donate-links .icon {
	flex: none;
	width: 1.05rem;
	height: 1.05rem;
	color: var(--accent-2);
}

/* ---- 06 Other ways to support ------------------------------------------------------------------ */
.donate-ways__grid {
	display: grid;
	gap: var(--gap);
	grid-template-columns: minmax(0, 1fr);
}

.donate-way__icon {
	position: relative;
	z-index: 3;
	margin-top: -3.4rem;
	background: radial-gradient(circle at 30% 20%, rgba(244, 122, 31, 0.2), transparent 70%), var(--surface);
	box-shadow: 0 0 0 6px var(--surface), 0 14px 30px -14px rgba(60, 35, 10, 0.5);
}

/* the round icon straddles the photo's lower edge: keep the placeholder label clear of it */
.donate-way .media-slot__art ~ .media-slot__meta {
	padding-bottom: 4.6rem;
}

/* sign-off in the closing band: "Jai Siya Ram | Jai Hanuman" — the divider is lighter so it never reads as a capital I */
.donate-sep {
	margin-inline: 0.45em;
	font-weight: 300;
	opacity: 0.55;
}

.donate-way .card__foot {
	padding-top: 0.9rem;
}

.donate-way__email {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0.25rem 0 0;
	font-size: 0.92rem;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.donate-way__email .icon {
	flex: none;
	color: var(--accent-2);
}

@media (min-width: 768px) and (max-width: 1023px) {
	.donate-way {
		flex-direction: row;
	}

	.donate-way .card__media {
		flex: 0 0 38%;
		max-width: 38%;
	}

	.donate-way .card__media .media-slot:not(.media-slot--auto):not(.media-slot--fill) {
		height: 100%;
		min-height: 100%;
		aspect-ratio: auto;
	}

	.donate-way .card__body {
		justify-content: center;
	}

	.donate-way__icon {
		margin-top: 0;
		box-shadow: none;
	}
}

@media (min-width: 1024px) {
	.donate-ways__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}