/* ==========================================================
   wine ott
   responsive.css
   Responsive Layout
========================================================== */


/* ==========================================================
   DESKTOP
========================================================== */

@media (max-width:1200px){

    /* ------------------------------------------
       Layout
    ------------------------------------------ */

    .container{
        width:94%;
    }

}


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

@media (max-width:960px){

    /* ------------------------------------------
       Layout
    ------------------------------------------ */

    body{
        font-size:17px;
    }

    section{
        padding:7rem 0;
    }

    .container{
        width:92%;
    }


    /* ------------------------------------------
       Header
    ------------------------------------------ */

    #site-header{

        height:auto;

    }

    .header-inner{

        height:auto;

        flex-direction:column;

        gap:1.2rem;

        padding:1rem 0;

    }

    nav{

        display:grid;

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

        width:100%;
        max-width:420px;

        margin-inline:auto;

        gap:.8rem 2rem;

        justify-items:center;

    }


    /* ------------------------------------------
       Hero
    ------------------------------------------ */

    #hero{

        min-height:82vh;

        padding-top:140px;

    }

    .hero-mark::before{

        width:80vw;

    }

    #hero h1{

        font-size:clamp(3.5rem,14vw,6rem);

    }

    .hero-location{

        max-width:420px;

        font-size:1.15rem;

    }


    /* ------------------------------------------
       Editorial
    ------------------------------------------ */

    .editorial-grid,
    .editorial-grid.reverse{

        grid-template-columns:1fr;

        gap:3rem;

    }

    .editorial-image{

        order:-1;

        max-width:760px;

        margin-inline:auto;

    }

    .editorial-text{

        margin-inline:auto;

        max-width:700px;

    }


    /* ------------------------------------------
       Weine
    ------------------------------------------ */

    .wine-grid{

        grid-template-columns:1fr;

        gap:3rem;

    }

    .wine-reverse .wine-image,
    .wine-reverse .wine-content{

        order:initial;

    }

    .wine-feature .wine-grid{

        grid-template-columns:1fr;

        gap:4rem;

    }

    .wine-feature .wine-content{

        max-width:640px;

        padding-top:0;

    }


    /* ------------------------------------------
       Events
    ------------------------------------------ */

    #events{

        padding-bottom:7rem;

    }

    .events-image{

        margin:4rem auto;

    }

    .events-intro{

        margin-bottom:3rem;

    }

    .event-list article{

        grid-template-columns:1fr;

        gap:1rem;

    }


    /* ------------------------------------------
       Kontakt
    ------------------------------------------ */

    .contact-grid{

        grid-template-columns:1fr;

        gap:3rem;

        text-align:center;

    }

    .contact-grid p{

        margin-inline:auto;

    }


    /* ------------------------------------------
       Footer
    ------------------------------------------ */

    .footer-inner{

        flex-direction:column;

        gap:1.5rem;

        text-align:center;

    }

}


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

@media (max-width:768px){

    /* ------------------------------------------
       Layout
    ------------------------------------------ */

    body{

        font-size:16px;

    }

    section{

        padding:6rem 0;

    }

    .container{

        width:90%;

    }


    /* ------------------------------------------
       Typography
    ------------------------------------------ */

    h2{

        font-size:2.3rem;

        line-height:1.1;

    }


    /* ------------------------------------------
       Hero
    ------------------------------------------ */

    #hero{

        min-height:75vh;

    }

    #hero h1{

        font-size:clamp(3rem,17vw,4.8rem);

    }

    .hero-location{

        font-size:1.05rem;

    }

    .scroll-indicator{

        display:none;

    }


    /* ------------------------------------------
       Bilder
    ------------------------------------------ */

    .editorial-image img,
    .events-image img,
    .wine-image img{

        border-radius:var(--radius-sm);

    }


    /* ------------------------------------------
       Weine
    ------------------------------------------ */

    #weine{

        padding:6rem 0 8rem;

    }

    #weine .section-header{

        margin-bottom:6rem;

    }

    .wine{

        margin:5rem 0 7rem;

    }

    .wine-grid{

        gap:2.5rem;

    }

    .wine-content{

        max-width:100%;

    }

    .wine-feature{

        margin-bottom:10rem;

    }

    .wine-feature h3{

        font-size:2.3rem;

    }

    .wine-lead{

        font-size:1.1rem;

    }

    .wine-meta{

        gap:2rem;

    }


    /* ------------------------------------------
       Events
    ------------------------------------------ */

    .event-content h3{

        font-size:1.3rem;

    }

    .event-date .days{

        font-size:1.5rem;

    }

}


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

@media (max-width:600px){

    /* ------------------------------------------
       Layout
    ------------------------------------------ */

    .container{

        width:88%;

    }


    /* ------------------------------------------
       Typography
    ------------------------------------------ */

    h1{

        letter-spacing:-.04em;

    }

    h2{

        font-size:2rem;

    }


    /* ------------------------------------------
       Header
    ------------------------------------------ */

    .brand img{

        width:34px;

    }

    .brand span{

        font-size:.9rem;

    }

    nav{

        gap:.7rem 1rem;

    }


    /* ------------------------------------------
       Hero
    ------------------------------------------ */

    .hero-location{

        max-width:280px;

    }

}