/* ==========================================================================
   Donate and Zakat pages (GIVING), build spec C7 and C8.
   1. Donate hero "Three doors"   2. Every appeal, in one place   3. For your records
   4. Zakat hero "Equation"   5. Where your Zakat can go   6. Hadith band   7. Accessibility modes
   Scoped to .hero--doors, .giving-*, .hero--equation and .zakat-*. The calculator itself lives in
   components/zakat-calculator.css.
   ========================================================================== */

/* 1. Donate hero "Three doors" -------------------------------------------- */
.giving-hero__top {
	display: grid;
	column-gap: var(--grid-gap);
}

@media (min-width: 60em) {
	.giving-hero__top {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		align-items: end;
		align-items: last baseline; /* The lede's last line sits on the title's baseline. */
	}

	.hero--doors .hero__title {
		grid-column: 1 / span 6;
	}

	.hero--doors .hero__lede {
		grid-column: 8 / -1;
		margin-top: 0;
	}
}

.giving-doors {
	--stagger: 80ms;
	display: grid;
	gap: 16px;
	margin: clamp(1.75rem, 1.2rem + 2vw, 2.75rem) 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 48em) {
	.giving-doors {
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
	}
}

/* Each door is one link (the h2 anchor's ::after covers it). Only the background and the chip
   move on hover: never the door itself. */
.giving-door {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	min-height: 200px;
	padding: 28px;
	border: 1px solid transparent;
	border-radius: var(--radius-l);
	background-color: var(--c-gold);
	background-position: 100% 0%;
	background-repeat: no-repeat;
	background-size: 140% 140%;
	color: var(--c-blue-950);
	transition: background-position 500ms var(--ease-out);
}

@media (min-width: 48em) {
	.giving-door {
		min-height: clamp(18rem, 14rem + 9vw, 25rem);
	}
}

/* Three doors at tablet width: a little less padding so the text keeps its measure. */
@media (min-width: 48em) and (max-width: 59.99em) {
	.giving-door {
		padding: 20px;
	}
}

.giving-door--gold {
	background-image: var(--grad-gold);
}

.giving-door--navy {
	background-color: var(--c-blue-950);
	background-image: var(--grad-navy);
	color: var(--c-on-dark);
}

.giving-door--sky {
	border-color: var(--c-line);
	background-color: var(--c-sky);
	background-image: var(--grad-sky);
}

.giving-door__icon {
	width: 28px;
	height: 28px;
}

.giving-door__body {
	display: grid;
	gap: 10px;
}

.giving-door__title {
	max-width: 18ch;
	color: inherit;
	font-size: var(--fs-h3);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.02em;
}

.giving-door__link,
.giving-door__link:hover {
	color: inherit;
	text-decoration: none;
}

.giving-door__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: var(--radius-l);
}

/* The focus ring outlines the whole door, outside it on the light hero. */
.giving-door__link:focus-visible {
	outline: none;
}

.giving-door__link:focus-visible::after {
	outline: 2px solid var(--c-blue);
	outline-offset: 3px;
}

.giving-door__text {
	max-width: 36ch;
	color: inherit;
	font-size: 1rem;
	line-height: 1.55;
}

.giving-door--navy .giving-door__text {
	color: var(--c-on-dark-2);
}

.giving-door--sky .giving-door__text {
	color: var(--c-ink-2);
}

@media (min-width: 48em) and (max-width: 59.99em) {
	.giving-door__text {
		font-size: .9375rem;
	}
}

.giving-door__cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 10px;
	font: 600 1rem/1.3 var(--ff-display);
	letter-spacing: -.005em;
}

.giving-door__label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* "↗": the door opens the organisation's external checkout. */
.giving-door__ext {
	width: 18px;
	height: 18px;
}

.giving-door__chip {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--c-blue-950);
	color: var(--c-white);
	transition: rotate var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

.giving-door__chip .icon {
	width: 20px;
	height: 20px;
}

.giving-door--navy .giving-door__chip {
	background: var(--c-gold);
	color: var(--c-blue-950);
}

.giving-door:is(:hover, :focus-within) {
	background-position: 80% 20%;
}

.giving-door:is(:hover, :focus-within) .giving-door__chip {
	rotate: -45deg;
}

.giving-door--gold:is(:hover, :focus-within) .giving-door__chip,
.giving-door--navy:is(:hover, :focus-within) .giving-door__chip {
	background: var(--c-white);
	color: var(--c-blue-950);
}

.giving-door--sky:is(:hover, :focus-within) .giving-door__chip {
	background: var(--c-blue);
	color: var(--c-white);
}

/* 2. Every appeal, in one place -------------------------------------------- */
.giving-table {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--c-line);
	list-style: none;
}

.giving-row {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	grid-template-areas:
		"thumb name"
		"progress progress"
		"actions actions";
	align-items: center;
	gap: 14px 16px;
	padding-block: 18px;
	border-top: 1px solid var(--c-line);
}

.giving-row__thumb {
	grid-area: thumb;
	width: 100%;
}

.giving-row__name {
	display: grid;
	grid-area: name;
	gap: 2px;
	min-width: 0;
}

.giving-row__title {
	max-width: none;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -.01em;
}

.giving-row__title a {
	color: var(--c-blue-950);
	text-decoration: none;
}

.giving-row__title a:hover {
	color: var(--c-blue);
}

.giving-row__region {
	color: var(--c-ink-3);
	font-size: var(--fs-small);
}

.giving-row__progress {
	display: grid;
	grid-area: progress;
	gap: 8px;
	min-width: 0;
}

.giving-row__figures {
	display: grid;
	gap: 2px;
	color: var(--c-ink-2);
	font-size: var(--fs-xs);
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
}

.giving-row__figures strong {
	color: var(--c-blue-950);
	font-weight: 600;
}

.giving-row__actions {
	grid-area: actions;
}

@media (min-width: 40em) {
	.giving-row {
		grid-template-columns: 64px minmax(0, 1fr) 180px;
		grid-template-areas:
			"thumb name progress"
			". actions actions";
		column-gap: 24px;
	}
}

/* From 1200px every row fits on one line. Below that the actions sit under the title, so long
   appeal titles keep a readable measure at 1024. */
@media (min-width: 75em) {
	/* One column grid shared by every row (subgrid): thumbnails, bars and each of the three actions
	   (donate, Give Zakat, Details) line up across rows, also where an appeal has no Zakat checkout. */
	.giving-table {
		display: grid;
		grid-template-columns: 64px minmax(0, 1fr) 180px repeat(3, auto);
		column-gap: 16px;
	}

	.giving-row {
		grid-column: 1 / -1;
		grid-template-columns: 64px minmax(0, 1fr) 180px repeat(3, auto);
		grid-template-columns: subgrid;
		grid-template-areas: "thumb name progress give zakat details";
		min-height: 100px;
	}

	.giving-row__name {
		padding-inline: 8px 16px;
	}

	.giving-row__actions {
		display: contents;
	}

	.giving-row__actions > .button--gold {
		grid-area: give;
		margin-inline-start: 16px;
	}

	.giving-row__actions > .button--outline {
		grid-area: zakat;
	}

	.giving-row__actions > .link-arrow {
		grid-area: details;
		justify-self: end;
	}
}

/* 3. For your records: the CORE section head and facts ledger, no page styles. */

/* 4. Zakat hero "Equation": the gold glow strengthened to .14 (A7) ---------- */
.hero--equation {
	background:
		radial-gradient(60rem 28rem at 100% -10%, rgb(255 212 0 / .14), transparent 60%),
		radial-gradient(56rem 32rem at -10% 0%, rgb(0 20 137 / .07), transparent 65%),
		var(--c-white);
	text-align: center;
}

.hero--equation .hero__title {
	margin-inline: auto;
}

.hero--equation .hero__lede {
	max-width: 46ch;
	margin-inline: auto;
}

/* 5. Where your Zakat can go ---------------------------------------------- */
.zakat-dests {
	display: grid;
	gap: var(--space-2xl);
	margin: 0;
	padding: 0;
	list-style: none;
}

.zakat-dest {
	display: grid;
	align-items: center;
	gap: 20px var(--grid-gap);
}

.zakat-dest__media {
	width: 100%;
	max-width: 560px;
}

.zakat-dest__body {
	display: grid;
	justify-items: start;
	gap: 12px;
	min-width: 0;
}

.zakat-dest__text {
	max-width: 34em;
	color: var(--c-ink-2);
}

.zakat-dest__actions {
	margin-top: 8px;
}

@media (min-width: 48em) {
	.zakat-dest {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	.zakat-dest__media {
		grid-column: 1 / span 5;
	}

	.zakat-dest__body {
		grid-column: 7 / -1;
	}
}

/* 6. Hadith band (styled like Home's guiding words: no rule, no star) ------- */
.zakat-hadith {
	margin: 0;
	text-align: center;
}

.zakat-hadith blockquote {
	margin: 0;
}

.zakat-hadith blockquote p {
	max-width: 30ch;
	margin-inline: auto;
	color: var(--c-blue-950);
	font: 500 clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem)/1.3 var(--ff-display);
	letter-spacing: -.015em;
	text-wrap: balance;
}

.zakat-hadith figcaption {
	margin-top: 16px;
	color: var(--c-ink-2);
	font-size: .9375rem;
}

/* 7. Accessibility modes ------------------------------------------------------ */
@media (forced-colors: active) {
	.giving-door {
		border: 1px solid CanvasText;
	}

	.giving-door__chip {
		border: 1px solid CanvasText;
	}
}