/* The hierarchy is one band, not three cards: it is a single sentence about
   who owns what, divided rather than boxed. */
.model-hierarchy {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    margin: 1.6rem 0 2rem;
    border-radius: var(--radius-sm);
    background: var(--surface-day);
    box-shadow: var(--membrane-day);
    overflow: hidden;
}

.model-hierarchy p {
    margin: 0;
    padding: 1.15rem 1.3rem 1.25rem;
    border-left: 1px solid var(--day-rule-soft);
}

.model-hierarchy p:first-child {
    border-left: 0;
}

/* The label sits on the same line as the statement here — the band is wide and
   a stacked rubric would leave it floating. */
.model-hierarchy p > span {
    /* Above the statement, not inline with it. Inline, each cell's sentence
       wrapped at a different word and the three labels sat at three
       different heights in the row. */
    display: block;
    margin-bottom: 0.35rem;
}

.model-hierarchy strong {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--day-ink);
}

@media (max-width: 860px) {
    .model-hierarchy {
        grid-template-columns: minmax(0, 1fr);
    }

    .model-hierarchy p {
        border-left: 0;
        border-top: 1px solid var(--day-rule-soft);
    }

    .model-hierarchy p:first-child {
        border-top: 0;
    }
}