/*
 * FinanceProspector — Explore by Category
 * Component: FP-C-003 — Explore by Category
 * Version:   v1.12 — Category Icon responsive sizing — FROZEN 2026-08-19
 *
 * ICON SIZING IS FROZEN. The ladder below was approved against real Chrome
 * renders at 1512 / 1024 / 768 / 375. Do not change it, and do not restructure
 * the desktop grid to force a literal 200px icon at desktop — that was tested
 * as a 3-column layout and rejected (section height 616px -> 1479px, +140%).
 *
 * The freeze covers SIZING AND LAYOUT BEHAVIOUR ONLY. The composed v5-0 icon
 * artwork may still receive a final controlled visual refinement before launch;
 * that is a separate approval track and this freeze does not block it.
 * Reference: FinanceProspector_Explore_by_Category_Visual_Reference_2x.png
 * ────────────────────────────────────────────────────────────
 *
 * RESPONSIVE GRID (mobile-first):
 *   Mobile  (< 640px):   1 column
 *   Tablet  (≥ 640px):   2 columns
 *   Medium  (≥1024px):   4 columns
 *   Desktop (≥1440px):   7 columns   ← approved desktop layout
 *
 * CONTAINER MARGINS (v1.5):
 *   Mobile  (< 640px):   --fp-margin-mobile  = 20px each side
 *   Tablet  (640–1439px): --fp-margin-tablet  = 24px each side
 *   Desktop (≥1440px):   --fp-margin-desktop = 32px each side
 *
 * TOUCH TARGETS (v1.5):
 *   .fp-category-card__link min-height: 44px at < 640px.
 *   Satisfies WCAG 2.5.5 (AAA) and mobile platform guidelines.
 *
 * ICON SIZE (v1.12):
 *   Approved desktop target is 200×200 CSS px for the composed
 *   Category Icons (final v5-0, viewBox 0 0 320 320).
 *   Ladder: 140 → 168 → 200 → min(200px, 100%).
 *   See the "Icon sizes" block near the end of this file for the
 *   full rationale, including why the 7-column desktop grid caps
 *   the icon at 144–153px rather than the full 200px.
 *
 * CARD TITLE min-height:
 *   34px at all breakpoints (2-line floor).
 *   At tablet/mobile all titles render in 1 line; the floor
 *   creates consistent spacing and keeps descriptions aligned.
 *
 * CONTAINER:
 *   Section-specific 1500px max-width override.
 *   Standard --fp-container-max-width (1200px) is unchanged.
 *   This matches the Hero's override strategy to give adequate
 *   card width at 7 columns (≈185px/card, ≈153px inner).
 *
 * CARD TITLE:
 *   14px / 600 — reduced from the 16px Label spec to prevent
 *   excessive title wrapping at 7-column desktop layout.
 *   "Corporate Cards & Spend Management" renders in ≤2 lines
 *   at ≥1440px viewport when inner card width ≥144px.
 *
 * ILLUSTRATIONS:
 *   Slot: 104×104px, centered in card.
 *   Placeholder SVG files are in assets/images/categories/.
 *   Replace each file by dropping in the designer-approved
 *   artwork — no PHP, CSS, or layout changes required.
 *
 * PLACEMENT (generate_after_header):
 *   Hook:     generate_after_header
 *   Priority: 20  (fires AFTER Hero at priority 10)
 *   Scope:    is_front_page() only
 *   Sequence: Header → Hero (p10) → Explore by Category (p20)
 *
 * DO NOT MODIFY:
 *   Header, Hero, Editor's Picks, Resource Center, Trust
 *   Section, Footer, or any global styling.
 * ────────────────────────────────────────────────────────────
 */


/* ── Section Shell ─────────────────────────────────────── */
/*
 * White background matches the approved reference.
 * Section-level padding scales across breakpoints.
 * display:block overrides any inherited flex/grid behaviours
 * from GeneratePress's #page wrapper.
 *
 * TOP/BOTTOM PADDING ARE SPLIT:
 *   Top padding controls the gap between Hero and this section.
 *   Bottom padding controls the gap between this section and
 *   whatever follows (Editor's Picks, etc.).
 *   Top padding is tighter than bottom at every breakpoint to match
 *   the approved homepage reference spacing. Desktop top reduced
 *   from 64px → 32px (v1.3) to close the Hero–Explore gap by 32px.
 */
.fp-explore-category {
    display: block;
    background-color: var(--fp-color-white);
    width: 100%;
    box-sizing: border-box;
    /* ⚠ THE GOVERNED MAJOR-SECTION GAP (v3.54.2). The rendered distance to the
       adjacent section is this padding-bottom PLUS the next section's
       padding-top, and both halves live inside a white section box — which is
       why this stays a padding and did NOT become a margin. The homepage's
       page ground is #F7F8F9, not white; expressing the gap as a margin paints
       a grey band in every seam. Business Banking can use margins because its
       container is white. Same number, different mechanism, identical pixels.

       padding-top is a flat 32px at every width, so the arithmetic is simply
       --fp-section-gap - 32: 80 - 32 = 48 from 640 up, 64 - 32 = 32 below it.
       The former homepage values were 48 / 64 / 96; Business Banking is now the
       canonical reference and these match it exactly. ⚠ Do not re-add a
       breakpoint override — the token already carries the breakpoint. */
    padding-top:    var(--fp-space-l);
    padding-bottom: calc(var(--fp-section-gap) - var(--fp-space-l));
}


/* ── Inner Container ───────────────────────────────────── */
/*
 * Section-specific max-width override: 1500px.
 * At 1440px viewport (7-col breakpoint):
 *   Usable content = 1440 - 64 (margins) = 1376px
 *   Card width     = (1376 - 6×24) / 7  ≈ 176px
 *   Inner content  = 176 - 32 (padding)  ≈ 144px
 *
 * At 1500px+ viewport (container caps):
 *   Usable content = 1500 - 64          = 1436px
 *   Card width     = (1436 - 144) / 7   ≈ 185px
 *   Inner content  = 185 - 32           ≈ 153px
 *
 * "Corporate Cards & Spend Management" at 14px Inter 600
 *   fits in 2 lines when inner ≥ 136px.
 * Both scenarios satisfy this requirement.
 *
 * DO NOT change to --fp-container-max-width (1200px) —
 * that would produce 93px inner width and 4+ line titles.
 */
.fp-explore-category__container {
    width: 100%;
    max-width: 1500px;                    /* Section-specific override */
    margin: 0 auto;
    padding: 0 var(--fp-margin-mobile);   /* Mobile default: 20px side margins */
    box-sizing: border-box;
}

@media (min-width: 640px) {
    .fp-explore-category__container {
        padding: 0 var(--fp-margin-tablet); /* Tablet/medium: 24px — 640px to 1439px */
    }
}

@media (min-width: 1440px) {
    .fp-explore-category__container {
        padding: 0 var(--fp-margin-desktop); /* Desktop: 32px — matches approved layout */
    }
}


/* ── Section Header ────────────────────────────────────── */
.fp-explore-category__header {
    /* The subheading -> content gap now sits on the grid's margin-top, the
       same pattern used by FP-C-004 Editor's Picks and FP-C-005 Resource
       Center. It previously sat here as 32px mobile / 48px desktop, which
       made Explore's header block read looser than the other two sections. */
    margin-bottom: 0;
}

@media (min-width: 1024px) {
    .fp-explore-category__header {
        margin-bottom: 0;
    }
}

/*
 * H2 — Heading L (36px / 700 / 1.20 / -0.02em)
 * Scales down on smaller screens.
 */
.fp-explore-category__heading {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 28px;                           /* Mobile */
    font-weight: var(--fp-weight-heading);      /* 700 */
    line-height: var(--fp-line-heading);        /* 1.20 */
    letter-spacing: var(--fp-tracking-heading); /* -0.02em */
    color: var(--fp-color-navy);
    margin: 0 0 var(--fp-space-xs);            /* 8px gap to subtitle */
}

@media (min-width: 640px) {
    .fp-explore-category__heading {
        font-size: 32px;
    }
}

@media (min-width: 1024px) {
    .fp-explore-category__heading {
        font-size: var(--fp-font-h2);           /* Desktop: 36px */
    }
}

/*
 * Subtitle — Body M (16px / 400 / 1.65)
 */
.fp-explore-category__subtitle {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: var(--fp-font-body-m);    /* 16px */
    font-weight: var(--fp-weight-body);  /* 400 */
    line-height: var(--fp-line-body);    /* 1.65 */
    color: var(--fp-color-gray-500);
    margin: 0;
}


/* ── Category Grid ─────────────────────────────────────── */
/*
 * Mobile-first responsive grid.
 * Columns scale from 1 → 2 → 4 → 7.
 *
 * 7 columns is hard-coded for desktop — the approved component
 * contains exactly 7 categories. If additional categories are
 * added in future, the grid wraps into a second row at 7+N
 * rather than creating an 8-column single row, because the
 * grid always uses repeat(7,1fr): the 8th item occupies the
 * first column of a new row.
 *
 * list-style / margin / padding reset the <ul> defaults.
 * role="list" is set in PHP for screen reader compatibility.
 */
.fp-category-grid {

    display: grid;
    grid-template-columns: 1fr;                  /* Mobile: 1 column */
    gap: var(--fp-gutter-mobile);                /* 16px */
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 640px) {
    .fp-category-grid {
        grid-template-columns: repeat(2, 1fr);   /* Tablet: 2 columns */
        gap: var(--fp-gutter-tablet);            /* 20px */
    }
}

@media (min-width: 1024px) {
    .fp-category-grid {
        grid-template-columns: repeat(4, 1fr);   /* Medium: 4 columns */
        gap: var(--fp-gutter-desktop);           /* 24px */
    }
}

@media (min-width: 1440px) {
    .fp-category-grid {
        grid-template-columns: repeat(7, 1fr);   /* Desktop: 7 columns */
        /* gap stays 24px — inherited from 1024px breakpoint */
    }
}


/* ── Category Card ─────────────────────────────────────── */
/*
 * Flexbox column layout:
 *   flex-grow on description pushes the "Explore →" link to
 *   the card bottom regardless of how many lines text wraps to.
 *   align-items: center centres illustration, title, description,
 *   and link horizontally — matching the reference screenshot.
 *
 * Card padding: 16px (--fp-space-s) — reduced from the
 *   compact 24px token to give more inner width at 7 columns
 *   and prevent excessive title wrapping.
 *
 * Box shadow escalates on hover (shadow-1 → shadow-2).
 */
.fp-category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: var(--fp-color-white);
    border: 1px solid var(--fp-color-gray-200);
    border-radius: var(--fp-radius-card);         /* 12px */
    padding: var(--fp-space-s);                   /* 16px all sides */
    box-shadow: var(--fp-shadow-1);
    overflow: hidden;
    box-sizing: border-box;
    transition: box-shadow var(--fp-button-transition);  /* 150ms ease */
}

.fp-category-card:hover {
    box-shadow: var(--fp-shadow-2);
}


/* ── Card Illustration Slot ────────────────────────────── */
/*
 * Icon slot — base declaration only.
 * The live responsive sizes are set in the "Icon sizes" block
 * further down this file (v1.12) and override these values.
 *
 *   The Pale Green circle is already part of each SVG file.
 *   It is NOT recreated in CSS. No background colour, border,
 *   wrapper element, or CSS circle is applied here.
 *   No padding is added inside the icon area.
 *
 * TO REPLACE ILLUSTRATIONS:
 *   Drop the designer-approved SVG into:
 *     assets/icons/categories/
 *   using the EXACT filename referenced in the PHP data array.
 *   No PHP or CSS changes needed.
 */
.fp-category-card__image-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 104px;
    height: 104px;
    flex-shrink: 0;
    margin-bottom: var(--fp-space-s);             /* 16px below illustration */
}

.fp-category-card__image {
    display: block;
    width: 104px;
    height: 104px;
    opacity: 1;          /* Explicit: prevents GP lazy-load JS from holding images at opacity:0 */
}


/* ── Card Title ────────────────────────────────────────── */
/*
 * 14px / 600 — see file header for rationale.
 * overflow-wrap: break-word guards against a single long word
 * (e.g. "Management") overflowing the card at narrow viewports.
 * line-height: 1.20 keeps multi-line titles compact.
 *
 * min-height: 34px (v1.4)
 *   Ensures all card descriptions start at the same vertical
 *   position regardless of title length.
 *   Calculation: 2 lines × 14px × 1.20 line-height = 33.6px → 34px.
 *   "Corporate Cards & Spend Management" is the tallest approved
 *   title at 7-column desktop — it renders in 2 lines at ≥144px
 *   inner card width. All shorter titles (1-line) are padded up
 *   to match. Titles that naturally exceed 34px (e.g. 3-line
 *   wraps at very narrow viewports) override via normal flow.
 */
.fp-category-card__title {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: var(--fp-weight-label);           /* 600 */
    line-height: var(--fp-line-heading);           /* 1.20 */
    color: var(--fp-color-navy);
    margin: 0 0 var(--fp-space-xs);               /* 8px below title */
    min-height: 34px;                              /* v1.4: 2-line floor for alignment */
    overflow-wrap: break-word;
    word-break: break-word;
}


/* ── Card Description ──────────────────────────────────── */
/*
 * Body S (14px / 400 / 1.65) — spec-compliant.
 * flex-grow: 1 fills available card height so the Explore link
 * is always flush to the card bottom.
 * margin-bottom: 0 — spacing to Explore link comes from the
 * link's margin-top.
 */
.fp-category-card__description {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: var(--fp-font-body-s);  /* 14px */
    font-weight: var(--fp-weight-body); /* 400 */
    line-height: var(--fp-line-body);   /* 1.65 */
    color: var(--fp-color-gray-500);
    margin: 0;
    flex-grow: 1;
}


/* ── Card Explore Link ─────────────────────────────────── */
/*
 * Text button per Buttons & Interactive Elements spec:
 * "Blue text links for editorial actions. Underline on hover."
 *
 * aria-label on the <a> element (set in PHP) provides the full
 * category name to screen readers, e.g. "Explore Business Banking".
 * The visible label "Explore →" is intentionally brief.
 *
 * margin-top: var(--fp-space-s) creates breathing room above
 * the link and pushes it toward the card bottom.
 */
/* Shared homepage CTA arrow gap — see --fp-cta-arrow-gap in base.css.
   Replaces the typed leading space that previously sat inside the arrow
   span. Arrow spacing only; the link's layout and typography are unchanged. */
.fp-category-card__link .fp-cta-arrow {
    margin-left: var(--fp-cta-arrow-gap);
}

.fp-category-card__link {
    display: inline-flex;
    align-items: center;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: var(--fp-font-body-s);      /* 14px */
    font-weight: var(--fp-weight-medium);   /* 500 */
    line-height: 1;
    color: var(--fp-color-blue);
    text-decoration: none;
    margin-top: var(--fp-space-s);         /* 16px above link */
    /* transition removed — centralised on a.fp-cta in base.css (B2) */
}/* Underline-on-hover removed: this element is now a boxed CTA.
   Bible ch. 54.9 — box CTAs change SURFACE on hover; only text
   and navigation links underline. */

/*
 * Focus ring — 2px blue outline, 3px offset.
 * :focus-visible ensures ring appears for keyboard navigation
 * only; mouse clicks do not trigger it.
 */
/*
 * FUTURE-CATEGORY STATUS (v3.54.1) — NON-INTERACTIVE.
 *
 * Replaces the "Explore" CTA on a category whose page does not exist yet. It is
 * a <span>: not focusable, not clickable, announced as plain text.
 *
 * GEOMETRY IS PRESERVED DELIBERATELY — the same 44px box height as
 * .fp-category-card__link, so a Coming Soon card is exactly as tall as a live
 * one. Its margin-top is NOT set here: the two responsive rules further down
 * list this selector alongside .fp-category-card__link, so the 16/12/8px
 * cadence comes from one source and cannot drift. Subordinate through colour
 * and weight only — no surface, border or radius that would read as a button.
 */
.fp-category-card__status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: var(--fp-space-s);
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: var(--fp-font-body-s);
    font-weight: var(--fp-weight-label);   /* v3.57.144 - owner: 600, matching the Editor's Picks status (was --fp-weight-medium 500) */
    line-height: 1;
    color: var(--fp-color-gray-600);   /* v3.57.143 - owner-approved Dark Gray #4B5563, = Editor's Picks status (was gray-500) */
}

.fp-category-card__link:focus-visible {
    outline: 2px solid var(--fp-color-blue);
    outline-offset: 3px;
    /* border-radius removed — focus must not reshape the box (B3) */
    text-decoration: none;
}

/*
 * Mobile touch target (v1.5) — < 640px
 * Expands the tap area to ≥44px height (WCAG 2.5.5 / platform
 * guidelines) without increasing visual text size or card padding.
 * padding: 0 6px adds slight horizontal comfort around the label.
 * align-items: center (inherited) keeps text vertically centred.
 */
@media (max-width: 639px) {
    .fp-category-card__link {
        min-height: 44px;
        padding: 0 6px;
    }
}


/* ── Group Layout + Labels (v1.9 — Full Responsive) ───── */
/*
 * v3.9 restructure: two .fp-category-group elements replace the
 * old standalone .fp-category-group-labels row. Group labels are
 * now inside each group and visible at all breakpoints.
 *
 * MOBILE (<640px)
 *   .fp-category-groups: flex-column, 32px gap between groups.
 *   Card grids: 1-col (16px gap). Icons: 88×88px.
 *
 * TABLET / MEDIUM (≥640px, <1440px)
 *   .fp-category-groups: flex-column, 40px gap.
 *   Card grids: 2-col (20px gap at 640–1023px / 24px at ≥1024px).
 *   Icons: 96×96px.
 *   Business Lending (5th card): left-aligns in col 1 — CSS grid
 *     default, no centering applied. Per specification.
 *
 * DESKTOP (≥1440px) — FROZEN / identical visual result to v3.8.
 *   .fp-category-groups: 7-col CSS grid (repeat(7,1fr) / 24px gap).
 *   .fp-category-group--business: grid-column 1/6, display:grid,
 *     grid-template-columns:subgrid, row-gap:12px.
 *   .fp-category-group--personal: grid-column 6/8, same subgrid.
 *   Card grids inside each group: grid-template-columns:subgrid
 *     → all 7 cards share identical column widths from the parent.
 *   Icons: 104×104px (restored from tablet 96px).
 *
 * LABEL RULE: flex:1 + margin-right:20px at all breakpoints.
 *   At desktop, rule fills remaining group width (5-col for Business,
 *   2-col for Personal) — identical behaviour to v3.8.
 *   At tablet/mobile, rule fills section width inside the group.
 *
 * ACCESSIBILITY:
 *   aria-hidden="true" on each .fp-category-group-label (set in PHP).
 *   Cards carry full screen-reader context via h3 + aria-label.
 */

/* ── Icon sizes (responsive, mobile-first) — v1.12 FROZEN ──
 * FROZEN 2026-08-19. Approved against real Chrome renders at 2x DPR.
 *
 * Overrides the fixed 104px base set in the card image-wrap rules
 * above. CSS cascade: these rules appear later, same specificity,
 * so they win at every breakpoint.
 *
 * v1.12 — RESIZED FOR THE COMPOSED CATEGORY ICONS (final v5-0).
 *   The v5-0 assets are complete compositions: a 288-unit Pale Green
 *   circle on a 320-unit canvas, with the foreground occupying 196
 *   units. The circle therefore paints at 90% of the box and the
 *   artwork at 61%, so the box size IS the visible circle size + 10%.
 *
 *   Approved target: 200px at desktop.
 *
 *   THE 7-COLUMN GRID CANNOT DELIVER 200px. At >=1440px the card is
 *   176-185px wide and its inner content box is 144-153px, so a 200px
 *   icon does not fit. min(200px, 100%) therefore resolves to the
 *   full inner width — 144px at a 1440 viewport, 153px at 1500+.
 *   That is the maximum the approved 7-column layout allows without
 *   changing the grid or the 1500px container, neither of which is
 *   in scope for an icon-size pass.
 *
 *   Below 1440px the groups are 2-column and the cards are wide
 *   enough for the full 200px, so the ladder steps UP toward it.
 *
 * LADDER
 *   < 640px   1-col cards    140px   reduced — a phone card should not
 *                                    be dominated by the illustration
 *   >= 640px  2-col cards    168px
 *   >= 1024px 2-col cards    200px   full approved size
 *   >= 1440px 7-col cards    min(200px, 100%) -> 144-153px actual
 *
 * aspect-ratio keeps the box square while width is a min() expression,
 * so the icon can never letterbox if a card narrows unexpectedly.
 */
.fp-category-card__image-wrap,
.fp-category-card__image {
    width: 140px;
    height: auto;
    aspect-ratio: 1 / 1;
}

@media (min-width: 640px) {
    .fp-category-card__image-wrap,
    .fp-category-card__image {
        width: 168px;
    }
}

@media (min-width: 1024px) {
    .fp-category-card__image-wrap,
    .fp-category-card__image {
        /* Full approved display size. Written as min() rather than a flat
           200px so the icon can never exceed the card that holds it — the
           2-column cards in this band are 452–659px inner, so it resolves
           to a true 200px at every width from 1024 to 1439. */
        width: min(200px, 100%);
    }
}

@media (min-width: 1440px) {
    .fp-category-card__image-wrap,
    .fp-category-card__image {
        /* 7-col cards: capped by the card's inner width. See note above. */
        width: min(200px, 100%);
    }
}


/* ── Groups wrapper ─────────────────────────────────────
 * Flex-column at mobile and tablet; becomes the 7-col CSS grid
 * at desktop so both groups share the same column tracks.
 */
.fp-category-groups {
    /* 24px subheading -> first content, matching the FP-C-004 and FP-C-005
       pattern where the gap sits on the content wrapper rather than the
       header's margin-bottom. */
    margin-top: var(--fp-space-m);
    display: flex;
    flex-direction: column;
    gap: 32px;
}

@media (min-width: 640px) {
    .fp-category-groups {
        gap: 40px;
    }
}

@media (min-width: 1440px) {
    .fp-category-groups {
        display: grid;
        grid-template-columns: repeat(7, 1fr); /* Same tracks as card grid */
        gap: var(--fp-gutter-desktop);          /* 24px col + row */
    }
}


/* ── Group label ────────────────────────────────────────
 * Flex row: label text (no-wrap) + rule (flex:1 fills remainder).
 * Visible at all breakpoints in v3.9.
 */
.fp-category-group-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.fp-category-group-label__text {
    /* v3.9.1: element changed from <span> to <h3> for accessibility.
     * margin:0 neutralises the browser-default h3 top/bottom margins
     * so visual rendering remains pixel-identical to v3.9.0. */
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fp-color-navy);
    white-space: nowrap;
    line-height: 1;
}

.fp-category-group-label__rule {
    display: block;
    flex: 1;                /* Fills remaining group width naturally */
    margin-right: 20px;    /* Trailing breathing room */
    height: 1px;
    background-color: var(--fp-color-navy);
    opacity: 0.18;
}


/* ── Card grid overrides within a group ─────────────────
 * .fp-category-group .fp-category-grid (specificity 0,2,0)
 * overrides .fp-category-grid (specificity 0,1,0) at all
 * breakpoints — the compound selector wins without repeating
 * overrides at ≥1024px for grid-template-columns.
 */
.fp-category-group .fp-category-grid {
    grid-template-columns: 1fr;              /* Mobile: 1-col */
    gap: var(--fp-gutter-mobile);
}

@media (min-width: 640px) {
    .fp-category-group .fp-category-grid {
        grid-template-columns: repeat(2, 1fr); /* Tablet: 2-col */
        gap: var(--fp-gutter-tablet);           /* 20px */
    }
}

@media (min-width: 1024px) {
    .fp-category-group .fp-category-grid {
        gap: var(--fp-gutter-desktop);          /* Medium: bump gap to 24px */
        /* grid-template-columns stays repeat(2,1fr) from tablet rule */
    }
}


/* ── Desktop: groups become CSS subgrids ────────────────
 * Each group is positioned in the 7-col parent track and uses
 * subgrid so its card grid inherits identical column widths.
 */
@media (min-width: 1440px) {
    /* Business Finance: spans parent columns 1–5 */
    .fp-category-group--business {
        grid-column: 1 / 6;
        display: grid;
        grid-template-columns: subgrid;
        row-gap: 12px;          /* Gap between label row and card row */
    }

    /* Personal Finance: spans parent columns 6–7 */
    .fp-category-group--personal {
        grid-column: 6 / 8;
        display: grid;
        grid-template-columns: subgrid;
        row-gap: 12px;
    }

    /* Label spans the full group column span */
    .fp-category-group .fp-category-group-label {
        grid-column: 1 / -1;
        margin-bottom: 0;       /* row-gap handles label→cards spacing */
    }

    /* Card grid: subgrid of group → inherits parent's 7-col tracks */
    .fp-category-group .fp-category-grid {
        grid-column: 1 / -1;
        grid-template-columns: subgrid;
        row-gap: var(--fp-gutter-desktop); /* Between card rows if any wrap */
        /* column-gap: inherited from parent subgrid — do not set */
    }
}


/* ── v3.10.0 — Responsive Density Refinement ───────────
 * Reduces excessive vertical whitespace in cards at tablet
 * and mobile. Desktop (≥1440px) is completely untouched.
 *
 * TABLET (640px – 1439px)
 *   ~15–20% height reduction. 2-col grouping unchanged.
 *   96px icons, typography, and card structure preserved.
 *
 * MOBILE (<640px)
 *   Significant height reduction toward 300–340px total card.
 *   88px icons and touch target (min-height:44px on link)
 *   are fully preserved.
 *
 * Properties changed (base → tablet → mobile):
 *   .fp-category-card           padding:       16px → 12px → 10px
 *   .fp-category-card__image-wrap margin-bottom: 16px → 12px →  8px
 *   .fp-category-card__title    min-height:    34px →   0  →   0
 *   .fp-category-card__title    margin-bottom:  8px →  6px →  4px
 *   .fp-category-card__link     margin-top:    16px → 12px →  8px
 *
 * NOT CHANGED: touch target min-height:44px on __link at <640px
 * (defined in the touch-target block above — still applies).
 */

/* — Tablet density: 640px to 1439px — */
@media (min-width: 640px) and (max-width: 1439px) {
    .fp-category-card {
        padding: 12px;
    }

    .fp-category-card__image-wrap {
        margin-bottom: 12px;
    }

    .fp-category-card__title {
        min-height: 0;          /* No 2-line floor needed in 2-col groups */
        margin-bottom: 6px;
    }

.fp-category-card__link,
.fp-category-card__status {
        margin-top: 12px;
    }
}

/* — Mobile density: < 640px — */
@media (max-width: 639px) {
    .fp-category-card {
        padding: 10px;
    }

    .fp-category-card__image-wrap {
        margin-bottom: 8px;
    }

    .fp-category-card__title {
        min-height: 0;          /* Irrelevant at 1-col; remove floor */
        margin-bottom: 4px;
    }

.fp-category-card__link,
.fp-category-card__status {
        margin-top: 8px;
        /* min-height: 44px preserved via touch-target block above */
    }
}


/* ── CARD TITLE REGION · SHARED THREE-LINE FLOOR ────────────
 *
 * Approved 2026-08-31. FAMILY-LEVEL, not an Accounting-only offset.
 *
 * The base rule above sets min-height: 34px, a two-line floor. In the
 * seven-column desktop layout the columns are narrow enough that a long
 * category name wraps to THREE lines - measured: Accounting & Bookkeeping
 * Software at 50.39px against 34.00px for the other six - which pushed its
 * supporting description 16.39px below the rest of the row.
 *
 * Raising the shared floor to three lines puts every description on one
 * horizontal axis. 3.6em = 3 x the existing 1.20 line-height at the existing
 * 14px font size, so it tracks the type scale rather than hard-coding a pixel.
 *
 * SCOPED to >=1440px on purpose. A blanket min-height was measured and costs
 * 33.61px of dead space per card at 1024 and 760, where every title is one
 * line and the descriptions already align.
 *
 * Measured after: at 1560 the description-start spread goes 16.39 -> 0.00 and
 * the card grows 411.34 from 394.95 - necessary, because four descriptions
 * need four lines. At 1440 the card height does not change at all. At 1280,
 * 1024 and 760 nothing changes. CTAs stay bottom-aligned throughout.
 */
@media (min-width: 1440px) {

    .fp-category-card__title {
        min-height: 3.6em;
    }
}


/* ── v3.54.5 · COMPACT CARD TREATMENT ───────────────────────
 *
 * Approved 2026-09-23 after a measured three-candidate review at
 * 1440 / 768 / 390. Spacing only: no typography size or weight, no
 * illustration size, no button size, no card width, no copy and no
 * card order changed by this block.
 *
 * WHAT THE MEASUREMENT FOUND, so nobody re-litigates it:
 *
 *   Desktop carried one real defect. The SHARED THREE-LINE FLOOR above
 *   (min-height: 3.6em) existed only because "Accounting & Bookkeeping
 *   Software" wrapped to three lines at the 142px inner width, and it
 *   cost every one of the seven cards 16.80px. Giving the title block a
 *   160px width lets Accounting wrap to two lines, so the floor returns
 *   to two lines and the whole row shortens.
 *
 *   Tablet and mobile carried NO dead space. Measured slack below the
 *   CTA was 1.00px at both widths - the border - and every card height
 *   reconciled exactly to its content. Their spacing was already
 *   tighter than desktop's. The reductions below are therefore small
 *   and deliberate: -3.15% at 768 and -3.72% at 390. Do not read them
 *   as a defect fix, and do not squeeze them further.
 *
 * DESKTOP TITLE WIDTH - 160px, and why not less.
 *   "Bookkeeping Software" needs 152.77px to sit on one line, so the
 *   title block must exceed the 142px inner width; it bleeds 9px into
 *   the card's 16px side padding, leaving 7px plus the border, and the
 *   card's overflow:hidden is never reached. Measured narrowest actual
 *   text clearance to a card edge is 10.28px (Crypto).
 *   154px was measured and REJECTED: "Crypto & Digital Assets" is
 *   155.42px and collapses to one line above that, so 154px sat in a
 *   2.65px window between Accounting failing and Crypto collapsing -
 *   too fragile to ship. At 160px Crypto is intentionally one line.
 *   No desktop title exceeds two lines.
 *
 * Per-row and content-driven sizing below 1440 is UNCHANGED. There is
 * no subgrid and no global card height at those widths; each grid row
 * sizes itself, and at 390 Payments is legitimately shorter than its
 * siblings because its description is one line. Nothing here reserves
 * a height.
 */

@media (min-width: 1440px) {

    .fp-category-card {
        padding-top:    12px;
        padding-bottom: 12px;
    }

    .fp-category-card__image-wrap {
        margin-bottom: 12px;      /* illustration -> title */
    }

    /* Wider than the 142px inner box on purpose - see the note above. */
    .fp-category-card__title {
        width:      160px;
        min-height: 2.4em;        /* two-line floor, was 3.6em */
    }
}

@media (min-width: 640px) and (max-width: 1439px) {

    .fp-category-card {
        padding-top:    10px;
        padding-bottom: 10px;
    }

    .fp-category-card__image-wrap {
        margin-bottom: 10px;
    }

    .fp-category-card__link,
    .fp-category-card__status {
        margin-top: 10px;
    }

    .fp-category-group .fp-category-grid {
        row-gap: 16px;            /* column-gap stays 20px - do not set it here */
    }

    .fp-category-group .fp-category-group-label {
        margin-bottom: 10px;
    }

    /* Business Finance -> Personal Finance. The single largest reducible
       item at this width, larger than anything inside a card. */
    .fp-category-groups {
        gap: 32px;
    }
}

@media (max-width: 639px) {

    .fp-category-card {
        padding-top:    8px;
        padding-bottom: 8px;
    }

    .fp-category-card__image-wrap {
        margin-bottom: 6px;
    }

    /* v3.54.6 - 12px, not 6px. Measured at 390 against 6 / 10 / 12 / 14:
       at 6px the status label reads as the last line of the description
       rather than a separate action zone, worst on two-line copy. 12px also
       equals the row gap between cards, so the space inside a card and the
       space between cards agree. 14px was equally legible but cost another
       14px of section height for no added separation. */
    .fp-category-card__link,
    .fp-category-card__status {
        margin-top: 12px;
    }

    .fp-category-group .fp-category-grid {
        row-gap: 12px;
    }

    .fp-category-group .fp-category-group-label {
        margin-bottom: 10px;
    }

    .fp-category-groups {
        gap: 24px;
    }
}

/* v3.57.125 - owner: the accent word takes the approved category-heading green (Green Dark #338E39, as the Business Banking
   headings); the rest of the heading stays navy. */
.fp-explore-category__heading .fp-heading-accent { color: var(--fp-color-hero-heading); }
/* v3.57.145 (P20, owner instruction 2026-10-28): the outlined "Explore" keeps Core Blue text on keyboard focus. GeneratePress's inline `a:hover, a:focus, a:active { color: var(--contrast) }`
   (#222222, (0,1,1), loaded after this file) won these states. Colour only - size, weight, underline, focus ring and destination unchanged. */
.fp-category-card a.fp-category-card__link.fp-cta--secondary:focus,
.fp-category-card a.fp-category-card__link.fp-cta--secondary:focus-visible {
    color: var(--fp-color-blue);
}