/* ==========================================================
   BEGIN FILE: assets/css/responsive.css

   BRIDGE RESPONSIVE
   Desktop → Tablet → Mobile

   IMPORTANT:
   Hero image must always remain fully visible.
   No fixed hero image heights.
   No object-fit: cover.
========================================================== */


/* ==========================================================
   BEGIN: LARGE DESKTOP
========================================================== */

@media (min-width:1441px){

    .bridge-wrap{
        max-width:var(--bridge-container);
    }

}

/* ==========================================================
   END: LARGE DESKTOP
========================================================== */


/* ==========================================================
   BEGIN: DESKTOP / SMALL DESKTOP
========================================================== */

@media (max-width:1200px){

    .bridge-wrap{
        padding-inline:40px;
    }

    .bridge-section{
        padding-top:110px;
        padding-bottom:110px;
    }


    /* ------------------------------------------------------
       HEADER
    ------------------------------------------------------ */

    .bridge-nav{
        grid-template-columns:145px minmax(0,1fr) 175px;
        gap:20px;
    }

    .bridge-brand,
    .bridge-brand .bridge-logo-svg{
        width:135px;
    }

    .bridge-desktop-nav{
        gap:20px;
    }

    .bridge-desktop-nav a{
        font-size:13px;
    }

    .bridge-nav-cta{
        font-size:13px;
        padding-left:14px;
    }


    /* ------------------------------------------------------
       HERO
    ------------------------------------------------------ */

    .bridge-hero{
        padding-top:58px;
    }

    .bridge-hero-grid{
        grid-template-columns:
            minmax(0,1.1fr)
            minmax(280px,.9fr);

        gap:44px;
    }

    .bridge-hero h1{
        font-size:clamp(68px,8.5vw,104px);
    }

    .bridge-hero-media{
        padding-inline:10px;
    }

    #bridge-site .bridge-hero-media img{
        display:block !important;

        width:auto !important;
        max-width:100% !important;

        height:auto !important;
        min-height:0 !important;
        max-height:none !important;

        object-fit:contain !important;
        object-position:center !important;
    }


    /* ------------------------------------------------------
       FOUR-COLUMN SECTIONS
    ------------------------------------------------------ */

    .bridge-process,
    .bridge-local-features{
        grid-template-columns:repeat(2,1fr);
    }


    /* ------------------------------------------------------
       PRODUCT GRID
    ------------------------------------------------------ */

    .bridge-product-grid{
        grid-template-columns:repeat(2,1fr);
    }


    /* ------------------------------------------------------
       FOOTER
    ------------------------------------------------------ */

    .bridge-footer-top{
        grid-template-columns:1.2fr repeat(2,1fr);
    }

}

/* ==========================================================
   END: DESKTOP / SMALL DESKTOP
========================================================== */


/* ==========================================================
   BEGIN: TABLET
========================================================== */

@media (max-width:900px){

    .bridge-wrap{
        padding-inline:28px;
    }

    .bridge-section{
        padding-top:84px;
        padding-bottom:84px;
    }


    /* ------------------------------------------------------
       HEADER
    ------------------------------------------------------ */

    .bridge-nav{
        min-height:70px;

        display:flex;

        align-items:center;
        justify-content:space-between;

        gap:20px;
    }

    .bridge-brand,
    .bridge-brand .bridge-logo-svg{
        width:125px;
    }

    .bridge-desktop-nav,
    .bridge-nav-cta{
        display:none !important;
    }

    .bridge-menu-toggle{
        display:block;
    }

    .bridge-mobile-panel{
        inset:70px 0 0 0;
    }


    /* ------------------------------------------------------
       HERO
    ------------------------------------------------------ */

    .bridge-hero{
        padding:46px 0 30px;
    }

    .bridge-hero-grid{
        grid-template-columns:1fr;

        gap:28px;

        margin-bottom:30px;
    }

    .bridge-hero-copy{
        max-width:720px;
    }

    .bridge-hero-side{
        width:100%;
        max-width:560px;

        justify-self:start;

        padding-bottom:0;
    }

    .bridge-hero h1{
        max-width:700px;

        font-size:clamp(58px,13vw,90px);

        line-height:.87;
    }

    .bridge-hero-intro,
    .bridge-hero-side > p{
        font-size:17px;
    }

    .bridge-hero-media{
        display:flex;

        width:100%;

        margin:0;
        padding:0;

        align-items:center;
        justify-content:center;

        overflow:visible;
    }

    #bridge-site .bridge-hero-media img{
        display:block !important;

        width:100% !important;
        max-width:100% !important;

        height:auto !important;
        min-height:0 !important;
        max-height:none !important;

        margin:0 auto !important;

        object-fit:contain !important;
        object-position:center !important;

        transform:none !important;
    }


    /* ------------------------------------------------------
       GENERAL TWO-COLUMN GRIDS
    ------------------------------------------------------ */

    .bridge-two-col,
    .bridge-connector-grid,
    .bridge-engineering-grid,
    .bridge-future-grid,
    .bridge-contact-grid{
        grid-template-columns:1fr;

        gap:40px;
    }


    /* ------------------------------------------------------
       OTHER GRIDS
    ------------------------------------------------------ */

    .bridge-compare,
    .bridge-hinges-grid,
    .bridge-data-grid,
    .bridge-dist-grid,
    .bridge-brand-pair,
    .bridge-config-meta{
        grid-template-columns:1fr;
    }


    /* ------------------------------------------------------
       CONFIGURATIONS
    ------------------------------------------------------ */

    .bridge-tabs{
        gap:8px;
    }

    .bridge-config-image img{
        min-height:0;

        height:auto;

        object-fit:contain;
    }


    /* ------------------------------------------------------
       LIFESTYLE
    ------------------------------------------------------ */

    .bridge-lifestyle-media{
        min-height:0;
    }

    .bridge-lifestyle-media > img{
        height:auto;

        min-height:0;

        object-fit:cover;
    }

    .bridge-lifestyle-overlay{
        position:relative;

        left:auto;
        bottom:auto;

        max-width:none;

        margin:-30px 20px 0;

        padding:28px;
    }


    /* ------------------------------------------------------
       CONNECTOR
    ------------------------------------------------------ */

    .bridge-connector-visual{
        min-height:420px;
    }


    /* ------------------------------------------------------
       DATA / ENGINEERING
    ------------------------------------------------------ */

    .bridge-data-card{
        min-height:auto;
    }

    .bridge-blueprint{
        min-height:420px;
    }


    /* ------------------------------------------------------
       PRODUCT GRID
    ------------------------------------------------------ */

    .bridge-product-grid{
        grid-template-columns:1fr;
    }


    /* ------------------------------------------------------
       MOTION
    ------------------------------------------------------ */

    .bridge-motion{
        padding:64px 0;
    }

    .bridge-motion-frame{
        width:100%;
    }

    .bridge-motion-video{
        display:block;

        width:100%;
        height:auto;

        object-fit:contain;
    }


    /* ------------------------------------------------------
       FINAL
    ------------------------------------------------------ */

    .bridge-final-inner{
        min-height:auto;

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

    .bridge-mega{
        font-size:clamp(70px,16vw,130px);

        line-height:.82;
    }


    /* ------------------------------------------------------
       NEWSLETTER
    ------------------------------------------------------ */

    .bridge-newsletter{
        grid-template-columns:1fr;

        gap:28px;
    }


    /* ------------------------------------------------------
       FOOTER
    ------------------------------------------------------ */

    .bridge-footer-top{
        grid-template-columns:1fr 1fr;

        gap:34px;
    }

}

/* ==========================================================
   END: TABLET
========================================================== */


/* ==========================================================
   BEGIN: WORDPRESS ADMIN BAR
========================================================== */

@media (max-width:782px){

    body.admin-bar .bridge-header{
        top:46px;
    }

}

/* ==========================================================
   END: WORDPRESS ADMIN BAR
========================================================== */


/* ==========================================================
   BEGIN: MOBILE
========================================================== */

@media (max-width:600px){

    .bridge-wrap{
        padding-inline:18px;
    }

    .bridge-section{
        padding-top:64px;
        padding-bottom:64px;
    }


    /* ------------------------------------------------------
       TYPOGRAPHY
    ------------------------------------------------------ */

    .bridge-site h2{
        font-size:clamp(40px,12vw,64px);

        line-height:.94;
    }

    .bridge-site h3{
        font-size:clamp(26px,8vw,38px);
    }

    .bridge-lead{
        font-size:19px !important;
    }


    /* ------------------------------------------------------
       HEADER
    ------------------------------------------------------ */

    .bridge-header{
        background:var(--bridge-beige);
    }

    .bridge-nav{
        min-height:66px;
    }

    .bridge-brand,
    .bridge-brand .bridge-logo-svg{
        width:116px;
    }

    .bridge-mobile-panel{
        inset:66px 0 0 0;

        padding:26px 18px;
    }

    .bridge-mobile-nav a{
        padding:16px 0;

        font-size:clamp(28px,10vw,42px);
    }


    /* ------------------------------------------------------
       HERO
    ------------------------------------------------------ */

    .bridge-hero{
        padding:36px 0 24px;
    }

    .bridge-hero .bridge-kicker{
        margin-bottom:18px;

        font-size:10px;
    }

    .bridge-hero h1{
        font-size:clamp(52px,17vw,76px);

        line-height:.87;

        letter-spacing:-.05em;
    }

    .bridge-hero-grid{
        gap:22px;

        margin-bottom:26px;
    }

    .bridge-hero-side .bridge-buttons{
        margin-top:22px;
    }

    .bridge-hero-media{
        width:100%;

        margin:0;

        padding:0;

        overflow:visible;
    }

    #bridge-site .bridge-hero-media img{
        display:block !important;

        width:100% !important;
        max-width:100% !important;

        height:auto !important;
        min-height:0 !important;
        max-height:none !important;

        margin:0 auto !important;

        object-fit:contain !important;
        object-position:center !important;

        transform:none !important;
    }


    /* ------------------------------------------------------
       BUTTONS
    ------------------------------------------------------ */

    .bridge-buttons{
        width:100%;
    }

    .bridge-btn{
        width:100%;

        min-height:56px;
    }


    /* ------------------------------------------------------
       MODULE / SYSTEM GRIDS
    ------------------------------------------------------ */

    .bridge-process,
    .bridge-local-features{
        grid-template-columns:1fr;
    }

    .bridge-exploded{
        grid-template-columns:1fr;

        gap:12px;
    }

    .bridge-plus{
        transform:rotate(90deg);

        text-align:center;
    }


    /* ------------------------------------------------------
       CONFIGURATION TABS
    ------------------------------------------------------ */

    .bridge-tabs{
        display:flex;

        flex-wrap:nowrap;

        overflow-x:auto;

        padding-bottom:5px;

        scrollbar-width:none;
    }

    .bridge-tabs::-webkit-scrollbar{
        display:none;
    }

    .bridge-tabs span{
        flex:0 0 auto;
    }


    /* ------------------------------------------------------
       LIFESTYLE
    ------------------------------------------------------ */

    .bridge-lifestyle-overlay{
        margin:-18px 12px 0;

        padding:22px;
    }

    .bridge-lifestyle-overlay h2{
        font-size:42px;
    }


    /* ------------------------------------------------------
       CONNECTOR
    ------------------------------------------------------ */

    .bridge-connector-visual{
        min-height:320px;
    }

    .bridge-connector-cylinder{
        width:76%;

        height:92px;
    }


    /* ------------------------------------------------------
       ENGINEERING
    ------------------------------------------------------ */

    .bridge-blueprint{
        min-height:340px;

        padding:18px;
    }

    .bridge-blueprint svg{
        width:100%;

        height:auto;
    }


    /* ------------------------------------------------------
       FINAL
    ------------------------------------------------------ */

    .bridge-final-inner{
        padding-top:72px;
        padding-bottom:72px;
    }

    .bridge-mega{
        margin-bottom:30px;

        font-size:clamp(62px,20vw,100px);

        line-height:.82;
    }


    /* ------------------------------------------------------
       SOCIAL
    ------------------------------------------------------ */

    .bridge-social-row{
        gap:10px;
    }

    .bridge-social-link{
        width:44px;
        height:44px;

        flex-basis:44px;
    }


    /* ------------------------------------------------------
       LANGUAGE
    ------------------------------------------------------ */

    .bridge-language-block{
        width:100%;
    }


    /* ------------------------------------------------------
       FOOTER
    ------------------------------------------------------ */

    .bridge-footer-top{
        grid-template-columns:1fr;

        gap:34px;

        padding-top:54px;
    }

    .bridge-footer-bottom{
        flex-direction:column;

        gap:8px;
    }

}

/* ==========================================================
   END: MOBILE
========================================================== */


/* ==========================================================
   BEGIN: REDUCED MOTION
========================================================== */

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

    .bridge-reveal{
        opacity:1;

        transform:none;

        transition:none;
    }

    .bridge-motion-video{
        animation:none;
    }

}

/* ==========================================================
   END: REDUCED MOTION
========================================================== */


/* ==========================================================
   END FILE: assets/css/responsive.css
========================================================== */