@charset "UTF-8";

/* ============================================
   0. VARIABILI GLOBALI
   ============================================ */
:root {
    --header-pannello-height: 54px;
    --mobile-header-height: 46px;
    --resize-duration: 0.4s;
    --resize-easing: cubic-bezier(0.4, 0, 0.2, 1);
    --espanso-z: 50;
}

/* ============================================
   1. CARICAMENTO FONT
   ============================================ */
@font-face {
    font-family: 'JetBrainsMono';
    src: url('./Fonts/JetBrainsMono-2.304/fonts/webfonts/JetBrainsMono-Regular.woff2') format('woff2'),
         url('./Fonts/JetBrainsMono-2.304/fonts/webfonts/JetBrainsMono-Regular.woff') format('woff'),
         url('./Fonts/JetBrainsMono-2.304/fonts/ttf/JetBrainsMono-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ============================================
   2. RESET
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ============================================
   3. BODY INDEX
   ============================================ */
body.index-body {
    background-image: url('IMG/SmokingNoSmoking_Artwork_copia.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

/* ============================================
   4. GRIGLIA
   ============================================ */
.grid-container {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 180px));
    justify-content: center;
    max-width: 100%;
}

/* ============================================
   5. BOX GRIGLIA
   ============================================ */
.grid-item {
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-family: 'JetBrainsMono', Courier, monospace !important;
    font-size: clamp(18px, 0.5vw + 23px, 34px);
    border-radius: 35px;
    text-align: center;
    line-height: 1.1;
    padding: 15px;
    cursor: pointer;
    text-decoration: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
    background-color: #4caf22;
}

.grid-item.with-image {
    background-color: #fff !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    padding: 0 !important;
}

.grid-item:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.grid-item, .grid-item:visited, .grid-item:active {
    color: white !important;
    text-decoration: none !important;
}

/* ============================================
   6. PAGINE SECONDARIE
   ============================================ */
body:not(.index-body) {
    background-color: #ffffff;
    font-family: 'Atwriter', Courier, monospace !important;
    color: #000000;
    padding: 20px;
    line-height: 1.5;
}

/* ============================================
   7. PAGINA DOMAINS
   ============================================ */
.domains-body {
    background-image: url('IMG/SmokingNoSmoking.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* ============================================
   8. POPUP CONTAINER
   Il JS aggiunge le classi layout-1/2/3/4
   che controllano larghezza e griglia.
   ============================================ */
.popup-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 11000;
    height: 90vh;
    display: none;
    background: transparent;
    overflow: visible;
}

/* 1 pannello: centrato, larghezza singola */
.popup-container.layout-1 { width: 615px; }
.popup-container.layout-1 #popupContent {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

/* 2 pannelli: affiancati */
.popup-container.layout-2 { width: 1230px; }
.popup-container.layout-2 #popupContent {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
}

/* 3 pannelli: griglia 2x2, slot 4 vuoto */
.popup-container.layout-3 { width: 1230px; }
.popup-container.layout-3 #popupContent {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

/* 4 pannelli: griglia 2x2 completa */
.popup-container.layout-4 { width: 1230px; }
.popup-container.layout-4 #popupContent {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

/* ============================================
   8a. ANCORAGGIO ESPLICITO GRIGLIA 2x2 (layout-3/4)
   Senza questo il grid engine, quando un pannello
   va a span 2, ri-piazza gli altri con auto-flow:
   il pannello 3 "salta" nella cella vuota del 4 e
   poi viene nascosto dal coperto. Risultato: la
   tendina sembra funzionare solo per i pannelli
   in riga 1 (1 e 2) e "rompe" la posizione del
   partner.

   Con grid-area esplicito ogni pannello è ancorato
   alla propria cella: l'espanso va a span 2 nella
   SUA colonna, il partner resta dov'è (sotto,
   coperto da opacity 0 + z-index).
   ============================================ */
.popup-container.layout-3 #pannello1,
.popup-container.layout-4 #pannello1 { grid-area: 1 / 1; }
.popup-container.layout-3 #pannello2,
.popup-container.layout-4 #pannello2 { grid-area: 1 / 2; }
.popup-container.layout-3 #pannello3,
.popup-container.layout-4 #pannello3 { grid-area: 2 / 1; }
.popup-container.layout-3 #pannello4,
.popup-container.layout-4 #pannello4 { grid-area: 2 / 2; }

/* ============================================
   8b. GRIGLIA PANNELLI
   ============================================ */
#popupContent {
    display: grid !important;
    width: 100%;
    height: 100%;
    padding: 10px;
    gap: 15px;
    box-sizing: border-box;
}

/* ============================================
   8c. PANNELLI
   ============================================ */
.pannello {
    position: relative;
    background: white;
    border: 2px solid #000;
    border-radius: 15px;
    padding: 10px 20px 20px 20px;
    box-sizing: border-box;
    font-family: 'Atwriter', Courier, monospace !important;
    font-size: 22px;
    line-height: 1.2;
    color: #000;
    white-space: pre-wrap;
    scrollbar-width: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    /* Transizioni per l'effetto tendina (curtain) */
    transition:
        transform var(--resize-duration) var(--resize-easing),
        opacity var(--resize-duration) ease,
        box-shadow var(--resize-duration) ease;
}

.pannello::-webkit-scrollbar { display: none; }

.pannello[data-empty="true"] {
    display: none !important;
}

.pannello[data-empty="false"] {
    display: flex !important;
    flex-direction: column;
    height: 100% !important;
    min-height: 0;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

/* ============================================
   8d. HEADER STICKY
   ============================================ */
.header-pannello {
    position: sticky;
    top: 0;
    width: 100%;
    min-height: 50px;
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    z-index: 10020;
    flex-shrink: 0;
    border-radius: 13px 13px 0 0;
    pointer-events: none;
    margin: -10px -20px 8px -20px;
    width: calc(100% + 40px);
}

.header-pannello .resize-btn,
.header-pannello .close-popup-btn {
    width: 38px;
    height: 38px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    padding: 0 !important;
    line-height: 0 !important;
    pointer-events: auto !important;
    flex-shrink: 0;
}

.header-pannello .resize-btn {
    background-color: #4caf22 !important;
    visibility: hidden; /* mostrato dal JS solo con 3+ pannelli */
}

.header-pannello .close-popup-btn {
    background-color: #ff0000 !important;
    color: #ffffff !important;
    font-size: 22px;
    font-family: Arial, sans-serif;
}

.resize-icon {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

/* ============================================
   8e. CORPO PANNELLO
   Lo scroll vive qui; il contenuto non passa mai
   sotto l'header sticky.
   ============================================ */
.pannello-body {
    flex: 1;
    min-height: 0;
    width: 100%;
    overflow-y: auto;
    scrollbar-width: none;
}

.pannello-body::-webkit-scrollbar { display: none; }

/* ============================================
   8f. RESIZE: EFFETTO TENDINA (CURTAIN)

   REGOLE:
   - Con 3 o 4 pannelli aperti, ogni singolo pannello
     può espandersi andando a coprire (come una tendina
     che SALE o SCENDE) il pannello adiacente nella
     propria colonna: quello SUPERIORE o quello INFERIORE.

   COPPIE DI ESPANSIONE (gestite dal JS via classe):
     colonna sinistra : 1 ↔ 3
     colonna destra  : 2 ↔ 4

   - .pannello-espanso : occupa entrambe le righe della
     propria colonna (grid-row: span 2), resta in primo
     piano (z-index alto), ombra più marcata per dare il
     senso di "sollevamento" della tendina.

   - .pannello-coperto : resta nella griglia per non
     causare reflow, ma sparisce visivamente (opacity 0)
     e non riceve eventi. È "coperto dalla tendina".

   La transizione principale è sull'opacity del coperto
   (per dare il senso di una tendina che si chiude) e
   sull'ombra del pannello espanso.
   ============================================ */
.pannello-espanso {
    /* Desktop (2x2): ogni pannello espanso va a span 2
       nella propria colonna, ancorato esplicitamente.
       Così non si muove il partner. */
    z-index: var(--espanso-z) !important;
    box-shadow: 0 25px 70px rgba(0,0,0,0.55);
}

#pannello1.pannello-espanso,
#pannello3.pannello-espanso {
    grid-area: 1 / 1 / span 2 / span 1 !important;
}

#pannello2.pannello-espanso,
#pannello4.pannello-espanso {
    grid-area: 1 / 2 / span 2 / span 1 !important;
}

.pannello-coperto {
    opacity: 0 !important;
    pointer-events: none !important;
    /* Niente reflow, niente flash: il partner resta
       allocato nella griglia, ma è invisibile. */
    transition: opacity 0.15s linear !important;
}

/* ============================================
   9. ELENCO E LINK
   ============================================ */
#Elenco-IT, #Elenco-EN {
    margin-top: 20px !important;
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    text-align: center;
}

.ricetta-body {
    margin-top: 0 !important;
}

.link-ricetta {
    color: #0000ee !important;
    width: 100%;
    text-align: center;
    text-decoration: none;
    display: block;
    margin: 10px 0;
    transition: color 0.2s ease;
}

.link-ricetta:hover {
    color: #ff0000 !important;
    text-decoration: underline;
}

/* ============================================
   10. OVERLAY
   ============================================ */
.popup-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.4);
    z-index: 10999;
}

/* ============================================
   11. MOBILE (max 600px)

   Su mobile il popup occupa tutto lo schermo.
   Il layout è 1 colonna verticale (N righe).
   La tendina continua a funzionare lungo l'asse
   verticale della singola colonna: il pannello
   espanso copre quello superiore o quello
   inferiore (stessa logica del desktop, adattata).
   ============================================ */
@media (max-width: 600px) {
    html, body {
        overflow-x: hidden;
        width: 100%;
        position: relative;
    }

    .grid-container,
    .ricette-body .grid-container,
    .domains-body .grid-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 10px;
        gap: 12px;
        width: 100%;
        box-sizing: border-box;
    }

    .grid-item {
        aspect-ratio: 1 / 1;
        font-size: 28px;
        border-radius: 25px;
        padding: 12px;
        max-width: none;
    }

    .popup-container,
    .popup-container.layout-1,
    .popup-container.layout-2,
    .popup-container.layout-3,
    .popup-container.layout-4 {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        transform: none !important;
        background: transparent !important;
        border: none;
        z-index: 9999;
        overflow: hidden;
        pointer-events: none;
    }

    .popup-container.layout-1,
    .popup-container.layout-2,
    .popup-container.layout-3,
    .popup-container.layout-4 {
        display: none;
    }

    .popup-container.layout-1.aperto,
    .popup-container.layout-2.aperto,
    .popup-container.layout-3.aperto,
    .popup-container.layout-4.aperto {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        pointer-events: auto !important;
        z-index: 12000 !important;
    }

    #popupContent,
    .popup-container.layout-1 #popupContent,
    .popup-container.layout-2 #popupContent,
    .popup-container.layout-3 #popupContent,
    .popup-container.layout-4 #popupContent {
        display: grid !important;
        grid-template-columns: 1fr !important;
        /* 4 righe esplicite per ancorare i 4 pannelli in
           colonna singola. Senza questo la tendina non ha
           lo spazio per andare a span 2 senza far
           scattare l'auto-placement. */
        grid-template-rows: repeat(4, 1fr) !important;
        gap: 15px;
        width: 100% !important;
        height: 92vh !important;
        margin: 0 !important;
        padding: 15px !important;
        box-sizing: border-box;
    }

    /* ANCORAGGIO ESPLICITO MOBILE (1 colonna)
       Ogni pannello è fissato alla sua riga, così
       l'espanso può andare a span 2 senza spostare
       il partner. */
    #pannello1 { grid-area: 1 / 1 !important; }
    #pannello2 { grid-area: 2 / 1 !important; }
    #pannello3 { grid-area: 3 / 1 !important; }
    #pannello4 { grid-area: 4 / 1 !important; }

    .popup-container.doppio #popupContent {
        grid-template-rows: 1fr 1fr !important;
    }
    
    /* FIX layout-1/3 mobile: niente righe vuote allocate */
    .popup-container.layout-1 #popupContent {
        grid-template-rows: 1fr !important;
    }
    .popup-container.layout-3:not(.doppio) #popupContent {
        grid-template-rows: repeat(3, 1fr) !important;
    }

    .popup-container.full-screen #pannello1 {
        display: none !important;
    }

    .header-pannello {
        width: calc(100% + 30px);
        margin: -10px -15px 8px -15px;
        background: #ffffff !important;
        padding: 6px 12px;
        min-height: var(--mobile-header-height);
    }

    .header-pannello .resize-btn,
    .header-pannello .close-popup-btn {
        width: 34px;
        height: 34px;
    }

    .pannello-body {
        padding-top: 0;
    }

    .pannello {
        width: 100% !important;
        height: 100% !important;
        background: white !important;
        border: 2px solid #000 !important;
        border-radius: 25px !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 15px !important;
        box-sizing: border-box;
        overflow: hidden;
        font-family: 'Atwriter', Courier, monospace !important;
        font-size: 18px;
        line-height: 1.1;
        color: black !important;
        white-space: pre-wrap;
        scrollbar-width: none;
        position: relative;
    }

    .pannello::-webkit-scrollbar { display: none; }

    #Elenco-IT, #Elenco-EN {
        margin-top: 10px !important;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .link-ricetta {
        color: #0000ee !important;
        width: 100%;
        text-align: center;
        text-decoration: none;
        display: block;
        margin: 4px 0;
        font-size: 20px;
        cursor: pointer !important;
        padding: 12px 5px;
        pointer-events: auto !important;
        -webkit-tap-highlight-color: transparent;
    }

    .pannello[data-empty="true"] {
        display: none !important;
    }

    /* TENDINA SU MOBILE
       Coppie: 1↔2 e 3↔4. L'espanso va a span 2
       nella propria coppia, ancorato esplicitamente
       (override del grid-area desktop). */
    #pannello1.pannello-espanso,
    #pannello2.pannello-espanso {
        grid-area: 1 / 1 / span 2 / span 1 !important;
        z-index: var(--espanso-z) !important;
        box-shadow: 0 20px 60px rgba(0,0,0,0.55);
    }

    #pannello3.pannello-espanso,
    #pannello4.pannello-espanso {
        grid-area: 3 / 1 / span 2 / span 1 !important;
        z-index: var(--espanso-z) !important;
        box-shadow: 0 20px 60px rgba(0,0,0,0.55);
    }

    .pannello-coperto {
        opacity: 0 !important;
        pointer-events: none !important;
    }
} /* fine @media 600px */

/* ============================================
   12. MOBILE SMALL (max 480px)
   ============================================ */
@media (max-width: 480px) {
    .grid-container,
    .ricette-body .grid-container,
    .domains-body .grid-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        padding: 8px;
    }

    .grid-item {
        font-size: 21px;
        border-radius: 12px;
    }

    .pannello {
        font-size: 16px;
        line-height: 1.3;
        overflow-wrap: break-word;
    }

    .link-ricetta {
        font-size: 18px;
        margin: 12px 0;
        text-decoration: underline;
    }
} /* fine @media 480px */

/* ============================================
   13. DARK MODE
   ============================================ */
@media (prefers-color-scheme: dark) {
    body.index-body { background-color: #121212; }

    .grid-item {
        background-color: #1e1e1e;
        border: 1px solid #333;
        color: #ffffff !important;
    }

    .popup-container, .pannello {
        background-color: #1e1e1e !important;
        color: #e0e0e0 !important;
        border-color: #444 !important;
    }

    .header-pannello {
        background-color: #1e1e1e !important;
    }

    .link-ricetta { color: #bb86fc !important; }
    .link-ricetta:hover { color: #cf6679 !important; }
}