/* ==========================================================================
   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 past the text on BOTH sides.

   `--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 treatment as `.hero__intro`, `.hero__frame` and `.stats`. */
.feature-cols {
    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(--hairline);
        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(--hairline);
        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: 2.1rem;
        line-height: 1;
        color: var(--second);
        margin-top: 0.15rem;
    }
    h3 { margin: 0 0 0.5em; font-size: clamp(1.05rem, 1.7vw, 1.3rem); }
    p { margin: 0; }
}

/* On a dark band: light rules, white icons, muted body. */
.bg-ink .feature-cols::before,   .bg-ink .feature-cols::after,
.bg-dark .feature-cols::before,  .bg-dark .feature-cols::after,
.bg-prime .feature-cols::before, .bg-prime .feature-cols::after { border-top-color: var(--hairline-on-dark); }
.bg-ink .feature-cols > * + *,
.bg-dark .feature-cols > * + *,
.bg-prime .feature-cols > * + * { border-left-color: 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 display heading, no bottom rule) */
/* For a "value" grid where the heading IS the feature . 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-weight: 700;
        font-size: clamp(1.2rem, 1.8vw, 1.6875rem);
        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. Pair with
   `--headings`; the base bottom rule is already dropped by `--headings`. */
/* Rhythm: heading -> first rule 48px, rule -> items 37px, items -> the next
   row.s rule 48px again, which is why one margin-top serves both. */
.feature-cols--top {
    padding-top: clamp(1.4rem, 2.6vw, 2.3125rem);   /* 37px */
    margin-top: clamp(1.75rem, 3.4vw, 3rem);        /* 48px */
}
.feature-cols--top::before { content: ""; }
/* The section heading brings its own margin-bottom, which stacked on top of
   that 48px and pushed the first rule down. The 48px is measured from the
   descender to the rule. */
.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. 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: clamp(1.4rem, 2.8vw, 2.1rem);
}
.feature-cols--btm::after,
.difference .feature-cols.feature-cols--btm::after { content: ""; }

@media only screen and (max-width: 700px) {
    .feature-cols > * + * { border-left: 0; padding-left: 0; padding-top: 1.5rem; }
}