/*
 * Feeding the Future (Hunger Action Center campaign) page. Enqueued only on
 * templates/template-feeding-the-future.html and scoped to its body class.
 * Uses existing brand tokens only.
 */

/* Navy hero: the campaign wordmark is white artwork on a transparent
 * background, so it needs the navy band to be visible. */
body.hcfb-feeding-the-future-experience .hcfb-ftf-hero {
	background: var(--wp--preset--color--hcfb-navy);
	color: var(--wp--preset--color--hcfb-surface);
	max-width: none;
	width: 100%;
	padding: var(--wp--preset--spacing--hcfb-xl, 4rem) var(--wp--preset--spacing--hcfb-sm, 1rem);
	text-align: center;
}

body.hcfb-feeding-the-future-experience .hcfb-ftf-hero > * {
	max-width: 42rem;
	margin-inline: auto;
}

body.hcfb-feeding-the-future-experience .hcfb-ftf-hero__wordmark img {
	width: min(100%, 30rem);
	height: auto;
	margin-inline: auto;
}

body.hcfb-feeding-the-future-experience .hcfb-ftf-hero__heading {
	color: var(--wp--preset--color--hcfb-surface);
	margin: 1.5rem auto 0.75rem;
}

body.hcfb-feeding-the-future-experience .hcfb-ftf-hero__intro {
	color: var(--wp--preset--color--hcfb-surface);
	max-width: 38rem;
}

/* Give buttons (hero on navy, support section on white). */
body.hcfb-feeding-the-future-experience .hcfb-ftf-give {
	margin-block: 1.5rem;
}

body.hcfb-feeding-the-future-experience .hcfb-ftf-give--hero {
	justify-content: center;
	margin-bottom: 0;
}

body.hcfb-feeding-the-future-experience .hcfb-ftf-give__button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	padding: 0.75rem 1.75rem;
	border-radius: 999px;
	background: var(--wp--preset--color--hcfb-orange);
	color: var(--wp--preset--color--hcfb-navy);
	font-weight: 700;
	text-decoration: none;
}

body.hcfb-feeding-the-future-experience .hcfb-ftf-give--hero .wp-block-button__link:hover,
body.hcfb-feeding-the-future-experience .hcfb-ftf-give--hero .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--hcfb-surface);
	color: var(--wp--preset--color--hcfb-navy);
}

body.hcfb-feeding-the-future-experience .hcfb-ftf-give--support .wp-block-button__link:hover,
body.hcfb-feeding-the-future-experience .hcfb-ftf-give--support .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--hcfb-navy);
	color: var(--wp--preset--color--hcfb-surface);
}

body.hcfb-feeding-the-future-experience .hcfb-ftf-give__button .wp-block-button__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--hcfb-orange);
	outline-offset: 3px;
}

/* Section rhythm and split layouts. */
body.hcfb-feeding-the-future-experience .hcfb-ftf-vision,
body.hcfb-feeding-the-future-experience .hcfb-ftf-need,
body.hcfb-feeding-the-future-experience .hcfb-ftf-features,
body.hcfb-feeding-the-future-experience .hcfb-ftf-progress,
body.hcfb-feeding-the-future-experience .hcfb-ftf-support {
	padding-block: var(--wp--preset--spacing--hcfb-xl, 4rem);
}

body.hcfb-feeding-the-future-experience .hcfb-ftf-split {
	align-items: center;
	gap: var(--wp--preset--spacing--hcfb-lg, 2.5rem);
}

body.hcfb-feeding-the-future-experience .hcfb-ftf-split .wp-block-image img {
	width: 100%;
	height: auto;
	border-radius: 0.75rem;
}

body.hcfb-feeding-the-future-experience .hcfb-ftf-features {
	background: var(--wp--preset--color--hcfb-cream, #faf5ec);
	max-width: none;
	width: 100%;
}

/* Cards: three "need" cards and seven feature cards. */
body.hcfb-feeding-the-future-experience .hcfb-ftf-cards {
	gap: 1.5rem;
}



body.hcfb-feeding-the-future-experience .hcfb-ftf-card {
	background: var(--wp--preset--color--hcfb-surface);
	border-radius: 0.75rem;
	padding: 1.5rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

body.hcfb-feeding-the-future-experience .hcfb-ftf-card h3 {
	color: var(--wp--preset--color--hcfb-navy);
	margin-top: 0;
}


@media (max-width: 781px) {
	body.hcfb-feeding-the-future-experience .hcfb-ftf-hero {
		padding-block: var(--wp--preset--spacing--hcfb-lg, 2.5rem);
	}
}

/* ------------------------------------------------------------------ */
/* Refinement (2026-10-02): wider measure, balanced splits and cards.   */
/* ------------------------------------------------------------------ */

/* WordPress's constrained layout caps children at the narrow content
 * size; give this page's split and card layouts a wider measure while
 * headings and intro copy stay readable. */
body.hcfb-feeding-the-future-experience .hcfb-ftf-vision > *,
body.hcfb-feeding-the-future-experience .hcfb-ftf-need > *,
body.hcfb-feeding-the-future-experience .hcfb-ftf-features > *,
body.hcfb-feeding-the-future-experience .hcfb-ftf-progress > * {
	max-width: 72rem;
	margin-inline: auto;
}

body.hcfb-feeding-the-future-experience .hcfb-ftf-need > p,
body.hcfb-feeding-the-future-experience .hcfb-ftf-need > h2,
body.hcfb-feeding-the-future-experience .hcfb-ftf-features > p,
body.hcfb-feeding-the-future-experience .hcfb-ftf-features > h2 {
	text-align: center;
}

body.hcfb-feeding-the-future-experience .hcfb-ftf-features > p:not(.hcfb-prominent-eyebrow) {
	max-width: 46rem;
}

/* Vision: tighter rhythm; the photo fills its column instead of leaving a
 * tall empty gap beside the copy. */
body.hcfb-feeding-the-future-experience .hcfb-ftf-vision,
body.hcfb-feeding-the-future-experience .hcfb-ftf-progress {
	padding-block: var(--wp--preset--spacing--hcfb-lg, 2.5rem);
}

body.hcfb-feeding-the-future-experience .hcfb-ftf-split {
	align-items: stretch !important;
	margin-block: 0;
}

body.hcfb-feeding-the-future-experience .hcfb-ftf-split > .wp-block-column {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

body.hcfb-feeding-the-future-experience .hcfb-ftf-split .wp-block-image {
	margin: 0;
	height: 100%;
}

body.hcfb-feeding-the-future-experience .hcfb-ftf-split .wp-block-image img {
	height: 100%;
	min-height: 18rem;
	object-fit: cover;
}

body.hcfb-feeding-the-future-experience .hcfb-ftf-vision h2,
body.hcfb-feeding-the-future-experience .hcfb-ftf-progress h2 {
	margin-top: 0.25rem;
}

/* Need: approved neighbor photo beside three stacked cards. Crop keeps the
 * neighbor's face and both grocery bags in frame (subject sits slightly
 * right of center in the original 3:2 frame). */
body.hcfb-feeding-the-future-experience .hcfb-ftf-need__photo img {
	aspect-ratio: 4 / 3;
	object-position: 54% 35%;
}

body.hcfb-feeding-the-future-experience .hcfb-ftf-need__cards {
	gap: 1rem;
}

body.hcfb-feeding-the-future-experience .hcfb-ftf-need__cards > .hcfb-ftf-card {
	margin: 0;
	max-width: none;
}

body.hcfb-feeding-the-future-experience .hcfb-ftf-card p {
	margin-bottom: 0;
}

/* Seven feature cards: 4 + 3 centered on desktop, 2-up on tablet,
 * single column on phones; equal-height cards within each row. */
body.hcfb-feeding-the-future-experience .hcfb-ftf-feature-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 1.25rem;
}

body.hcfb-feeding-the-future-experience .hcfb-ftf-feature-grid > .hcfb-ftf-card {
	flex: 0 1 calc((100% - 3 * 1.25rem) / 4);
	margin: 0;
	max-width: none;
	box-sizing: border-box;
}

@media (max-width: 1099px) {
	body.hcfb-feeding-the-future-experience .hcfb-ftf-feature-grid > .hcfb-ftf-card {
		flex-basis: calc((100% - 1.25rem) / 2);
	}
}

@media (max-width: 781px) {
	/* Side gutter so photos and cards never touch the screen edge. */
	body.hcfb-feeding-the-future-experience .hcfb-ftf-vision,
	body.hcfb-feeding-the-future-experience .hcfb-ftf-need,
	body.hcfb-feeding-the-future-experience .hcfb-ftf-features,
	body.hcfb-feeding-the-future-experience .hcfb-ftf-progress,
	body.hcfb-feeding-the-future-experience .hcfb-ftf-support {
		padding-inline: var(--wp--preset--spacing--hcfb-sm, 1rem);
		box-sizing: border-box;
	}
	body.hcfb-feeding-the-future-experience .hcfb-ftf-split .wp-block-image img {
		min-height: 0;
		aspect-ratio: 4 / 3;
	}
}

@media (max-width: 599px) {
	body.hcfb-feeding-the-future-experience .hcfb-ftf-feature-grid > .hcfb-ftf-card {
		flex-basis: 100%;
	}
}