/* ==========================================================================
   LESESOMMER 2026
   RESPONSIVE.CSS
   ========================================================================== */


/* Tablet */

@media (max-width:1200px){

    :root{
        --header-height:76px;
        --logo-width:150px;
        --popup-width:680px;
        --popup-cover-width:190px;
    }

    #hero{
        top:calc(var(--header-height) + var(--space-6));
        width:min(460px,calc(100% - (var(--section-padding-x) * 2)));
    }

    #hero-headline{
        font-size:clamp(2rem,5vw,2.75rem);
    }

    #scene{
        min-height:720px;
    }

    #navigation{
        gap:var(--space-2);
    }

    #navigation a{
        padding:0 var(--space-3);
        font-size:var(--font-size-xs);
    }

}


/* Mobile */

@media (max-width:768px){

    :root{
        --header-height:68px;
        --logo-width:var(--logo-mobile-width);
        --section-padding-x:1rem;
        --scene-min-height:var(--scene-mobile-min-height);
        --popup-cover-width:160px;
    }

    body{
        background:var(--color-sand-light);
    }

    #header{
        position:absolute;
        height:var(--header-height);
        align-items:flex-start;
        padding-top:var(--space-4);
    }

    #navigation{
        display:none;
    }

    #hero{
        top:calc(var(--header-height) + var(--space-3));
        left:var(--section-padding-x);
        width:calc(100% - 2rem);
        max-width:360px;
    }

    #hero-headline{
        margin-bottom:var(--space-3);
        font-size:clamp(1.85rem,9vw,2.6rem);
    }

    #hero-text{
        max-width:320px;
        margin-bottom:var(--space-4);
        font-size:var(--font-size-base);
    }

    #hero-button{
        min-height:44px;
        padding:0 var(--space-5);
        font-size:var(--font-size-sm);
    }

    #scene{
        height:100svh;
        min-height:0;
    }

    .scene-object:hover{
        transform:none;
    }

    .scene-object button{
        min-width:var(--touch-size);
        min-height:var(--touch-size);
    }

    #footer{
        padding:.50rem var(--section-padding-x);
    }

}


/* Popup Mobile */

@media (max-width:768px){

    #popup-overlay{
        align-items:flex-end;
        padding:var(--space-3);
    }

    #popup{
        width:100%;
        max-width:100%;
        max-height:calc(100svh - 2rem);
        grid-template-columns:1fr;
        gap:var(--space-4);
        overflow:auto;
        border-radius:var(--radius-xl);
        padding:var(--space-6) var(--space-5);
    }

    #popup-close{
        top:var(--space-3);
        right:var(--space-3);
        width:40px;
        height:40px;
        font-size:1.75rem;
    }

    .popup-covers{
        justify-content:center;
        min-height:210px;
        padding-right:0;
    }

    .popup-cover-image{
        max-width:140px;
    }

    .popup-covers[data-cover-count="2"],
    .popup-covers[data-cover-count="3"]{
        width:100%;
        min-width:0;
    }

    .popup-covers[data-cover-count="2"] .popup-cover-image,
    .popup-covers[data-cover-count="3"] .popup-cover-image{
        width:112px;
    }

    .popup-covers[data-cover-count="2"] .popup-cover-image:nth-child(1){
        transform:translateX(-38px) rotate(-7deg);
    }

    .popup-covers[data-cover-count="2"] .popup-cover-image:nth-child(2){
        transform:translateX(38px) rotate(7deg);
    }

    .popup-covers[data-cover-count="3"] .popup-cover-image:nth-child(1){
        transform:translateX(-58px) translateY(10px) rotate(-9deg);
    }

    .popup-covers[data-cover-count="3"] .popup-cover-image:nth-child(2){
        transform:translateY(-3px);
    }

    .popup-covers[data-cover-count="3"] .popup-cover-image:nth-child(3){
        transform:translateX(58px) translateY(10px) rotate(9deg);
    }

    .popup-content{
        padding-right:0;
    }

    #popup-title{
        font-size:1.6rem;
    }

    #popup-description{
        font-size:var(--font-size-sm);
    }

    #popup-button{
        width:100%;
        min-height:48px;
    }
    
    #how-hint{
        align-items:stretch;
        flex-direction:column;
    }

    #how-hint-button{
        width:100%;
    }

}


/* Small Mobile */

@media (max-width:420px){

    :root{
        --logo-mobile-width:120px;
    }

    #hero{
        max-width:320px;
    }

    #hero-headline{
        font-size:2rem;
    }

    #hero-text{
        font-size:var(--font-size-sm);
    }

    #popup{
        padding:var(--space-5) var(--space-4);
    }

}


/* Landscape Mobile */

@media (max-width:900px) and (orientation:landscape){

    #header{
        height:60px;
        padding-top:var(--space-3);
    }

    #hero{
        top:72px;
        max-width:360px;
    }

    #hero-headline{
        font-size:2rem;
    }

    #hero-text{
        display:none;
    }

    #scene{
        min-height:560px;
    }

    #popup-overlay{
        align-items:center;
    }

    #popup{
        max-height:calc(100vh - 2rem);
        grid-template-columns:140px 1fr;
    }

    #popup-cover{
        max-width:140px;
    }

}


/* Large Screens */

@media (min-width:1440px){

    #hero{
        left:max(var(--section-padding-x),calc((100vw - var(--page-max-width)) / 2 + var(--space-8)));
    }

    #header{
        padding-left:max(var(--header-padding-x),calc((100vw - var(--page-max-width)) / 2 + var(--space-8)));
        padding-right:max(var(--header-padding-x),calc((100vw - var(--page-max-width)) / 2 + var(--space-8)));
    }

}