/* SFH2026 USP strip — icon, label, sub, with a rule between each.
 *
 * Redrawn to the prototype at lixo/three: a white band spanning the content
 * grid, each item taking an equal share and sitting at the LEFT of its share,
 * with full-height rules between and one under the strip. It had been a grey
 * band centred at 1000px with the three items pushed apart and their labels in
 * caps — the earlier Figma frame.
 *
 * The markup is unchanged: the strip already emits a divider element between
 * items, and stretching that is what draws the full-height rule. */
.sfh-usp { background: #fff; border-bottom: 1px solid #e6e6e6; }
.sfh-usp-row {
    /* On the theme's own grid now, not a 1000px island — the rules have to reach
       the same edges as the header and every section below. The +40 is the
       gutter this row carries itself; see the max-width note in CLAUDE.md. */
    max-width: calc(var(--cms2-max-width, 1280px) + 40px);
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    /* stretch, so the dividers can take the row's full height */
    align-items: stretch;
    gap: 0;
}
/* Equal shares, contents at the left of each. min-width: 0 because a flex item
   will not shrink below its own content, and "Talk to a real pro" on one line is
   wider than a third of a narrow window. */
.sfh-usp-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    /* Centred in its share, not pushed to the left edge of it. */
    justify-content: center;
    gap: 16px;
    padding: 28px 24px;
}
/* contain, not stretch: the pin is 20x24 in the source art and these are
   CMS-managed images, so any aspect ratio has to survive the box. */
.sfh-usp-item img { flex-shrink: 0; width: 34px; height: 34px; object-fit: contain; }

/* The icons in the site's accent.
 *
 * They are monochrome SVGs exported from Figma with `fill="var(--fill-0, black)"`,
 * and that variable never resolves: an SVG loaded through <img> is its own
 * document and does not inherit custom properties from the page. So the file
 * paints black no matter what CSS the page carries, and a `filter` recipe is the
 * usual workaround — approximate, and it would have to be re-derived for any
 * other accent.
 *
 * Masking is exact and follows --cms2-accent, so a tenant that sets its own
 * accent gets icons to match with nothing further to do. Checked against all
 * three files: the pin keeps the white dot inside it, which alpha masking could
 * easily have filled in.
 *
 * Behind @supports, with the <img> still in the markup: where masks are missing
 * the icon shows exactly as it does today rather than disappearing. */
.sfh-usp-icon { display: inline-flex; flex: 0 0 auto; line-height: 0; }

/* Per-icon sizing.
 *
 * `.sfh-usp-icon:nth-of-type(3)` matches NOTHING, which is worth spelling out
 * because it looks like it should work: :nth-of-type counts among an element's
 * SIBLINGS, and each icon is the only <span> inside its own .sfh-usp-item, so
 * every one of them is :nth-of-type(1). The three icons are never siblings of
 * each other.
 *
 * Two selectors do work. `.sfh-usp-item:nth-of-type(3) .sfh-usp-icon` counts the
 * items — and note it has to be nth-of-TYPE there too, not nth-child, because
 * the dividers sit between the items as siblings, so the third item is the fifth
 * child. Or match the file, which is what is used here: it survives someone
 * reordering the rows in the admin, and it is the same hook the old CSS used
 * (`img[src*="icon-pin"]`) before the icons became masked spans.
 *
 * The size goes on the SPAN. The <img> inside is display:none under @supports,
 * so sizing it has no effect at all — that is the other half of why the earlier
 * attempt showed nothing. */
.sfh-usp-icon[style*="icon-pin"] {
    /* The pin is 20x24 in the source art, so it is narrower than the square the
       other two fill; masking with `contain` keeps that ratio inside the box. */
    width: 27px;
    height: 32px;
}

@supports ((mask-image: none) or (-webkit-mask-image: none)) {
    /* One class; the per-icon rule above is class + attribute and outranks it. */
    .sfh-usp-icon {
        width: 30px;
        height: 30px;
        /* background: var(--cms2-accent, #be202e); */
        background: black;
        -webkit-mask: var(--sfh-usp-icon) center / contain no-repeat;
        mask: var(--sfh-usp-icon) center / contain no-repeat;
    }
    .sfh-usp-icon img { display: none; }
}
.sfh-usp-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* Sentence case, not caps — the prototype reads as a line of service promises
   rather than three headings. */
.sfh-usp-heading {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    color: #121212;
}
.sfh-usp-sub { margin: 0; font-size: 13px; line-height: 1.5; color: #898989; }

/* The rule between items. `align-self: stretch` with no height is what makes it
   span the row rather than the 65px it used to be given. */
.sfh-usp-divider {
    width: 1px;
    align-self: stretch;
    height: auto;
    background: #e6e6e6;
    flex-shrink: 0;
}

/* A linked tile is still a tile: no underline, no blue, and the whole box is the
   target rather than the words inside it. */
a.sfh-usp-item { text-decoration: none; color: inherit; transition: background-color .15s; }
a.sfh-usp-item:hover { background: #fafafa; }
a.sfh-usp-item:focus-visible { outline: 2px solid var(--cms2-accent, #be202e); outline-offset: -2px; }

/* 900px, not 760: matches the header's own breakpoint, and three labels plus two
   rules stop fitting on one row well before 760.
 *
 * The row STAYS a row here. It used to become a stacked column, which is the
 * layout the design review turned down — three full-width bands of small print
 * between the header and the hero. Two side by side is the replacement, and the
 * third tile is dropped by the layout's `is-mobile-hidden` marker rather than by
 * a :nth-child rule here, so the count is decided in one place. */
@media (max-width: 900px) {
    .sfh-usp-item { padding: 18px 12px; gap: 12px; }
    .sfh-usp-item.is-mobile-hidden,
    .sfh-usp-divider.is-mobile-hidden { display: none; }
}

/* Under ~560px two tiles share less than 200px each, and at the desktop sizes
   "Talk to a real pro" alone is wider than that. Everything steps down together
   — icon, both type sizes and the padding — so the pair still reads as one line
   of promises instead of wrapping into four. */
@media (max-width: 560px) {
    .sfh-usp-item { padding: 14px 8px; gap: 9px; }
    .sfh-usp-item img { width: 24px; height: 24px; }
    .sfh-usp-heading { font-size: 13px; line-height: 1.3; }
    .sfh-usp-sub { font-size: 11px; line-height: 1.35; }
}
@supports ((mask-image: none) or (-webkit-mask-image: none)) {
    @media (max-width: 560px) {
        /* The masked span carries the size, not the <img> it hides — and the
           pin keeps its 20x24 ratio, same reasoning as the desktop rule. */
        .sfh-usp-icon { width: 24px; height: 24px; }
        .sfh-usp-icon[style*="icon-pin"] { width: 21px; height: 25px; }
    }
}