/*
 * Homepage-only CONTENT styles (Phase: Homepage Redesign, desktop-fidelity
 * pass 2). Enqueued ONLY when is_front_page() is true (see functions.php)
 * -- every rule below is also additionally scoped under body.home as
 * defense in depth, so this file can never visually affect any other
 * template even if it were ever loaded by mistake. See
 * docs/HOMEPAGE_REDESIGN.md and docs/HOMEPAGE_FIDELITY_CHECKLIST.md for
 * section-by-section fidelity notes against the approved design reference
 * (project-inputs/website-design-reference.pdf).
 *
 * Shared Public Page Shell pass: this file now holds ONLY genuine
 * homepage-content sections (hero, choice, help, what's-happening,
 * facility, impact, get-in-touch, partners, the decorative footer
 * strip). The utility-bar, header-row, mega-nav, and footer-home rule
 * groups that used to live here (reachable only on the front page) have
 * moved to assets/css/public-shell.css, unconditionally enqueued and
 * scoped to body.hcfb-public-shell, so every public template gets the
 * identical polished shell -- not just this one page.
 */

/*
 * The theme's shared style.css never sets box-sizing (theme.json's
 * appearanceTools only reaches block-authored markup, not the raw HTML
 * these homepage patterns render via wp:html). Every element below mixes
 * an explicit width with padding, so a content-box default silently adds
 * padding on top of that width -- confirmed as a real horizontal-overflow
 * bug on mobile (the matching-gift card at width:100% pushed the whole
 * page 48px wider than the viewport) during this redesign's browser
 * check. Reset scoped to the homepage only, not the whole theme.
 */
body.home .hcfb-home-hero,
body.home .hcfb-home-hero *,
body.home .hcfb-home-help,
body.home .hcfb-home-help *,
body.home .hcfb-home-choice,
body.home .hcfb-home-choice *,
body.home .hcfb-home-whats-happening,
body.home .hcfb-home-whats-happening *,
body.home .hcfb-home-facility,
body.home .hcfb-home-facility *,
body.home .hcfb-home-impact,
body.home .hcfb-home-impact *,
body.home .hcfb-home-get-in-touch,
body.home .hcfb-home-get-in-touch * {
	box-sizing: border-box;
}

/* ------------------------------------------------------------------ */
/* Homepage-specific full-width canvas (fidelity pass 2, §2)           */
/*                                                                       */
/* Every top-level homepage section is a direct child of <main>, which  */
/* theme.json's default "constrained" layout would otherwise cap at     */
/* --wp--style--global--content-size (720px) -- the root cause of the   */
/* "too narrow" gap against the reference. Every section below is       */
/* explicitly released from that cap and given its own, section-        */
/* specific width model instead of one universal narrow container.      */
/* ------------------------------------------------------------------ */

body.home #hcfb-primary-content {
	max-width: none;
	width: 100%;
	overflow-x: clip;
}

/*
 * Staff Review homepage polish pass: root cause of the stray white/cream
 * seam that showed up between the hero and the section below it. Every
 * direct child of #hcfb-primary-content is a top-level wp:group/wp:pattern
 * section, and theme.json's global styles.spacing.blockGap (hcfb-sm/16px)
 * applies WordPress core's own margin-block-start to every one of them
 * except the first -- confirmed via computed styles (each section measured
 * margin-top: 16px). Every homepage section already carries its own
 * deliberate padding-top/padding-bottom rhythm (see neighbor-journey.css's
 * "consistent section rhythm" comment, which explicitly reduces padding on
 * sections adjacent to another section's own padding to avoid stacking two
 * gaps into one oversized dead zone) -- this extra 16px core margin was
 * never part of that tuning and only reads as a bug where it sits between
 * two visually different backgrounds (navy hero -> cream section), not
 * because it's unique to the hero. Removed for every top-level section
 * consistently, not just the one after the hero.
 */
body.home #hcfb-primary-content > * {
	margin-top: 0;
}

body.home .hcfb-home-hero,
body.home .hcfb-home-help,
body.home .hcfb-home-choice,
body.home .hcfb-home-whats-happening,
body.home .hcfb-home-facility,
body.home .hcfb-home-impact,
body.home .hcfb-home-get-in-touch {
	max-width: none;
	width: 100%;
}


/* ------------------------------------------------------------------ */
/* Hero                                                                 */
/* ------------------------------------------------------------------ */

body.home .hcfb-home-hero {
	padding: 0;
}

/*
 * Pass 4 root-cause fix: this section's own max-width:none (above) only
 * releases the <section> itself -- .hcfb-home-hero__grid is a direct child
 * of this block's own is-layout-constrained wrapper, and WordPress's
 * default global-styles CSS (`.is-layout-constrained > *`) was silently
 * capping it at --wp--style--global--content-size (720px, centered),
 * exactly the "narrow centered-container appearance" this pass set out to
 * fix. Confirmed via a live bounding-box measurement: grid width was
 * 720px/centered at a 1440px viewport before this rule existed. The other
 * homepage sections (choice, help, get-in-touch, partners, footer) never
 * hit this because each already had its own explicit max-width rule below,
 * which happens to win the cascade over the theme's default -- hero,
 * facility, and what's-happening did not, and silently inherited the
 * 720px default instead.
 */
body.home .hcfb-home-hero__grid {
	display: grid;
	width: 100%;
	max-width: none;
	/* Navy panel ~42-44% / media panel ~56-58%, hero spans the full
	 * viewport width and the media panel reaches the right edge. */
	grid-template-columns: minmax(320px, 43%) 1fr;
	align-items: stretch;
	min-height: 42rem;
	/*
	 * Staff Review homepage polish pass: one shared gutter value for every
	 * piece of left-panel content (video preview, headline, CTA) -- all
	 * three are direct children of .hcfb-home-hero__text below and inherit
	 * this same padding, so widening it here keeps them aligned as one
	 * system rather than nudging each element's own margin individually.
	 * hcfb-lg (2.5rem/40px) matched the sitewide header/content gutter but
	 * read tight for the hero's larger scale; this scales a bit wider on
	 * spacious desktop viewports and settles back to the sitewide 40px
	 * floor at the same 782px breakpoint the grid itself collapses at.
	 */
	--hcfb-hero-gutter: clamp(var(--wp--preset--spacing--hcfb-lg), 3vw + 1.5rem, 4.5rem);
}

body.home .hcfb-home-hero__text {
	background: var(--wp--preset--color--hcfb-navy);
	color: var(--wp--preset--color--hcfb-surface);
	padding: var(--wp--preset--spacing--hcfb-xl) var(--hcfb-hero-gutter);
	/*
	 * Staff Review comment 6798 (2026-09-24, Ryan-directed): the video
	 * preview, headline, and CTA read as hugging the left edge of the
	 * panel. Extra left padding on top of the shared gutter nudges all
	 * three right (they're direct children of this element and inherit
	 * this padding) without touching the right side, which Ryan did not
	 * flag.
	 */
	padding-left: calc(var(--hcfb-hero-gutter) + 1.5rem);
	display: flex;
	flex-direction: column;
	/* Headline vertically centered in the LOWER portion of the panel. */
	justify-content: flex-end;
	gap: var(--wp--preset--spacing--hcfb-md);
}

/* Pass 4 (§3): larger scale, matching the reference's more prominent
 * upper-left video-preview thumbnail (was 13rem -- read small/token-like
 * next to the reference's clearly-legible play affordance). */
body.home .hcfb-home-hero__video-preview {
	width: 17rem;
	aspect-ratio: 16 / 10;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px dashed rgba(255, 255, 255, 0.45);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	margin-bottom: auto;
}

/*
 * Homepage hero video cleanup pass: once staff select a real video (either
 * source), this box must show ONLY the clean active video -- no leftover
 * placeholder chrome. The previous version of this rule only recolored the
 * base rule's `border: 1px dashed ...` to solid instead of removing it,
 * which -- combined with the box-sizing:border-box reset above -- left a
 * visible ~1px light border ring around the video (measured live: a 272px
 * box holding a 270px video, the 1px border showing on every edge),
 * reading exactly like leftover "placeholder frame" chrome behind the
 * embed. `border: none` removes it outright, so the video/iframe below
 * renders flush with the box on all four edges. overflow:hidden still
 * clips the video/iframe to this box's own border-radius, which is now
 * the box's ONLY visible edge treatment (no border, no background visible
 * once the video covers it).
 */
body.home .hcfb-home-hero__video-preview--playable {
	border: none;
	background: #000;
	overflow: hidden;
	padding: 0;
}

/*
 * Shared by both hero video sources -- a Media Library <video> and a
 * YouTube <iframe> (inc/hero-video-settings.php's Video Source option)
 * both get this same class so they fill the identical footprint, flush
 * against the parent box's edges (no border of its own; the parent's
 * overflow:hidden + border-radius above is the single source of the
 * visible rounded edge, so the two don't need matching radius values to
 * stay in sync). object-fit only affects the <video> case (browsers
 * ignore it on iframe); border:0 only matters for the <iframe> case
 * (video has no default border either way) -- harmless no-ops for the
 * source each rule doesn't apply to.
 */
body.home .hcfb-home-hero__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

/*
 * Poster-first YouTube facade (assets/js/hcfb-interactive.js): fills the
 * exact same footprint a <video>/<iframe> would -- the poster image itself
 * is the parent `.hcfb-home-hero__video-preview--playable`'s own
 * background-image (set inline by patterns/hero-placeholder.php), so this
 * element only needs to size itself and center the play button over it.
 */
body.home .hcfb-home-hero__youtube-facade {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/*
 * Deliberately restrained next to YouTube's own large red play overlay --
 * a small translucent-navy circle with a visible light border, not a
 * solid color-only cue (the circle's own boundary plus the triangle glyph
 * both communicate "button" independent of color, satisfying "not rely on
 * color alone"). A real <button>, so it's keyboard-focusable with the
 * browser's native focus ring by default -- nothing here suppresses
 * :focus or :focus-visible.
 */
body.home .hcfb-home-hero__youtube-play {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	padding: 0;
	border: 2px solid rgba(255, 255, 255, 0.85);
	border-radius: 999px;
	background: rgba(38, 39, 96, 0.55);
	cursor: pointer;
	transition: background-color 0.15s ease;
}

body.home .hcfb-home-hero__youtube-play:hover,
body.home .hcfb-home-hero__youtube-play:focus-visible {
	background: rgba(38, 39, 96, 0.85);
}

/* Optical centering: the CSS-triangle glyph's own "point" makes it look
 * left-of-center inside a symmetrical circular button unless nudged. */
body.home .hcfb-home-hero__youtube-play .hcfb-home-hero__video-play {
	margin-left: 3px;
}

/*
 * CSS-drawn play triangle. Reused in two places: decorative-only inside
 * the true no-video placeholder (parent has aria-hidden="true", no click
 * handler, not itself focusable) below, and as the icon inside the real,
 * keyboard-operable `.hcfb-home-hero__youtube-play` <button> above -- the
 * triangle glyph itself is never the interactive element in either case.
 */
body.home .hcfb-home-hero__video-play {
	width: 0;
	height: 0;
	border-top: 0.9rem solid transparent;
	border-bottom: 0.9rem solid transparent;
	border-left: 1.4rem solid var(--wp--preset--color--hcfb-surface);
	opacity: 0.9;
}

body.home .hcfb-home-hero__video-badge {
	font-size: 0.75rem;
	color: var(--wp--preset--color--hcfb-surface);
	text-align: center;
	padding: 0 0.5rem;
}

body.home .hcfb-home-hero__headline {
	font-size: clamp(2.75rem, 2rem + 3.2vw, 4.5rem);
	line-height: 1.02;
	margin: 0;
}

body.home .hcfb-home-hero__line {
	display: block;
	font-weight: 800;
}

body.home .hcfb-home-hero__line--green {
	color: var(--wp--preset--color--hcfb-green);
}

body.home .hcfb-home-hero__line--white {
	color: var(--wp--preset--color--hcfb-surface);
}

body.home .hcfb-home-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	align-self: flex-start;
	background: var(--wp--preset--color--hcfb-orange);
	color: var(--wp--preset--color--hcfb-navy);
	font-weight: 700;
	padding: 0.6rem 1.5rem;
	border-radius: 999px;
	text-decoration: none;
}

body.home .hcfb-home-hero__media {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--hcfb-cream);
}

body.home .hcfb-home-hero__media-track {
	position: relative;
	height: 100%;
}

body.home .hcfb-home-hero__media-slide {
	position: absolute;
	inset: 0;
}

/*
 * Provisional photography (fidelity pass 4,
 * docs/HOMEPAGE_ASSET_PROVISIONAL_USE.md). object-fit: cover crops
 * responsively at every viewport without distorting the source image;
 * object-position is set inline per-image (or defaulted to center here)
 * from the reference-matched focal point recorded in the pattern file.
 */
body.home .hcfb-home-hero__media-photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
}

/* Stronger, more image-like placeholder tone (not a nearly-blank pale
 * rectangle) until real photography exists -- pass 3 adds a second highlight
 * so the full-bleed media panel reads with more visual weight/depth at its
 * much larger reference-matched size, still a CSS placeholder, not a photo. */
body.home .hcfb-home-hero__media-placeholder {
	width: 100%;
	height: 100%;
	background:
		radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 45%),
		radial-gradient(circle at 78% 70%, rgba(38, 39, 96, 0.25) 0%, rgba(38, 39, 96, 0) 50%),
		linear-gradient(135deg, var(--wp--preset--color--hcfb-navy) 0%, var(--wp--preset--color--hcfb-green) 55%, var(--wp--preset--color--hcfb-orange) 100%);
	opacity: 0.9;
}

body.home .hcfb-home-hero__media .hcfb-gallery__controls {
	position: absolute;
	left: var(--wp--preset--spacing--hcfb-md);
	bottom: var(--wp--preset--spacing--hcfb-md);
	z-index: 2;
	background: transparent;
	padding: 0;
	justify-content: flex-start;
}

@media (max-width: 782px) {
	body.home .hcfb-home-hero__grid {
		grid-template-columns: 1fr;
		min-height: 0;
	}
	body.home .hcfb-home-hero__text {
		justify-content: center;
	}
	/*
	 * width: 100% is explicit, not left to grid stretch -- confirmed via a
	 * real WebKit run during this redesign that stretch + aspect-ratio with
	 * no explicit width collapses this item to 0x0 in WebKit specifically
	 * (Chromium/Firefox both handled the implicit stretch correctly).
	 */
	body.home .hcfb-home-hero__media {
		width: 100%;
		aspect-ratio: 4 / 3;
	}
}

/* ------------------------------------------------------------------ */
/* Gallery dot indicators (shared: hero + facility band)               */
/* ------------------------------------------------------------------ */

body.home .hcfb-gallery__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-top: var(--wp--preset--spacing--hcfb-sm);
}

/*
 * Packet 1 (structural accessibility): the visible dot stays 0.65rem --
 * unchanged appearance, matching the design reference's small rotating-
 * image indicators -- but the button's own hit area grows to the WCAG 2.2
 * AA target-size minimum (24x24 CSS px) via a centered ::before for the
 * actual colored circle. 44px was deliberately not used here: at 3 dots
 * per gallery with only 0.5rem of gap, a 44px hit area per dot would
 * roughly triple this overlay control's on-screen footprint, which reads
 * as visually oversized for a minor rotating-photo indicator -- 24px is
 * the smallest correction that clears the AA minimum outright (rather
 * than relying on the spacing exception, which this layout's 0.5rem gap
 * does not satisfy on its own).
 */
body.home .hcfb-gallery__dot {
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	border: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
}

body.home .hcfb-gallery__dot::before {
	content: "";
	display: block;
	width: 0.65rem;
	height: 0.65rem;
	border-radius: 999px;
	background: var(--wp--preset--color--hcfb-border);
}

body.home .hcfb-gallery__dot[aria-current="true"]::before {
	background: var(--wp--preset--color--hcfb-surface);
	outline: 2px solid var(--wp--preset--color--hcfb-navy);
	outline-offset: 1px;
}

body.home .hcfb-home-facility .hcfb-gallery__dot::before {
	background: rgba(255, 255, 255, 0.5);
}

body.home .hcfb-home-facility .hcfb-gallery__dot[aria-current="true"]::before {
	background: var(--wp--preset--color--hcfb-surface);
	outline-color: var(--wp--preset--color--hcfb-surface);
}

/* ------------------------------------------------------------------ */
/* How Can You Help -- two-card desktop composition                    */
/* ------------------------------------------------------------------ */

/*
 * Pass 4 (§4): substantially larger section -- pass 3 compacted this
 * section's padding/gaps to reduce blank space, which (combined with the
 * cards' modest 16rem min-height) now reads as a compact dashboard-card
 * row rather than the reference's two large editorial cards. Restored
 * generous vertical breathing room above/below the heading.
 */
body.home .hcfb-home-help {
	padding-top: var(--wp--preset--spacing--hcfb-xl);
	padding-bottom: var(--wp--preset--spacing--hcfb-xl);
	text-align: center;
}

body.home .hcfb-home-help > .wp-block-heading,
body.home .hcfb-home-help > p {
	max-width: 38rem;
	margin-left: auto;
	margin-right: auto;
}

body.home .hcfb-home-help > .wp-block-heading {
	font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
}

/* Larger selector control -- was a fairly small pill row. */
body.home .hcfb-home-help__tablist {
	display: inline-flex;
	border-radius: 999px;
	overflow: hidden;
	margin: var(--wp--preset--spacing--hcfb-lg) 0 var(--wp--preset--spacing--hcfb-lg);
}

body.home .hcfb-home-help__tab {
	border: 0;
	font: inherit;
	font-weight: 700;
	font-size: 1.05rem;
	padding: 0.9rem 2.1rem;
	cursor: pointer;
	color: var(--wp--preset--color--hcfb-surface);
}

body.home .hcfb-home-help__tab--navy {
	background: var(--wp--preset--color--hcfb-navy);
}

/*
 * Navy text on these two, not the default white -- axe color-contrast
 * measured white-on-orange at 2.38:1 and white-on-green lower still (WCAG
 * AA text needs 4.5:1). Same fill/text pairing as the help cards and the
 * choice rows below.
 */
body.home .hcfb-home-help__tab--orange {
	background: var(--wp--preset--color--hcfb-orange);
	color: var(--wp--preset--color--hcfb-navy);
}

body.home .hcfb-home-help__tab--green {
	background: var(--wp--preset--color--hcfb-green);
	color: var(--wp--preset--color--hcfb-navy);
}

body.home .hcfb-home-help__tab[aria-selected="false"] {
	background: var(--wp--preset--color--hcfb-cream);
	color: var(--wp--preset--color--hcfb-navy);
}

body.home .hcfb-home-help__tab[aria-selected="true"] {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* The tabs container becomes the two-card row on desktop -- cards span
 * most of the available width, at the reference's ~82rem wide measure. */
body.home .hcfb-home-help__tabs {
	max-width: var(--hcfb-home-wide);
	margin: 0 auto;
	padding: 0 var(--wp--preset--spacing--hcfb-md);
}

body.home .hcfb-home-help__cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--hcfb-lg);
	align-items: stretch;
}

/*
 * Photo ~45-50% / copy ~50-55% (fidelity pass 3, §5 explicit target) -- up
 * from pass 2's 42%, which read slightly copy-heavy against the reference's
 * near-even split.
 */
body.home .hcfb-home-help__card {
	display: grid;
	grid-template-columns: minmax(200px, 48%) 1fr;
	align-items: stretch;
	border-radius: 12px;
	overflow: hidden;
	text-align: left;
	height: 100%;
}

/* Restores native `[hidden]` semantics: the base rule above always wins
 * over the UA stylesheet's own `[hidden] { display: none }` (higher
 * specificity), so without this, the tablist's non-selected panels never
 * actually hid at any width. One selected panel visible at a time, at
 * every viewport -- matching the accessible tablist state already
 * maintained correctly by assets/js/hcfb-interactive.js. */
body.home .hcfb-home-help__card[hidden] {
	display: none;
}

/* Alternating image/copy placement, matching the reference. */
body.home .hcfb-home-help__card--reverse {
	grid-template-columns: 1fr minmax(200px, 48%);
}

body.home .hcfb-home-help__card--reverse .hcfb-home-help__card-media {
	order: 2;
}

body.home .hcfb-home-help__card--reverse .hcfb-home-help__card-body {
	order: 1;
}

body.home .hcfb-home-help__card--navy {
	background: var(--wp--preset--color--hcfb-navy);
	color: var(--wp--preset--color--hcfb-surface);
}

body.home .hcfb-home-help__card--orange {
	background: var(--wp--preset--color--hcfb-orange);
	color: var(--wp--preset--color--hcfb-navy);
}

body.home .hcfb-home-help__card--green {
	background: var(--wp--preset--color--hcfb-green);
	color: var(--wp--preset--color--hcfb-navy);
}

/* Pass 4 (§4): significantly taller -- was 16rem, which (at this card's
 * ~48% media width) produced a squat, dashboard-card proportion rather than
 * the reference's tall, editorial card. */
body.home .hcfb-home-help__card-media {
	background: linear-gradient(150deg, rgba(255, 255, 255, 0.25) 0%, rgba(0, 0, 0, 0.12) 60%);
	min-height: 26rem;
	position: relative;
	overflow: hidden;
}

body.home .hcfb-home-help__card-media::after {
	content: "photo placeholder";
	position: absolute;
	inset: auto auto 0.6rem 0.6rem;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
}

/* Provisional photography (docs/HOMEPAGE_ASSET_PROVISIONAL_USE.md): once a
 * real photo exists for a card, the gradient/"photo placeholder" label are
 * no longer needed -- the img covers the same box via object-fit. */
body.home .hcfb-home-help__card-media--has-photo {
	background: none;
}

body.home .hcfb-home-help__card-media--has-photo::after {
	content: none;
}

body.home .hcfb-home-help__card-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Pass 4 (§4): more internal padding, larger body text, larger gap between
 * heading/body/button -- was tuned tight for a compact card. */
body.home .hcfb-home-help__card-body {
	padding: var(--wp--preset--spacing--hcfb-xl) var(--wp--preset--spacing--hcfb-xl);
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	align-items: flex-start;
	/* Buttons sit near the lower edge of each content block. */
	justify-content: flex-end;
}

body.home .hcfb-home-help__card-body h3 {
	margin: 0;
	font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.4rem);
}

body.home .hcfb-home-help__card-body p {
	font-size: 1.1rem;
	line-height: 1.5;
}

/* Larger buttons -- was 0.85rem/0.5rem 1.2rem. */
body.home .hcfb-home-help__card-cta {
	display: inline-flex;
	align-items: center;
	background: var(--wp--preset--color--hcfb-surface);
	color: var(--wp--preset--color--hcfb-navy);
	font-weight: 700;
	font-size: 1rem;
	padding: 0.8rem 1.75rem;
	border-radius: 999px;
	text-decoration: none;
}

/*
 * Preview 2 only -- desktop/tablet "stage" treatment (>=900px): the
 * active card is the primary stage, a clipped, non-interactive preview
 * of the *next* card sits to its right past a clear gap, signaling more
 * content follows. Scoped entirely under body.hcfb-neighbor-preview--2,
 * which only the coexistence preview (?hcfb_neighbor_journey_preview=2)
 * ever carries -- the default homepage and preview 1
 * (body.hcfb-neighbor-preview--1) never match any selector below, so
 * neither renders any differently. See assets/js/hcfb-interactive.js for
 * how the preview card is chosen and made inert + aria-hidden.
 */
@media (min-width: 900px) {
	body.hcfb-neighbor-preview--2 .hcfb-home-help__cards {
		display: flex;
		justify-content: center;
		align-items: stretch;
		gap: clamp(1.5rem, 2vw, 2rem);
		overflow: hidden;
		position: relative;
	}

	body.hcfb-neighbor-preview--2 .hcfb-home-help__card:not([inert]) {
		flex: 0 0 auto;
		width: clamp(38.75rem, 50vw, 44.375rem);
	}

	/*
	 * Preview card: the card's own box shrinks to this preview width, so
	 * its grid genuinely re-lays-out at that size rather than overflowing
	 * something wider that gets clipped -- confirmed visually that a
	 * mere column-proportion shrink alone still left a legible heading/
	 * body/CTA rendering at the smaller size. Media is forced to occupy
	 * most of the width (mostly image, per this task's requirement), and
	 * the remaining sliver's actual text content is hidden below (not
	 * the column itself -- the parent card's own background-color still
	 * shows through, giving a real colored-panel edge, just with no
	 * readable copy or CTA in it).
	 */
	body.hcfb-neighbor-preview--2 .hcfb-home-help__card[inert] {
		flex: 0 0 auto;
		width: clamp(12.5rem, 20vw, 16.875rem);
		overflow: hidden;
		pointer-events: none;
		grid-template-columns: minmax(8.75rem, 68%) 1fr;
	}

	/*
	 * Belt-and-suspenders on top of the majority-media column above: even
	 * the small remaining slice of the text column is visually emptied
	 * here (visibility, not display -- keeps the grid item's box, and
	 * therefore the parent card's colored background, in place) so no
	 * heading, body copy, or CTA text is ever legible in the preview at
	 * any width or column-proportion edge case.
	 */
	body.hcfb-neighbor-preview--2 .hcfb-home-help__card[inert] .hcfb-home-help__card-body > * {
		visibility: hidden;
	}

	/*
	 * Peek-sliver fix (same root cause and fix as the earlier isolated
	 * attempt): a reversed card (Give Food) puts its text column first
	 * and photo second, so without this, the visible majority-media
	 * proportion above would land on the (hidden-text) column instead of
	 * the actual photo. Only while a reversed card is the (inert)
	 * preview does this force photo-first; its full/active appearance is
	 * untouched, since these only apply together with [inert].
	 */
	body.hcfb-neighbor-preview--2 .hcfb-home-help__card--reverse[inert] {
		grid-template-columns: minmax(8.75rem, 68%) 1fr;
	}

	body.hcfb-neighbor-preview--2 .hcfb-home-help__card--reverse[inert] .hcfb-home-help__card-media {
		order: 1;
	}

	body.hcfb-neighbor-preview--2 .hcfb-home-help__card--reverse[inert] .hcfb-home-help__card-body {
		order: 2;
	}
}

/*
 * Preview 2 only, below the stage breakpoint: retains the plain
 * one-active-card behavior (task requirement) even though
 * hcfb-interactive.js still marks the next panel hidden=false + inert
 * here (so it's ready to render the moment the viewport crosses 900px,
 * with no page reload) -- inert already excludes it from focus/AT at
 * every width, so this is a purely visual correction, not an
 * accessibility fix.
 */
@media (max-width: 899px) {
	body.hcfb-neighbor-preview--2 .hcfb-home-help__card[inert] {
		display: none;
	}
}

@media (max-width: 767px) {
	body.home .hcfb-home-help__cards {
		display: block;
	}
	body.home .hcfb-home-help__card {
		grid-template-columns: 1fr;
		max-width: 64rem;
		margin: 0 auto;
	}
	body.home .hcfb-home-help__card--reverse {
		grid-template-columns: 1fr;
	}
	body.home .hcfb-home-help__card--reverse .hcfb-home-help__card-media,
	body.home .hcfb-home-help__card--reverse .hcfb-home-help__card-body {
		order: initial;
	}
	/* No sliver preview on narrow screens (task requirement) -- the peek
	 * card stays fully hidden here regardless of its JS-driven hidden
	 * state, which is only false to support the >=768px peek above. */
	body.home .hcfb-home-help__card[inert] {
		display: none;
	}
}

@media (max-width: 600px) {
	body.home .hcfb-home-help__tablist {
		flex-direction: column;
		width: 100%;
		border-radius: 12px;
	}
}

/* ------------------------------------------------------------------ */
/* Cream split feature / choice                                         */
/* ------------------------------------------------------------------ */

/* Pass 4 (§5): reduced vertical padding -- the section's overall height
 * read as excessive once the media column below became narrower/shorter. */
body.home .hcfb-home-choice {
	background: var(--wp--preset--color--hcfb-cream);
	padding: var(--wp--preset--spacing--hcfb-lg) 0;
	overflow: hidden;
}

body.home .hcfb-home-choice__grid {
	display: grid;
	/*
	 * Pass 5 (§3): widened back toward ~38-40% -- pass 4's 34% (chosen to
	 * fix an excessive section-height problem) overcorrected and left the
	 * photo reading small against its angled backdrop panels. Panel
	 * footprint was reduced in the same change (below) specifically so
	 * this width increase doesn't reintroduce the excessive-height problem
	 * pass 4 was fixing -- verified by measurement after this change.
	 */
	grid-template-columns: minmax(0, 1fr) minmax(300px, 41%);
	gap: var(--wp--preset--spacing--hcfb-xl);
	max-width: var(--hcfb-home-wide);
	margin: 0 auto;
	padding: 0 var(--wp--preset--spacing--hcfb-md);
	align-items: center;
	position: relative;
}

/*
 * Navy, not brand orange -- confirmed via axe color-contrast during this
 * redesign that orange-on-cream only reaches a 2.2:1 ratio (WCAG AA text
 * needs 4.5:1). See docs/COLOR_USAGE_RULES.md: orange is reserved for
 * large-scale/decorative or button-fill use, never small body-size text on
 * a light background.
 */
body.home .hcfb-home-choice__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 700;
	color: var(--wp--preset--color--hcfb-navy);
	font-size: 0.85rem;
}

body.home .hcfb-home-choice__heading {
	font-size: clamp(2.25rem, 1.7rem + 2.4vw, 3.25rem);
	margin: 0.35rem 0 1rem;
	line-height: 1.1;
}

body.home .hcfb-home-choice__intro {
	max-width: 32rem;
	font-size: var(--wp--preset--font-size--large);
	margin-bottom: var(--wp--preset--spacing--hcfb-md);
}

body.home .hcfb-home-choice__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--wp--preset--color--hcfb-orange);
	color: var(--wp--preset--color--hcfb-navy);
	font-weight: 700;
	padding: 0.6rem 1.5rem;
	border-radius: 999px;
	text-decoration: none;
	margin-bottom: var(--wp--preset--spacing--hcfb-lg);
}

body.home .hcfb-home-choice__tablist {
	display: flex;
	flex-direction: column;
	margin-top: var(--wp--preset--spacing--hcfb-lg);
	/* Pass 4 (§5): wider still -- the text column has more room now that the
	 * media column narrowed to 34%; longer row dividers match the
	 * reference's fuller-width underline treatment. */
	max-width: 44rem;
}

body.home .hcfb-home-choice__row {
	display: flex;
	align-items: center;
	gap: 1rem;
	border: 0;
	background: transparent;
	border-bottom: 1px solid var(--wp--preset--color--hcfb-border);
	font: inherit;
	font-weight: 600;
	font-size: 1.15rem;
	text-align: left;
	padding: 1.6rem 1rem;
	color: var(--wp--preset--color--hcfb-navy);
	cursor: pointer;
}

body.home .hcfb-home-choice__row-check {
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 999px;
	border: 2px solid currentColor;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8rem;
	flex-shrink: 0;
}

body.home .hcfb-home-choice__row[aria-selected="true"] {
	border-radius: 6px;
}

/*
 * Text color follows the fill, not a single uniform value: white only
 * reaches 2.38:1 on the brand orange/green fills (axe color-contrast
 * caught this during this redesign) -- navy passes on both, matching the
 * same fill/text pairing already used by the How Can You Help cards.
 */
body.home .hcfb-home-choice__row--orange[aria-selected="true"] {
	background: var(--wp--preset--color--hcfb-orange);
	color: var(--wp--preset--color--hcfb-navy);
}

body.home .hcfb-home-choice__row--green[aria-selected="true"] {
	background: var(--wp--preset--color--hcfb-green);
	color: var(--wp--preset--color--hcfb-navy);
}

body.home .hcfb-home-choice__row--navy[aria-selected="true"] {
	background: var(--wp--preset--color--hcfb-navy);
	color: var(--wp--preset--color--hcfb-surface);
}

/*
 * Pass 5E removed two absolutely-positioned, aria-hidden "backdrop" spans
 * (an orange + a second, pale-orange panel, both extending past the
 * frame) entirely -- markup and CSS. Pass 5F: the approved reference does
 * show exactly one orange, slightly angled backing shape behind the
 * active photo, so Pass 5E over-removed. Restored here as a single
 * ::before pseudo-element on .hcfb-home-choice__media -- not a second
 * backdrop span -- since no markup is needed for a purely decorative
 * shape (a pseudo-element is also inherently outside the accessibility
 * tree; there is nothing to aria-hide). One rule, shared by all three
 * states (Feeding Children/Families/Seniors) -- no per-image geometry.
 * overflow is back to visible so this shape can peek out past the photo
 * frame's own edges; the photo itself still clips to its own rounded
 * corners via .hcfb-home-choice__panel-photo's own overflow:hidden,
 * below, so this doesn't reintroduce any bleed on the photo itself.
 */
body.home .hcfb-home-choice__media {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: visible;
}

/*
 * Single orange backing panel: offset up/left/down past the photo's own
 * box, flush (slightly inset) on the right, so the orange reads mainly
 * along the top, left, and bottom edges rather than framing all four
 * sides evenly -- an asymmetric offset card, not a symmetric border. The
 * existing approved orange design token, no gradient, no second color,
 * no circle, no heavy shadow. z-index:0 keeps it behind
 * .hcfb-home-choice__panel (z-index:1, below) so the photograph always
 * reads as the dominant element.
 */
body.home .hcfb-home-choice__media::before {
	content: "";
	position: absolute;
	top: -4%;
	left: -4%;
	right: 2%;
	bottom: -5%;
	background: var(--wp--preset--color--hcfb-orange);
	border-radius: 12px;
	transform: rotate(-2deg);
	z-index: 0;
}

body.home .hcfb-home-choice__panel {
	position: absolute;
	inset: 0;
	z-index: 1;
}

body.home .hcfb-home-choice__panel[hidden] {
	display: none;
}

/*
 * One rule for all three states (Feeding Children/Families/Seniors) --
 * same border-radius, same fill behavior, same fit. Previously this also
 * carried a gradient "photo placeholder" background + a ::after "photo
 * placeholder" label + a drop shadow, all only ever relevant before real
 * photography existed; every panel now always has a real photo (the
 * PHP-side --has-photo modifier this rule depended on was unconditional,
 * so it -- and the placeholder styles it toggled off -- were dead code,
 * removed rather than left in place unused.
 */
body.home .hcfb-home-choice__panel-photo {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: 10px;
}

body.home .hcfb-home-choice__panel-photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
}

body.home .hcfb-home-choice__panel-link {
	position: absolute;
	left: 9%;
	bottom: 11%;
	z-index: 2;
	background: var(--wp--preset--color--hcfb-surface);
	padding: 0.5rem 1.1rem;
	border-radius: 999px;
	font-size: 0.85rem;
	box-shadow: 0 4px 14px rgba(38, 39, 96, 0.15);
}

@media (max-width: 900px) {
	body.home .hcfb-home-choice__grid {
		grid-template-columns: 1fr;
	}
	/*
	 * Pass 5B: pre-existing bug found while verifying the Feeding Families
	 * image swap's mobile behavior -- confirmed present for all three
	 * panels (children/families/seniors alike), not specific to the new
	 * photo. .hcfb-home-choice__media's only children are absolutely
	 * positioned (the backdrop decorations and every .hcfb-home-choice__
	 * panel, per their own rules above) -- with no in-flow content, its
	 * shrink-to-fit width is 0. `margin: 0 auto` alone (no explicit width)
	 * triggers exactly that shrink-to-fit sizing on a grid item, collapsing
	 * this element -- and, with it, the aspect-ratio-derived height -- to
	 * 0x0 at this breakpoint, hiding the photo entirely regardless of
	 * which tab is selected. Explicit width:100% gives it a definite size
	 * to stretch to (then capped by max-width below), matching the same
	 * fix pattern already used for width/height pairs elsewhere in this
	 * file; margin:0 auto still centers it once max-width applies above
	 * 26rem-wide containers.
	 *
	 * Pass 5C: re-verified this fix at 390x844, 375x812, 320x568, and
	 * 768x1024, in both normal and ?hcfb_clean_screenshot=1 modes, for all
	 * three panels, across repeated tab switching, keyboard (arrow-key)
	 * switching, and live viewport resizing -- zero-height never
	 * reproduces with this rule in place (confirmed it DOES reproduce
	 * with width:auto, isolating this as the actual, sufficient cause).
	 * No further change was needed; this comment records that
	 * verification rather than re-deriving the same fix twice.
	 */
	body.home .hcfb-home-choice__media {
		width: 100%;
		max-width: 26rem;
		margin: 0 auto;
	}

	/*
	 * Pass 5F: smaller offset + gentler rotation at mobile widths -- the
	 * desktop panel's offsets are percentages of .media's own box, so they
	 * shrink in absolute terms automatically as .media narrows, but the
	 * rotation was still visually too assertive at this scale, and the
	 * left/right offsets needed pulling in further to stay inside this
	 * section's own content gutter (grid padding-inline, above) rather
	 * than risk touching the viewport edge at 320px.
	 */
	body.home .hcfb-home-choice__media::before {
		top: -2%;
		left: -2%;
		right: 1%;
		bottom: -2.5%;
		transform: rotate(-1deg);
	}
}

/* ------------------------------------------------------------------ */
/* What's Happening + decorative leaf graphic + matching-gift notice   */
/* ------------------------------------------------------------------ */

/*
 * Clipping-architecture fix: this section is now the FULL-WIDTH outer
 * wrapper -- no max-width/margin/horizontal padding of its own -- so it
 * is never the reason anything gets clipped short of the true viewport
 * edge. It keeps position:relative (the decorative graphic's containing
 * block) and overflow-y:hidden only (the intentional bottom crop the
 * graphic's negative `bottom` offset still relies on); overflow-x is
 * deliberately `visible` so nothing here can ever clip the graphic
 * horizontally before it reaches the viewport edge. The centered text
 * measure that used to live on this section (max-width: var(--hcfb-
 * home-wide); margin: 0 auto; horizontal padding) moved to
 * .hcfb-home-whats-happening__grid below, which is the real "centered
 * inner wrapper" for heading/copy/button/date/story-list -- the
 * decorative graphic is NOT inside that wrapper (it's a sibling, direct
 * child of this section), so it was never supposed to share that
 * constraint in the first place. Vertical padding (rhythm) is preserved
 * unchanged; only the horizontal padding moved.
 */
body.home .hcfb-home-whats-happening {
	position: relative;
	overflow-x: visible;
	overflow-y: hidden;
	padding: var(--wp--preset--spacing--hcfb-xl) 0;
	/*
	 * What's Happening launch packet (2026-09-24, Ryan-directed CSS
	 * correction): the decorative graphic below is absolutely positioned
	 * and bottom-anchored with a fixed, viewport-relative size that does
	 * NOT shrink when the list column has fewer real rows (0-2, now that
	 * placeholder padding to 3 rows was removed). With a genuinely short
	 * section (few/no real News + Press Release items), the graphic's own
	 * height could exceed the section's available height and rise high
	 * enough to overlap the intro column's "view all" button. min-height
	 * guarantees the section is always tall enough for the graphic
	 * regardless of real item count (0-3) -- measured empirically against
	 * this section's real rendered geometry at 0 items (the worst case,
	 * since the intro column's own height, which is what determines
	 * button position, does not change with item count), with a ~2rem
	 * safety margin, at both widths where the graphic is shown (>900px;
	 * it is hidden entirely below that -- see the 900px breakpoint below).
	 * When real content already exceeds this height (e.g. with all 3 real
	 * items), min-height has no visual effect at all -- confirmed via
	 * tests/browser/whats-happening-graphic-overlap.spec.ts.
	 */
	min-height: 51rem;
}

@media (max-width: 1180px) {
	body.home .hcfb-home-whats-happening {
		min-height: 44rem;
	}
}

/*
 * Pass 4 root-cause fix (original rationale, still applies to the flex
 * layout itself): this flex row is a direct child of the section's
 * is-layout-constrained wrapper and was silently capped at 720px/centered
 * instead of spanning a real measure. Confirmed via live bounding-box
 * measurement before this rule existed.
 *
 * Clipping-architecture fix: this is now the centered TEXT-CONTENT inner
 * wrapper -- max-width/margin/horizontal padding moved here from the
 * (now full-width) section above, so heading/copy/button/date/story-list
 * keep their exact previous on-screen position while the decorative
 * graphic (a sibling of this element, not a descendant) is free to reach
 * the section's own now-viewport-wide edges.
 */
body.home .hcfb-home-whats-happening__grid {
	position: relative;
	width: 100%;
	max-width: var(--hcfb-home-wide);
	margin-inline: auto;
	padding-left: var(--wp--preset--spacing--hcfb-md);
	padding-right: var(--wp--preset--spacing--hcfb-md);
	align-items: flex-start;
	gap: var(--wp--preset--spacing--hcfb-2xl);
}

/*
 * Pass 5E: intro column no longer has to reserve room for the removed
 * decorative leaf/fruit graphic (position:relative + min-height:46rem
 * existed solely to give that absolutely-positioned graphic a containing
 * block and clearance below the text -- both removed now that there's no
 * absolutely-positioned child left). flex-basis reduced from 36% to 30%;
 * .hcfb-home-whats-happening__list-wrap's flex-grow:1 (below) picks up
 * the reclaimed width automatically -- both columns get real, in-flow
 * content into the space the graphic used to occupy.
 */
body.home .hcfb-home-whats-happening__intro {
	/* ~28-32% of the section width. */
	flex: 0 0 30%;
}

body.home .hcfb-home-whats-happening__heading {
	color: var(--wp--preset--color--hcfb-navy);
	font-size: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
	margin: 0 0 0.5rem;
}

body.home .hcfb-home-whats-happening__view-all {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--wp--preset--color--hcfb-orange);
	color: var(--wp--preset--color--hcfb-navy);
	font-weight: 700;
	padding: 0.6rem 1.5rem;
	border-radius: 999px;
	text-decoration: none;
	margin: var(--wp--preset--spacing--hcfb-sm) 0 var(--wp--preset--spacing--hcfb-lg);
}

body.home .hcfb-home-whats-happening__list-wrap {
	/* ~62-66% of the section width -- widened from 60% now that the intro
	 * column no longer needs 36% for the removed graphic. */
	flex: 1 1 64%;
	position: relative;
}

/*
 * Pass 6: enlarged into a genuine bottom-left decorative anchor, per the
 * user-supplied visual-composition reference -- ~35-38% of the section
 * width. A negative bottom offset intentionally pushes part of the image
 * past the section's own bottom edge -- the section's overflow-y:hidden
 * (above) clips it there, producing the requested bottom crop without
 * any vertical scroll. Rendered before .hcfb-home-whats-happening__grid
 * in source order, so normal paint order alone keeps it behind the
 * heading/copy/button/article rows -- no z-index needed. pointer-
 * events:none plus aria-hidden/empty alt keep it fully decorative and
 * non-interactive, never capturing a click or tap meant for the content
 * above it.
 *
 * Pass 7A1D: bottom-anchored rather than top-anchored. The new
 * orange-fork-graphic.png source (615x605, near-square) is itself
 * already an intentional corner crop -- leaves cut by its own top/right
 * edges, the orange cut by its own left/bottom edges -- so bottom: is
 * used (rather than the previous top: offset the taller, fully-enclosed
 * 612x793 icon needed to clear the intro text) to let that built-in
 * composition read as growing up out of the section's own lower-left
 * corner. This also keeps the graphic's vertical extent pinned to the
 * bottom of the section regardless of intro-copy length, so it can never
 * climb up into the heading/copy/button block above it.
 *
 * Clipping-architecture fix (left edge, desktop full-bleed): this
 * image's containing block is .hcfb-home-whats-happening (the nearest
 * position:relative ancestor) -- NOT .hcfb-home-whats-happening__grid,
 * since the image is this section's direct child, a sibling of .grid,
 * not nested inside it. Two earlier attempts both tried to compensate
 * for the section's own centering from the image's `left` value (a
 * fixed `-3.5rem`, then `calc(50% - 50vw)`) -- both left a hard vertical
 * crop line in the rendered screenshot, because the section itself was
 * still centered/capped AND still the overflow:hidden clipping boundary:
 * moving the image's own box doesn't change where its ancestor stops
 * painting. The actual fix was removing that constraint from the
 * section itself (see its rule above) so it is genuinely full-width --
 * `left` no longer needs any viewport-relative calc() at all now that
 * its containing block is genuinely full-width.
 *
 * The remaining `-1px` is not another gutter-compensation guess: pixel-
 * level analysis of the source PNG (canvas getImageData, every row) found
 * column 0 of the 615px-wide source is a solid, fully-opaque but
 * uncolored (near-white, RGB ~248) 1px margin -- zero colored rows out
 * of 605 -- while column 1 already has real orange/green content in
 * roughly half of them. At this element's rendered width that source
 * pixel is under 1 rendered px, so `-1px` fully removes it (confirmed by
 * re-sampling the actual rendered screenshot: 0 colored rows at x=0,
 * 227/440 colored rows at x=1) without visibly affecting the artwork's
 * own composition.
 */
body.home .hcfb-home-whats-happening__graphic {
	display: block;
	position: absolute;
	left: -1px;
	bottom: -3rem;
	width: 35%;
	max-width: 28rem;
	min-width: 13rem;
	height: auto;
	pointer-events: none;
}

/*
 * Narrower desktop widths (1024px/900px, both explicitly tested this
 * pass): the article-row column starts further left here, so the same
 * width used at 1280px+ would leave the image's own edge (including its
 * transparent padding) touching or slightly under the article column's
 * edge. A smaller width keeps a clean, unambiguous gap between the two
 * at every tested width. `left` is deliberately NOT overridden here --
 * the viewport-relative formula above already resolves correctly at
 * every width without a breakpoint.
 */
@media (max-width: 1180px) {
	body.home .hcfb-home-whats-happening__graphic {
		bottom: -2rem;
		/*
		 * What's Happening launch packet (2026-09-24, Ryan-directed CSS
		 * correction): narrowed from 32%/22rem -- with a genuinely tall
		 * list column (3 real items, real excerpt text, at exactly this
		 * breakpoint) the graphic's own width at 32% of the full section
		 * exceeded the intro column's own ~30%-of-grid width, letting its
		 * right edge creep a few pixels past the intro column into the
		 * list column regardless of vertical position -- a real, narrow
		 * horizontal overlap this pass's own testing found empirically
		 * (not previously covered at this breakpoint/content combination).
		 * 28%/19rem keeps the graphic safely inside the intro column's own
		 * horizontal footprint at every width in this range.
		 */
		width: 28%;
		max-width: 19rem;
	}
}

/* Pass 4 (§6): more generous vertical spacing -- was hcfb-md top/bottom. */
body.home .hcfb-home-news-row {
	border-bottom: 1px solid var(--wp--preset--color--hcfb-border);
	padding: var(--wp--preset--spacing--hcfb-lg) 0;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--hcfb-lg);
}

/*
 * Storytelling iteration 2 (per Harry's review): "stronger image
 * hierarchy... consistent card heights" -- a fixed 88x88px thumbnail
 * column (wp:post-featured-image, real image where a post has one). Fixed
 * square dimensions regardless of the source image's own aspect ratio is
 * what makes every row's height consistent, matching the same
 * object-fit:cover-in-a-fixed-box convention used throughout this theme
 * (e.g. .hcfb-neighbor-dual-path__media).
 *
 * Staff Review homepage polish pass: WordPress's own post-featured-image
 * block renders nothing at all (no wrapper element, confirmed via a live
 * DOM check -- not even an empty node to key a CSS :empty rule off of)
 * when a post has no featured image, which used to leave this column
 * fully collapsed -- the one real post then looked structurally
 * different from the always-boxed preview rows below it. This wrapper
 * (patterns/news-cards-placeholder.php now renders it directly, rather
 * than relying on the block's own className) is always present with a
 * graceful branded fallback fill; a real featured image (the block's own
 * output, rendered as a child of this element) is fully opaque at
 * 100%/100% and simply paints over the fallback when one exists.
 */
body.home .hcfb-home-news-row__thumb {
	flex: 0 0 88px;
	width: 88px;
	height: 88px;
	border-radius: 8px;
	overflow: hidden;
	background-color: var(--wp--preset--color--hcfb-cream);
	background-image: url("../images/brand/hcfb-mark-color.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 42%;
}

body.home .hcfb-home-news-row__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Preview rows (no real post/image yet) get the same fixed box, in a flat
 * cream fill, so real and preview rows share one consistent row height. */
body.home .hcfb-home-news-row__thumb--preview {
	background: var(--wp--preset--color--hcfb-cream);
	border: 1px dashed var(--wp--preset--color--hcfb-border);
}

body.home .hcfb-home-news-row__meta {
	flex: 0 0 8.5rem;
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--wp--preset--color--hcfb-text-muted);
}

body.home .hcfb-home-news-row__content {
	flex: 1 1 auto;
}

body.home .hcfb-home-news-row__title {
	margin: 0.35rem 0;
	font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
}

body.home .hcfb-home-news-row__learn-more {
	flex: 0 0 auto;
	margin: 0;
	align-self: center;
}

body.home .hcfb-home-news-row__learn-more a,
body.home a.hcfb-home-news-row__learn-more {
	font-weight: 700;
	text-decoration: underline;
}

/*
 * Fidelity pass 3 (§7): render-time-only "layout preview" rows that fill the
 * three-row geometry when fewer real posts exist. Visually distinct (dashed
 * divider, muted badge) so they never read as real content, matching this
 * section's real-row column geometry (meta / title+copy / trailing column)
 * so the overall three-row rhythm still lines up.
 */
body.home .hcfb-home-news-row--preview {
	border-bottom-style: dashed;
	opacity: 0.72;
}

/*
 * Navy, not the muted-gray text token -- axe color-contrast measured
 * --hcfb-text-muted on white at 3.51:1 here (bold 11.2px text needs 4.5:1,
 * the large-text 3:1 exception does not apply at this size). Same
 * fill/text-safety pattern already used elsewhere in this file.
 */
body.home .hcfb-home-news-row__preview-badge {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.7rem;
	padding: 0.15rem 0.5rem;
	color: var(--wp--preset--color--hcfb-navy);
	border: 1px dashed var(--wp--preset--color--hcfb-navy);
	border-radius: 999px;
}

body.home .hcfb-home-news-row__title--preview {
	font-style: italic;
}

/*
 * Pass 5F: converted from an in-flow grid column (fidelity pass 2, §7 --
 * "still in normal flow, not absolutely positioned, an earlier
 * absolutely-positioned version escaped upward over the content above")
 * to a true fixed-position, non-modal floating overlay, rendered via
 * functions.php's wp_footer action rather than as a child of the What's
 * Happening section -- it no longer reserves any grid column, height, or
 * whitespace in that (or any) section, and only ever appears behind the
 * explicit ?hcfb_offer_preview=1 parameter. Bottom-right viewport corner,
 * clear of the top utility bar/nav and of the centered Get in Touch form.
 */
body.home .hcfb-home-matching-gift {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	width: min(14rem, calc(100vw - 2.5rem));
	z-index: 40;
	background: var(--wp--preset--color--hcfb-navy);
	color: var(--wp--preset--color--hcfb-surface);
	border-radius: 8px;
	padding: var(--wp--preset--spacing--hcfb-sm);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
	font-size: 0.85rem;
}

body.home .hcfb-home-matching-gift[hidden] {
	display: none;
}

body.home .hcfb-home-matching-gift__close {
	position: absolute;
	top: 0.4rem;
	right: 0.4rem;
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--hcfb-surface);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	padding: 0.25rem;
}

body.home .hcfb-home-matching-gift__media {
	aspect-ratio: 16 / 9;
	background: rgba(255, 255, 255, 0.12);
	border-radius: 6px;
	margin-bottom: 0.5rem;
}

body.home .hcfb-home-matching-gift__label {
	font-size: 0.6rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--hcfb-green);
	font-weight: 700;
}

body.home .hcfb-home-matching-gift__heading {
	font-size: 0.95rem;
	margin: 0.2rem 0;
}

body.home .hcfb-home-matching-gift__copy {
	font-size: 0.8rem;
}

body.home .hcfb-home-matching-gift__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: var(--wp--preset--color--hcfb-orange);
	color: var(--wp--preset--color--hcfb-navy);
	font-weight: 700;
	font-size: 0.8rem;
	padding: 0.4rem 1rem;
	border-radius: 999px;
	text-decoration: none;
	margin-top: 0.4rem;
}

@media (max-width: 900px) {
	body.home .hcfb-home-whats-happening__grid {
		flex-direction: column;
	}
	body.home .hcfb-home-whats-happening__intro {
		flex-basis: auto;
	}
	body.home .hcfb-home-news-row {
		flex-wrap: wrap;
	}
	/*
	 * Fixed-position overlay stays anchored to the viewport at every
	 * width -- just a tighter corner inset on narrow phones, still capped
	 * well short of the viewport width so it never touches the opposite
	 * edge.
	 */
	body.home .hcfb-home-matching-gift {
		right: 0.75rem;
		bottom: 0.75rem;
		width: min(16rem, calc(100vw - 1.5rem));
	}
	/*
	 * Hidden below the same 900px breakpoint the intro column itself
	 * stacks at. Pass 6 enlarged this to a genuine section-width-relative
	 * decorative anchor -- at mobile widths that same percentage sizing
	 * would either dominate the stacked layout or force awkward
	 * recalculation against a much narrower column, and once the intro
	 * column is full-width and sits above the article list (rather than
	 * beside it), the illustration adds no layout benefit, only extra
	 * scroll distance before the three real/preview rows. "Hide when
	 * necessary" (this pass's own guidance) was the more defensible
	 * choice here than forcing a smaller version to fit.
	 */
	body.home .hcfb-home-whats-happening__graphic {
		display: none;
	}
}

/* ------------------------------------------------------------------ */
/* Full-width facility image band                                       */
/* ------------------------------------------------------------------ */

body.home .hcfb-home-facility {
	padding: 0;
	/*
	 * Pass 3 (§8): this theme's global blockGap (theme.json,
	 * styles.spacing.blockGap) otherwise inserts a visible margin above this
	 * section and above the section that follows it -- a real, if small,
	 * seam in what is supposed to be a truly full-bleed, edge-to-edge band.
	 */
	margin-top: 0;
	margin-bottom: 0;
}

body.home .hcfb-home-facility + * {
	margin-top: 0;
}

/*
 * Pass 4 (§7): true full-bleed technique. Same 720px-default-constraint bug
 * as hero/what's-happening above, PLUS this section explicitly needs to
 * reach both viewport edges (not just its own section box) -- the standard
 * "break out of a centered container" pattern (100vw + left:50% +
 * negative half-viewport margin), safe across Chromium/Firefox/WebKit.
 * body.home's overflow-x:hidden (bottom of this file) is the existing
 * safety net against the 100vw-includes-scrollbar edge case some browsers
 * have, so this can never create real horizontal overflow/scroll.
 */
body.home .hcfb-home-facility__gallery {
	position: relative;
	left: 50%;
	right: 50%;
	width: 100vw;
	max-width: 100vw;
	/*
	 * !important required: WordPress's default constrained-layout global
	 * style sets `margin-left/margin-right: auto !important` on direct
	 * children of an `.is-layout-constrained` container (confirmed by
	 * inspecting computed styles -- left/right/width above applied
	 * correctly without !important, but margin-left/margin-right computed
	 * to 0px/auto until !important was added here).
	 */
	margin-left: -50vw !important;
	margin-right: -50vw !important;
}

body.home .hcfb-home-facility__track {
	position: relative;
	/*
	 * Staff Review homepage polish pass (per Harry's review): iteration 2
	 * (see the superseded comment this replaces) had trimmed this band down
	 * to clamp(15rem, 20vw, 22rem) so it wouldn't compete with the "building
	 * the Hunger Action Center" story below -- reviewed again and judged too
	 * thin for the Hunger Action Center's own hero image. Taller again, but
	 * short of the original clamp(18rem, 26vw, 28rem) this section started
	 * from, so it reads as a confident cinematic band without returning to
	 * a near-full secondary hero.
	 */
	height: clamp(19rem, 28vw, 32rem);
}

body.home .hcfb-home-facility__slide {
	position: absolute;
	inset: 0;
}

/* Provisional renderings (docs/HOMEPAGE_ASSET_PROVISIONAL_USE.md). */
body.home .hcfb-home-facility__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Staff Review comments 6794/6796 (2026-09-24): a real, visible caption
 * -- not just img alt text -- so an ordinary sighted visitor sees the
 * same accurate "still under construction, opens November 2026" context
 * a screen-reader user gets from alt text alone. Bottom-anchored overlay
 * bar, legible over any photo tone (same translucent-navy-on-white
 * technique already used for this theme's other on-photo overlay text).
 */
body.home .hcfb-home-facility__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 0.55rem 1rem;
	background: rgba(28, 43, 57, 0.78);
	color: #fff;
	font-size: 0.85rem;
	line-height: 1.35;
}

@media (max-width: 782px) {
	body.home .hcfb-home-facility__caption {
		font-size: 0.78rem;
		padding: 0.45rem 0.85rem;
	}
}

/* Stronger, more photo-like tonal composition (a "sky" top, richer midtone,
 * warmer ground tone) until real photography arrives -- pass 2's flat
 * diagonal wash read as a generic gradient rather than a placeholder for an
 * actual facility/aerial photo. */
body.home .hcfb-home-facility__placeholder {
	width: 100%;
	height: 100%;
	background:
		linear-gradient(
			180deg,
			rgba(180, 200, 214, 0.55) 0%,
			rgba(38, 39, 96, 0.75) 22%,
			rgba(38, 39, 96, 0.5) 45%,
			rgba(162, 193, 61, 0.6) 75%,
			rgba(247, 141, 34, 0.5) 100%
		);
}

body.home .hcfb-home-facility .hcfb-gallery__controls {
	position: absolute;
	left: 50%;
	bottom: var(--wp--preset--spacing--hcfb-md);
	transform: translateX(-50%);
}

@media (max-width: 782px) {
	body.home .hcfb-home-facility__track {
		height: 19rem;
	}
}

/* ------------------------------------------------------------------ */
/* Impact section                                                       */
/* ------------------------------------------------------------------ */

body.home .hcfb-home-impact {
	padding: var(--wp--preset--spacing--hcfb-lg) 0;
	text-align: center;
}

body.home .hcfb-home-impact__heading {
	color: var(--wp--preset--color--hcfb-navy);
	font-size: clamp(2rem, 1.55rem + 2vw, 2.9rem);
	line-height: 1.2;
	max-width: 46rem;
	margin-left: auto;
	margin-right: auto;
}

body.home .hcfb-home-impact > p {
	max-width: 40rem;
	margin-left: auto;
	margin-right: auto;
}

body.home .hcfb-home-impact__stats {
	margin-top: var(--wp--preset--spacing--hcfb-md);
	max-width: var(--hcfb-home-wide);
	margin-left: auto;
	margin-right: auto;
	/* Pass 3 (§9): wider gaps between the three metrics -- pass 2 relied on
	 * the global 1rem blockGap, which read as cramped against the
	 * reference's generously spaced trio. */
	column-gap: var(--wp--preset--spacing--hcfb-xl);
}

/*
 * #687c27, not the raw brand green token, for this specific large-text use:
 * the brand green (#a2c13d) on white measures only ~2.05:1, short of even
 * the 3:1 large-text minimum (WCAG AA 1.4.3) -- confirmed by manual
 * contrast calculation during this fidelity pass (axe-core's color-contrast
 * rule reports this specific case as "incomplete", not a hard violation,
 * since it cannot always fully resolve computed backgrounds through
 * wp:columns, so it is not caught by the existing automated gate). This
 * darkened shade keeps the same hue (still reads as "green") while
 * reaching ~4.7:1, matching the fill/text-safety pattern already used
 * elsewhere in this file (navy text on brand orange/green fills).
 */
/*
 * Pass 4 (§8): font-size reduced from a clamp tuned only against a single
 * "—" glyph (fits at any size) -- once real clean-mode sample text like
 * "00.0 Million" rendered at the old clamp(3.5rem,...,6.5rem), it wrapped
 * mid-number ("000,00" / "0" on its own line), a real, visually-confirmed
 * layout defect, not a stylistic choice. This size + nowrap keeps every
 * sample string on one line within its column at 1440px.
 */
body.home .hcfb-home-impact__number {
	color: #687c27;
	font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
	font-weight: 800;
	margin: 0;
	line-height: 1;
	white-space: nowrap;
}

body.home .hcfb-home-impact__label {
	color: var(--wp--preset--color--hcfb-navy);
	font-weight: 700;
	font-size: 0.78rem;
	margin-top: 0.3rem;
}

body.home .hcfb-home-impact__ctas {
	margin-top: var(--wp--preset--spacing--hcfb-sm);
}

body.home .hcfb-home-impact__ctas .wp-block-button__link {
	padding: 0.5rem 1.25rem;
	font-size: 0.9rem;
}

body.home .hcfb-home-impact__ctas .wp-block-button__link {
	background: var(--wp--preset--color--hcfb-orange);
	color: var(--wp--preset--color--hcfb-navy);
	border-color: var(--wp--preset--color--hcfb-orange);
}

body.home .hcfb-home-impact__ctas .is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--hcfb-navy);
	border: 2px solid var(--wp--preset--color--hcfb-navy);
}

/* ------------------------------------------------------------------ */
/* Get in touch: single-column, form-centered layout                   */
/* ------------------------------------------------------------------ */

/*
 * Pass 6: position:relative so the enlarged
 * .hcfb-home-get-in-touch__graphic below can be absolutely positioned
 * against this section and intentionally cropped by the bottom (and
 * slightly the right) edge without ever creating horizontal scroll.
 *
 * Real bug found+fixed verifying this pass: with plain `overflow:hidden`
 * here, an absolutely positioned `bottom`/`right`-offset child with
 * `height:auto` (this image) rendered as if both offsets were 0 --
 * confirmed by directly comparing computed styles (bottom/right
 * correctly showed the intended negative values) against the actual
 * rendered geometry (which showed zero crop on both edges) with
 * `overflow:hidden` in place, versus correct cropping the instant
 * `overflow` was switched to `visible`. This reproduces with a plain
 * `<div>` in place of the `<img>` too, so it is not specific to replaced
 * elements -- it is specifically the combination of an auto-height
 * container, `overflow:hidden`, and a `bottom`/`right`-positioned
 * absolutely positioned child. `clip-path: inset(0)` clips the same
 * visual overflow (confirmed: no horizontal document scroll) without
 * triggering whatever internal layout-pass ordering issue
 * `overflow:hidden` runs into here.
 */
/*
 * Iteration 4 (per Harry's review): "still feels loosely assembled... give
 * Get in Touch a slightly stronger section boundary from What's Happening"
 * -- already cream (unchanged token), padding increased for more presence,
 * plus a restrained green top accent rule (same accent already used
 * elsewhere this iteration, e.g. the Food Insecurity page's own chapter
 * rules) so the white-to-cream transition from What's Happening reads as a
 * clear, intentional boundary rather than a soft, easy-to-miss color
 * change alone.
 */
body.home .hcfb-home-get-in-touch {
	position: relative;
	clip-path: inset(0);
	background: var(--wp--preset--color--hcfb-cream);
	border-top: 4px solid var(--wp--preset--color--hcfb-green);
	padding: var(--wp--preset--spacing--hcfb-2xl, 6rem) 0;
}

@media (max-width: 768px) {
	body.home .hcfb-home-get-in-touch {
		padding: var(--wp--preset--spacing--hcfb-xl, 4rem) 0;
	}
}

/*
 * Pass 5E: this was a two-column grid (form left, a decorative orange/red
 * fruit + green stem/leaf CSS graphic filling the right column) -- that
 * graphic was obsolete placeholder artwork with no real source, and was
 * removed entirely. Pass 5E then made this a single, centered form column
 * since no replacement graphic existed yet. Pass 5G restored a
 * real-artwork two-column grid.
 *
 * Pass 6: the decorative graphic is no longer a grid column at all -- it
 * moved to be a section-level, absolutely positioned element (below) so
 * it can be sized against the section's own width and bleed off its
 * edges, matching the user-supplied visual-composition reference. This
 * is back to a single, left-aligned form column ("form remains the
 * primary content on the left," per this pass's brief) with a
 * comfortable, never-too-narrow reading measure -- the apple now simply
 * renders behind/beside it as a background illustration.
 */
/*
 * Storytelling iteration 3 root-cause fix (per Harry's review): the form
 * was running too close to the viewport's left edge. Root cause --
 * .hcfb-home-get-in-touch (the section) is one of this homepage's
 * full-bleed sections (max-width:none; width:100%, see the shared list
 * near the top of this file), which is correct and matches every other
 * homepage section -- but this grid, its direct child, was pinned to
 * `margin: 0 !important` with only a flat `padding: 0 hcfb-md` (24px) as
 * its own inset. Every OTHER full-bleed section's content wrapper instead
 * uses this theme's shared wide-container pattern --
 * `max-width: var(--hcfb-home-wide); margin-inline: auto; padding-left/
 * right: hcfb-md` -- see .hcfb-home-whats-happening__grid a few hundred
 * lines above for the identical, already-proven rule. This grid never got
 * that treatment; it was given a form-reading-measure max-width (40rem)
 * AND zero horizontal margin at the same level, which is what put the
 * form's actual left edge at a bare 24px from the true viewport edge on
 * any wide screen, far tighter than every sibling section's own content
 * inset.
 *
 * Fix: apply the SAME shared wide-container pattern here (no more
 * `!important` needed -- this now matches, rather than fights, core's own
 * `.is-layout-constrained > :where(...) {margin-left/right: auto}` rule
 * the Pass 6 comment above describes; the historical conflict only existed
 * because this rule used to want `margin: 0`, disagreeing with core's
 * auto-centering -- it no longer does). The 40rem comfortable reading
 * measure moves to .hcfb-home-get-in-touch__text below, which -- as a
 * plain block element with no margin of its own -- naturally sits at the
 * LEFT edge of this now-properly-inset wide container, preserving the
 * intended "form on the left, apple bleeding out the right" composition
 * (Pass 6's own brief) at a sensible, consistent gutter instead of the
 * viewport's bare edge.
 */
body.home .hcfb-home-get-in-touch__grid {
	max-width: var(--hcfb-home-wide, 82rem);
	margin-inline: auto;
	padding-left: var(--wp--preset--spacing--hcfb-md);
	padding-right: var(--wp--preset--spacing--hcfb-md);
	position: relative;
	z-index: 1;
}

body.home .hcfb-home-get-in-touch__text {
	max-width: 40rem;
	/*
	 * Establishes its own stacking context above the graphic below, which
	 * is `position: absolute` but otherwise has no explicit z-index --
	 * without this, an absolutely-positioned element paints above normal-
	 * flow content in the same stacking context regardless of DOM order,
	 * which would risk the apple visually covering form content if the
	 * two ever came close. Belt-and-suspenders: at the sizes/positions
	 * below they should never actually overlap.
	 */
	position: relative;
	z-index: 1;
}

/*
 * Iteration 4 root-cause fix (per Harry's review): moved from being a
 * direct child of the <section> (positioned against the section's own
 * raw, full-viewport-width edges) to a child of
 * .hcfb-home-get-in-touch__grid instead -- see
 * patterns/contact-preview-placeholder.php's own comment on this move.
 * The grid is this page's shared wide-container pattern (max-width:
 * var(--hcfb-home-wide); margin-inline:auto; padding hcfb-md), already
 * `position: relative`, so the graphic's `right`/`bottom` offsets below
 * are now measured from THAT contained, gutter-respecting box -- "the
 * apple remains within the composition rather than floating at the
 * edge" (this pass's own instruction) -- instead of the true viewport
 * edge. `right: 0` sits it flush with the grid's own right padding edge
 * (never past it); a small negative `bottom` still gives it a playful
 * downward anchor without extending past the section's own bottom
 * padding.
 *
 * Size reduced again from iteration 3's 34%/26rem to roughly the
 * requested "30-35% illustration" share of this container (the form
 * column is a fixed 40rem/640px against this grid's up-to-82rem/1312px
 * width, comfortably leaving room for both without overlap at any
 * desktop size actually tested).
 */
/*
 * Staff Review homepage polish pass: at full size/opacity/isolation this
 * read as "a giant standalone apple" floating in an otherwise empty
 * column, not a supporting decorative graphic (per Harry's review).
 * Smaller, faded to a soft watermark-level presence, and pushed further
 * off the section's own right/bottom edge (the section's `clip-path:
 * inset(0)` above already crops anything past that edge) so it reads as
 * a graphic bleeding in from the corner rather than a sticker floating in
 * open space. Unmodified artwork/aspect ratio -- opacity and
 * size/position are the only changes.
 */
/*
 * Staff Review Round 1 (final visual tweaks pass): sized up again from
 * the prior pass's 20%/15rem -- Harry's review called that treatment
 * appropriately subtle but too small, wanting it to fill more of the
 * lower-right negative space. The bleed offset (right/bottom) grows
 * roughly in step with the size increase so the graphic's visible LEFT/
 * TOP edge doesn't creep any closer to the form column than before --
 * the extra size reads as "more graphic peeking from the corner," not
 * "the same graphic drifting toward the form." Opacity nudged up only
 * slightly (0.2 -> 0.24) -- still clearly a pale watermark-level accent,
 * not a return to the earlier solid-color treatment.
 */
body.home .hcfb-home-get-in-touch__graphic {
	display: block;
	position: absolute;
	z-index: 0;
	right: -3rem;
	bottom: -4.5rem;
	width: 26%;
	max-width: 19rem;
	min-width: 8rem;
	height: auto;
	opacity: 0.24;
	pointer-events: none;
}

/*
 * Narrower desktop widths (1024px/900px, both explicitly tested this
 * pass): the form keeps its own comfortable fixed reading measure rather
 * than shrinking, so the section itself narrowing means less room
 * remains beside it before the two would collide -- confirmed via live
 * measurement. A smaller image at these widths keeps a clean,
 * unambiguous gap between the two, at the cost of landing a little
 * under this pass's 42-52% target range here specifically.
 */
@media (max-width: 1180px) {
	body.home .hcfb-home-get-in-touch__graphic {
		width: 22%;
		max-width: 12.5rem;
		right: -1.5rem;
		bottom: -2rem;
	}
}

@media (max-width: 900px) {
	/*
	 * Mobile: iteration 4 moved the graphic to be a child of
	 * .hcfb-home-get-in-touch__grid instead of the <section> itself (see
	 * that rule's own comment above and patterns/contact-preview-placeholder.php),
	 * so the flex-column-plus-`order` reordering technique this rule used
	 * to apply to the SECTION's own direct children now has to apply one
	 * level down, to the GRID's direct children instead -- `order` has no
	 * effect on an element that isn't itself a flex item of the container
	 * declaring `display: flex`. Same intent as before: form first, the
	 * now-much-smaller apple in-flow beneath it, without changing source
	 * order or duplicating markup. "Avoid excessive page height" is why
	 * this reduces substantially rather than disappearing outright -- at
	 * this size it no longer risks crowding the form.
	 */
	body.home .hcfb-home-get-in-touch__grid {
		max-width: 100%;
		display: flex;
		flex-direction: column;
	}
	body.home .hcfb-home-get-in-touch__text {
		order: 1;
	}
	body.home .hcfb-home-get-in-touch__graphic {
		position: static;
		order: 2;
		width: 46%;
		max-width: 9.5rem;
		/* A little more visible than the desktop bleed treatment (0.34 vs
		 * 0.24) -- in normal flow, with no edge to bleed off of and no
		 * adjacent form content to sit beside, a lower opacity reads as a
		 * faint, accidental-looking smudge rather than an intentional
		 * accent. Still restrained -- only a modest bump alongside the
		 * size increase, not a return to a solid apple. */
		opacity: 0.34;
		/* Resets the desktop rule's 10rem min-width -- left as-is, that
		 * stale value (larger than this rule's own 11rem max-width)
		 * would win per the CSS min/max conflict-resolution order,
		 * silently overriding this max-width entirely. Confirmed via
		 * live measurement before this reset existed (rendered at 224px,
		 * i.e. exactly the old min-width, not the intended ~11rem). */
		min-width: 0;
		margin: var(--wp--preset--spacing--hcfb-md) auto 0;
		right: auto;
		bottom: auto;
	}
}

body.home .hcfb-home-get-in-touch__heading {
	color: var(--wp--preset--color--hcfb-navy);
	font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem);
	margin: 0 0 0.5rem;
}

/*
 * Pass 4 (§9): the reference shows flat white fields sitting directly on
 * the cream section background, not a bordered/shadowed card -- removes
 * the pass-3 card treatment (background/border/border-radius/padding) for
 * the homepage specifically only.
 */
body.home .hcfb-contact-preview__form {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
}

/*
 * Wire-up-to-Constant-Contact pass: homepage-specific sizing on top of
 * style.css's shared `.hcfb-ctct-form` base (larger field height/vertical
 * rhythm, orange submit button matching the rest of the homepage's
 * primary-action color) -- was previously written against this pattern's
 * old hand-authored `.hcfb-contact-preview__field` markup, now targets the
 * Constant Contact Forms plugin's own field markup instead.
 */
body.home form.hcfb-ctct-form .ctct-form-field {
	margin-bottom: 1.25rem;
}

body.home form.hcfb-ctct-form label {
	font-size: 1rem;
}

body.home form.hcfb-ctct-form .ctct-label-top {
	margin-bottom: 0.15rem;
}

body.home form.hcfb-ctct-form input:not([type="checkbox"]):not([type="submit"]),
body.home form.hcfb-ctct-form textarea {
	background: var(--wp--preset--color--hcfb-surface);
	border: 1px solid var(--wp--preset--color--hcfb-border);
	padding: 0.85rem 1rem;
	font-size: 1rem;
}

body.home form.hcfb-ctct-form input[type="submit"] {
	background: var(--wp--preset--color--hcfb-orange);
	color: var(--wp--preset--color--hcfb-navy);
	padding: 0.85rem 2rem;
	font-size: 1rem;
}

body.home form.hcfb-ctct-form input[type="submit"]:hover,
body.home form.hcfb-ctct-form input[type="submit"]:focus-visible {
	background: var(--wp--preset--color--hcfb-orange);
	opacity: 0.85;
}

/* ------------------------------------------------------------------ */
/* Final decorative footer-bottom strip (user-supplied artwork)        */
/* ------------------------------------------------------------------ */

/*
 * Pass 5G: replaced the hand-authored SVG leaf-repeat geometry (previously
 * styled here as a div-wrapped <svg>, stretched via preserveAspectRatio=
 * "none") with the user-supplied production PNG (native 2938x252,
 * see docs/HOMEPAGE_ASSET_PROVISIONAL_USE.md) rendered directly as an
 * <img class="hcfb-home-leaf-strip">, no wrapping element needed. Verified
 * this pass: the artwork's left/right edges are NOT a seamless repeat (the
 * leaf phase doesn't match across the join), so this deliberately does not
 * tile it at viewports wider than its native 2938px width. Instead: width
 * scales down to fill any narrower viewport (no upscaling since real
 * tested widths -- 1440 down to 320 -- are all under 2938px already),
 * max-width caps it at its own native pixel width so it's never stretched
 * past that, and it centers with the surface/white background matching
 * the artwork's own white background filling any leftover space at wider
 * viewports -- a "centered white continuation," not a repeat, per this
 * pass's explicit direction once a seamless join couldn't be confirmed.
 * height:auto (never a fixed/forced height) keeps its native aspect ratio
 * exactly; display:block removes the default inline-image baseline gap
 * that would otherwise show as a sliver of space above it, immediately
 * under the navy footer.
 */
body.home .hcfb-home-leaf-strip {
	display: block;
	width: 100%;
	max-width: 2938px;
	height: auto;
	margin: 0 auto;
	background: var(--wp--preset--color--hcfb-surface);
}

/*
 * Real bug found+fixed verifying this pass: WordPress's wp:shortcode
 * block runs its content through wpautop regardless of block type,
 * wrapping [hcfb_footer_strip]'s output in a <p> and turning the
 * preceding newline/comment into a leading <br> -- confirmed this
 * already happens to the existing, working [hcfb_logo ...] shortcodes
 * too (parts/header-home.html, parts/footer-home.html), it's just
 * invisible there because those sit inside flex rows tall enough to
 * absorb the extra paragraph margin + <br> line-box without any row-
 * height change. This element sits in plain block flow at the very end
 * of the page with nothing to absorb that space into, so the same
 * artifact showed up as a real, measured ~41px gap between the footer
 * and this strip. Same fix already used for other stray-inline-
 * whitespace cases in this codebase: zero the paragraph's own margin and
 * collapse its line-height so the injected <br> takes up no vertical
 * space either.
 */
body.home p:has(> .hcfb-home-leaf-strip) {
	margin: 0;
	line-height: 0;
}

/* ------------------------------------------------------------------ */
/* Global narrow-width safety net for this page's new decorative shapes */
/* ------------------------------------------------------------------ */

body.home {
	overflow-x: hidden;
}