/*
 * Reusable "prominent page" visual primitives.
 *
 * Originally extracted from the validated Partner With Us layout
 * (assets/css/partner-experience.css). Prominent-system consolidation pass:
 * About/Impact (assets/css/about-impact-experience.css) went on to become
 * the more mature reference for full-bleed page-shell behavior -- true
 * viewport-width section backgrounds, zero accidental Gutenberg blockGap
 * seams, clean header/footer transitions -- while Partner With Us predated
 * those refinements. This pass promotes that page-shell geometry, the
 * canonical wide inner measure, and a shared accessible eyebrow treatment
 * into this file, keyed on the single shared `hcfb-prominent-experience`
 * body class (functions.php's `hcfb_is_prominent_page_template()`, added
 * alongside each page's own existing body class, never instead of it) --
 * see the "PROMINENT PAGE CONTEXT" section below.
 *
 * About's and Partner's own stylesheets already ship real, live, DATABASE-
 * STORED page content (the block patterns in inc/about-impact-sections.php
 * and inc/partner-experience-sections.php only run once, at insertion time,
 * then freeze into that stored content -- see those files' own docblocks).
 * Editing their markup/class names now would require also editing already-
 * published post_content, which this packet's own instructions rule out
 * ("do not modify production data"). So this consolidation is CSS-only:
 * the geometry constants below are declared exactly once, against a
 * selector list that includes both the new canonical class (for future
 * patterns/pages) AND every already-live About/Partner class name that
 * needs the identical values -- not a markup rename. About's and Partner's
 * own stylesheets have had their now-superseded copies of these same rules
 * removed; what remains there is genuine page identity (bespoke section
 * shapes, colors, icons, interactions).
 *
 * Nothing here is scoped to a body-class gate the way partner-experience.css
 * is -- these classes are meant to be usable on any future template without
 * extra wiring, so they are enqueued unconditionally (functions.php, same
 * technique as public-shell.css) and namespaced (hcfb-prominent-*,
 * hcfb-editorial-*, hcfb-feature-media) instead. See
 * patterns/prominent-*-placeholder.php and patterns/feature-media-*-
 * placeholder.php for the starter patterns that use these classes, and
 * docs/PROMINENT_PAGE_COMPONENTS.md for intended future use per component.
 *
 * Every rule reuses existing theme.json tokens (--wp--preset--* colors,
 * spacing, font-sizes) and the same shared --hcfb-home-wide container
 * measure public-shell.css and partner-experience.css already both use --
 * this is not a second, competing width/token system.
 */

/* ------------------------------------------------------------------ */
/* PROMINENT PAGE CONTEXT -- shared page-shell release                  */
/*                                                                       */
/* Keyed on body.hcfb-prominent-experience (added alongside each page's */
/* own body class by functions.php's hcfb_is_prominent_page_template()  */
/* gate) so every current and future prominent page gets the same        */
/* full-bleed shell release once, instead of each page's own stylesheet  */
/* re-deriving and re-fixing it independently.                          */
/*                                                                       */
/* Every rule here was proven necessary on About/Impact, one visual-     */
/* refinement pass at a time (see the git history of assets/css/about-   */
/* impact-experience.css for the full "measured, not guessed" record of */
/* each leak) -- reproduced here verbatim, just re-scoped to the shared  */
/* class instead of body.hcfb-about-impact-experience:                  */
/*                                                                       */
/*  1. #hcfb-primary-content: public-shell.css's own                    */
/*     `body.hcfb-public-shell:not(.home) #hcfb-primary-content` rule    */
/*     is two classes + one id (0,2,1) versus a naive one-class release  */
/*     (0,1,1) -- the naive release LOSES regardless of source order.    */
/*     Matching that same two-class shape here (`.hcfb-public-shell`     */
/*     already unconditional, `.hcfb-prominent-experience` from this     */
/*     pass) ties specificity, and this file's later enqueue order       */
/*     (functions.php: hcfb-prominent-sections depends on                */
/*     hcfb-public-shell) then correctly wins the tie. padding-inline is */
/*     a DIFFERENT property than max-width/width, so it needs its own    */
/*     explicit reset too -- zeroing it does not lose content alignment, */
/*     since every section's own inner container below re-applies its   */
/*     own padding-inline independently.                                */
/*  2. .wp-block-post-content: carries no align="wide"/"full" of its own */
/*     on either template, so core's layout support caps it at           */
/*     theme.json's contentSize (720px) as a literal `width`, not just   */
/*     `max-width` -- a child can never exceed a definite-width parent,  */
/*     so #1 alone is not sufficient.                                    */
/*  3. `.wp-block-post-content > *`: WordPress core's own global-styles  */
/*     blockGap rule (`:root :where(.is-layout-flow) > *`) applies a     */
/*     margin-block-start to every direct child -- on a page with no     */
/*     visible element occupying that space above the first section      */
/*     (About removed its breadcrumb strip; Partner's is removed in this */
/*     same pass -- see templates/template-partner-with-us.html), that   */
/*     margin becomes a visible seam of body background between the      */
/*     header and the first full-bleed band, and between every other     */
/*     pair of adjacent full-bleed sections.                             */
/*  4. footer.wp-block-template-part: inherits that same core blockGap   */
/*     margin as the third child of .wp-site-blocks (header, main,       */
/*     footer), leaving a visible seam between the last full-bleed band  */
/*     and the footer.                                                   */
/* ------------------------------------------------------------------ */

body.hcfb-public-shell.hcfb-prominent-experience #hcfb-primary-content {
	max-width: none;
	width: 100%;
	padding-inline: 0;
	margin-block-start: 0;
	overflow-x: clip;
}

@media (max-width: 768px) {
	body.hcfb-public-shell.hcfb-prominent-experience #hcfb-primary-content {
		padding-inline: 0;
	}
}

@media (max-width: 480px) {
	body.hcfb-public-shell.hcfb-prominent-experience #hcfb-primary-content {
		padding-inline: 0;
	}
}

body.hcfb-public-shell.hcfb-prominent-experience #hcfb-primary-content .wp-block-post-content {
	max-width: none;
	width: 100%;
}

body.hcfb-public-shell.hcfb-prominent-experience #hcfb-primary-content .wp-block-post-content > * {
	margin-block-start: 0;
}

body.hcfb-public-shell.hcfb-prominent-experience footer.wp-block-template-part {
	margin-block-start: 0;
}

/* ------------------------------------------------------------------ */
/* Section full-bleed geometry -- every top-level section on a          */
/* prominent page (the shared components below, plus About's and        */
/* Partner's own bespoke section classes) needs the identical release   */
/* from theme.json's narrower default content width. Declared once      */
/* here, scoped to the shared context class, rather than each page's    */
/* own stylesheet repeating `max-width: none; width: 100%; padding:     */
/* var(--hcfb-xl) 0` under its own body class. Colors/backgrounds stay   */
/* page-specific (declared per component below, or in each page's own   */
/* stylesheet for its bespoke sections) -- this rule is geometry only.  */
/* Partner's own stylesheet still overrides padding on the two sections */
/* that deliberately deviate from the xl default (status notice,        */
/* readiness) -- that override is page rhythm, not shared geometry, and */
/* loads after this file so it still wins.                              */
/* ------------------------------------------------------------------ */

body.hcfb-prominent-experience .hcfb-prominent-hero,
body.hcfb-prominent-experience .hcfb-prominent-band,
body.hcfb-prominent-experience .hcfb-editorial-grid-section,
body.hcfb-prominent-experience .hcfb-prominent-cta,
body.hcfb-prominent-experience .hcfb-strategic-cta,
body.hcfb-prominent-experience .hcfb-feature-media,
body.hcfb-prominent-experience .hcfb-about-who-we-are,
body.hcfb-prominent-experience .hcfb-about-neighbors,
body.hcfb-prominent-experience .hcfb-about-region,
body.hcfb-prominent-experience .hcfb-about-history,
body.hcfb-prominent-experience .hcfb-partner-hero,
body.hcfb-prominent-experience .hcfb-partner-status,
body.hcfb-prominent-experience .hcfb-partner-priority,
body.hcfb-prominent-experience .hcfb-partner-impact,
body.hcfb-prominent-experience .hcfb-partner-readiness,
body.hcfb-prominent-experience .hcfb-partner-process,
body.hcfb-prominent-experience .hcfb-partner-pathways,
body.hcfb-prominent-experience .hcfb-partner-network-cta {
	max-width: none;
	width: 100%;
	padding: var(--wp--preset--spacing--hcfb-xl) 0;
}

.hcfb-prominent-hero,
.hcfb-prominent-hero *,
.hcfb-prominent-band,
.hcfb-prominent-band *,
.hcfb-editorial-grid-section,
.hcfb-editorial-grid-section *,
.hcfb-prominent-cta,
.hcfb-prominent-cta *,
.hcfb-strategic-cta,
.hcfb-strategic-cta *,
.hcfb-feature-media,
.hcfb-feature-media * {
	box-sizing: border-box;
}

/* ------------------------------------------------------------------ */
/* Canonical inner container -- ONE wide, centered, responsively-padded */
/* measure for every prominent page's section content. `.hcfb-prominent-*/
/* inner` is the real, namespaced class a future page/pattern should use */
/* directly. The remaining selectors are About's and Partner's own,     */
/* already-live inner-wrapper class names (patterns/*.php render this   */
/* exact class today; the pages built from them are already published — */
/* see this file's own top comment for why the ALIAS is added here      */
/* rather than the markup renamed) -- every one of them previously      */
/* redeclared these identical four lines under its own page stylesheet. */
/* Do not hard-code a different width for a new prominent page without  */
/* documenting why here first.                                          */
/* ------------------------------------------------------------------ */

.hcfb-prominent-inner,
.hcfb-prominent-hero__inner,
.hcfb-prominent-band__inner,
.hcfb-editorial-grid-section__inner,
.hcfb-feature-media__inner,
.hcfb-strategic-cta__inner,
.hcfb-about-who-we-are__inner,
.hcfb-about-neighbors__inner,
.hcfb-about-region__inner,
.hcfb-about-history__inner,
.hcfb-partner-hero__grid,
.hcfb-partner-status__notice,
.hcfb-partner-priority__intro,
.hcfb-partner-priority__tabs,
.hcfb-partner-priority__panels,
.hcfb-partner-impact__inner,
.hcfb-partner-readiness__inner,
.hcfb-partner-process__inner,
.hcfb-partner-pathways__inner {
	max-width: var(--hcfb-home-wide, 82rem);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--hcfb-lg, 2.5rem);
}

/* Narrower centered measure for a closing CTA's own text column -- kept */
/* separate from the wide measure above. .hcfb-partner-network-cta__inner */
/* still shares the same responsive padding-inline steps below (it is    */
/* listed in both media-query blocks), just not this wide max-width. */
.hcfb-prominent-cta__inner,
.hcfb-partner-network-cta__inner {
	max-width: 42rem;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--hcfb-lg, 2.5rem);
}

@media (max-width: 768px) {
	.hcfb-prominent-inner,
	.hcfb-prominent-hero__inner,
	.hcfb-prominent-band__inner,
	.hcfb-editorial-grid-section__inner,
	.hcfb-feature-media__inner,
	.hcfb-strategic-cta__inner,
	.hcfb-prominent-cta__inner,
	.hcfb-about-who-we-are__inner,
	.hcfb-about-neighbors__inner,
	.hcfb-about-region__inner,
	.hcfb-about-history__inner,
	.hcfb-partner-hero__grid,
	.hcfb-partner-status__notice,
	.hcfb-partner-priority__intro,
	.hcfb-partner-priority__tabs,
	.hcfb-partner-priority__panels,
	.hcfb-partner-impact__inner,
	.hcfb-partner-readiness__inner,
	.hcfb-partner-process__inner,
	.hcfb-partner-pathways__inner,
	.hcfb-partner-network-cta__inner {
		padding-inline: var(--wp--preset--spacing--hcfb-md, 1.5rem);
	}
}

@media (max-width: 480px) {
	.hcfb-prominent-inner,
	.hcfb-prominent-hero__inner,
	.hcfb-prominent-band__inner,
	.hcfb-editorial-grid-section__inner,
	.hcfb-feature-media__inner,
	.hcfb-strategic-cta__inner,
	.hcfb-prominent-cta__inner,
	.hcfb-about-who-we-are__inner,
	.hcfb-about-neighbors__inner,
	.hcfb-about-region__inner,
	.hcfb-about-history__inner,
	.hcfb-partner-hero__grid,
	.hcfb-partner-status__notice,
	.hcfb-partner-priority__intro,
	.hcfb-partner-priority__tabs,
	.hcfb-partner-priority__panels,
	.hcfb-partner-impact__inner,
	.hcfb-partner-readiness__inner,
	.hcfb-partner-process__inner,
	.hcfb-partner-pathways__inner,
	.hcfb-partner-network-cta__inner {
		padding-inline: var(--wp--preset--spacing--hcfb-sm, 1rem);
	}
}

/* ------------------------------------------------------------------ */
/* A. Prominent split hero                                             */
/* ------------------------------------------------------------------ */

.hcfb-prominent-hero {
	background: var(--wp--preset--color--hcfb-cream);
	padding: var(--wp--preset--spacing--hcfb-xl) 0;
}

.hcfb-prominent-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: var(--wp--preset--spacing--hcfb-lg, 2.5rem);
	padding-block: var(--wp--preset--spacing--hcfb-lg);
}

/*
 * Launch-critical placeholder cleanup (2026-09-29, Ryan-directed):
 * generalizes the exact `:has()` collapse technique
 * assets/css/about-impact-experience.css already proved for this same
 * component, scoped there to the About page's own body class -- moved
 * here so every page using the ORDINARY (non-`--compact`) hero (Our
 * Impact, Reports & Financials, Partner With Us) gets the same clean
 * single-column collapse the moment its own `.hcfb-prominent-hero__media`
 * block is removed, with no per-page CSS needed. Harmless on About
 * itself (both rules compute the same result). Explicitly excludes
 * `.hcfb-prominent-hero--compact` (Give/Ways to Give's own banner
 * variant): that variant already had zero media and its own
 * already-correct, more specific 760-840px centered-column styling
 * (`.hcfb-prominent-hero--compact .hcfb-prominent-hero__text`,
 * 2026-09-19) well before this pass -- an earlier, unscoped version of
 * this rule incorrectly clobbered it (caught by
 * tests/browser/ways-to-give.spec.ts's own pre-existing width
 * assertion) since `--compact` sections also match
 * `:not(:has(.hcfb-prominent-hero__media))`.
 */
@supports selector(:has(*)) {
	.hcfb-prominent-hero:not(.hcfb-prominent-hero--compact) .hcfb-prominent-hero__grid:not(:has(.hcfb-prominent-hero__media)) {
		grid-template-columns: minmax(0, 1fr);
		max-width: 44rem;
		margin-inline: auto;
		text-align: center;
	}
	/*
	 * Real bug found 2026-09-30 (Ryan-directed, reported on Partner With
	 * Us): this rule already centered `.hcfb-prominent-hero__intro`'s own
	 * shrunken box (it has its own `max-width: 34rem`), but never did the
	 * same for `.hcfb-prominent-hero__heading` (its own `max-width: 21ch`,
	 * shared/base rule below) -- text-align: center on the grid centers
	 * each element's TEXT within its own box, but a box narrower than its
	 * centered parent still needs its own margin-inline: auto to keep
	 * that box itself centered, not flush against the parent's left edge.
	 * Confirmed via direct measurement: the heading's box shared the
	 * grid's own left edge exactly, while intro's already matched center.
	 */
	.hcfb-prominent-hero:not(.hcfb-prominent-hero--compact) .hcfb-prominent-hero__grid:not(:has(.hcfb-prominent-hero__media)) .hcfb-prominent-hero__heading,
	.hcfb-prominent-hero:not(.hcfb-prominent-hero--compact) .hcfb-prominent-hero__grid:not(:has(.hcfb-prominent-hero__media)) .hcfb-prominent-hero__intro {
		margin-inline: auto;
	}
	.hcfb-prominent-hero:not(.hcfb-prominent-hero--compact) .hcfb-prominent-hero__grid:not(:has(.hcfb-prominent-hero__media)) .hcfb-prominent-hero__actions {
		justify-content: center;
	}
}

/*
 * Shared prominent-page eyebrow -- approved direction: Montserrat
 * (inherited body/heading font stack, not redeclared here), uppercase and
 * tracked, HCFB green, text-only (no navy filled pill), visually
 * subordinate to the heading it introduces (font-size--small, well below
 * any heading size on the page). A variant/class, not a global change to
 * every eyebrow site-wide -- other templates' eyebrow-like labels are
 * untouched.
 *
 * Uses `hcfb-green-text`, NOT the literal brand `hcfb-green`: the brand
 * value measures 2.05:1 on white / 1.89:1 on cream (docs/COLOR_USAGE_RULES.md),
 * failing WCAG even at this treatment's bold-14px size (which does not
 * qualify as "large text" -- that threshold is 18.66px bold). hcfb-green-text
 * is a derived, same-hue variant tuned to clear 4.5:1 on both surfaces
 * (5.19:1 white / 4.78:1 cream) -- see that file for the full rationale.
 *
 * `.hcfb-prominent-eyebrow` is the canonical class for a future page/
 * pattern. The remaining selectors are this same treatment applied,
 * without any wording/markup change, to every already-live eyebrow
 * instance that previously had its own, inconsistent (and in Partner's
 * case, still-uncorrected-for-contrast) treatment: the shared hero/
 * feature-media eyebrows below, About's own Who We Are / Neighbors We
 * Serve eyebrows (about-impact-experience.css previously fixed contrast
 * here with a navy pill -- a heavier treatment than this pass's approved
 * text-only direction, so that pill rule is removed there in this same
 * pass), and Partner's hero eyebrow (partner-experience.css previously
 * left this at the same failing orange-on-cream as About's own
 * pre-fix state -- its own docblock flagged this as needing "its own
 * separate, dedicated accessibility fix," which this shared treatment now
 * provides).
 */
.hcfb-prominent-eyebrow,
.hcfb-prominent-hero__eyebrow,
body.hcfb-about-impact-experience .hcfb-about-who-we-are__eyebrow,
body.hcfb-about-impact-experience .hcfb-about-neighbors__eyebrow,
body.hcfb-partner-experience .hcfb-partner-hero__eyebrow {
	display: block;
	color: var(--wp--preset--color--hcfb-green-text, #627425);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	margin: 0 0 1rem;
}

/* Same restrained clamp validated on the Partner With Us hero (staff
 * review, second pass): ~40-42px desktop ceiling, ch-based column width
 * so a sentence-length draft headline wraps to a balanced few lines
 * rather than a single overpowering line or 7-8 short ones. */
.hcfb-prominent-hero__heading {
	color: var(--wp--preset--color--hcfb-navy);
	font-size: clamp(2rem, 1.45rem + 1.7vw, 2.625rem);
	line-height: 1.22;
	max-width: 21ch;
	margin: 0 0 1.25rem;
}

.hcfb-prominent-hero__intro {
	color: var(--wp--preset--color--hcfb-text);
	max-width: 34rem;
	margin: 0 0 1.5rem;
}

.hcfb-prominent-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.hcfb-prominent-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border-radius: 999px;
	padding: 0.75rem 1.5rem;
	font-weight: 700;
	text-decoration: none;
}

/* Navy text on orange (5.70:1) — never white on orange (2.39:1, fails). */
.hcfb-prominent-hero__cta--primary {
	background: var(--wp--preset--color--hcfb-orange);
	color: var(--wp--preset--color--hcfb-navy);
}

.hcfb-prominent-hero__cta--primary:hover,
.hcfb-prominent-hero__cta--primary:focus-visible {
	background: var(--wp--preset--color--hcfb-navy);
	color: var(--wp--preset--color--hcfb-surface);
}

.hcfb-prominent-hero__cta--secondary {
	background: transparent;
	color: var(--wp--preset--color--hcfb-navy);
	border: 2px solid var(--wp--preset--color--hcfb-navy);
}

.hcfb-prominent-hero__cta--secondary:hover,
.hcfb-prominent-hero__cta--secondary:focus-visible {
	background: var(--wp--preset--color--hcfb-navy);
	color: var(--wp--preset--color--hcfb-surface);
}

.hcfb-prominent-hero__media {
	position: relative;
}

/*
 * Same validated 3-layer editorial-placeholder technique as the Partner
 * With Us hero (partner-experience.css): a muted navy offset accent
 * (::after, z-index 0), an orange offset frame (::before, z-index 1)
 * unchanged in prominence, and the real, editable placeholder surface on
 * top (z-index 2) so its label text stays real, accessible content. The
 * media-frame wrapper contains only the image, never the caption, so
 * caption length never distorts the aspect ratio or the accents'
 * percentage-based offsets -- see partner-experience.css's own comments
 * for the full "why," not repeated here.
 */
.hcfb-prominent-hero__media-frame {
	position: relative;
	z-index: 0;
}

.hcfb-prominent-hero__media-frame::after {
	content: "";
	position: absolute;
	z-index: 0;
	top: 3%;
	left: 3%;
	right: -3%;
	bottom: -3%;
	background: var(--wp--preset--color--hcfb-navy);
	opacity: 0.8;
	border-radius: 16px;
	transform: rotate(1.5deg);
}

.hcfb-prominent-hero__media-frame::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: -4%;
	left: -4%;
	right: 4%;
	bottom: 0;
	background: var(--wp--preset--color--hcfb-orange);
	border-radius: 16px;
	transform: rotate(-2deg);
}

.hcfb-prominent-hero__media-placeholder {
	position: relative;
	z-index: 2;
	width: 100%;
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 1.5rem;
	border-radius: 14px;
	background: var(--wp--preset--color--hcfb-cream);
	border: 1px dashed var(--wp--preset--color--hcfb-border);
}

.hcfb-prominent-hero__media-label {
	margin: 0;
	max-width: 20ch;
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--wp--preset--color--hcfb-text-muted);
}

.hcfb-prominent-hero__media-label-detail {
	display: block;
	margin-top: 0.35rem;
	font-weight: 400;
	font-size: 0.8125rem;
}

/*
 * Real image, filling the placeholder's own `aspect-ratio: 4/3` box
 * (above). Absolutely positioned -- not sized via flex/aspect-ratio of
 * its own -- so a portrait-orientation source photo (e.g. Give Food's
 * approved `help-give-food-car-delivery.webp`, 1366x1686) can never feed
 * its own intrinsic ratio back into the flex parent's auto block-size
 * calculation. Confirmed via direct measurement that letting the img
 * carry its own `aspect-ratio: 4/3` while parent is `display: flex`
 * makes WebKit compute a taller-than-4:3 parent box for a portrait
 * source (596x497 measured, ratio 1.20) while Chromium/Firefox compute
 * the correct 596x447 (ratio 1.33) -- a real cross-engine layout
 * discrepancy, not flakiness, caught by give-food.spec.ts's WebKit run.
 */
.hcfb-prominent-hero__media-placeholder img {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 14px;
}

.hcfb-prominent-hero__media-caption {
	position: relative;
	z-index: 2;
	margin-top: 1.5rem;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--hcfb-text-muted);
}

@media (max-width: 900px) {
	.hcfb-prominent-hero__grid {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------ */
/* B. Full-width impact / proof band                                   */
/* ------------------------------------------------------------------ */

.hcfb-prominent-band {
	background: var(--wp--preset--color--hcfb-navy);
	color: var(--wp--preset--color--hcfb-surface);
	padding: var(--wp--preset--spacing--hcfb-xl) 0;
}

.hcfb-prominent-band__heading {
	color: var(--wp--preset--color--hcfb-surface);
	margin: 0 0 0.75rem;
}

.hcfb-prominent-band__note {
	color: var(--wp--preset--color--hcfb-surface);
	opacity: 0.85;
	max-width: 46rem;
	margin: 0 0 1.5rem;
}

/*
 * --hcfb-band-metric-count is set inline per pattern instance (e.g.
 * style="--hcfb-band-metric-count: 2") so 2-4 metrics/proof points all
 * share one grid rule instead of separate 2-up/3-up/4-up variants.
 */
.hcfb-prominent-band__grid {
	display: grid;
	grid-template-columns: repeat(var(--hcfb-band-metric-count, 3), minmax(0, 1fr));
	gap: 1.5rem;
	margin-bottom: 1rem;
}

.hcfb-prominent-band__metric {
	text-align: center;
}

.hcfb-prominent-band__value {
	/* Green large numbers only ever sit on the navy band, never directly
	 * on white/cream (docs/COLOR_USAGE_RULES.md — green on white measures
	 * 2.05:1, fails). */
	color: var(--wp--preset--color--hcfb-green);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 800;
	margin: 0 0 0.35rem;
}

.hcfb-prominent-band__label {
	color: var(--wp--preset--color--hcfb-surface);
	margin: 0;
}

/*
 * Generalized here (2026-09-15, HCFB Impact Metrics block packet) from
 * what was previously only a Programs-page-scoped fix
 * (`body.hcfb-programs-experience .hcfb-programs-impact-band
 * .hcfb-prominent-band__icon`, assets/css/programs-experience.css) for
 * the same root cause that rule's own docblock already diagnosed:
 * `.hcfb-prominent-band__icon` had NO shared, unscoped rule anywhere in
 * this theme, so `hcfb_about_impact_metric_icons()`'s 'pounds' glyph
 * (the only sibling icon with no explicit width/height attribute of its
 * own) fell back to the browser's default replaced-element SVG size
 * (300x150 CSS px) -- roughly 9-10x larger by area than every other
 * band icon -- on any consumer without its own page-scoped patch. The
 * new [hcfb/impact-metrics] block's "band" variant is meant to work
 * correctly on ANY page out of the box, so this fix belongs at the
 * shared-component level, not repeated per-page. About's and Our
 * Impact's own existing page-scoped copies of this same fix
 * (`.hcfb-about-impact-experience`/`.hcfb-our-impact-experience`) are
 * left exactly as they are -- redundant with this rule now, but
 * identical in value, so harmless, and out of this pass's scope to
 * remove.
 */
.hcfb-prominent-band__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0 auto 0.625rem;
}

.hcfb-prominent-band__icon svg,
.hcfb-prominent-band__icon img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
}

.hcfb-prominent-band__icon svg {
	color: var(--wp--preset--color--hcfb-orange);
}

@media (max-width: 480px) {
	.hcfb-prominent-band__icon {
		width: 2.25rem;
		height: 2.25rem;
	}
}

@media (forced-colors: active) {
	.hcfb-prominent-band__icon svg {
		color: CanvasText;
		forced-color-adjust: auto;
	}
}

/* Same generalization as `.hcfb-prominent-band__icon` above -- the
   county-name detail line under "5 Counties" ("Charlotte, Collier,
   Glades, Hendry & Lee") previously only had page-scoped copies. */
.hcfb-prominent-band__label-detail {
	display: block;
	font-size: 0.8em;
	font-weight: 400;
	opacity: 0.85;
	margin-top: 0.2em;
}

.hcfb-prominent-band__period {
	color: var(--wp--preset--color--hcfb-surface);
	opacity: 0.75;
	font-size: 0.875rem;
	margin: 0;
}

@media (max-width: 768px) {
	.hcfb-prominent-band__grid {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------ */
/* C. Editorial process / pathway grid (flexible 3-6 cards)            */
/* ------------------------------------------------------------------ */

.hcfb-editorial-grid-section {
	background: var(--wp--preset--color--hcfb-surface);
	padding: var(--wp--preset--spacing--hcfb-xl) 0;
}

.hcfb-editorial-grid-section__heading {
	color: var(--wp--preset--color--hcfb-navy);
	margin: 0 0 0.5rem;
}

.hcfb-editorial-grid-section__intro {
	max-width: 46rem;
	margin: 0 0 2rem;
}

/*
 * --hcfb-grid-card-count is set inline per pattern instance (e.g.
 * style="--hcfb-grid-card-count: 4") -- one grid rule flexibly covers
 * anywhere from 3 to 6 cards; the two breakpoints below step column
 * count down for readability regardless of the requested count.
 */
.hcfb-editorial-grid {
	display: grid;
	grid-template-columns: repeat(var(--hcfb-grid-card-count, 3), minmax(0, 1fr));
	gap: 1.5rem;
}

/*
 * Real bug found 2026-09-30 (Ryan-directed, reported on About's "What We
 * Do" cards): when this component is built from actual `wp:group` blocks
 * (rather than a `<!-- wp:html -->` raw-markup pattern, which bypasses
 * this entirely), WordPress core's own global-styles blockGap rule
 * (`:root :where(.is-layout-flow) > *`, zero specificity) adds a
 * `margin-block-start` to every child except the first -- unaware that
 * this grid's own `gap` (above) already provides real spacing in both
 * directions. The result: the first card sits flush with the row top and
 * stretches to the row's full height, while its siblings start that same
 * margin lower and are correspondingly shorter, even though `align-items`
 * is never touched. Same root cause, same fix idiom (`margin-block-start:
 * 0`) already established just above in this file for
 * `#hcfb-primary-content` and `footer.wp-block-template-part`. Safe
 * everywhere else this shared card class is used, since `gap` was always
 * the real spacing mechanism.
 */
.hcfb-editorial-grid__card {
	background: var(--wp--preset--color--hcfb-cream);
	border: 1px solid var(--wp--preset--color--hcfb-border);
	border-radius: 12px;
	padding: 1.75rem 1.5rem;
	display: flex;
	flex-direction: column;
	margin-block-start: 0;
}

.hcfb-editorial-grid__card-title {
	color: var(--wp--preset--color--hcfb-navy);
	font-size: var(--wp--preset--font-size--large);
	margin: 0 0 0.625rem;
}

.hcfb-editorial-grid__card-body {
	line-height: 1.7;
	margin: 0 0 1rem;
	flex-grow: 1;
}

.hcfb-editorial-grid__card-link {
	color: var(--wp--preset--color--hcfb-navy);
	font-weight: 700;
	text-decoration: none;
}

.hcfb-editorial-grid__card-link:hover,
.hcfb-editorial-grid__card-link:focus-visible {
	text-decoration: underline;
}

/*
 * Optional card media block (e.g. the Volunteer page's "Ways to Serve"
 * opportunity cards) -- only present when [hcfb_volunteer_card_image] (or
 * a future equivalent) actually resolves to a real attachment; the
 * shortcode omits the whole element otherwise, so a card with no image
 * selected yet keeps its normal padding/layout untouched -- no empty-box
 * fallback state is needed, and no CSS keys off the --with-image modifier
 * itself (it exists only as a hook for any future card-level styling).
 * Bleeds to the card's own edges via a negative margin matching
 * .hcfb-editorial-grid__card's padding on all four sides, rounding only
 * the top corners to match the card's own border-radius.
 */
.hcfb-editorial-grid__card-media {
	margin: -1.75rem -1.5rem 1.25rem;
	border-radius: 12px 12px 0 0;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	/*
	 * Flex-centering is a no-op for the existing "real photo" case below
	 * (a 100%/100%-sized img still fills the box identically under flex
	 * or block) -- added only so a `--placeholder` label (Give's own
	 * usage, see modifier below) centers correctly with no separate
	 * wrapper needed. Purely additive; Volunteer's own already-live usage
	 * of this class (image-only, never a placeholder) is unaffected.
	 */
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.hcfb-editorial-grid__card-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Visual component refinement (2026-09-01, Ryan-directed): the "polished
 * image placeholder" state for [hcfb_giving_card_image] (Give's own
 * "Ways to Give" cards) -- same cream/dashed-border treatment already
 * established for `.hcfb-feature-media__placeholder`, applied here so a
 * card with no photo selected yet still reads as an intentional
 * placeholder rather than a plain white gap. Only ever added when that
 * shortcode actually has nothing to resolve; the real-photo state above
 * never carries this class.
 */
.hcfb-editorial-grid__card-media--placeholder {
	background: var(--wp--preset--color--hcfb-cream);
	border: 1px dashed var(--wp--preset--color--hcfb-border);
	padding: 1rem;
}

/*
 * Visual component refinement (2026-09-01, Ryan-directed): "one simple
 * decorative inline SVG icon... using existing orange, green and navy
 * tokens for circular icon backgrounds" -- Give's own "Gift at Work"
 * cards (inc/give-sections.php's hcfb_give_render_gift_at_work()). A new,
 * purely additive sub-element of this shared grid component; no existing
 * `.hcfb-editorial-grid__card*` rule is changed, so every other current
 * consumer (Volunteer, this page's own Ways to Give above) is unaffected.
 */
.hcfb-editorial-grid__card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 999px;
	margin-bottom: 1rem;
}

/* Navy on the two lighter brand colors, surface/white on navy -- same
 * documented pairing as `.hcfb-prominent-hero__cta--primary` above, not a
 * new contrast convention. Decorative/aria-hidden (see the SVG markup
 * itself), so these are a design choice, not a WCAG requirement. */
.hcfb-editorial-grid__card-icon--orange {
	background: var(--wp--preset--color--hcfb-orange);
	color: var(--wp--preset--color--hcfb-navy);
}

.hcfb-editorial-grid__card-icon--green {
	background: var(--wp--preset--color--hcfb-green);
	color: var(--wp--preset--color--hcfb-navy);
}

.hcfb-editorial-grid__card-icon--navy {
	background: var(--wp--preset--color--hcfb-navy);
	color: var(--wp--preset--color--hcfb-surface);
}

@media (max-width: 1024px) {
	.hcfb-editorial-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.hcfb-editorial-grid {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------ */
/* D. Prominent closing CTA band                                       */
/* ------------------------------------------------------------------ */

.hcfb-prominent-cta {
	background: var(--wp--preset--color--hcfb-navy);
	color: var(--wp--preset--color--hcfb-surface);
	text-align: center;
	padding: var(--wp--preset--spacing--hcfb-xl) 0;
}

.hcfb-prominent-cta__heading {
	color: var(--wp--preset--color--hcfb-surface);
	margin: 0 0 0.75rem;
}

.hcfb-prominent-cta__body {
	color: var(--wp--preset--color--hcfb-surface);
	opacity: 0.9;
	margin: 0 0 1.5rem;
}

.hcfb-prominent-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
}

.hcfb-prominent-cta__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border-radius: 999px;
	padding: 0.75rem 1.75rem;
	font-weight: 700;
	text-decoration: none;
}

.hcfb-prominent-cta__link--primary {
	background: var(--wp--preset--color--hcfb-orange);
	color: var(--wp--preset--color--hcfb-navy);
}

.hcfb-prominent-cta__link--primary:hover,
.hcfb-prominent-cta__link--primary:focus-visible {
	background: var(--wp--preset--color--hcfb-surface);
	color: var(--wp--preset--color--hcfb-navy);
}

/* Optional secondary action -- transparent/outline treatment so it reads
 * as lower-emphasis than the primary orange action, matching the same
 * primary/secondary pairing convention as the split hero above. */
.hcfb-prominent-cta__link--secondary {
	background: transparent;
	color: var(--wp--preset--color--hcfb-surface);
	border: 2px solid var(--wp--preset--color--hcfb-surface);
}

.hcfb-prominent-cta__link--secondary:hover,
.hcfb-prominent-cta__link--secondary:focus-visible {
	background: var(--wp--preset--color--hcfb-surface);
	color: var(--wp--preset--color--hcfb-navy);
}

/* ------------------------------------------------------------------ */
/* E. Large visual feature section                                     */
/* ------------------------------------------------------------------ */

.hcfb-feature-media {
	background: var(--wp--preset--color--hcfb-surface);
	padding: var(--wp--preset--spacing--hcfb-xl) 0;
}

/* image-left (default) / image-right / full-width placement, per the
 * modifier class the pattern instance carries. */
.hcfb-feature-media--split .hcfb-feature-media__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: var(--wp--preset--spacing--hcfb-lg, 2.5rem);
}

/*
 * Launch-critical placeholder cleanup (2026-09-29, Ryan-directed): same
 * `:has()` collapse technique as `.hcfb-prominent-hero__grid` above, for
 * this shared split-media component (used by Food Insecurity's "Who
 * experiences food insecurity" section, among others).
 */
@supports selector(:has(*)) {
	.hcfb-feature-media--split .hcfb-feature-media__grid:not(:has(.hcfb-feature-media__media)) {
		grid-template-columns: minmax(0, 1fr);
		max-width: 44rem;
		margin-inline: auto;
		text-align: center;
	}
}

.hcfb-feature-media--image-right .hcfb-feature-media__media {
	order: 2;
}

.hcfb-feature-media--image-right .hcfb-feature-media__text {
	order: 1;
}

/* Same shared, accessible eyebrow treatment as .hcfb-prominent-eyebrow */
/* above -- see that rule's own docblock for the full rationale. */
.hcfb-feature-media__eyebrow {
	display: block;
	color: var(--wp--preset--color--hcfb-green-text, #627425);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	margin: 0 0 1rem;
}

.hcfb-feature-media__heading {
	color: var(--wp--preset--color--hcfb-navy);
	margin: 0 0 0.75rem;
}

.hcfb-feature-media__body {
	max-width: 34rem;
	margin: 0;
}

.hcfb-feature-media__media {
	position: relative;
}

/* Same validated 3-layer accent technique as the split hero above (A). */
.hcfb-feature-media__frame {
	position: relative;
	z-index: 0;
}

.hcfb-feature-media__frame::after {
	content: "";
	position: absolute;
	z-index: 0;
	top: 3%;
	left: 3%;
	right: -3%;
	bottom: -3%;
	background: var(--wp--preset--color--hcfb-navy);
	opacity: 0.8;
	border-radius: 16px;
	transform: rotate(1.5deg);
}

.hcfb-feature-media__frame::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: -4%;
	left: -4%;
	right: 4%;
	bottom: 0;
	background: var(--wp--preset--color--hcfb-orange);
	border-radius: 16px;
	transform: rotate(-2deg);
}

/*
 * --hcfb-feature-aspect is set inline per pattern instance (e.g.
 * style="--hcfb-feature-aspect: 16 / 9") -- a deliberate, editor-chosen
 * ratio rather than an uncontrolled/auto image height. Split placements
 * typically use 4/3 or 16/9; a full-width placement typically uses a
 * wider ratio such as 21/9.
 */
.hcfb-feature-media__placeholder {
	position: relative;
	z-index: 2;
	width: 100%;
	aspect-ratio: var(--hcfb-feature-aspect, 16 / 9);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 1.5rem;
	border-radius: 14px;
	background: var(--wp--preset--color--hcfb-cream);
	border: 1px dashed var(--wp--preset--color--hcfb-border);
}

.hcfb-feature-media__label {
	margin: 0;
	max-width: 24ch;
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--wp--preset--color--hcfb-text-muted);
}

.hcfb-feature-media__label-detail {
	display: block;
	margin-top: 0.35rem;
	font-weight: 400;
	font-size: 0.8125rem;
}

.hcfb-feature-media__placeholder img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: var(--hcfb-feature-aspect, 16 / 9);
	object-fit: cover;
	border-radius: 14px;
}

.hcfb-feature-media__caption {
	position: relative;
	z-index: 2;
	margin-top: 1.5rem;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--hcfb-text-muted);
}

/* Full-width placement: media spans the section's own inner measure with
 * no text column; optional caption/credit sits below, same as the split
 * variant. */
.hcfb-feature-media--full-width .hcfb-feature-media__media {
	width: 100%;
}

@media (max-width: 900px) {
	.hcfb-feature-media--split .hcfb-feature-media__grid {
		grid-template-columns: 1fr;
	}
	.hcfb-feature-media--image-right .hcfb-feature-media__media,
	.hcfb-feature-media--image-right .hcfb-feature-media__text {
		order: initial;
	}
}

/* ------------------------------------------------------------------ */
/* G. Strategic CTA banner (reusable — Finance/Impact-ready, not placed  */
/* on any other page yet; see docs/PROMINENT_PAGE_COMPONENTS.md and      */
/* inc/strategic-cta-banner.php's hcfb_render_strategic_cta_banner())    */
/* ------------------------------------------------------------------ */

.hcfb-strategic-cta {
	background: var(--wp--preset--color--hcfb-orange);
}

.hcfb-strategic-cta__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
	align-items: center;
	gap: var(--wp--preset--spacing--hcfb-xl, 4rem);
}

.hcfb-strategic-cta__heading {
	color: var(--wp--preset--color--hcfb-navy);
	margin: 0 0 0.75rem;
}

.hcfb-strategic-cta__body {
	color: var(--wp--preset--color--hcfb-navy);
	max-width: 34rem;
	margin: 0 0 1.5rem;
}

.hcfb-strategic-cta__actions {
	display: flex;
}

/*
 * Text-only variant (Give Food's launch-safe visual cleanup, local only):
 * no media column at all, so the single remaining text column is
 * centered into one balanced, narrow measure instead of sitting
 * left-aligned against empty space -- same centered-CTA convention
 * `.hcfb-prominent-cta` already uses elsewhere on this same page.
 */
.hcfb-strategic-cta--text-only .hcfb-strategic-cta__grid {
	grid-template-columns: 1fr;
	max-width: 34rem;
	margin-inline: auto;
	text-align: center;
}

.hcfb-strategic-cta--text-only .hcfb-strategic-cta__body {
	margin-inline: auto;
}

.hcfb-strategic-cta--text-only .hcfb-strategic-cta__actions {
	justify-content: center;
}

/*
 * Launch-critical placeholder cleanup (2026-09-29, Ryan-directed):
 * Reports & Financials and Ways to Give both had a visible "Image coming
 * soon" panel in this banner's media column with no approved photo
 * available. Their `.hcfb-strategic-cta__media` wrapper was removed
 * outright from each page's own stored content (no gap left to
 * fill-in later), but the `--text-only` class above was authored for a
 * page built fresh with no media from the start and is not retroactively
 * added to already-published content -- this `:has()` rule reaches the
 * same collapsed, centered result for any existing or future page whose
 * media wrapper is simply absent, same progressive-enhancement
 * `@supports` convention already proven by
 * assets/css/about-impact-experience.css's identical technique for this
 * exact "no photo bound yet" situation.
 */
@supports selector(:has(*)) {
	.hcfb-strategic-cta__grid:not(:has(.hcfb-strategic-cta__media)) {
		grid-template-columns: minmax(0, 1fr);
		max-width: 34rem;
		margin-inline: auto;
		text-align: center;
	}
	.hcfb-strategic-cta__grid:not(:has(.hcfb-strategic-cta__media)) .hcfb-strategic-cta__body {
		margin-inline: auto;
	}
	.hcfb-strategic-cta__grid:not(:has(.hcfb-strategic-cta__media)) .hcfb-strategic-cta__actions {
		justify-content: center;
	}
}

/* Same pill shape/padding/weight as .hcfb-prominent-hero__cta and
 * .hcfb-prominent-cta__link above -- navy background here (this banner's
 * own orange section background rules out the orange-pill treatment
 * those two use), both existing brand tokens, no new color introduced. */
.hcfb-strategic-cta__button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border-radius: 999px;
	padding: 0.75rem 1.75rem;
	font-weight: 700;
	text-decoration: none;
	background: var(--wp--preset--color--hcfb-navy);
	color: var(--wp--preset--color--hcfb-surface);
}

.hcfb-strategic-cta__button:hover,
.hcfb-strategic-cta__button:focus-visible {
	background: var(--wp--preset--color--hcfb-surface);
	color: var(--wp--preset--color--hcfb-navy);
}

.hcfb-strategic-cta__media {
	position: relative;
}

/*
 * "Overlapping the banner edge": a negative top margin lets the frame
 * bleed upward, out of this section's own orange background, into
 * whatever section precedes it (Gift at Work, white) -- safe without any
 * z-index/overflow management because it overlaps the PREVIOUS section
 * only; this section's own later position in source order already paints
 * over that section's background by default stacking order. Deliberately
 * does not also overlap the section AFTER it (Secure & Trusted, navy) --
 * that band's own solid background would paint over the lower half of an
 * overlap in that direction instead.
 */
.hcfb-strategic-cta__media-frame {
	width: min(16rem, 60vw);
	margin-inline: auto;
	/*
	 * This section's own full-bleed padding-top (the shared
	 * `--hcfb-xl` xl-padding every full-bleed section gets, above) already
	 * consumes the first half of this pull -- doubling it is what actually
	 * carries the frame's top edge past the section's own padding-box
	 * edge, for a real, visible overlap into the section above.
	 */
	margin-block-start: calc(-2 * var(--wp--preset--spacing--hcfb-xl, 4rem));
	box-shadow: 0 18px 40px rgba(20, 21, 60, 0.16);
	border-radius: 24px;
}

.hcfb-strategic-cta__media-placeholder {
	aspect-ratio: 1 / 1;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 1rem;
	background: var(--wp--preset--color--hcfb-cream);
	border-radius: 24px;
	overflow: hidden;
}

.hcfb-strategic-cta__media-placeholder img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * The heart shape is progressive enhancement only: `@supports` here
 * checks that the browser accepts `clip-path: url()` syntax at all
 * (universal in evergreen browsers) before applying it: everything else
 * -- every other browser, and forced-colors mode below regardless of
 * support -- keeps the plain rounded-rectangle shape set above, which is
 * why that shape is the unconditional default rather than a `@supports
 * not (...)` block. The clip source itself is an inline <svg><clipPath>
 * with `clipPathUnits="objectBoundingBox"` (inc/strategic-cta-banner.php),
 * so it scales correctly with the frame's actual rendered size.
 */
@supports (clip-path: url(#hcfb-strategic-cta-heart-clip)) {
	.hcfb-strategic-cta__media-placeholder {
		clip-path: url(#hcfb-strategic-cta-heart-clip);
		border-radius: 0;
	}
}

/*
 * Accessible fallback: forced-colors mode overrides most author
 * background/shadow colors already, and an SVG clip applied on top of
 * that system-driven repaint is not a combination worth trusting to look
 * intentional -- explicitly revert to the plain rounded rectangle here
 * regardless of `@supports` above.
 */
@media (forced-colors: active) {
	.hcfb-strategic-cta__media-placeholder {
		clip-path: none;
		border-radius: 24px;
	}
}

@media (max-width: 768px) {
	.hcfb-strategic-cta__grid {
		grid-template-columns: 1fr;
	}
	.hcfb-strategic-cta__media-frame {
		margin-block-start: var(--wp--preset--spacing--hcfb-lg, 2.5rem);
	}
}

/* ------------------------------------------------------------------ */
/* Focus visibility, reduced motion — same conventions as                */
/* partner-experience.css and public-shell.css.                         */
/* ------------------------------------------------------------------ */

.hcfb-prominent-hero__cta:focus-visible,
.hcfb-editorial-grid__card-link:focus-visible,
.hcfb-prominent-cta__link:focus-visible,
.hcfb-strategic-cta__button:focus-visible {
	outline: 3px solid var(--wp--preset--color--hcfb-focus, #262760);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.hcfb-prominent-hero__cta,
	.hcfb-editorial-grid__card-link,
	.hcfb-prominent-cta__link,
	.hcfb-strategic-cta__button {
		transition: none;
	}
}

/* ------------------------------------------------------------------ */
/* Leadership page (inc/leadership-sections.php) -- two-tier profile     */
/* card system. Purely additive: new, namespaced hcfb-leadership-*       */
/* classes only, nothing existing here is touched. Both grids sit inside */
/* the already-shared .hcfb-editorial-grid-section wrapper (see that     */
/* component above), so they already inherit its full-bleed background,  */
/* box-sizing, and wide centered inner measure with no further wiring.   */
/* ------------------------------------------------------------------ */

/*
 * Compact, CENTERED text-only hero variant (2026-09-17 informational-
 * pages refinement, revised same day into a centered banner): a single
 * reusable modifier class, added ALONGSIDE (never replacing) the shared
 * `.hcfb-prominent-hero` class -- for standalone informational pages
 * that carry no photograph. Currently used by Leadership
 * (inc/leadership-sections.php) and Policies & Procedures
 * (inc/policies-sections.php); available to any future page in the same
 * situation without a page-specific override. Removes the media column
 * entirely at the markup level (no empty second column, no reserved
 * image space) rather than hiding it with CSS, and centers the eyebrow/
 * heading/intro as one text group in a comfortable ~800px column.
 * Supersedes Leadership's prior `.hcfb-leadership-hero` two-column
 * height/width reduction (2026-09-08) -- that override only ever made
 * sense while a media column still existed.
 *
 * Full-bleed width: both of today's consumers now carry the shared
 * `body.hcfb-prominent-experience` class (Policies & Procedures gained
 * it via hcfb_is_policies_template() in functions.php as part of this
 * same revision -- see that function's own docblock for why it had been
 * left out and why leaving it out no longer made sense once this page
 * got a real hero needing the same release), so the file's own top rule
 * already releases this section's `max-width`/`width`. The redundant
 * `max-width: none; width: 100%;` below is kept anyway, deliberately, so
 * `--compact` stays correct and self-contained even on a future page
 * that hasn't (or shouldn't) opt into the full `hcfb-prominent-
 * experience` body class for its OTHER content.
 */
.hcfb-prominent-hero--compact {
	max-width: none;
	width: 100%;
	padding: var(--wp--preset--spacing--hcfb-xl, 4rem) 0; /* ~64px desktop/tablet, within the requested 64-72px */
}

.hcfb-prominent-hero--compact .hcfb-prominent-hero__grid {
	grid-template-columns: minmax(0, 1fr);
	padding-block: 0;
}

/*
 * Centers the whole eyebrow/H1/intro group as one block within the
 * available width, rather than just left-aligning it inside a narrower
 * column (which is what the shared two-column `.hcfb-prominent-hero__text`
 * rule does by default). `margin-inline: auto` centers the box itself;
 * `text-align: center` (plus the same on each child below, for belt-and-
 * suspenders clarity/independence from inheritance) centers the text
 * inside it.
 */
.hcfb-prominent-hero--compact .hcfb-prominent-hero__text {
	max-width: 50rem; /* 800px -- within the requested 760-840px column width */
	margin-inline: auto;
	text-align: center;
}

.hcfb-prominent-hero--compact .hcfb-prominent-hero__eyebrow,
.hcfb-prominent-hero--compact .hcfb-prominent-hero__heading,
.hcfb-prominent-hero--compact .hcfb-prominent-hero__intro {
	text-align: center;
}

/*
 * The shared (non-compact) heading/intro rules cap these at `21ch`/`34rem`
 * respectively -- measures tuned for the two-column split hero's own
 * narrower text column. Centered in an ~800px column, those same caps
 * would force excess wrapping well before the column's actual width is
 * used; removing them here lets the heading/intro use the full `__text`
 * measure above instead (item 8: enough width for the intro to avoid
 * narrow, excessive wrapping).
 */
.hcfb-prominent-hero--compact .hcfb-prominent-hero__heading,
.hcfb-prominent-hero--compact .hcfb-prominent-hero__intro {
	max-width: none;
}

/*
 * The mobile padding override below must match (or beat) the specificity
 * of the file's own top-of-file rule (`body.hcfb-prominent-experience
 * .hcfb-prominent-hero, ...`, specificity 0-2-1), which also sets
 * `padding` unconditionally (no media query) and otherwise wins the
 * cascade on any page carrying that body class (both Leadership and
 * Policies & Procedures do). Listing both the body-scoped and bare
 * selector here -- rather than just `.hcfb-prominent-hero--compact`
 * alone (0-1-0, too low) -- keeps this correct on a future page that
 * adopts `--compact` without also carrying the `hcfb-prominent-
 * experience` body class.
 */
@media (max-width: 480px) {
	body.hcfb-prominent-experience .hcfb-prominent-hero--compact,
	.hcfb-prominent-hero--compact {
		padding: var(--wp--preset--spacing--hcfb-lg, 2.5rem) 0; /* ~40px mobile */
	}
}

/*
 * Root-cause fix, same pattern as home.css's "Pass 4" and
 * neighbor-journey.css's shared-container fix: releasing the OUTER
 * section (`hcfb_is_leadership_template()` joining
 * hcfb_is_prominent_page_template() above) only widens the section
 * itself -- these two grids are themselves direct children of
 * `.hcfb-editorial-grid-section__inner`, which is STILL an
 * `.is-layout-constrained` wrapper, so WordPress's own global styles
 * silently cap each grid individually at
 * `--wp--style--global--content-size` (720px) unless released here too.
 * Confirmed via a live bounding-box measurement. No `!important` needed
 * (core's own `max-width` rule for this isn't `!important`, only its
 * centering margin is) -- a later, equal-specificity single-class rule
 * already wins the cascade, same as `.hcfb-editorial-grid-section__inner`'s
 * own pre-existing max-width rule already does one level up.
 */
.hcfb-leadership-guiding-grid,
.hcfb-leadership-board-grid {
	max-width: none;
	width: 100%;
}

.hcfb-leadership-guiding-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem;
}

.hcfb-leadership-guiding-card {
	display: flex;
	gap: 1.5rem;
	background: var(--wp--preset--color--hcfb-cream);
	border: 1px solid var(--wp--preset--color--hcfb-border);
	border-left: 4px solid var(--wp--preset--color--hcfb-orange);
	border-radius: 12px;
	padding: 1.75rem;
}

/*
 * Visual-density revision (2026-09-08, Ryan-directed): with every
 * biography now collapsed behind Details (see hcfb_leadership_render_bio()),
 * the photo carries far more of each card's visual weight -- sized up from
 * 9rem/144px to 10rem/160px, within the requested ~140-170px desktop
 * range, so people (not text) lead these cards.
 */
.hcfb-leadership-guiding-card__photo {
	flex: 0 0 auto;
	width: 10rem;
	height: 10rem;
	border-radius: 999px;
	overflow: hidden;
	aspect-ratio: 1 / 1;
}

.hcfb-leadership-guiding-card__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hcfb-leadership-guiding-card__body {
	flex: 1 1 auto;
	min-width: 0;
}

.hcfb-leadership-guiding-card__name {
	color: var(--wp--preset--color--hcfb-navy);
	font-size: var(--wp--preset--font-size--x-large);
	margin: 0 0 0.25rem;
}

.hcfb-leadership-guiding-card__role {
	color: var(--wp--preset--color--hcfb-navy);
	font-weight: 700;
	margin: 0 0 0.75rem;
}

.hcfb-leadership-guiding-card__more,
.hcfb-leadership-board-card__more,
.hcfb-leadership-media-contact-card__more {
	margin: 0.5rem 0 0.75rem;
}

.hcfb-leadership-guiding-card__more summary,
.hcfb-leadership-board-card__more summary,
.hcfb-leadership-media-contact-card__more summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--wp--preset--color--hcfb-navy);
}

/*
 * Explicit hover/focus for <summary> -- WordPress's own native Details
 * block makes it keyboard-focusable, but this theme's global
 * `a:focus-visible, button:focus-visible, ...` rule (style.css) doesn't
 * list the bare `summary` element, so without this it would fall back to
 * the browser's own default outline rather than this site's established
 * navy focus ring.
 *
 * Underline only on hover -- no color change. An earlier orange hover
 * color (--hcfb-orange on this card's cream background) measured only a
 * 2.2:1 contrast ratio, well under WCAG AA's 4.5:1 minimum for normal
 * text (caught by axe during this pass's own expanded-state scan, since a
 * real click leaves the pointer hovering the element). Navy stays the
 * color in every state -- already verified accessible via the
 * collapsed-state axe scan -- matching the underline-only hover
 * convention already established by `.hcfb-editorial-grid__card-link`.
 */
.hcfb-leadership-guiding-card__more summary:hover,
.hcfb-leadership-board-card__more summary:hover,
.hcfb-leadership-media-contact-card__more summary:hover {
	text-decoration: underline;
}

.hcfb-leadership-guiding-card__more summary:focus-visible,
.hcfb-leadership-board-card__more summary:focus-visible,
.hcfb-leadership-media-contact-card__more summary:focus-visible {
	outline: 3px solid var(--wp--preset--color--hcfb-focus, #262760);
	outline-offset: 2px;
}

.hcfb-leadership-guiding-card__more p,
.hcfb-leadership-guiding-card__more li,
.hcfb-leadership-board-card__more p,
.hcfb-leadership-board-card__more li,
.hcfb-leadership-media-contact-card__more p,
.hcfb-leadership-media-contact-card__more li {
	line-height: 1.7;
}

.hcfb-leadership-guiding-card p,
.hcfb-leadership-board-card p,
.hcfb-leadership-media-contact-card p {
	line-height: 1.7;
}

.hcfb-leadership-guiding-card__contact,
.hcfb-leadership-media-contact-card__contact {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5 !important;
}

.hcfb-leadership-guiding-card__contact a,
.hcfb-leadership-media-contact-card__contact a {
	color: var(--wp--preset--color--hcfb-navy);
	font-weight: 600;
}

@media (max-width: 1024px) {
	.hcfb-leadership-guiding-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.hcfb-leadership-guiding-card {
		flex-direction: column;
	}
	.hcfb-leadership-guiding-card__photo {
		width: 6.5rem;
		height: 6.5rem;
	}
}

/* Board of Directors -- standard prominence, denser three-column grid */
.hcfb-leadership-board-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
}

.hcfb-leadership-board-card {
	background: var(--wp--preset--color--hcfb-cream);
	border: 1px solid var(--wp--preset--color--hcfb-border);
	border-radius: 12px;
	padding: 1.5rem;
	text-align: center;
}

/*
 * Visual-density revision (2026-09-08): moderate increase, within the
 * requested ~96-120px desktop range (was 6.5rem/104px).
 */
.hcfb-leadership-board-card__photo {
	width: 7.25rem;
	height: 7.25rem;
	margin: 0 auto 1rem;
	border-radius: 999px;
	overflow: hidden;
	aspect-ratio: 1 / 1;
}

.hcfb-leadership-board-card__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hcfb-leadership-board-card__officer-badge {
	display: inline-block;
	background: var(--wp--preset--color--hcfb-navy);
	color: var(--wp--preset--color--hcfb-surface);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	margin: 0 0 0.75rem;
}

.hcfb-leadership-board-card__role {
	color: var(--wp--preset--color--hcfb-text-muted);
	font-weight: 600;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.03em;
	margin: 0 0 0.75rem;
}

.hcfb-leadership-board-card__name {
	color: var(--wp--preset--color--hcfb-navy);
	font-size: var(--wp--preset--font-size--large);
	margin: 0 0 0.25rem;
}

.hcfb-leadership-board-card__position {
	font-style: italic;
	margin: 0 0 0.5rem;
}

.hcfb-leadership-board-card__member-since {
	color: var(--wp--preset--color--hcfb-text-muted);
	font-size: var(--wp--preset--font-size--small);
	margin: 0 0 0.75rem;
}

.hcfb-leadership-board-card__more {
	text-align: left;
}

@media (max-width: 1024px) {
	.hcfb-leadership-board-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.hcfb-leadership-board-grid {
		grid-template-columns: 1fr;
	}
}

/*
 * The "media-contact" anchor's target is the whole section
 * (inc/leadership-sections.php's hcfb_leadership_render_media_contact()),
 * not just this card, so the "Media Contact" heading itself is visible
 * on a hash jump -- same scroll-margin-top value already established for
 * this exact purpose (an anchor-jump target that must clear the header)
 * on .hcfb-partner-screening above, not a new invented offset.
 */
#media-contact {
	scroll-margin-top: 8rem;
}

/*
 * Same reasoning/value as #media-contact above: the "Impact Stories"
 * mega-nav item and the homepage's own "Hear the stories" link both jump
 * here (inc/our-impact-sections.php's hcfb_impact_shortcode_stories_teaser()),
 * so the section's own heading must clear the fixed header on landing,
 * not just the first card.
 */
#impact-stories {
	scroll-margin-top: 8rem;
}

/* Media Contact -- one visually distinct card, deliberately never part of */
/* the Board grid above. */
.hcfb-leadership-media-contact-card {
	display: flex;
	gap: 1.5rem;
	align-items: flex-start;
	background: var(--wp--preset--color--hcfb-surface);
	border: 1px solid var(--wp--preset--color--hcfb-border);
	border-radius: 12px;
	padding: 1.75rem;
	max-width: 42rem;
}

.hcfb-leadership-media-contact-card__photo {
	flex: 0 0 auto;
	width: 7rem;
	height: 7rem;
	border-radius: 999px;
	overflow: hidden;
	aspect-ratio: 1 / 1;
}

.hcfb-leadership-media-contact-card__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hcfb-leadership-media-contact-card__body {
	flex: 1 1 auto;
	min-width: 0;
}

.hcfb-leadership-media-contact-card__name {
	color: var(--wp--preset--color--hcfb-navy);
	font-size: var(--wp--preset--font-size--large);
	margin: 0 0 0.25rem;
}

.hcfb-leadership-media-contact-card__role {
	font-weight: 700;
	color: var(--wp--preset--color--hcfb-navy);
	margin: 0 0 0.75rem;
}

@media (max-width: 480px) {
	.hcfb-leadership-media-contact-card {
		flex-direction: column;
	}
}

/* Placeholder fallback -- reuses the established "Image coming soon"      */
/* treatment (see e.g. inc/give-sections.php's card-media placeholder)     */
/* if a photo attachment can't be resolved. Every photo in this build       */
/* resolved on import; this exists only so a later failed replacement       */
/* fails gracefully instead of breaking the layout. */
.hcfb-leadership-card-media--placeholder {
	background: var(--wp--preset--color--hcfb-cream);
	border: 1px dashed var(--wp--preset--color--hcfb-border);
	padding: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

/* ------------------------------------------------------------------ */
/* Contact page (inc/contact-sections.php). Purely additive: new,        */
/* namespaced hcfb-contact-* classes only, nothing existing here is      */
/* touched. Sections reuse the already-shared .hcfb-editorial-grid-      */
/* section wrapper, so they already inherit its full-bleed background,   */
/* box-sizing, and wide centered inner measure with no further wiring.   */
/* ------------------------------------------------------------------ */

/*
 * Compact hero -- deliberately shorter than Leadership's own hero: no
 * media column at all (this page never shows a photograph or
 * placeholder), reduced section padding, and a narrow centered text
 * measure instead of the shared hero's wide two-column grid.
 */
.hcfb-contact-hero {
	padding: var(--wp--preset--spacing--hcfb-md, 1.5rem) 0;
}

.hcfb-contact-hero__inner {
	text-align: center;
	max-width: 42rem;
}

.hcfb-contact-hero__heading {
	margin: 0 auto 0.75rem;
}

.hcfb-contact-hero__intro {
	margin: 0 auto;
	max-width: 38rem;
}

/* Get in Touch: the live [hcfb_contact_form] shortcode output and its
 * graceful fallback message share one readable, narrow measure. */
.hcfb-contact-form {
	max-width: 34rem;
	margin-top: 1.5rem;
}

.hcfb-contact-form__unavailable {
	background: var(--wp--preset--color--hcfb-cream);
	border: 1px dashed var(--wp--preset--color--hcfb-border);
	border-radius: 12px;
	padding: 1.25rem 1.5rem;
}

.hcfb-contact-privacy-note {
	margin-top: 1rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--hcfb-text-muted);
}

/* Contact Information: a compact three-item card (phone, address, hours),
 * never a multi-profile grid -- narrower columns than the Leadership/
 * Board card system, matching this page's own smaller scope. */
.hcfb-contact-info-card {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem;
	background: var(--wp--preset--color--hcfb-cream);
	border: 1px solid var(--wp--preset--color--hcfb-border);
	border-radius: 12px;
	padding: 1.75rem;
}

.hcfb-contact-info-card__label {
	color: var(--wp--preset--color--hcfb-navy);
	font-size: var(--wp--preset--font-size--medium);
	margin: 0 0 0.5rem;
}

.hcfb-contact-info-card__item p {
	margin: 0;
	line-height: 1.6;
}

.hcfb-contact-info-card__item a {
	color: var(--wp--preset--color--hcfb-navy);
	font-weight: 600;
}

.hcfb-contact-food-drives-note {
	margin-top: 1.25rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--hcfb-text-muted);
}

@media (max-width: 782px) {
	.hcfb-contact-info-card {
		grid-template-columns: 1fr;
	}
}

/*
 * Need Food Assistance: visually distinct from the two general-inquiry
 * sections above (an orange top accent, matching the same orange the
 * Guiding Team cards and hero frame already use elsewhere), so an urgent
 * food-assistance need never reads as an ordinary contact-form inquiry.
 */
.hcfb-contact-food-assistance {
	background: var(--wp--preset--color--hcfb-cream);
	border-top: 4px solid var(--wp--preset--color--hcfb-orange);
}

.hcfb-contact-food-assistance__actions {
	margin-top: 1.25rem;
}

.hcfb-contact-food-assistance__211 {
	margin-top: 1rem;
}

.hcfb-contact-food-assistance__211 a {
	color: var(--wp--preset--color--hcfb-navy);
	font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Give Help hub (inc/give-help-sections.php). Purely additive: new,     */
/* namespaced hcfb-give-help-* classes only, nothing existing here is    */
/* touched. Its "Ways to Help" section reuses the already-shared         */
/* .hcfb-editorial-grid-section/.hcfb-editorial-grid* classes with no    */
/* further wiring, same as inc/give-food-sections.php's "Two Ways to     */
/* Help" grid.                                                           */
/* ------------------------------------------------------------------ */

/*
 * Compact hero -- same "no media column" convention as
 * .hcfb-contact-hero: this page never shows a photograph or placeholder,
 * so it gets reduced section padding and a narrow centered text measure
 * instead of the shared hero's wide two-column grid.
 */
.hcfb-give-help-hero {
	padding: var(--wp--preset--spacing--hcfb-md, 1.5rem) 0;
}

.hcfb-give-help-hero .hcfb-prominent-hero__inner {
	text-align: center;
	max-width: 42rem;
}

.hcfb-give-help-hero .hcfb-prominent-hero__heading {
	margin: 0 auto 0.75rem;
}

.hcfb-give-help-hero .hcfb-prominent-hero__intro {
	margin: 0 auto;
	max-width: 38rem;
}

/*
 * Ryan visual review (cards "too narrow"): root-cause fix, same pattern as
 * .hcfb-leadership-guiding-grid/.hcfb-leadership-board-grid above --
 * releasing the outer section (`body.hcfb-prominent-experience
 * .hcfb-editorial-grid-section`) only widens the SECTION itself. This grid
 * is a direct child of `.hcfb-editorial-grid-section__inner`, which is
 * STILL an `.is-layout-constrained` wrapper, so WordPress's own global
 * styles silently cap it at `--wp--style--global--content-size` (720px)
 * unless released here too -- confirmed via a live bounding-box
 * measurement (three ~226px cards at 720px, not the intended ~395px+ at
 * the section's own 82rem wide measure). Scoped to this page's own
 * `hcfb-give-help-ways-grid` class, not the shared `.hcfb-editorial-grid`
 * class, so Give Food's own already-live grids are unaffected. No
 * `!important` needed for the same reason documented above the Leadership
 * fix: core's own per-child `max-width` rule isn't `!important`, only its
 * centering margin is, and a later, equal-specificity single-class rule
 * already wins the cascade.
 */
.hcfb-give-help-ways-grid {
	max-width: none;
	width: 100%;
	justify-content: center;
}

/*
 * Equal-height fix, found during the same visual review: WordPress core's
 * own blockGap rule (`:root :where(.is-layout-flow) > *`) still applies a
 * `margin-block-start` to each card -- this grid still carries Gutenberg's
 * own `is-layout-flow` class even though `display: grid` above overrides
 * its actual rendering -- stacking with this grid's own real `gap` and,
 * critically, applying ONLY to non-first children (`:first-child` is
 * separately zeroed by that same core rule). That asymmetry was the exact
 * cause of the first card rendering 16px taller than the other two
 * instead of all three matching. Real `gap` is this grid's only intended
 * spacing mechanism, so core's per-child margin is zeroed here.
 */
.hcfb-give-help-ways-grid > * {
	margin-block-start: 0;
}

@media (max-width: 1024px) {
	.hcfb-give-help-ways-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.hcfb-give-help-ways-grid {
		grid-template-columns: 1fr;
	}
}

/*
 * Whole-card clickable behavior (Ryan visual review), via the standard
 * "stretched link" technique: the card's one real `<a>` (its text CTA)
 * grows an absolutely-positioned `::after` covering the entire card, so
 * a click anywhere on the card activates that same, single link --
 * exactly one focusable/interactive element per card, never a second,
 * nested one. `:focus-within` gives the whole card a visible ring on
 * keyboard focus, in addition to the link's own default focus-visible
 * outline on its text.
 */
.hcfb-give-help-card {
	position: relative;
}

.hcfb-give-help-card .hcfb-editorial-grid__card-link::after {
	content: '';
	position: absolute;
	inset: 0;
}

.hcfb-give-help-card:hover {
	border-color: var(--wp--preset--color--hcfb-navy);
}

.hcfb-give-help-card:focus-within {
	outline: 3px solid var(--wp--preset--color--hcfb-focus, #262760);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Give Food (inc/give-food-sections.php) hero photo crop -- visual-     */
/* polish pass, 2026-09-09, local only. Card/panel/section styling for   */
/* this same page lives in assets/css/give-food-experience.css (already  */
/* conditionally enqueued only on this template); this one rule stays    */
/* here because it targets the SHARED `.hcfb-prominent-hero__media-      */
/* placeholder img` element that file has no earlier claim on.           */
/* ------------------------------------------------------------------ */

/*
 * Launch-critical photo swap (2026-09-29, Ryan-directed): the prior
 * "man with produce" photo needed a downward-biased crop (kept here as
 * history until this rule shipped) to avoid losing the produce box he
 * was holding out at the shared 4:3 ratio. The current photo (a GLHomes
 * volunteer group beside a canned-food display, see
 * scripts/data/give-food-hero-photo/manifest.json) is landscape and
 * close enough to 4:3 that object-fit: cover crops only a small, even
 * amount off each side -- no vertical crop at all -- so the shared
 * component's own default centering already keeps the full group and
 * the display in frame. No override needed for this photo; scoped
 * selector kept in place (rather than deleted) so a future photo swap
 * that does need a bias has an obvious, already-scoped place to add it.
 */

/* ------------------------------------------------------------------ */
/* Legal/policy prose content wrapper (2026-09-17) -- Privacy Policy and */
/* Accessibility body-layout correction. One reusable, namespaced       */
/* `.hcfb-legal-prose` class, scoped to whatever content it's actually   */
/* wrapped around (currently the body of patterns/privacy-policy-page.php */
/* and patterns/accessibility-statement-page.php, below each page's own  */
/* compact hero banner) -- NOT a body-class-gated release like the       */
/* prominent-hero family above, and not applied to any other template.   */
/* Centers and width-constrains the wrapper itself only; body headings,  */
/* paragraphs, and lists inside keep their normal left-aligned flow --   */
/* this is deliberately the opposite of the centered hero banner above   */
/* it on the same page.                                                  */
/* ------------------------------------------------------------------ */

.hcfb-legal-prose {
	max-width: 62rem; /* ~992px, within the requested 960-1040px */
	margin-inline: auto;
	padding-inline: 2rem; /* 32px desktop */
	padding-top: 3.5rem; /* ~56px, within the requested 48-64px below the banner */
	padding-bottom: 4.5rem; /* ~72px, within the requested 64-80px before affiliations/footer */
	text-align: left;
}

/*
 * Long, unbroken tokens (URLs, email addresses, third-party service
 * names in running prose) must wrap rather than force horizontal
 * overflow -- scoped to text-bearing elements only, never headings'
 * layout or list markers.
 */
.hcfb-legal-prose p,
.hcfb-legal-prose li,
.hcfb-legal-prose a {
	overflow-wrap: anywhere;
}

/*
 * Consistent H2/H3 spacing -- the prose here mixes wp:paragraph,
 * wp:heading, and wp:list blocks with no shared blockGap rule of their
 * own (this wrapper deliberately uses normal document flow, not a grid/
 * flex layout, so nested block spacing behaves exactly as it did before
 * this wrapper existed -- see this rule as the one deliberate exception,
 * added because heading rhythm specifically needed to be uniform, not
 * left to each block's own default margin).
 */
.hcfb-legal-prose h2 {
	margin-top: 2.5rem;
	margin-bottom: 1rem;
}

.hcfb-legal-prose h3 {
	margin-top: 2rem;
	margin-bottom: 0.75rem;
}

.hcfb-legal-prose > *:first-child {
	margin-top: 0;
}

@media (max-width: 768px) {
	.hcfb-legal-prose {
		padding-inline: 1.5rem; /* 24px tablet */
	}
}

@media (max-width: 480px) {
	.hcfb-legal-prose {
		padding-inline: 1.25rem; /* 20px mobile */
	}
}