/* ============================================================
   KEYSTONE MODELS — the four-model callout.
   ------------------------------------------------------------
   One component, used on three surfaces: the homepage band, the
   Resources Library header, and the /models/ hub. Written once
   here rather than three times inline so the four models cannot
   drift apart between the pages that present them.

   Only the Pyramid has an interactive tool today. A card without
   one renders as a <div> rather than an <a> and carries a status
   chip, because a card that looks clickable and is not is worse
   than one that plainly says where the work has got to.
   ============================================================ */

.keystone-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The grid items are the <li>s, so the card inside one does not stretch on its
   own — leaving ragged bottoms and breaking the `margin-top:auto` that pins each
   footer. Stretch both. */
.keystone-grid > li {
    display: flex;
    min-width: 0;
}

.keystone-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    background: var(--surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    text-decoration: none;
    min-width: 0;
    transition: border-color .14s ease, background .14s ease, transform .14s ease;
}

a.keystone-card:hover {
    border-color: var(--border-accent);
    background: var(--surface-2);
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .keystone-card { transition: none; }
    a.keystone-card:hover { transform: none; }
}

/* The question the model answers — the way in, so it leads. */
.keystone-q {
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    letter-spacing: var(--tracking-mono);
    color: var(--text-tertiary);
    text-transform: uppercase;
}

.keystone-name {
    font-size: var(--text-h4);
    font-weight: var(--fw-medium);
    line-height: 1.3;
    color: var(--text-primary);
    margin: 0;
}

/* The model's own line. It is the whole pitch, so it gets the room. */
.keystone-line {
    font-size: var(--text-body-sm);
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}

.keystone-line em {
    font-style: normal;
    color: var(--text-primary);
}

.keystone-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    letter-spacing: var(--tracking-mono);
}

a.keystone-card .keystone-foot { color: var(--text-accent); }
div.keystone-card .keystone-foot { color: var(--text-tertiary); }

.keystone-status {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xs);
    padding: 1px 6px;
    color: var(--text-tertiary);
}

/* Compact variant for the Resources Library header, where the band sits above
   a dense directory and must not out-shout it. */
.keystone-compact .keystone-card { padding: var(--space-4); gap: var(--space-1); }
.keystone-compact .keystone-name { font-size: var(--text-body); }
.keystone-compact .keystone-line { display: none; }

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

/* ---------- the homepage band ----------
   Every homepage section owns its own padding (see .services, .research-strip
   in css/style.css); there is no generic section rule, so a new band with no
   rule of its own renders flush against its neighbours. Mirrors .research-strip
   so the two read as siblings when they sit two sections apart. */
.keystone-band {
    padding: 96px 24px;
    border-block: 1px solid var(--border-subtle);
}

.keystone-band .container { max-width: 1100px; margin: 0 auto; }

.keystone-band .section-head { margin-bottom: var(--space-7); }