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

/* ============================================================
   MISSILE SYSTEMS — centered-start hero + precision cascade
   Consumes --ms-* tokens only; logical properties only.
   ============================================================ */

.msi-ms-hero__inner {
        position: relative;
        z-index: 2;
        padding-block: var(--ms-space-9);
        display: grid;
        gap: var(--ms-space-4);
        justify-items: start;
}

.msi-ms-hero__title {
        font-family: var(--ms-font-display);
        font-size: var(--ms-fs-hero);
        font-weight: 700;
        line-height: 1.06;
        margin-block: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: var(--ms-space-3);
}
.msi-ms-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-ms-hero__excerpt {
        color: var(--ms-color-text-secondary);
        font-size: calc(var(--ms-fs-body) * 1.1);
        max-inline-size: 62ch;
}

/* Range callout — the family's signature datum, big mono crimson */
.msi-ms-hero__range {
        display: grid;
        gap: var(--ms-space-1);
        margin-block-start: var(--ms-space-2);
        padding: var(--ms-space-4) var(--ms-space-6);
        background:
                linear-gradient(135deg, color-mix(in srgb, var(--ms-color-crimson) 10%, transparent), transparent 60%),
                color-mix(in srgb, var(--ms-color-surface) 88%, transparent);
        border: 1px solid color-mix(in srgb, var(--ms-color-crimson) 34%, transparent);
        border-inline-start: 3px solid var(--ms-color-crimson);
        border-radius: var(--ms-radius-lg);
}
.msi-ms-hero__range-label {
        font-family: var(--ms-font-mono);
        font-size: var(--ms-fs-micro);
        text-transform: uppercase;
        color: var(--ms-color-text-tertiary);
}
.msi-ms-hero__range .msi-ms-cascade__value {
        font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem);
        font-weight: 700;
        color: var(--ms-color-crimson);
}
.msi-ms-hero__range .msi-ms-cascade__value .msi-unit {
        font-size: var(--ms-fs-h4);
        color: var(--ms-color-text-tertiary);
}

/* ============================================================
   CASCADE — step rhythm + hover states keyed to family accent
   ============================================================ */
.msi-ms-cascade__step {
        transition:
                border-color var(--ms-dur-base) var(--ms-ease-out),
                background-color var(--ms-dur-base) var(--ms-ease-out),
                transform var(--ms-dur-base) var(--ms-ease-out);
}
.msi-ms-cascade__step:hover {
        border-color: var(--ms-family-accent, var(--ms-color-crimson));
        background: var(--ms-color-surface-raised);
        transform: translateY(-2px);
}

.msi-ms-cascade__step .msi-ms-cascade__label { margin-block-end: var(--ms-space-1); }

.msi-ms-cascade__value { line-height: 1.35; }
.msi-ms-cascade__value.is-empty {
        color: var(--ms-color-text-quaternary);
        font-weight: 400;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
        .msi-ms-hero__inner { padding-block: var(--ms-space-7); }
        .msi-ms-hero__title { font-size: var(--ms-fs-display); }
        .msi-ms-hero__range .msi-ms-cascade__value { font-size: var(--ms-fs-h1); }
}

@media (max-width: 640px) {
        .msi-ms-hero__inner { padding-block: var(--ms-space-6); }
        .msi-ms-hero__range { padding: var(--ms-space-3) var(--ms-space-4); }
        .msi-ms-cascade__step { padding: var(--ms-space-4); }
}