/* ==========================================================================
   Lincat Banners
   Reusable, responsive marketing banners rendered by lib/banners.php.
   Add styles for additional banners below the AIR0 block.
   ========================================================================== */

/* --------------------------------------------------------------------------
   AIR0 banner  —  Figma node 1:89
   Fixed 600px height on desktop (matches the other Lincat promo banners) and
   reflows to a stacked layout on mobile. Horizontal sizing scales fluidly with
   container-query units (cqw = 1% of the banner width). The top-right logo uses
   the shared .brand-bage badge and the CTA uses the Flatsome .button classes,
   so both stay consistent with every other brand banner.
   -------------------------------------------------------------------------- */
.air0-banner {
    position: relative;
    width: 100%;
    height: 600px;
    background-color: #1b7c87;
    overflow: hidden;
    container-type: inline-size;
    font-family: "Barlow", sans-serif;
    color: #ffffff;
    isolation: isolate;
    border: 1px solid #c6c6c6;
}

.air0-banner img {
    border: 0;
    box-shadow: none;
    border-radius: 0;
}

/* Dark teal shadow strip along the far-left edge */
.air0-banner::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 2.56%;
    height: 100%;
    background: linear-gradient(180deg, #030f0f 0%, #0c393e 50%, #16636b 100%);
    z-index: 1;
}

.air0-banner__media {
    position: absolute;
    left: 2.56%;
    top: 0;
    width: 26.83%;
    height: 100%;
    display: flex;
    flex-direction: column;
    z-index: 2;
}

.air0-banner__food {
    flex: 1 1 0;
    width: 100%;
    min-width: 0;
    min-height: 0;
    object-fit: cover;
    display: block;
}

.air0-banner__oven {
    position: absolute;
    left: 20.01%;
    top: 30.87%;
    width: 32.62%;
    height: 42.16%;
    object-fit: contain;
    object-position: center;
    z-index: 3;
}

.air0-banner__content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    right: 1%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3% 2%;
    z-index: 3;
}

.air0-banner__heading {
    margin: 0 0 0.35em;
    padding: 0;
    font-weight: 400;
    font-size: 7.34cqw;
    line-height: 1.02;
    color: #ffffff;
}

.air0-banner__tagline {
    margin: 0;
    padding: 0;
    font-weight: 400;
    font-size: 3.69cqw;
    line-height: 1.25;
    color: #ffffff;
    margin: 0 0 1.5em;
}

.air0-banner__line {
    display: block;
    white-space: nowrap;
}

.air0-banner__tagline strong {
    font-weight: 700;
}

.air0-banner__content .button {
    margin: 1.5em 0 0;
}

.air0-banner .button.button-air0,
.promo .banner .button.button-air0 {
    color: #1b7c87 !important;
    background-color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   Mobile — reflow to a stacked, centred layout
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .air0-banner {
        height: auto;
        container-type: normal;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 60px 22px 0;
        text-align: center;
    }

    .air0-banner::before {
        display: none;
    }

    /* Keep the brand badge in the top-right corner, compact */
    .air0-banner .brand-bage .img {
        padding: 10px 20px;
    }

    .air0-banner__oven {
        position: static;
        order: 2;
        width: 82%;
        max-width: 330px;
        height: auto;
        margin: 0 auto 18px;
    }

    .air0-banner__content {
        position: static;
        order: 3;
        inset: auto;
        width: 100%;
        padding: 0;
    }

    .air0-banner__heading {
        font-size: clamp(28px, 8.5vw, 42px);
        line-height: 1.05;
        margin: 0 0 14px;
    }

    .air0-banner__tagline {
        font-size: clamp(16px, 4.6vw, 21px);
        line-height: 1.35;
        margin: 0;
    }

    .air0-banner__line {
        white-space: normal;
    }

    .air0-banner__content .button {
        margin: 24px 0 30px;
    }

    .air0-banner__media {
        position: static;
        order: 4;
        width: 100%;
        height: auto;
        flex-direction: row;
        gap: 4px;
        margin-top: 4px;
    }

    .air0-banner__food {
        aspect-ratio: 1 / 1;
        height: auto;
    }
}