/* Insights listing — the card grid at /Insights/, and the Insights band on the
   homepage. Tokens come from site.css; this file only adds the index itself. */

.ix-head {
    /* border-box: padding eats into max-width, so the CONTENT would sit
       var(--gut) inboard of the nav and footer once the cap bites (>=1708px).
       Widen the cap by both gutters to land on the same edge as .band__inner. */
    max-width: calc(var(--inner, 1560px) + var(--gut, 40px) * 2);
    margin: 0 auto;
    padding: clamp(56px, 7vw, 96px) var(--gut, 40px) 0;
}

.ix-head h1 {
    font-size: clamp(2.1rem, 1rem + 3.4vw, 3.4rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.02em;
    margin: 10px 0 18px;
    color: var(--ink, #101720);
    text-wrap: balance;
}

.ix-head .sub {
    max-width: 66ch;
    margin: 0;
    font-size: 1.06rem;
    line-height: 1.72;
    color: var(--muted, #5b6675);
    text-wrap: pretty;
}

.ix-wrap {
    /* border-box: padding eats into max-width, so the CONTENT would sit
       var(--gut) inboard of the nav and footer once the cap bites (>=1708px).
       Widen the cap by both gutters to land on the same edge as .band__inner. */
    max-width: calc(var(--inner, 1560px) + var(--gut, 40px) * 2);
    margin: 0 auto;
    padding: clamp(36px, 4vw, 56px) var(--gut, 40px) clamp(72px, 8vw, 120px);
}

.ix-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 1px;
    background: var(--line, #dbe2e9);
    border: 1px solid var(--line, #dbe2e9);
}


/* the whole box is the link, so the entire card opens the article */
.ix-card {
    display: grid;
    grid-template-rows: auto auto auto auto 1fr;
    align-content: start;
    background: var(--surface, #ffffff);
    padding: 30px 30px 26px;
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: background .2s ease;
}

/* the accent edge only marks the card you are pointing at */
.ix-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent, #c2410c);
    opacity: 0;
    transition: opacity .2s ease;
}

.ix-card:hover,
.ix-card:focus-visible {
    background: var(--surface-2, #f7f9fb);
}

.ix-card:hover::before,
.ix-card:focus-visible::before {
    opacity: 1;
}

.ix-card:focus-visible {
    outline: 2px solid var(--accent, #c2410c);
    outline-offset: -2px;
}

.ix-tag {
    display: inline-block;
    justify-self: start;
    font-family: var(--sans, sans-serif);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--accent, #c2410c);
    padding-bottom: 9px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--ink, #101720);
}

.ix-card h2 {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -.015em;
    color: var(--ink, #101720);
    margin: 0 0 12px;
    text-wrap: balance;
}

.ix-deck {
    font-size: .98rem;
    line-height: 1.68;
    color: var(--ink-2, #2c3644);
    margin: 0 0 24px;
    text-wrap: pretty;
}

/* the numbers that make each case concrete, straight from the article */
.ix-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    list-style: none;
    margin: 0 0 26px;
    padding: 18px 0 0;
    border-top: 1px solid var(--line, #dbe2e9);
}

.ix-stats li {
    margin: 0;
    padding: 0;
}

.ix-stats li::before {
    content: none;
}

.ix-stats b {
    display: block;
    font-family: var(--sans, sans-serif);
    font-size: 1.16rem;
    font-weight: 700;
    color: var(--accent, #c2410c);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.ix-stats span {
    display: block;
    font-family: var(--sans, sans-serif);
    font-size: .62rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted, #5b6675);
    margin-top: 4px;
}

.ix-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-top: auto;
    align-self: end;
}

.ix-by {
    font-family: var(--sans, sans-serif);
    font-size: .78rem;
    line-height: 1.5;
    color: var(--ink-2, #2c3644);
}

.ix-by i {
    display: block;
    font-style: normal;
    color: var(--muted, #5b6675);
    font-size: .72rem;
    margin-top: 3px;
}

.ix-go {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: none;
    font-family: var(--sans, sans-serif);
    font-size: .8rem;
    font-weight: 600;
    color: var(--accent, #c2410c);
}

.ix-go svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .2s ease;
}

.ix-card:hover .ix-go svg,
.ix-card:focus-visible .ix-go svg {
    transform: translateX(4px);
}

@media (max-width: 700px) {
    .ix-grid {
        grid-template-columns: 1fr;
    }

    .ix-card {
        padding: 24px 22px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .ix-card,
    .ix-card::before,
    .ix-go svg {
        transition: none;
    }

    .ix-card:hover .ix-go svg,
    .ix-card:focus-visible .ix-go svg {
        transform: none;
    }
}

/* Cards share the grid's rows, so tag, title, deck, figures and footer line up
   across every card regardless of how long each title or deck happens to be.
   Without this the rows drift by 25-30px whenever one title wraps and another
   does not — only the footer aligned, and only because of margin-top:auto.

   This MUST come after the .ix-card rule above: an earlier @supports block
   loses to the plain grid-template-rows declaration on equal specificity. */
@supports (grid-template-rows: subgrid) {
    .ix-card {
        grid-row: span 5;
        grid-template-rows: subgrid;
        row-gap: 0;
    }
}