/* ==========================================================
   BRITISH MIDLAND VIRTUAL
   GROUP PAGE
   Requires: base.css
========================================================== */


/* ==========================================================
   GROUP HERO
========================================================== */

.group-hero {

    position: relative;

    min-height: 620px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: var(--bm-blue);

    color: #ffffff;

}


/* HERO IMAGE */

.group-hero-image {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    z-index: 0;

}


/* HERO OVERLAY */

.group-hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(0, 26, 58, .94) 0%,
            rgba(0, 26, 58, .78) 42%,
            rgba(0, 26, 58, .38) 100%
        );

}


/* HERO CONTENT */

.group-hero-content {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1200px;

    padding-top: 125px;
    padding-bottom: 105px;

}


/* HERO KICKER */

.group-hero .hero-kicker {

    margin: 0 0 20px;

    color: var(--bm-red);

    font-size: .75rem;

    font-weight: 800;

    letter-spacing: .18em;

    line-height: 1.4;

    text-transform: uppercase;

}


/* HERO HEADING */

.group-hero h1 {

    max-width: 760px;

    margin: 0;

    color: #ffffff;

    font-size: clamp(3.4rem, 5.2vw, 5.2rem);

    font-weight: 800;

    line-height: 1.01;

    letter-spacing: -.045em;

}


/* HERO DIVIDER */

.group-hero .hero-divider {

    width: 52px;

    height: 3px;

    margin: 28px 0 25px;

    background: var(--bm-red);

    border-radius: 999px;

}


/* HERO COPY */

.group-hero .hero-copy {

    max-width: 610px;

    margin: 0;

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

    font-size: .98rem;

    font-weight: 400;

    line-height: 1.8;

}


/* ==========================================================
   GROUP INTRO
========================================================== */

.group-intro {

    padding: 110px 0;

    background: #ffffff;

    text-align: center;

}


.group-intro-content {

    max-width: 850px;

    margin: 0 auto;

}


.group-intro h2 {

    margin: 12px 0 25px;

    color: var(--bm-blue);

    font-size: clamp(2rem, 4vw, 3rem);

    line-height: 1.12;

    letter-spacing: -.025em;

}


.group-intro p {

    max-width: 760px;

    margin: 0 auto;

    color: #697384;

    font-size: 1rem;

    line-height: 1.9;

}


/* ==========================================================
   GROUP STRUCTURE
========================================================== */

.group-structure {

    padding: 110px 0 125px;

    background: var(--bm-cream);

}


.group-section-heading {

    max-width: 760px;

    margin: 0 auto 65px;

    text-align: center;

}


.group-section-heading h2 {

    margin: 12px 0;

    color: var(--bm-blue);

    font-size: clamp(2rem, 4vw, 3rem);

    line-height: 1.12;

    letter-spacing: -.025em;

}


.group-section-heading p {

    margin: 0;

    color: #697384;

    line-height: 1.7;

}


/* ==========================================================
   GROUP TREE
========================================================== */

.group-tree {

    max-width: 1180px;

    margin: 0 auto;

}


/* PARENT */

.group-parent {

    display: flex;

    justify-content: center;

}


.group-parent-inner {

    position: relative;

    width: min(520px, 100%);

    padding: 36px 45px;

    background: var(--bm-blue);

    color: #ffffff;

    border-radius: 18px;

    text-align: center;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, .12);

}


.group-parent-kicker {

    display: block;

    margin-bottom: 10px;

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

    font-size: .68rem;

    font-weight: 700;

    letter-spacing: .16em;

    text-transform: uppercase;

}


.group-parent-inner h3 {

    margin: 0 0 10px;

    color: #ffffff;

    font-size: 1.55rem;

    line-height: 1.2;

}


.group-parent-inner p {

    max-width: 440px;

    margin: 0 auto;

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

    font-size: .9rem;

    line-height: 1.65;

}


/* ==========================================================
   STRUCTURE CONNECTOR
========================================================== */

.group-connector {

    position: relative;

    width: 100%;

    height: 70px;

}


.group-connector::before {

    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 2px;
    height: 35px;

    background: rgba(0, 26, 58, .20);

    transform: translateX(-50%);

}


.group-connector::after {

    content: "";

    position: absolute;

    top: 35px;
    left: 16.66%;

    width: 66.68%;
    height: 2px;

    background: rgba(0, 26, 58, .20);

}


/* ==========================================================
   GROUP COMPANIES
========================================================== */

.group-companies {

    display: grid;

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

    gap: 24px;

}


.group-company {

    position: relative;

    display: flex;

    flex-direction: column;

    padding: 34px;

    background: #ffffff;

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

    border-radius: 18px;

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

    overflow: hidden;

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

}


.group-company::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 5px;

    background: var(--bm-red);

}


.group-company:hover {

    transform: translateY(-5px);

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

}


.group-company-top {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 12px;

    margin-bottom: 18px;

}


.group-company-top .section-kicker {

    margin: 0;

}


.group-company-tag {

    color: #8b95a4;

    font-size: .6rem;

    font-weight: 700;

    letter-spacing: .08em;

    line-height: 1.4;

    text-align: right;

}


.group-company h3 {

    margin: 0 0 15px;

    color: var(--bm-blue);

    font-size: 1.45rem;

    line-height: 1.2;

}


.group-company p {

    flex: 1;

    margin: 0 0 28px;

    color: #697384;

    font-size: .9rem;

    line-height: 1.8;

}


/* ==========================================================
   COMPANY BUTTON
========================================================== */

.group-company .feature-button {

    align-self: flex-start;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 12px 19px;

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

    border-radius: 999px;

    background: #ffffff;

    color: var(--bm-blue);

    font-size: .8rem;

    font-weight: 700;

    line-height: 1.2;

    text-decoration: none;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease;

}


.group-company .feature-button:hover {

    background: var(--bm-blue);

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

    color: #ffffff;

    transform: translateY(-2px);

}


/* ==========================================================
   BUSINESS SECTIONS
========================================================== */

.group-business {

    padding: 120px 0;

}


.group-business-mainline {

    background: #ffffff;

}


.group-business-regional {

    background: var(--bm-cream);

}


.group-business-cargo {

    background: #ffffff;

}


.group-business-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(320px, .65fr);

    align-items: center;

    gap: 90px;

}


.group-business-regional .group-business-grid {

    grid-template-columns:
        minmax(320px, .65fr)
        minmax(0, 1.35fr);

}


.group-business-content {

    max-width: 700px;

}


.group-business-content h2 {

    margin: 12px 0 24px;

    color: var(--bm-blue);

    font-size: clamp(2rem, 4vw, 3rem);

    line-height: 1.12;

    letter-spacing: -.025em;

}


.group-business-content p {

    margin: 0 0 20px;

    color: #697384;

    line-height: 1.9;

}


.group-business-links {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 14px;

    margin-top: 32px;

}


/* ==========================================================
   BUSINESS PANEL
========================================================== */

.group-business-panel {

    position: relative;

    min-height: 360px;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    padding: 34px;

    background: var(--bm-blue);

    border-radius: 20px;

    color: #ffffff;

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

    overflow: hidden;

}


.group-business-panel::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 5px;

    background: var(--bm-red);

    z-index: 3;

}


/* PANEL IMAGE */

.group-business-image {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    opacity: .55;

}


.group-business-panel::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0, 26, 58, .10) 15%,
            rgba(0, 26, 58, .92) 100%
        );

    z-index: 1;

}


/* PANEL CONTENT */

.group-business-panel-content {

    position: relative;

    z-index: 2;

}


.panel-label {

    display: block;

    margin-bottom: 12px;

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

    font-size: .68rem;

    font-weight: 700;

    letter-spacing: .16em;

    text-transform: uppercase;

}


.group-business-panel strong {

    display: block;

    margin-bottom: 12px;

    color: #ffffff;

    font-size: 1.5rem;

    line-height: 1.25;

}


.group-business-panel p {

    margin: 0;

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

    font-size: .9rem;

    line-height: 1.75;

}


/* ==========================================================
   REGIONAL LOGO IMAGE
========================================================== */

.regional-logo-image {

    object-fit: contain;

    object-position: center;

    padding: 55px;

    background: var(--bm-blue);

}


/* ==========================================================
   CARGO
========================================================== */

.group-business-cargo .group-business-panel {

    background: var(--bm-blue);

}


/* ==========================================================
   CLOSING SECTION
========================================================== */

.group-closing {

    padding: 125px 0;

    background:
        linear-gradient(
            180deg,
            var(--bm-blue),
            var(--bm-blue-light)
        );

    color: #ffffff;

    text-align: center;

}


.group-closing .container {

    max-width: 850px;

}


.group-closing h2 {

    margin: 12px 0 25px;

    color: #ffffff;

    font-size: clamp(2.2rem, 4vw, 3.4rem);

    line-height: 1.1;

}


.group-closing .section-kicker {

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

}


.group-closing .hero-divider {

    margin: 35px auto;

}


.group-closing p {

    max-width: 680px;

    margin: 0 auto 12px;

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

    font-size: 1rem;

    line-height: 1.9;

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1100px) {

    .group-companies {

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

    }

}


@media (max-width: 992px) {

    .group-hero-content {

        padding-top: 120px;
        padding-bottom: 90px;

    }


    .group-business-grid,
    .group-business-regional .group-business-grid {

        grid-template-columns: 1fr;

        gap: 55px;

    }


    .group-business-regional .group-business-panel {

        order: 2;

    }


    .group-business-regional .group-business-content {

        order: 1;

    }


    .group-business-panel {

        min-height: 380px;

    }

}


@media (max-width: 768px) {

    .group-hero {

        min-height: 560px;

    }


    .group-hero-content {

        padding-top: 105px;
        padding-bottom: 75px;

    }


    .group-hero h1 {

        max-width: 620px;

        font-size: 3rem;

    }


    .group-hero .hero-copy {

        font-size: .94rem;

    }


    .group-intro,
    .group-structure,
    .group-business,
    .group-closing {

        padding: 80px 0;

    }


    .group-companies {

        grid-template-columns: 1fr;

    }


    .group-connector {

        height: 45px;

    }


    .group-connector::before {

        height: 22px;

    }


    .group-connector::after {

        display: none;

    }


    .group-parent-inner {

        padding: 30px 25px;

    }


    .group-company {

        padding: 30px;

    }


    .group-company-top {

        flex-direction: column;

    }


    .group-company-tag {

        text-align: left;

    }


    .group-business-panel {

        min-height: 340px;

        padding: 30px;

    }


    .regional-logo-image {

        padding: 40px;

    }

}


@media (max-width: 480px) {

    .group-hero {

        min-height: 520px;

    }


    .group-hero-content {

        padding-top: 90px;
        padding-bottom: 60px;

    }


    .group-hero h1 {

        font-size: 2.45rem;

    }


    .group-company {

        padding: 25px;

    }


    .group-business-links {

        flex-direction: column;

        align-items: stretch;

    }


    .group-business-links a {

        width: 100%;

        text-align: center;

    }


    .group-business-panel {

        min-height: 300px;

        padding: 25px;

    }


    .regional-logo-image {

        padding: 30px;

    }

}


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

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

    .group-company,
    .group-company .feature-button {

        transition: none !important;

        animation: none !important;

    }

}