/**
 * Homepage + pattern section layouts.
 *
 * Loaded only on the front page and on singular content that uses the ALF
 * homepage patterns (see inc/assets.php). Everything here composes the
 * foundation files: fonts -> tokens -> base -> components -> layout -> home.
 *
 * Section markers (.alf-sec-<name>) are stable test/replacement hooks.
 */

/* ------------------------------------------------------ section shell -- */
.alf-sec {
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.alf-sec h2 {
	margin-top: 0;
	margin-bottom: var(--alf-space-4);
}

.alf-sec .alf-section-intro {
	margin-top: calc(-1 * var(--alf-space-2));
	margin-bottom: var(--alf-space-8);
	color: var(--alf-color-text-muted);
	max-width: var(--alf-measure);
}

.alf-sec .wp-block-image {
	margin-bottom: 0;
}

/* Background bands */
.alf-band--soft {
	background: var(--alf-green-50);
}

.alf-band--sand {
	background: var(--alf-sand-100);
}

.alf-band--green {
	background: var(--alf-green-800);
	color: rgba(255, 255, 255, 0.94);
}

.alf-band--green :is(h1, h2, h3, strong) {
	color: var(--alf-white);
}

.alf-band--green a {
	color: var(--alf-gold-100);
}

.alf-band--green a:hover,
.alf-band--green a:focus-visible {
	color: var(--alf-white);
}

.alf-band--green .alf-note {
	color: rgba(255, 255, 255, 0.82);
}

/* --------------------------------------------------------------- hero -- */
.alf-hero__grid {
	display: grid;
	gap: var(--alf-space-8);
	align-items: center;
}

@media (min-width: 1024px) {
	.alf-hero__grid {
		grid-template-columns: 1.05fr 0.95fr;
		gap: var(--alf-space-12);
	}
}

.alf-hero__title {
	margin: 0 0 var(--alf-space-4);
	font-size: clamp(1.85rem, 4.2vw, 2.9rem);
	line-height: var(--alf-leading-heading);
	color: var(--alf-color-heading);
}

.alf-hero__lead {
	font-size: var(--alf-text-lg);
}

.alf-cta-row {
	margin-top: var(--alf-space-8);
}

.alf-cta-row .wp-block-buttons {
	gap: var(--alf-space-3);
}

/* ------------------------------------------------- two-column layouts -- */
.alf-two-col {
	display: grid;
	gap: var(--alf-space-8);
	align-items: center;
}

@media (min-width: 1024px) {
	.alf-two-col {
		grid-template-columns: 1fr 1fr;
		gap: var(--alf-space-12);
	}

	.alf-two-col--reverse > :first-child {
		order: 2;
	}
}

/* --------------------------------------------------------- card grids -- */
.alf-cards-3,
.alf-cards-4 {
	display: grid;
	gap: var(--alf-space-6);
	margin: 0;
}

.alf-cards-3 {
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.alf-cards-4 {
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.alf-cards-3 > .wp-block-column,
.alf-cards-4 > .wp-block-column {
	margin: 0;
	min-width: 0;
}

.alf-card--media .wp-block-image {
	margin: 0 0 var(--alf-space-4);
}

.alf-card--media .wp-block-image img {
	border-radius: var(--alf-radius-md);
}

/* ------------------------------------------------------ process steps -- */
.alf-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--alf-space-6);
	counter-reset: alf-step;
}

@media (min-width: 1024px) {
	.alf-steps {
		grid-template-columns: repeat(2, 1fr);
	}
}

.alf-step {
	position: relative;
	padding-left: 3.75rem;
}

.alf-step::before {
	counter-increment: alf-step;
	content: counter(alf-step);
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0;
	width: 2.5rem;
	height: 2.5rem;
	display: grid;
	place-items: center;
	border-radius: var(--alf-radius-pill);
	background: var(--alf-color-primary);
	color: var(--alf-white);
	font-weight: var(--alf-weight-semibold);
}

.alf-step h3 {
	margin: var(--alf-space-1) 0 var(--alf-space-2);
	font-size: var(--alf-text-xl);
}

.alf-step p {
	margin: 0;
}

.alf-sec-process .wp-block-image {
	margin-top: var(--alf-space-10);
}

/* ------------------------------------------------------------ gallery -- */
.alf-gallery-grid {
	display: grid;
	gap: var(--alf-space-5);
	margin: 0;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.alf-gallery-grid > .wp-block-column {
	margin: 0;
	min-width: 0;
}

.alf-gallery-grid .wp-block-image {
	margin: 0;
}

/* -------------------------------------------------------------- worker -- */
.alf-sec-worker .alf-slot-img-013 {
	margin-top: var(--alf-space-8);
}

/* --------------------------------------------------------------- faq -- */
.alf-sec-faq .wp-block-details + .wp-block-details {
	margin-top: var(--alf-space-3);
}

/* ------------------------------------------------------- disclaimer -- */
.alf-sec-disclaimer {
	padding-block: clamp(2rem, 4vw, 3rem);
}

.alf-disclaimer__box {
	background: var(--alf-sand-100);
	border-inline-start: 5px solid var(--alf-gold-500);
	border-radius: var(--alf-radius-md);
	padding: var(--alf-space-6);
}

.alf-disclaimer__box p {
	margin: 0;
	color: var(--alf-ink-700);
	font-size: var(--alf-text-sm);
	line-height: var(--alf-leading-body);
}

/* ------------------------------------------------------------ misc ---- */
.alf-sec-mission .wp-block-columns,
.alf-sec-priorities .wp-block-columns,
.alf-sec-support .wp-block-columns {
	margin-bottom: 0;
}

.alf-sec-donate .alf-note {
	margin-top: var(--alf-space-3);
}

.alf-sec-updates .wp-block-latest-posts {
	margin-bottom: var(--alf-space-4);
}

@media (max-width: 767.98px) {
	.alf-hero__grid,
	.alf-two-col {
		gap: var(--alf-space-6);
	}

	.alf-step {
		padding-left: 3.25rem;
	}
}