/* FinanceProspector — All Providers hero v1.1 (v3.56.1)
   Template part: template-parts/providers-hero.php. Loads on /providers/ only.

   COMPOSITION = THE BEST OF / BUYING GUIDES HERO (collection.css), restated
   here because that stylesheet does not load on this route:
     >= 1200   three columns 350 / 500 / 350 (ratios, so 1152-1200 scales),
               hairline Gray-200 dividers between them. Each side column
               FLOWS ON ITS OWN (eyebrow, heading, paragraph - no shared
               subgrid, so a one-line heading is followed directly by its
               paragraph); both start on the same line, in one auto row
               between two flexible tracks. The centre column carries the H1
               above the score illustration and spans all three rows.
               Block padding 16px; inline 8px on the sides, 16px centre.
     768-1199  two tiers: H1 + illustration across the top, the two text
               columns side by side beneath, divided by hairlines.
     < 768     stacked: H1 + illustration, left text, right text, divided by
               hairlines.
   The eight criteria follow the three-column section (not part of the
   Best Of system): one row from 1024, four across from 640, two below.
   From 640 up they sit 16px under the section (32px under its lowest
   content at desktop, 40px at tablet); phones keep 32px (56px to content).

   TYPE - the same roles as those heroes:
     H1               the shared hero title scale (base.css): 40 / 700 / 44px,
                      -0.03em; 30px < 480px, 36px at 1280-1359px
     column eyebrows  the shared hero label (base.css, v3.56.4): 14 / 600 on
                      16.25px, 16 / 600 on 18px from 1280, 1.04px, uppercase,
                      Core Blue, centred; 8px to the heading, 24px at >= 1200
     column headings  34px (>= 1200) / 36px / 24px (< 480), 700, 1.10, -0.02em, Navy
                      = .fp-collection__col-title on Best Of / Buying Guides
     column copy      16 / 400 / 1.65, Gray-500 (one paragraph per column)
     criteria labels  14 / 600 / 1.20, Gray-600
   The H1 keeps its approved two colours (Navy / Dark Green).

   NEVER SCALED: the criteria icons (110.26 x 94.33 CSS px) and every 1px
   border, so the approved 1px gray / 2.75px colour line weights hold.

   STARS: the governed .fp-stars row from base.css (FP Star v1.0, 16px per
   position, 160 x 15px for ten, Core Green over Pale Green) - the homepage's
   own component, not restyled here. */

.fp-aph {
    padding: 0 20px;
    margin: 8.35px 0 0;                          /* v3.56.8 hero offset (was 24): H1 glyphs
                                                    18.6-19.9px below the breadcrumb baseline.
                                                    From 1200: 8px, see the end of file */
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.fp-aph__frame {
    max-width: var(--fp-container-max-width);    /* 1200px */
    margin: 0 auto;
}

/* ── Three-column section (mobile first: stacked) ───────── */
.fp-aph__trio {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}
.fp-aph__col {
    min-width: 0;
    padding: var(--fp-space-m) 0;                /* 24px */
}
/* H1 + illustration first when stacked; source order stays left | centre |
   right, the correct desktop and assistive-technology order. */
.fp-aph__col--identity { order: 1; padding-top: 0; display: flex; flex-direction: column; align-items: center; }
.fp-aph__col--left     { order: 2; border-top: 1px solid var(--fp-color-gray-200); }
.fp-aph__col--right    { order: 3; border-top: 1px solid var(--fp-color-gray-200); }

.fp-aph__title {
    margin: 0 0 var(--fp-space-s);               /* 16px, H1 -> illustration */
    font-size: var(--fp-hero-title-size);        /* shared hero title scale, base.css */
    font-weight: var(--fp-weight-heading);       /* 700 */
    line-height: var(--fp-hero-title-line);
    letter-spacing: var(--fp-hero-title-track);  /* -0.03em */
    text-align: center;
    text-wrap: balance;
    color: var(--fp-color-navy);
}
.fp-aph__title-l1, .fp-aph__title-l2 { display: block; }
.fp-aph__title-l2 { color: var(--fp-color-hero-heading); }   /* Dark Green #338E39 */

.fp-aph__col-eyebrow {
    margin: 0 0 var(--fp-space-xs);              /* 8px */
    /* v3.56.4: the shared hero label (base.css --fp-hero-label-*): 14px,
       16px from 1280, centred in its own column. */
    text-align: center;
    font-size: var(--fp-hero-label-size);        /* 14px; 16px from 1280 */
    font-weight: var(--fp-weight-label);         /* 600 */
    line-height: var(--fp-hero-label-line);      /* 16.25px; 18px from 1280 */
    letter-spacing: 1.04px;
    text-transform: uppercase;
    color: var(--fp-color-blue);                 /* Core Blue */
    text-wrap: balance;                          /* no one-word last line */
}
.fp-aph__col-title {
    margin: 0;
    font-size: var(--fp-font-h2);                /* 36px; 34px at >= 1200 */
    font-weight: var(--fp-weight-heading);       /* 700 */
    line-height: var(--fp-line-display);         /* 1.10 */
    letter-spacing: var(--fp-tracking-heading);  /* -0.02em */
    color: var(--fp-color-navy);
    text-wrap: balance;                          /* no one-word second line */
}
.fp-aph__col-body {
    margin: var(--fp-space-s) 0 0;               /* 16px */
    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);
    text-wrap: pretty;                           /* avoids a one-word last line */
}
.fp-aph__nw { white-space: nowrap; }             /* keeps "trade-offs" whole */

/* ── Score illustration (decorative) ────────────────────── */
.fp-aph__card {
    box-sizing: border-box;
    width: 263px;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #90A3BC;                   /* Structural Gray, 1px */
    border-radius: 10.9px;
    background: var(--fp-color-white);
}
.fp-aph__provider {
    box-sizing: border-box;
    width: 91.6px;
    height: 85px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid #90A3BC;
    border-radius: 7.7px;
    font-size: 16px;
    font-weight: var(--fp-weight-body);          /* 400 */
    line-height: 1;
    color: var(--fp-color-gray-600);             /* Dark Gray #4B5563 */
}
/* Placeholder bars: 108 / 81 x 8px (v1.0 was 204 / 153 x 16.8px). */
.fp-aph__bar {
    display: block;
    height: 8px;
    border-radius: var(--fp-radius-pill);
}
.fp-aph__bar--green { width: 108px; margin-top: 20px; background: var(--fp-color-green); }
.fp-aph__bar--blue  { width: 81px;  margin-top: 8px;  background: var(--fp-color-blue); }
/* Bar sizes and the 20 / 8 / 20px spacing around them are the approved
   values; the card, Provider box, stars and label keep the size and position
   they had when the bars were 144 / 108 x 10px. */
.fp-aph__stars { margin-top: 20px; }
.fp-aph__score {
    margin-top: 14px;
    white-space: nowrap;
    font-size: 18px;
    font-weight: var(--fp-weight-medium);        /* 500 */
    line-height: 1;
    letter-spacing: var(--fp-tracking-caption);  /* +0.01em */
    color: var(--fp-color-navy);
}

/* ── Criteria ───────────────────────────────────────────── */
.fp-aph__crits {
    list-style: none;
    margin: var(--fp-space-l) 0 0;               /* 32px */
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--fp-space-l) var(--fp-space-s);    /* 32px rows, 16px columns */
}
.fp-aph__crit {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.fp-aph__icon {
    display: block;
    width: 110.26px;
    height: 94.33px;
    max-width: none;
}
.fp-aph__cap {
    display: block;
    margin-top: var(--fp-space-xs);              /* 8px */
    font-size: 14px;
    font-weight: var(--fp-weight-label);         /* 600 */
    line-height: var(--fp-line-heading);         /* 1.20 */
    color: var(--fp-color-gray-600);             /* #4B5563 */
    white-space: nowrap;
}
@media (min-width: 640px) {
    .fp-aph__crits {
        margin-top: var(--fp-space-s);           /* 16px (was 48) */
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--fp-space-l) var(--fp-space-m);   /* 32 / 24px */
    }
}

/* ── 768-1199: two tiers ────────────────────────────────── */
@media (min-width: 768px) {
    .fp-aph { padding: 0 24px; }
    .fp-aph__trio {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;           /* identity tier, copy tier */
    }
    .fp-aph__col--identity { grid-column: 1 / -1; grid-row: 1; padding-bottom: var(--fp-space-m); }
    .fp-aph__col--left,
    .fp-aph__col--right {
        grid-row: 2;
        align-self: stretch;                      /* full-height divider between the pair */
        border-top: 1px solid var(--fp-color-gray-200);
    }
    .fp-aph__col--left  { grid-column: 1; padding-right: var(--fp-space-m); }
    .fp-aph__col--right { grid-column: 2; padding-left: var(--fp-space-m); border-left: 1px solid var(--fp-color-gray-200); }
}
@media (min-width: 1024px) {
    .fp-aph__crits {
        grid-template-columns: repeat(8, 110.26px);
        justify-content: space-between;
        gap: 0;
    }
}

/* ── >= 1200: three columns ─────────────────────────────── */
@media (min-width: 1200px) {
    .fp-aph__trio {
        grid-template-columns: minmax(0, 350fr) minmax(0, 500fr) minmax(0, 350fr);
        /* one auto row for the two copy columns between two flexible tracks:
           the side columns start on the same line and surplus height splits
           above and below them, as on Best Of */
        grid-template-rows: 0.5fr auto 0.5fr;
    }
    .fp-aph__col {
        order: 0;
        border-top: 0;
        padding: var(--fp-space-s) var(--fp-space-xs);   /* 16px block, 8px inline */
    }
    .fp-aph__col--left     { grid-column: 1; grid-row: 2; align-self: start; padding-right: var(--fp-space-m); }
    .fp-aph__col--identity {
        grid-column: 2;
        grid-row: 1 / -1;
        justify-content: center;
        padding: var(--fp-space-s);                         /* 16px */
        /* BOTH dividers belong to the centre column, which spans every row,
           so they run the section's full height. On the right column (rows
           2 / -2 only) the right-hand divider stopped short of the left one. */
        border-left: 1px solid var(--fp-color-gray-200);
        border-right: 1px solid var(--fp-color-gray-200);
    }
    .fp-aph__col--right    { grid-column: 3; grid-row: 2; align-self: start; padding-left: var(--fp-space-m); border-left: 0; }
    .fp-aph__col-title { font-size: 34px; }                 /* Best Of --fp-hero-side-heading */
    .fp-aph__col-eyebrow { margin-bottom: var(--fp-space-m); }   /* 24px, as Best Of */
    .fp-aph__col-body { margin-top: var(--fp-space-l); }    /* 32px, as Best Of */
}
@media (min-width: 1280px) {
    .fp-aph { padding: 0 32px; }
}
@media (max-width: 479.98px) {
    .fp-aph__col-title { font-size: var(--fp-hero-side-heading-phone); }   /* 24px, below the 30px H1 */
}

/* ═══════════════════════════════════════════════════════════
   HERO OFFSET (v3.56.8) - breadcrumb -> first meaningful hero content
   One visible gap site-wide: about 20px (2px tolerance) from the
   breadcrumb's baseline to the first heading glyph, card border or drawn
   artwork. Set per component and breakpoint because each hero starts with
   different content (a card, a heading, an icon) and carries different
   fixed leading. Only spacing ABOVE the first hero content changes; the
   spacing between hero elements, type, copy and artwork are untouched, and
   no page gets taller. Articles already sit at 19.6px and are the anchor.
   ═══════════════════════════════════════════════════════════ */
/* From 1200 the identity column's dividers run from the hero's top edge,
   so the hero keeps 8px under the breadcrumb (dividers 11.6px below its
   baseline) and the identity column's top padding becomes 5px: H1 glyphs
   ~21.9px below the baseline, the top of the tolerance. */
@media (min-width: 1200px) {
    .fp-aph { margin-top: 8px; }
    .fp-aph__col--identity { padding-top: 5px; }
}

/* ═══════════════════════════════════════════════════════════
   BREADCRUMB -> FIRST TEXT (v3.56.8, text-first hero family)
   Measured from the bottom of the breadcrumb's visible letters to the top
   of the first hero text line's visible letters - not line boxes. Every
   text-first hero (Categories, Resources, the three collections, All
   Providers) matches the family's shortest existing gap: 15.8px below
   480px, 17.1px from 480. A breadcrumb with no descending letters (g p y)
   reads 2.7px further away, so those pages take a larger reduction.
   ═══════════════════════════════════════════════════════════ */
/* Below 1200 the hero's own top margin (8.35px above, was 11px) is the
   whole offset. From 1200 the hero keeps its 8px so the identity column's
   dividers stay put, and only that column's top padding shrinks. */
/* The side columns sit between two flexible rows that split the leftover
   height, so on their own they would rise only half as far as the H1. The
   same amount added to their (invisible) bottom padding makes every element
   in the hero move together - the spacing between them is unchanged. */
@media (min-width: 1200px) {
    .fp-aph__col--identity { padding-top: 0.42px; }
    .fp-aph__col--left,
    .fp-aph__col--right { padding-bottom: 20.58px; }   /* 16 + 4.58 */
}
@media (min-width: 1280px) and (max-width: 1379.98px) {
    .fp-aph__col--identity { padding-top: 1.35px; }
    .fp-aph__col--left,
    .fp-aph__col--right { padding-bottom: 19.65px; }   /* 16 + 3.65 */
}