/* ============================================================================
   DETALLE DE MISIÓN — rediseño v4
   ----------------------------------------------------------------------------
   Antes esta pagina reutilizaba index.css + operations.css: dos hojas pensadas
   para el indice y para la parrilla de operaciones, de las que aqui solo se
   usaban un puñado de reglas (y varias chocaban entre si). Ahora la pagina tiene
   su propia hoja, autocontenida, con el prefijo .msn-.

   El hero es SOLO imagen: titulo, mapa y cuenta atras viven en la cabecera de
   mando que monta encima de el, donde se leen siempre (antes el texto competia
   con la foto y se perdia segun que imagen se subiera).
   ============================================================================ */

body.msn-page {
    background: #0f172e;
    color: #cbd5e1;
    font-family: 'Oswald', sans-serif;
}

.msn {
    padding-bottom: 90px;
}

/* --------------------------------------------------------------- HERO ---- */
.msn-hero {
    position: relative;
    height: clamp(300px, 44vh, 500px);
    overflow: hidden;
    isolation: isolate;
    background: #111c33;
}

.msn-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
    display: block;
}

/* Doble degradado: oscurece arriba para que la cabecera fija del sitio se lea
   sobre cualquier foto, y funde el borde inferior con el fondo de la pagina. */
.msn-hero-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom,
            rgba(15, 23, 46, 0.82) 0%,
            rgba(15, 23, 46, 0.20) 26%,
            rgba(15, 23, 46, 0.55) 62%,
            rgba(15, 23, 46, 0.95) 88%,
            #0f172e 100%),
        radial-gradient(ellipse 80% 60% at 50% 115%, rgba(96, 165, 250, 0.20), transparent 70%);
}

.msn-hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.8) 45%, transparent 95%);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.8) 45%, transparent 95%);
    pointer-events: none;
}

/* La cabecera ya NO monta sobre el hero: cae entera por debajo. El degradado
   del hero funde con el fondo de la pagina, asi que se sigue viendo como un
   bloque continuo sin tapar la imagen. */
.msn-shell {
    position: relative;
    z-index: 3;
    margin-top: 24px;
}

/* ---------------------------------------------------- CABECERA DE MANDO ---- */
/* Flex y no grid a proposito: el logo de campaña y la columna de la derecha
   (contador / boton) pueden faltar por separado, y con columnas fijas una
   cabecera sin logo dejaba el hueco de la columna vacia y encogia el titulo. */
.msn-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 28px;
    padding: 26px 30px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background: linear-gradient(150deg, rgba(30, 41, 59, 0.93), rgba(15, 23, 46, 0.96));
    box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.msn-head-logo {
    flex: none;
    width: 82px;
    height: 82px;
    object-fit: contain;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.6));
}

.msn-head-main {
    flex: 1 1 320px;
    min-width: 0;
}

.msn-eyebrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 0.72rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: #8296b8;
}

.msn-eyebrow-campaign {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Vuelta a Operaciones. Era un enlace de texto del mismo color que la migaja y
   pasaba desapercibido; ahora es una pastilla con borde, discreta hasta que se
   pasa por encima. */
.msn-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 15px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.05);
    color: #cbd5e1;
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    white-space: nowrap;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.msn-back i {
    font-size: 0.85em;
    transition: transform 0.18s ease;
}
.msn-back:hover {
    border-color: rgba(96, 165, 250, 0.55);
    background: rgba(96, 165, 250, 0.14);
    color: #fff;
}
.msn-back:hover i { transform: translateX(-3px); }

.msn-title {
    font-family: 'Horizon', sans-serif;
    font-size: clamp(1.55rem, 3.2vw, 2.5rem);
    line-height: 1.1;
    letter-spacing: 1px;
    color: #fff;
    margin: 12px 0 0;
    text-shadow: 0 4px 22px rgba(0, 0, 0, 0.6);
}

/* --- Columna derecha: cuenta atras + accion --- */
.msn-head-aside {
    flex: 0 0 278px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.msn-countdown {
    padding: 13px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.3);
}

.msn-cd-label {
    display: block;
    text-align: center;
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #8296b8;
    margin-bottom: 9px;
}

.msn-cd-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
}

.msn-cd-cell {
    text-align: center;
    padding: 9px 2px 7px;
    border-radius: 10px;
    background: rgba(96, 165, 250, 0.08);
    border: 1px solid rgba(96, 165, 250, 0.18);
}

.msn-cd-num {
    display: block;
    font-family: 'Horizon', sans-serif;
    font-size: 1.3rem;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.msn-cd-unit {
    display: block;
    margin-top: 5px;
    font-size: 0.58rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #8296b8;
}

/* Cuando el JS llega a cero cambia el bloque por el aviso, en vez de dejar
   cuatro ceros parpadeando. */
.msn-cd-done {
    display: none;
    text-align: center;
    padding: 10px 0 4px;
    font-family: 'Horizon', sans-serif;
    font-size: 1.05rem;
    letter-spacing: 1px;
    color: #34d399;
}
.msn-countdown.is-reached .msn-cd-grid { display: none; }
.msn-countdown.is-reached .msn-cd-done { display: block; }

.msn-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 52px;
    border-radius: 12px;
    font-size: 0.92rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.msn-cta.is-discord {
    background: linear-gradient(135deg, #5865F2 0%, #4752C4 100%);
    color: #fff;
    box-shadow: 0 14px 28px -14px rgba(88, 101, 242, 0.95);
}
.msn-cta.is-discord:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -14px rgba(88, 101, 242, 1); }
.msn-cta.is-muted {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #94a3b8;
}
.msn-cta.is-muted:hover { background: rgba(255, 255, 255, 0.09); color: #cbd5e1; }

/* ------------------------------------------------------------- DATOS ---- */
.msn-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
    gap: 14px;
    margin-top: 18px;
    list-style: none;
}

.msn-fact {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(30, 41, 59, 0.55);
}

.msn-fact-ico {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.1);
    border: 1px solid rgba(96, 165, 250, 0.18);
}
.msn-fact-ico img { width: 24px; height: 24px; object-fit: contain; }

.msn-fact-txt { min-width: 0; }

.msn-fact-label {
    display: block;
    font-size: 0.64rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #8296b8;
}

.msn-fact-value {
    display: block;
    margin-top: 3px;
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.msn-fact-value small { color: #7c8db0; font-weight: 400; font-size: 0.78em; }

/* Tono del estado de la mision. */
.msn-fact.is-live      .msn-fact-ico { color: #34d399; background: rgba(16, 185, 129, 0.12); border-color: rgba(16, 185, 129, 0.35); }
.msn-fact.is-live      .msn-fact-value { color: #6ee7b7; }
.msn-fact.is-cancelled .msn-fact-ico { color: #f87171; background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.35); }
.msn-fact.is-cancelled .msn-fact-value { color: #fca5a5; }
.msn-fact.is-draft     .msn-fact-ico { color: #fbbf24; background: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.32); }
.msn-fact.is-draft     .msn-fact-value { color: #fcd34d; }
.msn-fact.is-done      .msn-fact-ico { color: #94a3b8; background: rgba(148, 163, 184, 0.1); border-color: rgba(148, 163, 184, 0.28); }

/* --------------------------------------------------- CUERPO / PANELES ---- */
/* Briefing y recursos van APILADOS, no en dos columnas. Con el resumen a la
   izquierda y skins/documentacion a la derecha, un resumen corto dejaba media
   pantalla en blanco debajo, porque la columna la estiraba el panel lateral. */
.msn-body {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-top: 30px;
}

.msn-resources {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 22px;
    align-items: start;
}

.msn-card {
    padding: 22px 24px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(30, 41, 59, 0.55);
}

.msn-card-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.msn-card-head i { color: #60a5fa; }
.msn-card-head h2 {
    font-family: 'Horizon', sans-serif;
    font-size: 0.98rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
}
.msn-card-count {
    margin-left: auto;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    font-size: 0.72rem;
    color: #8296b8;
}

.msn-section { margin-top: 42px; }

.msn-section-head {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
}
.msn-section-head h2 {
    font-family: 'Horizon', sans-serif;
    font-size: 1.45rem;
    letter-spacing: 1.5px;
    color: #fff;
    white-space: nowrap;
}
.msn-rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(96, 165, 250, 0.45), rgba(255, 255, 255, 0.05));
}

.msn-tally {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.msn-tally span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 0.74rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
    white-space: nowrap;
}
.msn-tally .is-ok    { color: #6ee7b7; border-color: rgba(16, 185, 129, 0.3); background: rgba(16, 185, 129, 0.08); }
.msn-tally .is-maybe { color: #fdba74; border-color: rgba(249, 115, 22, 0.3); background: rgba(249, 115, 22, 0.08); }

.msn-empty {
    padding: 26px 20px;
    text-align: center;
    color: #64748b;
    font-size: 0.9rem;
}

/* ------------------------------------------------------------- TEXTO ---- */
.msn-prose {
    color: #cbd5e1;
    line-height: 1.75;
    font-size: 0.97rem;
}
.msn-prose p { margin-bottom: 13px; }
.msn-prose p:last-child { margin-bottom: 0; }
.msn-prose h1,
.msn-prose h2,
.msn-prose h3,
.msn-prose h4 {
    color: #fff;
    font-family: 'Oswald', sans-serif;
    margin: 24px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.msn-prose h3 { color: #60a5fa; font-size: 1.12em; letter-spacing: 0.5px; text-transform: uppercase; }
.msn-prose ul,
.msn-prose ol { margin: 0 0 14px 20px; }
.msn-prose li { margin-bottom: 6px; }
.msn-prose strong { color: #f1f5f9; }
.msn-prose a { color: #60a5fa; text-decoration: underline; }
.msn-prose img { max-width: 100%; border-radius: 10px; margin: 14px 0; border: 1px solid rgba(255, 255, 255, 0.08); }
.msn-prose table { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.msn-prose th,
.msn-prose td { border: 1px solid rgba(255, 255, 255, 0.1); padding: 7px 10px; text-align: left; }
.msn-prose th { background: rgba(255, 255, 255, 0.04); color: #fff; }

/* ------------------------------------------------- SKINS Y DOCUMENTOS ---- */
.msn-list { display: flex; flex-direction: column; gap: 9px; }

.msn-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(15, 23, 46, 0.55);
    transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
a.msn-item[href]:hover {
    border-color: rgba(96, 165, 250, 0.4);
    background: rgba(15, 23, 46, 0.8);
    transform: translateX(3px);
}
a.msn-item:not([href]) { cursor: default; }

.msn-item-ico {
    flex: none;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.04);
    color: #60a5fa;
}
.msn-item-ico img { width: 30px; height: 30px; object-fit: contain; }

/* En las skins el icono grande es el PARCHE del escuadron, que no es cuadrado:
   se muestra entero y sin recuadro para que no parezca recortado. */
.msn-item-ico.is-patch {
    background: none;
    width: 42px;
    height: 42px;
}
.msn-item-ico.is-patch img {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
}

.msn-item-txt { min-width: 0; flex: 1; }
.msn-item-name {
    display: block;
    font-size: 0.9rem;
    color: #e2e8f0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.msn-item-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #60a5fa;
}
.msn-item-sub img { width: 17px; height: 17px; object-fit: contain; flex: none; }
.msn-item-sub span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.msn-item-go { flex: none; color: #34d399; font-size: 0.9rem; }
a.msn-item[target="_blank"] .msn-item-go { color: #34d399; }

.msn-locked {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.28);
    color: #fca5a5;
    font-size: 0.87rem;
    line-height: 1.6;
}
.msn-locked a { color: #fff; text-decoration: underline; }

/* --------------------------------------------------------- ATO / ROSTER ---- */
.msn-sq {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(30, 41, 59, 0.5);
    margin-bottom: 18px;
}

.msn-sq-head {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 20px;
    background: linear-gradient(90deg, rgba(96, 165, 250, 0.1), transparent 65%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
/* Los parches no son cuadrados (Noctis es 2:3, Badgers 960x1019...): con
   object-fit:cover dentro de un circulo se les recortaba media insignia.
   Se muestran enteros, sin recorte ni marco redondo. */
.msn-sq-head > img {
    flex: none;
    width: 44px;
    height: 44px;
    object-fit: contain;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
}
.msn-sq-ico {
    width: 44px;
    height: 44px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: #94a3b8;
}
.msn-sq-name {
    font-family: 'Horizon', sans-serif;
    font-size: 1rem;
    letter-spacing: 1px;
    color: #fff;
}
.msn-sq-fill {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.76rem;
    color: #8296b8;
}
.msn-bar {
    width: 72px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}
.msn-bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #3b82f6, #34d399);
}

.msn-flights {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 14px;
    padding: 18px 20px;
}

.msn-flight {
    padding: 14px 15px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(15, 23, 46, 0.6);
}

.msn-flight-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-bottom: 10px;
    margin-bottom: 11px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.msn-flight-name {
    font-family: 'Horizon', sans-serif;
    font-size: 0.92rem;
    letter-spacing: 1px;
    color: #93c5fd;
}
.msn-task {
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: rgba(96, 165, 250, 0.14);
    border: 1px solid rgba(96, 165, 250, 0.3);
    color: #bfdbfe;
}
.msn-flight-ac {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    color: #cbd5e1;
}
.msn-flight-ac img { width: 20px; height: 20px; object-fit: contain; }
.msn-flight-ac.is-empty { color: #64748b; }

.msn-slots { display: flex; flex-direction: column; gap: 7px; }

.msn-slot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.025);
    border-left: 3px solid rgba(255, 255, 255, 0.09);
    transition: background 0.18s ease;
}
.msn-slot.is-filled { border-left-color: #10b981; background: rgba(16, 185, 129, 0.07); }
.msn-slot.is-maybe  { border-left-color: #f97316; background: rgba(249, 115, 22, 0.08); }
a.msn-slot:hover { background: rgba(255, 255, 255, 0.08); }

.msn-slot-pos {
    font-size: 0.71rem;
    letter-spacing: 0.08em;
    color: #8296b8;
    white-space: nowrap;
}
.msn-slot-pilot {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 0.85rem;
    color: #fff;
}
.msn-slot-pilot img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.18);
}
.msn-slot-pilot span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.msn-slot-free {
    margin-left: auto;
    font-size: 0.76rem;
    color: #4ade80;
}
.msn-slot-dot {
    flex: none;
    font-size: 0.55rem;
    color: #fb923c;
}

/* --- Tarjetas de piloto (por asignar / sin estructura) --- */
.msn-pilots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 13px;
    padding: 18px 20px;
}

.msn-pilot {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 7px;
    padding: 16px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(15, 23, 46, 0.65);
    transition: transform 0.18s ease, border-color 0.18s ease;
}
.msn-pilot:hover { transform: translateY(-3px); border-color: rgba(96, 165, 250, 0.4); }
.msn-pilot.is-maybe { border-color: rgba(249, 115, 22, 0.42); }

.msn-pilot-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.12);
}
.msn-pilot-name {
    font-family: 'Horizon', sans-serif;
    font-size: 0.86rem;
    letter-spacing: 0.5px;
    color: #fff;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.msn-pilot-ac {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    color: #93c5fd;
    max-width: 100%;
}
.msn-pilot-ac img { width: 18px; height: 18px; object-fit: contain; flex: none; }
.msn-pilot-ac span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.msn-maybe-tag {
    margin-top: 2px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: rgba(249, 115, 22, 0.14);
    border: 1px solid rgba(249, 115, 22, 0.4);
    color: #fdba74;
}

/* ------------------------------------------------------------ RESPONSIVE ---- */
@media (max-width: 860px) {
    .msn-shell { margin-top: -40px; }
    .msn-head {
        gap: 18px;
        padding: 20px;
    }
    .msn-head-logo { width: 58px; height: 58px; }
    .msn-head-aside { flex: 1 1 100%; }
    .msn-section-head { flex-wrap: wrap; }
    .msn-section-head h2 { font-size: 1.2rem; }
}

@media (max-width: 560px) {
    .msn-hero { height: 240px; }
    .msn-shell { margin-top: -30px; }
    .msn-facts { grid-template-columns: 1fr 1fr; }
    .msn-fact { padding: 11px 12px; gap: 10px; }
    .msn-fact-ico { width: 36px; height: 36px; }
    .msn-card { padding: 18px 16px; }
    .msn-flights,
    .msn-pilots { padding: 14px; }
    .msn-pilots { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}