/* ═══════════════════════════════════════════════════════════
 * FP-C-006 — WHY TRUST FINANCEPROSPECTOR
 * ═══════════════════════════════════════════════════════════
 * Version:   v1.0 (theme v3.11.20 — initial production build)
 * Spec:      Approved design reference screenshot (composition)
 *            + Design System Manual v2.4 tokens (type, colour,
 *            spacing). v2.4 has no FP-C-006 chapter.
 * Status:    Pending visual approval
 * ───────────────────────────────────────────────────────────
 *
 * INNER CONTENT WIDTH — 1280px, derived not chosen.
 *
 *   The approved reference was measured: three vertical dividers at
 *   x = 311 / 611 / 921 in a 1282px-wide crop, giving a column pitch
 *   of 300 and 310px — a mean of 305px per column.
 *
 *   Candidate content widths, minus three 24px gaps, produce:
 *       1120px -> 262px per pillar
 *       1200px -> 282px per pillar
 *       1280px -> 302px per pillar   <-- closest to the 305px reference
 *
 *   So the header and pillar grid use their own 1280px max-width.
 *   At the full 1500px homepage container each pillar would be ~360px,
 *   the headings would stop wrapping to two lines and the section
 *   would lose the reference proportions.
 *
 *   The GLOBAL container system is untouched: --fp-container-max-width
 *   and the 1500px section container used by FP-C-003/004/005 are not
 *   modified. This narrower width is local to FP-C-006 and is applied
 *   INSIDE the standard gutters, so the section still respects the
 *   20 / 24 / 32px page margins at narrow viewports.
 *
 * RESPONSIVE ARRANGEMENT:
 *   Mobile   (<640px):     1 column,  horizontal dividers
 *   Tablet   (640-1279):   2 x 2,     vertical + horizontal dividers
 *   Desktop  (>=1280):     4 across,  3 vertical dividers
 *
 *   The 4-across breakpoint is 1280px, matching FP-C-005. At 1024px a
 *   four-column split leaves too little pillar interior for a 48px
 *   icon plus a two-line heading and three-line description.
 *
 * DIVIDERS are border-left / border-top on the pillars themselves —
 * no extra elements — so they appear and disappear correctly as the
 * grid reflows. Only INTERNAL dividers render; never on the outer
 * edges of the grid.
 *
 * ICONS: the four SVGs are square, so one shared width sizes them
 * all with no per-file scaling. See why-trust.php for the white-
 * background-only constraint on these assets.
 * ═══════════════════════════════════════════════════════════ */


/* ── Section ───────────────────────────────────────────── */

.fp-why-trust {
    /* Standard homepage section spacing: 48px gap on mobile
       (24 bottom + 24 top), 64px tablet, 96px desktop. */
    /* ⚠ THE LAST SECTION → FOOTER BOUNDARY (v3.54.2). Same governed distance as
       every other major transition: --fp-section-gap, 64px below 640 and 80px
       from 640 up. It is NOT the footer's internal layout — .fp-footer__inner
       owns that and is untouched here.

       TWO contributors meet at this boundary and neither is a margin:
       this padding-bottom, plus .fp-footer-outer's own padding-top in
       site-footer.css (--fp-space-m below 640, --fp-space-l from 640 up). So
       the subtrahend below is THAT value, written with the same token rather
       than a literal — if the footer wrapper's padding ever moves, this follows
       it and the rendered boundary stays on the standard.

       Both surfaces are white (.fp-why-trust and .fp-footer-outer both paint
       --fp-color-white), so moving space between them cannot produce a seam.

       Was 24 + 24 = 48 here, 32 + 32 = 64 at 640, 64 + 32 = 96 at 1024.
       Business Banking renders 80 / 80 / 80 / 64 and is the canonical
       reference. */
    padding-bottom: calc(var(--fp-section-gap) - var(--fp-space-m));
    background-color: var(--fp-color-white);
    /* ⚠ Governed major-section gap (v3.54.2): the top half. Flat 32px at every
       width; the section above supplies --fp-section-gap - 32. See the note in
       explore-by-category.css for why this is a padding and not a margin.
       ⚠ padding-BOTTOM below is DELIBERATELY UNTOUCHED — this is the LAST
       section, so its bottom padding is not a section-to-section gap at all but
       half of the section → footer boundary, which is out of scope here. */
    padding-top:    var(--fp-space-l);
}

.fp-why-trust__container {
    width: 100%;
    max-width: 1280px;                      /* derived — see header note */
    margin: 0 auto;
    padding: 0 var(--fp-margin-mobile);     /* 20px */
    box-sizing: border-box;
}


/* ── Section header — centred ──────────────────────────── */

.fp-why-trust__header {
    text-align: center;
}

.fp-why-trust__heading {
    margin: 0 0 var(--fp-space-xs);         /* 8px, matching FP-C-003/4/5 */
    font-size: 28px;                        /* Mobile Heading L */
    font-weight: var(--fp-weight-heading);  /* 700 */
    line-height: var(--fp-line-heading);    /* 1.20 */
    letter-spacing: var(--fp-tracking-heading);
    color: var(--fp-color-navy);
}

.fp-why-trust__intro {
    margin: 0 auto;
    max-width: var(--fp-container-reading);
    font-size: var(--fp-font-body-m);       /* 16px mobile */
    font-weight: var(--fp-weight-body);
    line-height: var(--fp-line-body);
    color: var(--fp-color-gray-500);
}


/* ── Pillar grid ───────────────────────────────────────── */

.fp-why-trust__grid {
    display: grid;
    box-sizing: border-box;
    margin: var(--fp-space-m) 0 0;          /* 24px header -> content */
    padding: 0;
    list-style: none;

    /* Mobile: one column */
    grid-template-columns: 1fr;
    gap: 0;                                 /* dividers supply separation */
}


/* ── Pillar: icon left / copy right ────────────────────── */

.fp-why-trust__pillar {
    display: flex;
    align-items: flex-start;                /* icon aligns to the heading */
    gap: var(--fp-space-s);                 /* 16px icon -> copy */
    box-sizing: border-box;
    min-width: 0;
    padding: var(--fp-space-m) 0;           /* 24px above/below */
}

/* Mobile: horizontal dividers between stacked pillars, none at the top. */
.fp-why-trust__pillar + .fp-why-trust__pillar {
    border-top: 1px solid var(--fp-color-divider);
}

.fp-why-trust__icon-wrap {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    overflow: visible;   /* scaled canvases overhang; the overhang is
                            empty canvas, never artwork */
}

/*
 * PER-ICON OPTICAL NORMALISATION.
 *
 * The four source SVGs share a square canvas but their visible green
 * artwork occupies very different fractions of it, measured from
 * rendered pixels at 400px:
 *     shield        200 x 246   =  50.0% x 61.5% of canvas
 *     rubric        170 x 198   =  42.5% x 49.5%
 *     person+stars  292 x 315   =  73.0% x 78.8%
 *     calendar      253 x 288   =  63.2% x 72.0%
 *
 * An identical 48x48 canvas therefore does NOT produce equal visual
 * size — the shield rendered noticeably smaller than the target.
 *
 * Each icon's canvas is scaled so the GEOMETRIC MEAN of its green
 * bounding box is equal across the set. That measure sits between
 * "equal max dimension" (which left the shield looking small) and
 * "equal ink area" (which made it dominant), and was chosen after
 * rendering all three at final display size.
 *
 * Scale factors: shield x1.488, rubric x1.799,
 *                person+stars x1.088, calendar x1.223
 *
 * The set is anchored to the APPROVED on-page geometric mean of 39.6, not to
 * whichever icon happens to be largest. Normalising against the largest
 * (person+stars) would have shrunk every icon below the size already reviewed
 * and approved. Anchoring this way leaves shield, person+stars and calendar
 * within 0.002 of their previous factors; only the new rubric is genuinely
 * new.
 *
 * The 48x48 icon ZONE is unchanged. Aspect ratios are preserved —
 * width and height scale together, so nothing is stretched. The
 * illustration geometry itself is untouched; only display scale
 * changes. Overflow is empty canvas, never artwork, and stays well
 * inside the 16px icon-to-copy gap.
 */
.fp-why-trust__icon {
    display: block;
    width: 48px;
    height: 48px;                           /* all four assets are square */
    max-width: none;                        /* allow the scaled canvas */
}

.fp-why-trust__pillar:nth-child(1) .fp-why-trust__icon {   /* shield */
    width: 71.4px;
    height: 71.4px;
}

/* Rubric: its artwork fills only 42.5% x 49.5% of its canvas — the smallest
   proportion in the set — so it needs the largest canvas to reach the same
   perceived size. The overhang beyond the 48px zone is empty canvas, never
   artwork: the drawn rubric spans about 37px, comfortably inside the zone. */
.fp-why-trust__pillar:nth-child(2) .fp-why-trust__icon {   /* rubric */
    width: 86.3px;
    height: 86.3px;
}

.fp-why-trust__pillar:nth-child(3) .fp-why-trust__icon {   /* person + stars */
    width: 52.2px;
    height: 52.2px;
}

/* Calendar: its green artwork sits +1.0% / -2.5% off canvas centre,
   so a small translate brings it onto the shared centre line. */
.fp-why-trust__pillar:nth-child(4) .fp-why-trust__icon {   /* calendar */
    width: 58.7px;
    height: 58.7px;
    transform: translate(-0.6px, 1.5px);
}

.fp-why-trust__body {
    min-width: 0;
}

.fp-why-trust__pillar-title {
    margin: 0 0 var(--fp-space-xs);         /* 8px */
    font-size: var(--fp-font-label);        /* 16px */
    font-weight: var(--fp-weight-label);    /* 600 */
    line-height: var(--fp-line-heading);    /* 1.20 */
    color: var(--fp-color-navy);
}

.fp-why-trust__pillar-text {
    margin: 0;
    font-size: var(--fp-font-body-s);       /* 14px */
    font-weight: var(--fp-weight-body);
    line-height: var(--fp-line-body);
    color: var(--fp-color-gray-500);   /* v3.57.142 - owner-approved homepage colour (2026-10-27) */
}


/* ═══════════════════════════════════════════════════════════
   TABLET — 640px and up: 2 x 2
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 640px) {

    .fp-why-trust {
        padding-bottom: calc(var(--fp-section-gap) - var(--fp-space-l));
    }

    .fp-why-trust__container {
        padding: 0 var(--fp-margin-tablet);     /* 24px */
    }

    .fp-why-trust__heading {
        font-size: 32px;                        /* Tablet Heading L */
    }

    .fp-why-trust__grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: var(--fp-gutter-tablet);    /* 20px */
    }

    /* Reset the mobile stacking rule, then apply grid-aware dividers:
       a left border on the right-hand column, a top border on row 2. */
    .fp-why-trust__pillar + .fp-why-trust__pillar {
        border-top: 0;
    }

    .fp-why-trust__pillar:nth-child(2n) {
        border-left: 1px solid var(--fp-color-divider);
        padding-left: var(--fp-gutter-tablet);
    }

    .fp-why-trust__pillar:nth-child(n + 3) {
        border-top: 1px solid var(--fp-color-divider);
    }
}


/* ═══════════════════════════════════════════════════════════
   STANDARD DESKTOP — 1024px and up
   Columns stay at 2; gap and type scale up.
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {


    .fp-why-trust__heading {
        font-size: var(--fp-font-h2);           /* 36px */
    }

    .fp-why-trust__intro {
        font-size: var(--fp-font-body-l);       /* 18px */
    }

    .fp-why-trust__grid {
        column-gap: var(--fp-gutter-desktop);   /* 24px */
    }

    .fp-why-trust__pillar:nth-child(2n) {
        padding-left: var(--fp-gutter-desktop);
    }
}


/* ═══════════════════════════════════════════════════════════
   LARGE DESKTOP — 1280px and up: 4 across
   Three internal vertical dividers, no horizontal dividers.
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 1280px) {

    .fp-why-trust__grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Clear the tablet 2-column divider rules. */
    .fp-why-trust__pillar:nth-child(n + 3) {
        border-top: 0;
    }

    .fp-why-trust__pillar:nth-child(2n) {
        border-left: 0;
        padding-left: 0;
    }

    /* Internal vertical dividers only: pillars 2, 3 and 4. */
    .fp-why-trust__pillar + .fp-why-trust__pillar {
        border-left: 1px solid var(--fp-color-divider);
        padding-left: var(--fp-gutter-desktop);
    }
}


/* ═══════════════════════════════════════════════════════════
   LARGE DESKTOP — 1440px and up
   Gutters step to the 32px page margin, matching the shared system.
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 1440px) {

    .fp-why-trust__container {
        padding: 0 var(--fp-margin-desktop);    /* 32px */
    }
}

/* v3.57.125 - owner: in this heading "FinanceProspector" matches the header logo - Finance #173F73 (the logo's .st0, the same
   value as --fp-color-navy), Prospector #42B649 (.st1) - with no space between the two spans; the other words keep the
   heading's navy. r2: Finance was Core Blue #2563EB in r1 (Work QA bbb241b). FLAG: #42B649 on white is 2.62:1, below the 3:1
   large-text minimum; kept as the owner's logo match, not a contrast pass. */
.fp-why-trust__heading .fp-brand-name__finance { color: var(--fp-color-navy); }
.fp-why-trust__heading .fp-brand-name__prospector { color: var(--fp-color-green); }