/* Family styles for land-systems — populated by its presentation template contract. */

/* ============================================================
   LAND SYSTEMS — dossier hero refinements (identity × media)
   Consumes --ms-* tokens only; logical properties only.
   ============================================================ */

/* Kicker breathing room inside the identity column */
.msi-ls-hero .msi-ehero-kicker { margin-block-end: var(--ms-space-2); }

.msi-ls-hero__inner {
        position: relative;
        z-index: 2;
        padding-block: var(--ms-space-9);
}

/* Single-column degradation when the platform has no media */
.msi-ls-hero--no-media .msi-ls-hero__grid { grid-template-columns: 1fr; }

.msi-ls-hero__identity {
        display: grid;
        gap: var(--ms-space-4);
        justify-items: start;
        align-content: center;
}

.msi-ls-hero__title small {
        font-family: var(--ms-font-mono);
        font-size: var(--ms-fs-h4);
        font-weight: 500;
        color: var(--ms-color-text-tertiary);
}

.msi-ls-hero__excerpt {
        color: var(--ms-color-text-secondary);
        font-size: calc(var(--ms-fs-body) * 1.1);
        max-inline-size: 62ch;
}

/* Identity strip — hairline-separated cells (aviation lineage, amber-keyed) */
.msi-ls-hero__strip {
        display: flex;
        flex-wrap: wrap;
        gap: 1px;
        inline-size: 100%;
        max-inline-size: 680px;
        background: var(--ms-color-border);
        border: 1px solid var(--ms-color-border);
        border-radius: var(--ms-radius-lg);
        overflow: hidden;
        backdrop-filter: blur(8px);
}
.msi-ls-hero__stripcell {
        flex: 1 1 130px;
        display: grid;
        gap: 3px;
        padding: var(--ms-space-3) var(--ms-space-4);
        background: color-mix(in srgb, var(--ms-color-surface) 82%, transparent);
        transition: background-color var(--ms-dur-fast) var(--ms-ease-out);
}
.msi-ls-hero__stripcell span {
        font-size: var(--ms-fs-micro);
        color: var(--ms-color-text-tertiary);
}
.msi-ls-hero__stripcell strong {
        font-size: var(--ms-fs-small);
        color: var(--ms-color-text);
        font-weight: 600;
}
a.msi-ls-hero__stripcell strong { color: var(--ms-family-accent, var(--ms-color-amber)); }
a.msi-ls-hero__stripcell:hover { background: var(--ms-color-surface-hi); }

/* Media — amber ground-glow keyed to the family accent */
.msi-ls-hero__media::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(to top, color-mix(in srgb, var(--ms-family-accent, var(--ms-color-amber)) 14%, transparent), transparent 45%);
}

/* ============================================================
   TRIAD — column accents + narrow-column data rhythm
   ============================================================ */
.msi-ls-triad__col {
        transition: background-color var(--ms-dur-fast) var(--ms-ease-out);
}
.msi-ls-triad__col:hover { background: var(--ms-color-surface-hi); }

.msi-ls-triad__head {
        inline-size: 100%;
        margin: 0;
        padding-block-end: var(--ms-space-2);
        border-block-end: 1px solid color-mix(in srgb, var(--ms-family-accent, var(--ms-color-amber)) 32%, transparent);
}

/* Narrow columns: stack label over value instead of dt/dd columns */
.msi-ls-triad .msi-eq-dl {
        border-block-start: 1px solid var(--ms-color-hairline);
}
.msi-ls-triad .msi-eq-dl__row {
        grid-template-columns: 1fr;
        gap: 2px;
        padding: 9px 0;
}
.msi-ls-triad .msi-eq-dl dt { font-size: var(--ms-fs-micro); }
.msi-ls-triad .msi-eq-dl dd { font-size: var(--ms-fs-small); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
        .msi-ls-hero__inner { padding-block: var(--ms-space-7); }
        .msi-ls-hero__title { font-size: var(--ms-fs-h1); }
        .msi-ls-hero__identity { align-content: start; }
}

@media (max-width: 640px) {
        .msi-ls-hero__inner { padding-block: var(--ms-space-6); }
        .msi-ls-hero__strip { flex-direction: column; }
        .msi-ls-hero__stripcell { flex-basis: auto; }
        .msi-ls-hero__media { aspect-ratio: 16 / 10; }
        .msi-ls-triad__col { padding: var(--ms-space-4); }
}