/* ─────────────────────────────────────────────────────────────
   Overview — the five statements as an editorial list

   v1 put each one on its own slab of flat teal; a first pass here made
   them five narrow columns. Both made the statements small, and the
   statements are the entire content of the section. So they get the
   full width of the page and a size worth reading: one per row, set
   large and light, with an index numeral opening the row and the icon
   closing it. Hairlines carry the structure — the same thing that
   carries a drawing sheet.
   ───────────────────────────────────────────────────────────── */

.jm-home-overview {
    padding: clamp(34px, 4.2vw, 66px) 0 clamp(24px, 3vw, 44px);
    background: var(--bg-white);
}

.jm-home-overview__label {
    margin: 0 0 clamp(22px, 3vw, 38px);
    color: var(--text-light);
}

.jm-home-overview__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--border-light);
}

.jm-home-overview__item {
    display: grid;
    align-items: start;
    padding-block: clamp(24px, 3vw, 40px);
    border-bottom: 1px solid var(--border-light);
    transition: background-color 0.4s var(--ease);

    /* Phone: the numeral and the icon share the top line, the statement
       takes the full width beneath them. */
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "index icon"
        "title title";
    column-gap: var(--sp-4);
    row-gap: clamp(12px, 2vw, 18px);
}

.jm-home-overview__index {
    grid-area: index;
    align-self: center;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    /* The tracking on the last digit would otherwise push the numeral a
       hair off the left margin the statement sits on. */
    text-indent: 0.24em;
    color: var(--accent);
}

.jm-home-overview__icon {
    grid-area: icon;
    display: block;
    color: var(--primary);
}

.jm-home-overview__icon svg {
    display: block;
    width: clamp(30px, 3.4vw, 42px);
    height: auto;
}

.jm-home-overview__title {
    grid-area: title;
    margin: 0;
    /* The point of the section. Large and light, not tracked caps — three
       of the five run to a dozen words and caps at that length stop being
       readable. */
    font-size: clamp(1.25rem, 0.95rem + 1.3vw, 2rem);
    font-weight: 300;
    line-height: 1.3;
    letter-spacing: 0.005em;
    color: var(--text-primary);
    max-width: 30ch;
    text-wrap: pretty;
}

/* ─── Wide: numeral, statement and icon on one line ────────── */

@media (min-width: 760px) {
    .jm-home-overview__item {
        grid-template-columns: clamp(58px, 7vw, 104px) minmax(0, 1fr) auto;
        grid-template-areas: "index title icon";
        align-items: center;
        column-gap: clamp(18px, 3vw, 44px);
    }

    .jm-home-overview__index { align-self: center; }
    .jm-home-overview__icon  { justify-self: end; }
}

@media (hover: hover) and (pointer: fine) {
    .jm-home-overview__item:hover { background-color: rgba(227, 239, 240, 0.4); }
}