/* ==========================================================
   BRITISH MIDLAND VIRTUAL
   NETWORK PAGE
   Network CSS v9
========================================================== */


/* ==========================================================
   NETWORK HERO
========================================================== */

.network-hero {

    position: relative;

    /*
     * The site header sits over the hero.
     * Extra top padding keeps the hero content
     * comfortably below the navigation.
     */

    padding: 175px 0 105px;

    background:
        linear-gradient(
            180deg,
            var(--bm-blue),
            #06264d
        );

    color: #ffffff;

    text-align: center;

}


.network-hero .container {

    max-width: 900px;

}


/* ==========================================================
   HERO KICKER
========================================================== */

.network-hero .hero-kicker {

    display: block;

    margin: 0 0 22px;

    color: var(--bm-red);

    font-size: .72rem;

    font-weight: 800;

    letter-spacing: .18em;

    line-height: 1.4;

    text-transform: uppercase;

}


/* ==========================================================
   HERO TITLE
========================================================== */

.network-hero h1 {

    max-width: 850px;

    margin: 0 auto;

    color: #ffffff;

    font-size: clamp(
        3rem,
        5vw,
        4.6rem
    );

    font-weight: 800;

    line-height: 1.04;

    letter-spacing: -.045em;

}


/* ==========================================================
   HERO DIVIDER
========================================================== */

.network-hero .hero-divider {

    width: 68px;

    height: 3px;

    margin: 34px auto 30px;

    background: var(--bm-red);

    border-radius: 999px;

}


/* ==========================================================
   HERO COPY
========================================================== */

.network-hero .hero-copy {

    max-width: 760px;

    margin: 0 auto;

    color: rgba(255,255,255,.88);

    font-size: .98rem;

    line-height: 1.9;

}


/* ==========================================================
   NETWORK SECTION HEADING
========================================================== */

.network-section-heading {

    max-width: 760px;

    margin: 0 auto 50px;

    text-align: center;

}


.network-section-heading h2 {

    margin: 0 0 16px;

}


.network-section-heading p {

    margin: 0 auto;

    color: #697384;

}


/* ==========================================================
   MAP SECTION
========================================================== */

.network-map-section {

    padding: 110px 0 120px;

    background: var(--bm-cream);

}


#network-map {

    width: 100%;

    height: 560px;

    overflow: hidden;

    border: 8px solid #ffffff;

    border-radius: 22px;

    box-shadow:
        0 20px 50px rgba(0,0,0,.10),
        0 35px 80px rgba(0,0,0,.08);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}


#network-map:hover {

    transform: translateY(-4px);

    box-shadow:
        0 30px 70px rgba(0,0,0,.14),
        0 45px 90px rgba(0,0,0,.10);

}


.leaflet-container {

    background: #dfe9f4;

    font-family: "Inter", sans-serif;

}


/* ==========================================================
   NETWORK CLASS SECTIONS
========================================================== */

.network-class-section {

    position: relative;

    padding: 120px 0;

}


.beating-heart-section {

    background: #ffffff;

}


.pioneer-section {

    background:
        linear-gradient(
            180deg,
            var(--bm-blue),
            #00132c
        );

    color: #ffffff;

}


.foundry-section {

    background: #f8f3ee;

}


/* ==========================================================
   CLASS HEADER
========================================================== */

.network-class-header {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 60px;

    margin-bottom: 60px;

}


.network-class-header > div:first-child {

    max-width: 780px;

}


.network-class-header h2 {

    margin-bottom: 20px;

}


.network-class-header p {

    max-width: 720px;

    margin: 0;

    color: #697384;

    line-height: 1.9;

}


.pioneer-section .network-class-header p {

    color: rgba(255,255,255,.72);

}


/* ==========================================================
   CLASS STAT
========================================================== */

.network-class-stat {

    flex-shrink: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-width: 150px;

    min-height: 150px;

    padding: 25px;

    border-radius: 22px;

    background: var(--bm-cream);

    border: 1px solid rgba(0,26,58,.06);

}


.network-class-stat strong {

    display: block;

    color: var(--bm-blue);

    font-size: 2.7rem;

    line-height: 1;

    font-weight: 800;

}


.network-class-stat span {

    margin-top: 12px;

    color: #7b8492;

    font-size: .7rem;

    font-weight: 700;

    letter-spacing: .16em;

    text-align: center;

}


.pioneer-section .network-class-stat {

    background: rgba(255,255,255,.08);

    border: 1px solid rgba(255,255,255,.12);

}


.pioneer-section .network-class-stat strong {

    color: #ffffff;

}


.pioneer-section .network-class-stat span {

    color: rgba(255,255,255,.58);

}


.foundry-stat {

    background: #ffffff;

}


/* ==========================================================
   ROUTE GRID
========================================================== */

.route-grid {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 22px;

    max-width: 1100px;

    margin: 0 auto;

}


/* ==========================================================
   DESTINATION CARD
========================================================== */

.destination-card {

    position: relative;

    display: flex;

    flex-direction: column;

    min-width: 0;

    padding: 34px;

    overflow: hidden;

    background: #ffffff;

    border: 2px solid transparent;

    border-radius: 20px;

    box-shadow:
        0 15px 35px rgba(0,0,0,.06);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;

}


.destination-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 5px;

    background: var(--bm-red);

    transform: scaleX(0);

    transform-origin: left;

    transition:
        transform .3s ease;

}


.destination-card:hover {

    transform: translateY(-7px);

    box-shadow:
        0 25px 55px rgba(0,0,0,.12);

}


.destination-card:hover::before,
.destination-card.selected::before {

    transform: scaleX(1);

}


.destination-card.selected {

    border-color: var(--bm-red);

}


/* ==========================================================
   FLIGHT NUMBER
========================================================== */

.route-card-flight {

    margin-bottom: 12px;

    color: var(--bm-red);

    font-size: .8rem;

    font-weight: 800;

    letter-spacing: .14em;

}


/* ==========================================================
   DESTINATION STATUS
========================================================== */

.destination-status {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    align-self: flex-start;

    margin-bottom: 20px;

    padding: 7px 14px;

    border-radius: 999px;

    font-size: .65rem;

    font-weight: 800;

    letter-spacing: .14em;

    text-transform: uppercase;

}


.destination-status.active {

    background: #e8f8ee;

    color: #1d7c3d;

}


/* ==========================================================
   DESTINATION TITLE
========================================================== */

.destination-card h3 {

    margin: 0 0 6px;

    color: var(--bm-blue);

    font-size: 1.35rem;

    line-height: 1.15;

}


.airport {

    margin: 0 0 16px;

    color: #8993a2;

    font-size: .78rem;

    font-weight: 700;

    letter-spacing: .08em;

}


/* ==========================================================
   DESTINATION DESCRIPTION
========================================================== */

.destination-description {

    flex: 1;

    margin: 0 0 30px;

    color: #626d7d;

    font-size: .9rem;

    line-height: 1.8;

}


/* ==========================================================
   DESTINATION INFORMATION
========================================================== */

.destination-info {

    display: grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap: 14px;

}


.destination-info > div {

    min-width: 0;

    padding: 17px;

    background: var(--bm-cream);

    border-radius: 15px;

}


.destination-info span {

    display: block;

    margin-bottom: 7px;

    color: #8b95a4;

    font-size: .65rem;

    font-weight: 800;

    letter-spacing: .13em;

    text-transform: uppercase;

}


.destination-info strong {

    display: block;

    color: var(--bm-blue);

    font-size: .95rem;

}


/* ==========================================================
   AIRCRAFT BADGES
========================================================== */

.badge-a319,
.badge-a320,
.badge-a321,
.badge-a350 {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 6px 11px;

    border-radius: 999px;

    font-size: .75rem;

    font-weight: 800;

    line-height: 1;

}


.destination-info strong .badge-a319 {

    background: #2e6fa3;

    color: #ffffff;

}


.destination-info strong .badge-a320 {

    background: var(--bm-red);

    color: #ffffff;

}


.destination-info strong .badge-a321 {

    background: #c9a227;

    color: var(--bm-blue);

}


.destination-info strong .badge-a350 {

    background: #8a8f98;

    color: #ffffff;

}


/* ==========================================================
   ROUTE NOTE
========================================================== */

.route-note {

    display: block;

    margin-top: 18px;

    color: #8b95a4;

    font-size: .65rem;

    font-weight: 800;

    letter-spacing: .1em;

}


/* ==========================================================
   PIONEER CLASS
========================================================== */

.pioneer-section .section-kicker {

    color: var(--bm-red);

}


.pioneer-section h2 {

    color: #ffffff;

}


.pioneer-grid {

    grid-template-columns:
        repeat(3,minmax(0,1fr));

}


.pioneer-card {

    background: #ffffff;

}


/* ==========================================================
   FOUNDRY CLASS
========================================================== */

.foundry-section {

    padding: 110px 0;

    background: var(--bm-cream);

    border-top: 1px solid rgba(0,0,0,.05);

}


.foundry-coming-grid {

    display: grid !important;

    grid-template-columns:
        repeat(2,minmax(0,1fr)) !important;

    gap: 22px !important;

    max-width: 900px !important;

    margin: 0 auto !important;

}


.foundry-placeholder {

    min-height: 220px !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;

    padding: 35px !important;

    text-align: center !important;

    background: #ffffff !important;

    border: 1px dashed rgba(0,26,58,.20) !important;

    border-radius: 18px !important;

    box-shadow:
        0 8px 25px rgba(0,0,0,.04) !important;

}


.foundry-placeholder-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 54px;

    height: 54px;

    margin-bottom: 18px;

    border-radius: 50%;

    background: var(--bm-blue);

    color: #ffffff;

    font-size: 1.15rem;

}


.foundry-placeholder .section-kicker {

    margin-bottom: 9px;

}


.foundry-placeholder h3 {

    margin-bottom: 10px;

    color: var(--bm-blue);

    font-size: 1.3rem;

}


.foundry-placeholder p {

    max-width: 400px;

    margin: 0;

    color: #697384;

    font-size: .9rem;

    line-height: 1.7;

}


/* ==========================================================
   MAP CONTROLS
========================================================== */

.leaflet-control-zoom {

    border: none !important;

    box-shadow: none !important;

}


.leaflet-control-zoom a {

    width: 44px !important;

    height: 44px !important;

    line-height: 44px !important;

    margin-bottom: 5px;

    border: none !important;

    border-radius: 12px !important;

    background: #ffffff !important;

    color: var(--bm-blue) !important;

    font-weight: 800;

    box-shadow:
        0 10px 22px rgba(0,0,0,.12);

}


.leaflet-control-zoom a:hover {

    background: var(--bm-red) !important;

    color: #ffffff !important;

}


/* ==========================================================
   HUB LABEL
========================================================== */

.hub-label {

    padding: 9px 13px;

    background: var(--bm-blue);

    color: #ffffff;

    border: none;

    border-radius: 12px;

    font-weight: 800;

    letter-spacing: .04em;

    box-shadow:
        0 10px 24px rgba(0,0,0,.18);

}


.hub-label::before {

    display: none;

}


/* ==========================================================
   LEAFLET POPUPS
========================================================== */

.leaflet-popup-content-wrapper {

    border-radius: 16px;

}


.leaflet-popup-content {

    margin: 17px;

    line-height: 1.6;

}


.leaflet-popup-tip {

    background: #ffffff;

}


/* ==========================================================
   MAP MARKERS
========================================================== */

.leaflet-marker-icon {

    transition:
        transform .2s ease;

}


.leaflet-marker-icon:hover {

    transform: scale(1.08);

}


.leaflet-interactive {

    transition:
        stroke .2s ease,
        fill .2s ease;

}


/* ==========================================================
   RESPONSIVE — 1200PX
========================================================== */

@media (max-width:1200px) {

    .route-grid {

        grid-template-columns:
            repeat(2,minmax(0,1fr));

    }


    #network-map {

        height: 540px;

    }

}


/* ==========================================================
   RESPONSIVE — 992PX
========================================================== */

@media (max-width:992px) {

    .network-hero {

        padding:
            155px 0 90px;

    }


    .network-class-header {

        align-items: flex-start;

        flex-direction: column;

        gap: 35px;

    }


    .network-class-stat {

        min-width: 130px;

        min-height: 130px;

    }


    .route-grid {

        grid-template-columns:
            repeat(2,minmax(0,1fr));

    }

}


/* ==========================================================
   RESPONSIVE — 768PX
========================================================== */

@media (max-width:768px) {

    .network-hero {

        padding:
            135px 0 75px;

    }


    .network-hero h1 {

        font-size: 3rem;

    }


    .network-hero .hero-copy {

        font-size: .94rem;

    }


    .network-map-section {

        padding: 80px 0 90px;

    }


    #network-map {

        height: 500px;

        border-width: 5px;

        border-radius: 18px;

    }


    .network-class-section {

        padding: 90px 0;

    }


    .route-grid {

        grid-template-columns: 1fr;

    }


    .destination-card {

        padding: 28px;

    }


    .foundry-coming-grid {

        grid-template-columns: 1fr !important;

    }

}


/* ==========================================================
   RESPONSIVE — 480PX
========================================================== */

@media (max-width:480px) {

    .network-hero {

        padding:
            120px 0 65px;

    }


    .network-hero h1 {

        font-size: 2.4rem;

    }


    .network-section-heading h2 {

        font-size: 2.2rem;

    }


    .network-class-header h2 {

        font-size: 2.2rem;

    }


    #network-map {

        height: 420px;

    }


    .destination-info {

        grid-template-columns: 1fr;

    }


    .foundry-placeholder {

        min-height: 260px;

        padding: 35px 25px;

    }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion:reduce) {

    #network-map,
    .destination-card,
    .leaflet-marker-icon {

        transition: none !important;

        animation: none !important;

    }

}
/* ==========================================================
   NETWORK HERO — HEADER CLEARANCE FIX
========================================================== */

.network-hero {
    padding-top: 230px !important;
    padding-bottom: 120px !important;
}

.network-hero .container {
    position: relative;
    z-index: 2;
}

.network-hero .hero-kicker {
    display: block;
    margin-top: 0 !important;
    margin-bottom: 24px !important;
}

.network-hero h1 {
    margin-top: 0 !important;
}

/* ==========================================================
   END OF NETWORK.CSS
========================================================== */