/* ==========================================================================
   Home (HOME, build spec C1). Loaded on the front page only, after main.css and before motion.css.
   Selectors are scoped to .hero--home, .live-card and .home-* (F1); shared components keep their
   CORE styles and are only placed here.
   1. Hero "Stage"   2. Live appeal card   3. REF1   4. Programs band head
   5. Guiding words and values   6. Trust   7. Zakat   8. FAQ link   9. More ways
   10. Accessibility modes
   ========================================================================== */

/* 1. Hero "Stage" --------------------------------------------------------- */
/* Rows: copy | photo | live card | figures below 64em; from 64em the card sits beside the copy
   (columns 9–12) and overlaps the photo's top edge by 56px. */
.hero--home .hero__grid {
	row-gap: 28px;
}

.hero--home .hero__copy,
.hero--home .live-card,
.hero--home .hero__media,
.home-hero__stats {
	grid-column: 1 / -1;
	min-width: 0;
}

.hero--home .hero__copy {
	grid-row: 1;
}

.hero--home .hero__media {
	--ratio: 4 / 5;
	grid-row: 2;
}

.hero--home .live-card {
	grid-row: 3;
}

.home-hero__stats {
	grid-row: 4;
}

/* Display headline: two lines, 36 → 63px. */
.hero--home .hero__title {
	max-width: none;
	font-size: var(--fs-display);
	line-height: var(--lh-tight);
	letter-spacing: -.035em;
}

/* Each line box matches the font's glyph box (line-height: normal; Plus Jakarta Sans ≈ 1.253em), so
   the box and its glyphs share one top edge (the fold gate counts lines from them) and the gradient
   covers the descenders. The negative margins restore the 1.04 display rhythm (adjacent margins
   collapse, so the second line carries the whole difference). */
.hero--home .hero__line {
	display: block;
	width: fit-content;
	max-width: 100%;
	margin-block: -.1066em;
	line-height: normal;
}

.hero--home .hero__line + .hero__line {
	margin-top: -.2132em;
}

/* Below 30em the hero keeps "Donate now" and "Explore our work" on one row while they fit, so the
   whole 4:5 photo stays above the fold at 390px. */
@media (max-width: 29.99em) {
	.hero--home .hero__actions > .button {
		flex: 0 1 auto;
	}
}

@media (max-width: 63.99em) {
	.hero--home .live-card {
		justify-self: start;
		width: min(420px, 100% - 24px);
		margin: calc(-32px - 28px) 12px 0;
	}
}

@media (min-width: 40em) {
	.hero--home .hero__media {
		--ratio: 16 / 9;
	}
}

@media (min-width: 64em) {
	.hero--home .hero__copy {
		grid-column: 1 / span 7;
		grid-row: 1;
		align-self: end;
	}

	/* Bottom aligned beside the copy, 56px over the photo (the row gap is 28px). The negative top
	   margin lets a taller card rise into the hero's top spacing (staying 12px clear of the header)
	   instead of pushing the photo down. */
	.hero--home .live-card {
		grid-column: 9 / -1;
		grid-row: 1;
		align-self: end;
		justify-self: end;
		width: min(100%, 20rem);
		margin: calc(12px - var(--hero-top)) 0 calc(-56px - 28px);
	}

	.hero--home .hero__media {
		grid-row: 2;
	}

	.home-hero__stats {
		grid-row: 3;
	}
}

@media (min-width: 75em) {
	.hero--home .hero__media {
		--ratio: 21 / 9;
	}
}

/* 2. Live appeal card ----------------------------------------------------- */
/* The only card with a shadow (A4). */
.live-card {
	position: relative;
	z-index: 2;
	display: grid;
	align-content: start;
	padding: 12px;
	border-radius: var(--radius-m);
	background: var(--c-white);
	box-shadow: var(--shadow-float);
}

.live-card__body {
	display: grid;
	justify-items: start;
	padding: 12px 4px 2px;
}

.live-card__title {
	max-width: none;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.01em;
}

/* Two lines at most; the clamp sits on the link so its focus ring is never clipped. */
.live-card__title a {
	display: -webkit-box;
	overflow: hidden;
	color: var(--c-blue-950);
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease-out);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.live-card__title a:hover {
	color: var(--c-blue);
}

.live-card__region {
	margin-top: 2px;
	font-size: var(--fs-small);
	line-height: 1.4;
	color: var(--c-ink-3);
}

.live-card__body > .progress {
	width: 100%;
	margin-top: 12px;
}

.live-card__actions {
	gap: 4px 12px;
	margin-top: 10px;
}

/* 3. REF1: "Supporting our community, reaching those in need" -------------- */
.home-ref1__grid {
	row-gap: var(--space-xl);
	align-items: center;
}

.home-ref1__collage,
.home-ref1__copy {
	grid-column: 1 / -1;
	min-width: 0;
}

/* Collage: a wide top photo, then the gold tile beside a photo of the same height. */
.home-ref1__collage {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr);
	grid-auto-rows: auto 168px;
	gap: 12px;
	width: 100%;
	max-width: 720px;
}

.home-ref1__top {
	position: relative;
	grid-column: 1 / -1;
	min-width: 0;
}

/* 2:1 below 60em (not 16:10): a taller crop of the grocery photo would bring the DEKALB tablecloth
   into the frame. */
.home-ref1__top .media {
	--ratio: 2 / 1;
}

.home-ref1__tags {
	position: absolute;
	bottom: 16px;
	left: 16px;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	pointer-events: none;
}

/* The gold tile (A4, A7): static, no link and no hover. */
.home-ref1__tile {
	display: grid;
	align-content: space-between;
	gap: 8px;
	min-width: 0;
	padding: clamp(1rem, .8rem + .6vw, 1.4rem);
	border-radius: var(--radius-m);
	background: var(--grad-gold);
	color: var(--c-blue-950);
}

.home-ref1__icon {
	width: 22px;
	height: 22px;
	color: var(--c-blue-950);
}

.home-ref1__figure {
	display: grid;
	gap: 6px;
}

.home-ref1__value {
	font: 800 var(--fs-stat)/1 var(--ff-display);
	letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
}

.home-ref1__label {
	max-width: 16em;
	font-size: var(--fs-small);
	font-weight: 500;
	line-height: 1.35;
}

.home-ref1__photo {
	min-width: 0;
}

.home-ref1__photo .media {
	height: 100%;
}

/* One item in the bottom row (no tile figure, or no photo): it takes the full width. */
.home-ref1__collage--single > :is(.home-ref1__tile, .home-ref1__photo) {
	grid-column: 1 / -1;
}

.home-ref1__copy {
	display: grid;
	justify-items: start;
}

.home-ref1__title {
	max-width: 16em;
}

.home-ref1__text {
	max-width: 34em;
	margin-top: 16px;
	font-size: 1.0625rem;
	color: var(--c-ink-2);
}

.home-ref1__text > * + * {
	margin-top: .75em;
}

.home-ref1__link {
	margin-top: 10px;
}

@media (min-width: 60em) {
	.home-ref1__collage {
		grid-column: 1 / span 6;
		grid-auto-rows: auto clamp(10rem, 6rem + 8vw, 14rem);
		max-width: none;
	}

	.home-ref1__top .media {
		--ratio: 2.2 / 1;
	}

	.home-ref1__copy {
		grid-column: 7 / -1;
		padding-left: clamp(0rem, -2rem + 4vw, 3rem);
	}

	/* Two lines in the half-width column: slightly smaller between 60em and ~1250px only. */
	.home-ref1__title {
		font-size: min(var(--fs-h2), 3.2vw);
	}
}

/* 4. Programs band head (REF4, navy) -------------------------------------- */
.home-programs__head {
	row-gap: 20px;
	align-items: end;
	margin-bottom: var(--head-gap);
}

.home-programs__title,
.home-programs__aside {
	grid-column: 1 / -1;
	min-width: 0;
}

.home-programs__aside {
	display: grid;
	gap: 20px;
	justify-items: start;
}

@media (min-width: 56em) {
	.home-programs__title {
		grid-column: 1 / span 6;
	}

	.home-programs__aside {
		grid-column: 8 / -1;
	}
}

/* 5. Guiding words and the six values -------------------------------------- */
.home-words__quote {
	margin: 0;
	text-align: center;
}

.home-words__text {
	max-width: 30ch;
	margin: 0 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;
}

.home-words__text p::before {
	content: "\201C";
}

.home-words__text p::after {
	content: "\201D";
}

.home-words__cite {
	margin-top: 14px;
	font-size: .9375rem;
	line-height: 1.5;
	color: var(--c-ink-2);
}

.home-values {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	row-gap: 16px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.home-values__item {
	display: grid;
	align-content: start;
	justify-items: center;
	gap: 2px;
	min-width: 0;
	padding: 8px 8px 4px;
	border-left: 1px solid var(--c-line);
	text-align: center;
}

.home-values__item:nth-child(3n + 1) {
	border-left: 0;
}

.home-values__ar {
	font-size: 2rem;
	line-height: 1.35;
	color: var(--c-blue-950);
}

.home-values__name {
	margin-top: 4px;
	color: var(--c-blue-950);
	font: 600 .9375rem/1.3 var(--ff-sans);
}

.home-values__meaning {
	font-size: var(--fs-xs);
	line-height: 1.4;
	color: var(--c-ink-3);
}

.home-words__more {
	display: flex;
	justify-content: center;
	margin-top: 16px;
}

@media (min-width: 48em) {
	.home-values {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.home-values__item:nth-child(3n + 1) {
		border-left: 1px solid var(--c-line);
	}

	.home-values__item:first-child {
		border-left: 0;
	}
}

/* 6. Trust ----------------------------------------------------------------- */
.home-trust__intro,
.home-trust__ledger {
	grid-column: 1 / -1;
	min-width: 0;
}

.home-trust__intro {
	display: grid;
	align-content: start;
	justify-items: start;
	gap: 14px;
}

.home-trust__ledger {
	margin-top: var(--space-xl);
}

@media (min-width: 64em) {
	.home-trust__intro {
		grid-column: 1 / span 4;
	}

	.home-trust__ledger {
		grid-column: 6 / -1;
		margin-top: 0;
	}
}

/* 7. Zakat ----------------------------------------------------------------- */
.home-zakat__intro,
.home-zakat__tool {
	grid-column: 1 / -1;
	min-width: 0;
}

.home-zakat__intro {
	display: grid;
	align-content: start;
	justify-items: start;
	gap: 14px;
}

.home-zakat__tool {
	margin-top: var(--space-xl);
}

@media (min-width: 64em) {
	.home-zakat__intro {
		grid-column: 1 / span 5;
		align-self: center;
	}

	.home-zakat--solo .home-zakat__intro {
		grid-column: 1 / span 8;
	}

	.home-zakat__tool {
		grid-column: 7 / -1;
		margin-top: 0;
	}
}

/* 8. FAQ: the arrow link under the panel ----------------------------------- */
.home-faq__more {
	display: flex;
	justify-content: center;
	margin-top: 16px;
}

/* 9. More ways to stand with us -------------------------------------------- */
.home-ways__intro,
.home-ways__list {
	grid-column: 1 / -1;
	min-width: 0;
}

.home-ways__intro {
	display: grid;
	align-content: start;
	gap: 14px;
}

.home-ways__list {
	display: grid;
	gap: 28px var(--grid-gap);
	margin: var(--space-xl) 0 0;
	padding: 0;
	list-style: none;
}

/* Open columns: a hairline on top, no box. The title link covers the column; the arrows of a row
   line up at the bottom. */
.home-way {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	min-width: 0;
	padding-top: 20px;
	border-top: 1px solid var(--c-line);
}

.home-way__icon {
	width: 24px;
	height: 24px;
	color: var(--c-blue);
}

.home-way__title {
	max-width: none;
	font-size: 1.25rem;
	line-height: 1.3;
}

.home-way__link {
	color: var(--c-blue-950);
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease-out);
}

.home-way__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.home-way:hover .home-way__link {
	color: var(--c-blue);
}

.home-way__text {
	font-size: .9375rem;
	line-height: 1.55;
	color: var(--c-ink-2);
}

.home-way__arrow {
	width: 20px;
	height: 20px;
	margin-top: auto;
	color: var(--c-blue);
	transition: translate 200ms var(--ease-out);
}

.home-way:hover .home-way__arrow.icon--arrow-right {
	translate: 4px 0;
}

.home-way:hover .home-way__arrow.icon--arrow-up-right {
	translate: 2px -2px;
}

@media (min-width: 48em) {
	.home-ways__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 64em) {
	.home-ways__intro {
		grid-column: 1 / span 4;
	}

	.home-ways__list {
		grid-column: 6 / -1;
		margin-top: 0;
	}
}

/* 10. Accessibility modes -------------------------------------------------- */
@media (forced-colors: active) {
	.live-card,
	.home-ref1__tile {
		border: 1px solid CanvasText;
	}
}