/* ==========================================================
   BEGIN FILE: assets/css/layout.css
   BRIDGE LAYOUT
========================================================== */


/* ==========================================================
   GLOBAL WRAPPER
========================================================== */

.bridge-wrap{
    width:min(var(--bridge-container),100%);
    margin-inline:auto;
    padding-inline:clamp(20px,4vw,64px);
}


/* ==========================================================
   GLOBAL SECTIONS
========================================================== */

.bridge-section{
    padding:clamp(76px,10vw,150px) 0;
}


/* ==========================================================
   GENERAL TWO COLUMN GRIDS
========================================================== */

.bridge-two-col,
.bridge-connector-grid,
.bridge-engineering-grid,
.bridge-future-grid,
.bridge-contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(40px,6vw,90px);
    align-items:start;
}


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

.bridge-hero{
    position:relative;
    width:100%;
    padding:64px 0 26px;

    background:
        linear-gradient(
            180deg,
            var(--bridge-white) 0%,
            #F4F4F1 100%
        );
}


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

.bridge-hero-grid{
    display:grid;
    grid-template-columns:minmax(0,1.18fr) minmax(320px,.82fr);

    align-items:end;

    gap:clamp(42px,5vw,78px);

    margin-bottom:0;
}

.bridge-hero-copy{
    min-width:0;
    max-width:920px;
}

.bridge-hero .bridge-kicker{
    margin:0 0 22px;
}

.bridge-hero h1{
    max-width:900px;
    margin:0;

    font-size:clamp(76px,8.2vw,132px);
    line-height:.86;
    letter-spacing:-.055em;
    font-weight:650;

    color:var(--bridge-text);
}


/* ----------------------------------------------------------
   HERO RIGHT SIDE
---------------------------------------------------------- */

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

    justify-self:end;

    padding-bottom:10px;
}

.bridge-hero-intro,
.bridge-hero-side > p{
    max-width:470px;
    margin:0;

    font-size:clamp(17px,1.35vw,21px);
    line-height:1.45;

    color:var(--bridge-text);
}

.bridge-hero-intro strong,
.bridge-hero-side > p strong{
    color:var(--bridge-text);
    font-weight:700;
}

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


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

.bridge-hero-media{
    position:relative;

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

    width:100%;

    margin:-72px 0 0;
    padding:0 18px;

    overflow:visible;

    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none;
}

.bridge-hero-media img{
    display:block;

    width:auto;
    max-width:100%;

    height:auto;

    margin:0 auto;

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


/* ----------------------------------------------------------
   HERO HARD RESET
---------------------------------------------------------- */

#bridge-site .bridge-hero-media{
    width:100% !important;

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

    aspect-ratio:auto !important;

    overflow:visible !important;

    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
}

#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:680px !important;

    margin:0 auto !important;

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

    transform:none !important;
}


/* ==========================================================
   COMPARISON / SYSTEM GRIDS
========================================================== */

.bridge-compare,
.bridge-hinges-grid,
.bridge-data-grid,
.bridge-dist-grid,
.bridge-brand-pair{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}


/* ==========================================================
   CONFIGURATION META
========================================================== */

.bridge-config-meta{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;

    margin-top:35px;
}


/* ==========================================================
   PROCESS / LOCAL PRODUCTION
========================================================== */

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


/* ==========================================================
   PRODUCT ARCHITECTURE GRID
========================================================== */

.bridge-product-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}


/* ==========================================================
   FOOTER TOP
========================================================== */

.bridge-footer-top{
    display:grid;
    grid-template-columns:1.3fr repeat(3,1fr);
    gap:40px;

    padding:70px 0 48px;
}


/* ==========================================================
   TABLET / SMALL DESKTOP
========================================================== */

@media (max-width:1100px){

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

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

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

    .bridge-hero-media{
        margin-top:-54px;
    }

    #bridge-site .bridge-hero-media img{
        max-height:610px !important;
    }

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

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

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


/* ==========================================================
   SMALL TABLET
========================================================== */

@media (max-width:800px){

    .bridge-section{
        padding:72px 0;
    }

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


    /* Hero */

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

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

        margin-bottom:0;
    }

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

        justify-self:start;

        padding-bottom:0;
    }

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

        font-size:clamp(58px,13vw,90px);
        line-height:.87;
    }

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

    .bridge-hero-media{
        margin-top:-18px;
        padding:0;
    }

    #bridge-site .bridge-hero-media img{
        width:100% !important;
        max-height:none !important;
    }


    /* Other grids */

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

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

    .bridge-footer-top{
        grid-template-columns:1fr 1fr;
        gap:32px;
    }
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:520px){

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

    .bridge-section{
        padding:58px 0;
    }


    /* Hero */

    .bridge-hero{
        padding:34px 0 20px;
    }

    .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:20px;
    }

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

    .bridge-hero-media{
        width:calc(100% + 8px);

        margin-top:-8px;
        margin-left:-4px;
    }


    /* Other grids */

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

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


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