/*
 * Programs overview (/our-impact/programs/) page identity -- genuinely new
 * rules only; every section reuses the shared prominent-page primitives
 * (.hcfb-prominent-hero, .hcfb-prominent-band, .hcfb-editorial-grid-section,
 * .hcfb-editorial-grid, .hcfb-prominent-cta, .hcfb-strategic-cta) from
 * prominent-sections.css directly. Enqueued only on
 * hcfb_is_programs_template() (functions.php), same conditional-single-page
 * convention as give-food-experience.css / our-impact-experience.css.
 *
 * VISUAL-DENSITY REFINEMENT (Ryan-directed, local only, presentation-only
 * pass -- no program data/copy/order changed): root-cause fix for the
 * oversized pounds/box metric icon, consolidation of the former four
 * separate channel-group sections into one unified program grid, and a
 * page-length reduction. See inc/programs-sections.php's own docblocks for
 * the markup-side half of each of these changes.
 */

/* ------------------------------------------------------------------ */
/* 0. Compact hero -- fixes an empty right side.                        */
/* ------------------------------------------------------------------ */

/*
 * ROOT CAUSE (confirmed by measuring the rendered page before editing,
 * not assumed): `.hcfb-prominent-hero__inner` is NOT a two-column grid on
 * this page -- `.hcfb-prominent-hero__grid`'s own `grid-template-columns:
 * minmax(0,1fr) minmax(0,1fr)` rule never applies here at all, because
 * this hero's markup never uses that wrapper class (same convention as
 * Contact's compact hero) and computed styles confirm `display: block`,
 * `grid-template-columns: none`. There is no phantom media column.
 *
 * The real cause: `.hcfb-prominent-hero__heading` (max-width: 21ch) and
 * `.hcfb-prominent-hero__intro` (max-width: 34rem / 544px) are both sized
 * for the LEFT column of a two-column split hero next to a photo -- correct
 * there, but this hero has no photo and no split at all, so the text sits
 * flush-left inside the full 82rem-wide `.hcfb-prominent-hero__inner`
 * (1312px at 1440px viewport width), leaving roughly 728px of genuinely
 * unused space to the right of the 544px-wide intro paragraph. Confirmed
 * via a Playwright measurement pass before this fix (see the packet's own
 * stop report for the exact before numbers).
 *
 * Fix: same "no media column" compact-hero convention already established
 * for Contact (`.hcfb-contact-hero`) and Give Help (`.hcfb-give-help-hero`)
 * -- reduced section padding and a narrower, centered content-block
 * measure instead of the shared hero's wide two-column grid. Deliberately
 * DIFFERENT from those two in one respect, per direct instruction: the
 * content BLOCK is centered within the hero, but its own text stays
 * left-aligned (never `text-align: center`) -- Programs' longer intro
 * copy reads better left-aligned at this width than centered. The
 * heading/intro's own narrower max-widths are released (`max-width:
 * none`) so the text can use the full width of this new, wider (~54rem)
 * centered block instead of sitting narrower than its own container.
 */
.hcfb-programs-hero {
	padding: var(--wp--preset--spacing--hcfb-md, 1.5rem) 0;
}

.hcfb-programs-hero .hcfb-prominent-hero__inner {
	max-width: 54rem;
	margin-inline: auto;
	text-align: left;
}

.hcfb-programs-hero .hcfb-prominent-hero__heading,
.hcfb-programs-hero .hcfb-prominent-hero__intro {
	max-width: none;
}

/* ------------------------------------------------------------------ */
/* 1. Impact-band metric icons.                                        */
/* ------------------------------------------------------------------ */

/*
 * The FY2025 impact band migrated (2026-09-15) to the reusable
 * [hcfb/impact-metrics] block (inc/impact-metrics-block.php), whose
 * "band" variant no longer carries the `.hcfb-programs-impact-band`
 * class this section's rules used to target -- the root-cause icon-
 * sizing fix that page-scoped selector applied is now generalized,
 * unscoped, and shared for every "band" variant consumer in
 * assets/css/prominent-sections.css's own `.hcfb-prominent-band__icon`
 * rule (see that file's matching comment for the full history). Nothing
 * Programs-specific remains to fix here.
 */

/* ------------------------------------------------------------------ */
/* 2. Unified program grid + card treatment.                            */
/* ------------------------------------------------------------------ */

/*
 * The grid itself needs no new rule -- it reuses
 * .hcfb-editorial-grid's existing shared 3/2/1 responsive behavior
 * (prominent-sections.css: 3 columns above 1024px, 2 columns at
 * <=1024px, 1 column at <=600px) directly, the same breakpoints every
 * other editorial grid on the site already uses. This one small gap
 * closes the space between the intro copy and the first row of cards,
 * now that both live inside the same section.
 */
.hcfb-programs-grid-wrap {
	margin-top: var(--wp--preset--spacing--hcfb-md);
}

/*
 * Channel label -- reuses `.hcfb-prominent-eyebrow` (the shared,
 * already-approved eyebrow treatment used on About/Partner's own heroes)
 * directly rather than inventing a new label style. This is the one
 * required, always-present TEXT distinguisher between channels; the top
 * accent border below is a purely decorative, non-differentiating
 * addition (identical on every card), never the sole way a channel is
 * communicated.
 */
.hcfb-programs-card__channel {
	margin: 0 0 0.5rem;
}

/*
 * Restrained, uniform top accent -- "a subtle page-scoped channel accent
 * such as a top border" per direct instruction. Deliberately the SAME
 * color on every card rather than one color per channel: this theme only
 * defines three brand accent colors (navy/orange/green) for four
 * channels, and coloring three channels one way and a fourth another
 * would itself risk reading as a meaningful-but-incomplete color code --
 * exactly what "never use color alone to distinguish channels" warns
 * against. The text label above is the real distinguisher; this border is
 * pure visual rhythm, identical treatment for every card.
 */
.hcfb-programs-card {
	border-top: 3px solid var(--wp--preset--color--hcfb-orange);
}

/*
 * ROOT CAUSE of the uneven summary-to-statistic gaps (confirmed by
 * inspecting computed styles, not assumed): the shared
 * `.hcfb-editorial-grid__card-body` rule (prominent-sections.css) carries
 * `flex-grow: 1` -- correct for its OTHER consumers on this same page
 * (Give Help's own cards, this page's own "Explore More" cards), where the
 * summary is the LAST content paragraph before a single CTA and the
 * intent is exactly "distribute the row's leftover height into the gap
 * before the CTA, so every CTA lands on the same baseline." Programs cards
 * are different: the summary is followed by MORE normal content (the FY
 * statistic, then the how-it-works explanation) before any action area,
 * so that same flex-grow pulled ALL of a row's leftover space in between
 * the summary and the statistic specifically -- an arbitrary, per-card-
 * varying gap, not a designed one. Scoped to Programs cards only; the
 * shared rule (and therefore Give Help's/every other consumer's own
 * cards) is untouched.
 */
.hcfb-programs-card .hcfb-editorial-grid__card-body {
	flex-grow: 0;
}

/* FY figure -- the strongest secondary visual element on the card, after
   the program name itself (per direct instruction). */
.hcfb-programs-card__fy-figure {
	color: var(--wp--preset--color--hcfb-navy);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	margin: 0 0 0.5rem;
}

.hcfb-programs-card__how-it-works {
	margin: 0 0 0.75rem;
	line-height: 1.6;
}

/*
 * The one INTENTIONAL distributed-space push, per direct instruction: this
 * wrapper (Details and/or the CTA link, plus -- FY2026 data packet,
 * 2026-09-19 -- an always-present contact mailto: link, see
 * hcfb_programs_shortcode_cards()) gets the flex auto-margin instead, so
 * ONLY the final action area is pulled to the card's bottom edge, never a
 * normal content paragraph. Every card now always renders this wrapper
 * (the contact link is unconditional), so it is no longer ever absent --
 * margin-top: auto simply pulls it to the bottom as before.
 */
.hcfb-programs-card__actions {
	margin-top: auto;
}

/*
 * The contact mailto: link (FY2026 data packet, 2026-09-19) -- same
 * shared link styling as the CTA link above it (`.hcfb-editorial-grid__
 * card-link`), just a touch smaller/muted so it reads as a secondary,
 * always-present action rather than competing with a real CTA when one
 * exists on the same card.
 */
.hcfb-programs-card__contact {
	margin: 0.5rem 0 0;
}

.hcfb-programs-card__contact-link {
	font-size: 0.875rem;
}

/*
 * The shared "Families Served" disclosure, rendered ONCE beneath the
 * whole card grid (never per-card, which would repeat the same sentence
 * up to seven times) -- see hcfb_programs_shortcode_cards()'s own
 * docblock.
 */
.hcfb-programs-grid__disclosure {
	margin: 1.5rem 0 0;
	font-size: 0.875rem;
	color: var(--wp--preset--color--hcfb-text-muted, var(--wp--preset--color--hcfb-text));
}

/* "Who it may help" -- collapsed by default, same native Details
   convention and focus/hover treatment as Leadership's own biography
   collapse (prominent-sections.css's .hcfb-leadership-*__more summary). */
.hcfb-programs-card__details {
	margin: 0 0 0.75rem;
}

.hcfb-programs-card__details summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--wp--preset--color--hcfb-navy);
}

.hcfb-programs-card__details summary:hover {
	text-decoration: underline;
}

.hcfb-programs-card__details summary:focus-visible {
	outline: 3px solid var(--wp--preset--color--hcfb-focus, #262760);
	outline-offset: 2px;
}

.hcfb-programs-card__details p {
	margin: 0.5rem 0 0;
	line-height: 1.6;
}

/* ------------------------------------------------------------------ */
/* 3. Card media region (media-slot refinement).                        */
/* ------------------------------------------------------------------ */

/*
 * Everything about SIZE/BLEED/ROUNDED-CORNERS/object-fit is already
 * correct for free -- reused directly from the shared
 * `.hcfb-editorial-grid__card-media` / `--placeholder` component
 * (prominent-sections.css), the same 3:2 photo-topped variant Give Help
 * and Volunteer's own cards already use. The one genuinely new piece: the
 * placeholder's icon+label need to stack VERTICALLY (the shared base
 * rule's `display:flex` defaults to a row, correct for a text-only
 * placeholder like Give's own, but not for this page's icon-plus-label
 * placeholder).
 */
.hcfb-programs-card__media-placeholder {
	flex-direction: column;
	gap: 0.375rem;
}

.hcfb-programs-card__media-placeholder .hcfb-editorial-grid__card-icon {
	margin-bottom: 0;
}