/* ═══════════════════════════════════════════════════════════
   BUSINESS BANKING GUIDES & RESOURCES — outer grid only
   Component: .fp-category-guides   Added v3.40.58, revised for grid alignment
   ═══════════════════════════════════════════════════════════

   THIS FILE CONTAINS NO CARD RULES.

   ⚠ THE DIVISION OF AUTHORITY, and it is deliberate:
       the CATEGORY PAGE owns the OUTER GRID
       the homepage Resource Center owns the INTERNAL CARD DESIGN
   Every card rule - border, radius, illustration stage, badge, title,
   description, date, CTA, padding, spacing, focus - is inherited unchanged
   from resource-center.css, which is enqueued site-wide. Only the container
   and the grid track geometry are restated here, and only to match the
   category page's own four-card grid.

   ⚠ WHY THIS IS MORE THAN THE ORIGINAL max-width OVERRIDE. Sharing a left
   edge is not alignment. The Resource Center grid is repeat(4, 293px) with
   justify-content: start at >=1440, so its columns are a FIXED width that
   cannot line up with the category grid's fluid 1fr columns. Guide card 3
   landed nowhere near comparison card 3. Matching the axis alone left the two
   rows visibly unrelated at wide desktop.

   THE AUTHORITY IS .fp-pc / .fp-pc__grid in popular-comparisons.css, the four
   cards immediately above this section:
       container padding  0 20px  ->  0 24px @768  ->  0 32px @1440
       grid               1fr     ->  repeat(2,1fr) gap 20 @640
                                  ->  repeat(4,1fr) gap 24 @1280
   Those values are MIRRORED below, not invented. If popular-comparisons.css
   ever changes its grid, this file must be re-derived from it.

   SCOPE. Every selector is prefixed .fp-category-guides, a class that exists
   on no other route, and this stylesheet is enqueued on the category template
   only. The homepage section and the /resources/ hub cannot be reached. */

/* ── Container: full-bleed on the category axis, no 1500px cap ── */

.fp-category-guides .fp-resource-center__container {
    max-width: none;
    padding: 0 var(--fp-margin-mobile);          /* 20px */
}

@media (min-width: 768px) {
    .fp-category-guides .fp-resource-center__container {
        padding: 0 var(--fp-margin-tablet);      /* 24px */
    }
}

@media (min-width: 1440px) {
    .fp-category-guides .fp-resource-center__container {
        padding: 0 var(--fp-margin-desktop);     /* 32px */
    }
}

/* ── Grid tracks: the category page's own ladder ────────────

   ⚠ THE EXPLICIT ROW COUNT IS ARITHMETIC, NOT TASTE, and it moves with the
   card count. resource-center.css declares FIVE SHARED ZONES per card - badge,
   illustration, title, supporting copy, metadata row - and each card adopts
   them with `grid-template-rows: subgrid`. That is what makes a two-line title
   widen the title zone for the whole ROW instead of pushing one card's
   description down.

   ⚠ THE ROW COUNT IS NO LONGER RESTATED HERE (v3.54.2). This file used to
   override grid-template-rows with 25 / 15 / 10 - literals written when this
   section rendered FIVE cards. It renders TWO, and a grid paints row-gap
   between every explicit track it is told to create, empty ones included, so
   those literals were reserving rows for cards that do not exist and painting
   them as dead space beneath the last card: 120px at 1440, 200px at 1024 and
   768, 240px at 390, measured on staging v3.54.1. The section's own margin-top
   was correct the whole time - see the rhythm note below, which still holds.

   resource-center.css now derives the count from the --count-N modifier that
   template-parts/resource-cards.php emits, and this section takes the same
   column counts as the homepage at every breakpoint (1 / 2 / 4), so the base
   values are already right for it and an override could only go stale again.
   COLUMNS are still restated below, because those genuinely do differ.

   ⚠ NO CARD RULE IS TOUCHED. This is the same division of authority the file
   header states: the category page owns the OUTER grid, resource-center.css
   owns the card. No width, colour, font, radius or padding is restated here
   and no other section can be reached - every selector is prefixed
   .fp-category-guides. */

.fp-category-guides .fp-resource-center__grid {
    gap: var(--fp-gutter-mobile);                /* 16px */
}

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

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

/* ⚠ REQUIRED. resource-center.css sets repeat(4, 293px) + justify-content:
   start at 1440, the approved homepage Variant B row. On the category page
   that fixed track is exactly what breaks column alignment, so the fluid
   category tracks are restated here to win at this breakpoint. Cards become
   wider than 293px and their heights differ from the row above; that is
   accepted - the requirement is horizontal column alignment, not equal
   height with another component family. No title is clamped or shortened. */

@media (min-width: 1440px) {
    .fp-category-guides .fp-resource-center__grid {
        grid-template-columns: repeat(4, 1fr);
        justify-content: stretch;
        gap: var(--fp-gutter-desktop);           /* 24px */
    }
}

/* ── Section rhythm: the CATEGORY page's, not the homepage's ──

   ⚠ MEASURED, NOT ESTIMATED. On /business-banking/ every major transition is
   80px at >=640 and 64px below it - Top Picks -> Use Case and Use Case ->
   Popular Comparisons both measure exactly that. Each section owns its own
   margin-top and the preceding section contributes NOTHING: .fp-pc has
   margin-bottom 0 and padding-bottom 0.

   This section was contributing neither. It inherited .fp-resource-center's
   HOMEPAGE padding-top (--fp-space-l, 32px; 24px on mobile) and no margin, so
   the transition measured 32px against the page's 80px - LESS THAN HALF the
   established gap, not more. There is no doubled margin anywhere.

   The fix uses the category page's own rule, mirroring .fp-pc exactly: the
   inherited homepage padding-top is zeroed so the two cannot stack, and the
   section takes the same margin-top its peers take.

   ⚠ padding-BOTTOM ZEROED AT v3.40.68, AND THE REASON IT WAS NOT ZEROED AT
   v3.40.61 IS A WARNING WORTH KEEPING. That release left it alone on the
   grounds that this was "the page's last section, and nothing follows it".
   True at the time. v3.40.66 then added the FAQ and Glossary sections after
   it and did NOT revisit the assumption, so the section went on carrying
   .fp-resource-center's HOMEPAGE bottom padding - 24px mobile, 32px at 640,
   64px at 1024 - as dead space between two sections.

   That space is INSIDE the section box, so the wrapper-to-wrapper measurement
   still read a correct 80px while the PAINTED gap from the bottom of the cards
   to the FAQ heading was 64 + 80 = 144px at 1440, 112px at 768 and 88px at
   390. A box measurement can be true and still describe nothing the reader
   sees: measure content edges whenever a section stops being last.

   Zeroing it completes the contract every other category section already
   keeps, and which this comment states for .fp-pc: a section owns its own
   margin-top and contributes NOTHING below itself. No compensating margin is
   added anywhere, so the transition still has exactly one contributor. */

.fp-category-guides {
    /* ⚠ ONE GOVERNED VALUE (v3.54.2). Was a 64px literal here and an 80px
       literal in a >=640 block. Both are now --fp-section-gap, which carries
       exactly those numbers and is shared with the homepage. Same rendered
       geometry; one place to change it. See base.css. */
    margin-top: var(--fp-section-gap);
    padding-top: 0;                              /* drop the inherited homepage padding */
    padding-bottom: 0;                           /* v3.40.68 - see the note above */
}


/* ── Section-heading colour governance (v3.40.65) ──────────────────────────
   Category-page convention: NAVY = category/context phrase, GREEN DARK =
   section-purpose phrase. The green is the existing Top 4 Picks authority,
   .tp h2 .g in top-picks.css:24 - Green Dark, palette v1.1. Not a new value
   and not inferred from any other component.

   COLOUR ONLY. The span sets colour and nothing else, so font-size, weight,
   line-height, letter-spacing and margins are all inherited. Verified at 1440
   and 390: line counts and every section height are unchanged. */
.fp-category-guides h2 .g{color:#338E39}