/* ==========================================================================
   FEATURE COLUMNS — icon (left) + heading + body, rule-divided  (visual only)
   ==========================================================================
   A row of equal columns, each led by a Font Awesome icon to the LEFT of the
   text, separated by hairline rules, with a rule UNDER the row. Works on light
   or dark bands (rule/icon colour follows the band).

   Build: element_group `row feature-cols` with N children `col-1-3`, each a
   `text` element shaped icon-left:
       <i class="fa-light fa-gear-complex-code"></i>
       <div class="ft"><h3>We do the complex work.</h3><p>Targeted cash…</p></div>
   ========================================================================== */
/* ---- The rules are INSET pseudo-elements, not borders ------------------- */
/* This group is a DIRECT child of a `.band` article, and `.band > *` supplies
   `padding-inline: var(--page-gutter)`. A border-top/bottom therefore paints
   across that padding and runs a full gutter (56px at 1400) past the text on
   BOTH sides — which is what John reported on Advisor Partnership's "What you
   can expect. Every time." and on Case Studies. Every board draws these rules
   at exactly x300–2100, i.e. exactly the 1800 container, so the design never
   overshoots; this was ours.

   `--rule-inset` is the dial, defaulting to the page gutter because that is the
   padding a band child carries. Used somewhere with no gutter padding, set
   `--rule-inset: 0` on the group or any ancestor. Same fix already applied to `.hero__intro`, `.hero__frame` and
   `.stats`. */
.feature-cols {
    --fc-rule: var(--hairline);
    --fc-rule-gap: clamp(1.4rem, 2.6vw, 2.3125rem);   /* rule -> content, 37px */
    position: relative;
    margin-top: clamp(1.75rem, 4vw, 3.5rem);       /* more gap below the heading */
    padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
    align-items: stretch;
    &::before, &::after {
        content: "";
        position: absolute;
        left: var(--rule-inset, var(--page-gutter));
        right: var(--rule-inset, var(--page-gutter));
        height: 0;
        border-top: 1px solid var(--fc-rule);
        pointer-events: none;
    }
    &::before { content: none; top: 0; }
    /* opted into by --top */
    &::after { bottom: 0; }
    /* the rule under the row */
    > * + * {
        border-left: 1px solid var(--fc-rule);
        padding-left: clamp(1.25rem, 2.5vw, 2rem);
    }

    /* icon-left layout: the rich-text wrapper becomes the flex row. */
    .rte { display: flex; gap: 1rem; align-items: flex-start; }
    .ft { flex: 1 1 auto; min-width: 0; }
    i, .svg-inline--fa {
        flex: 0 0 auto;
        font-size: clamp(2.1rem, 2.6vw, 3.875rem);   /* the boards' icons are 62px */
        line-height: 1;
        color: var(--second);
        margin-top: 0.15rem;
    }
    h3 { margin: 0 0 0.5em; }   /* the base h3: 27px / 500, as the boards set it */
    p { margin: 0; }
}

/* On a dark band: light rules, white icons, muted body. */
:is(.bg-ink, .bg-dark, .bg-prime) .feature-cols { --fc-rule: var(--hairline-on-dark); }
.bg-ink .feature-cols i,   .bg-ink .feature-cols .svg-inline--fa,
.bg-dark .feature-cols i,  .bg-dark .feature-cols .svg-inline--fa,
.bg-prime .feature-cols i, .bg-prime .feature-cols .svg-inline--fa { color: var(--white); opacity: 0.92; }
.bg-ink .feature-cols p,
.bg-dark .feature-cols p,
.bg-prime .feature-cols p { color: var(--text-on-dark-dim); }

/* ---- Headings sub-variant (no icon, big Literata heading, no bottom rule) */
/* For a "value" grid where the heading IS the feature (e.g. For CPAs "The value
   has to make sense"). Keeps the vertical dividers + dark-band treatment; drops
   the icon flex-row and the bottom rule. Use `feature-cols feature-cols--headings`
   with `col-1-4` children that are just <h3> + <p> (no <i>, no .ft). */
.feature-cols--headings {
    padding-bottom: 0;
    &::after { content: none; }
    .rte { display: block; }
    h3 {
        font-family: var(--type-display);
        font-size: clamp(1.2rem, 1.8vw, 1.6875rem);   /* 27px / 500 — the base h3 weight */
        line-height: 1.15;
        margin: 0 0 0.5em;
    }
}

/* ---- Rule-ABOVE sub-variant (stacked rows, rule over each row) ---------- */
/* For a multi-row grid where each row carries a full-width rule above it and
   none below (e.g. Advisor Partnership "What you can expect"). Pair with
   `--headings`; the base bottom rule is already dropped by `--headings`. */
/* Rhythm off the board (Advisor Partnership "What you can expect. Every time.",
   Service standards y1082-1669): heading descender -> first rule 48px, then
   rule -> items 37px, and items -> the NEXT row's rule 48px again. The two 48s
   are the same gap, which is why one margin-top serves both. The clamp maxima
   land on those numbers at >=1400. */
.feature-cols--top {
    padding-top: var(--fc-rule-gap);
    margin-top: clamp(1.75rem, 3.4vw, 3rem);        /* 48px */
    &::before { content: ""; }
}
/* The section heading brings its own margin-bottom, which stacked on top of
   that 48px and pushed the first rule down. The board measures 48 from the
   descender to the rule, full stop. */
.content-text:has(+ .feature-cols--top) :is(h2, h3):last-child { margin-bottom: 0; }

/* ---- Rule-BELOW sub-variant (closes a stacked grid with a bottom rule) --- */
/* For the last row of a multi-row grid that carries a full-width rule under it
   (e.g. Complex Plan Design "The designs that need an actuary"). On the
   difference band the base bottom rule is stripped, so restore it here with a
   selector specific enough to win. */
.feature-cols--btm,
.difference .feature-cols.feature-cols--btm {
    padding-bottom: var(--fc-rule-gap);   /* the same space as above a rule */
}
.feature-cols--btm::after,
.difference .feature-cols.feature-cols--btm::after { content: ""; }

/* The dividers are the columns' left borders, so they are as tall as the tallest
   column. Where a board draws them taller than the text, a page sets
   `--fc-rule-h` (the board's height, in vw of the 2400 board, capped at it) on
   the row. Only while the columns sit side by side. */
@media only screen and (min-width: 601px) {
    .feature-cols > * { min-height: var(--fc-rule-h, 0); }
}

/* The dividers track framework_v3's step-down (3/4-up -> 2-up at 992 -> 1-up
   at 600), as stats.css does: at 2-up the cell that starts a line loses its
   divider; stacked, a rule runs between the cells instead, with the same
   space above and below it. */
@media only screen and (max-width: 992px) {
    .feature-cols > :is(.col-1-3, .col-30, .col-1-4, .col-1-2):nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media only screen and (max-width: 600px) {
    .feature-cols { row-gap: 0; }
    .feature-cols > * + * {
        border-left: 0;
        padding-left: 0;
        border-top: 1px solid var(--fc-rule);
        margin-top: var(--fc-rule-gap);
        padding-top: var(--fc-rule-gap);
    }
}