* { margin: 0; padding: 0; box-sizing: border-box; }

body, html { font-family: 'Inter', sans-serif; background: #fff; color: #000; height: 100vh; overflow: hidden; overflow-x: auto; }

/* LA GABBIA MASTER */
.layout-wrapper { display: flex; width: 100vw; min-width: 1100px; height: 100vh; position: fixed; top: 0; left: 0; }

/* 1. MENU */
.menu-column { width: 2vw; border-right: 1px solid #eaeaea; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; z-index: 1001; }
.menu-hamburger { cursor: pointer; display: flex; justify-content: center; gap: 4px; }
.line-v { width: 3px; height: 35px; border-radius: 10px; background: rgba(0,0,0,0.3); }

/* 2. COLONNA CENTRALE */
.left-column { width: 58vw; border-right: 1px solid #eaeaea; height: 100vh; overflow-y: auto; padding: 18vh 4vw 10vh 4vw; position: relative; -ms-overflow-style: none; scrollbar-width: none; }
.left-column::-webkit-scrollbar { display: none; }

/* 3. COLONNA DESTRA */
.right-column { width: 40vw; height: 100vh; overflow-x: auto; display: flex; -ms-overflow-style: none; scrollbar-width: none; background: #fff; }
.right-column.index-slider { width: 98vw; } 
.right-column::-webkit-scrollbar { display: none; }
.horizontal-scroll-container { display: flex; height: 100%; }

/* HEADER BOX BIANCO */
.top-nav-fixed { position: fixed; top: 0; left: 2vw; width: 58vw; height: 9vh; background: #fff; display: flex; align-items: center; padding: 0 4vw; z-index: 9999; }
.top-nav-fixed.index-header { width: 98vw; background: transparent; pointer-events: none; }
.top-nav-fixed.index-header a { pointer-events: auto; }

/* TITOLO E BREADCRUMB */
.site-title { font-weight: 800; font-size: 1.3vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.5px; width: 100%; }
.site-title a { color: #000; text-decoration: none; text-transform: uppercase; }
.site-title a.lowercase-bcn { text-transform: none; }
.breadcrumb-path { text-transform: lowercase; font-weight: 600; color: #444; }

/* CARDS */
.card-link { display: inline-block; height: 100%; width: 20vw; min-width: 280px; border-right: 1px solid #eaeaea; text-decoration: none; color: inherit; }
.week-card { height: 100%; padding: 4vh 2vw; position: relative; display: flex; flex-direction: column; justify-content: flex-end; }
.card-content { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.week-dates { font-size: 0.85rem; color: #555; margin-bottom: 5px; }
.week-title { font-size: 1.5vw; white-space: normal; font-weight: 400; line-height: 1.2; margin-bottom: 2vh; letter-spacing: -0.5px; }
.week-image { width: 100%; height: 25vh; background: #f4f4f4; overflow: hidden; flex-shrink: 0; }
.week-image img { width: 100%; height: 100%; object-fit: cover; }
.numero-gigante-dx { font-family: 'Roboto Mono', monospace; font-size: 7vw !important; color: #e6e6e6 !important; position: absolute; top: 12vh; right: 2vw; line-height: 0.8; z-index: 1; }

/* NUOVA TESTATA SETTIMANA (Data a SX, Numero a DX) */
.week-hero { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 8vh; }
.hero-date { font-family: 'Roboto Mono', monospace; font-size: 1rem; color: #888; margin-bottom: 0.8vw; }
.numero-gigante-sx { font-family: 'Roboto Mono', monospace; font-size: 8vw !important; color: #e6e6e6 !important; line-height: 0.75; margin: 0; position: static; }

/* TITOLO ANTRACITE E CAPITOLI */
.week-main-title { font-size: 1.6vw; font-weight: 800; color: #333333; text-transform: uppercase; letter-spacing: -0.5px; margin-bottom: 1vh; line-height: 1.1; }
.lowercase-text { text-transform: lowercase; }
.titolo-capitolo { font-size: 1.2vw; font-weight: 700; margin-top: 4vh; margin-bottom: 2vh; }
.content p { font-size: 1rem; line-height: 1.6; margin-bottom: 15px; color: #222; text-align: justify; }

/* RETTANGOLI STILE CODICE */
code { background-color: #f0f0f0; color: #333; font-family: 'Roboto Mono', monospace; font-size: 0.85em; padding: 3px 6px; border-radius: 4px; border: 1px solid #e4e4e4; white-space: nowrap; }

/* BASH TIPS & TABELLA WORKFLOW */
.bash-tip { background: #f4f4f4; border-left: 4px solid #000; padding: 12px 18px; font-family: 'Roboto Mono', monospace; font-size: 0.9rem; margin: 15px 0; color: #111; border-radius: 0 4px 4px 0; }
.bash-tip span { color: #666; font-size: 0.8rem; display: block; margin-bottom: 5px; text-transform: none; font-family: 'Inter', sans-serif;}
.workflow-table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 0.95rem; text-align: left; }
.workflow-table th { background: #f4f4f4; padding: 12px; font-weight: 700; border-bottom: 2px solid #000; text-transform: lowercase; }
.workflow-table td { padding: 12px; border-bottom: 1px solid #eaeaea; vertical-align: top; color: #333; }
.workflow-table strong { color: #000; font-weight: 600; }

/* UTILITÀ */
.evidenza { font-weight: 700; color: #000; }
.media-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin: 20px 0; }
.media-grid img { width: 100%; border-radius: 4px; }

.side-drawer { position: fixed; top: 0; left: -100%; width: 50vw; height: 100vh; background: #fff; z-index: 2000; transition: left 0.5s ease; padding: 100px; border-right: 1px solid #eaeaea; }
.side-drawer.open { left: 0; } 
.close-btn { position: absolute; top: 40px; right: 40px; font-size: 3rem; cursor: pointer; color: #000; }

/* =========================================
   MOBILE RESPONSIVE LAYOUT (Telefoni e Tablet)
   ========================================= */
@media screen and (max-width: 900px) {
    /* Sblocca lo scroll della pagina */
    body, html { height: auto; overflow: visible; overflow-x: hidden; }

    /* Rimuove il blocco fisso e la larghezza minima di 1100px */
    .layout-wrapper {
        position: static;
        display: flex;
        flex-direction: column;
        width: 100vw;
        min-width: 0;
        height: auto;
    }

    /* Menu orizzontale in alto */
    .menu-column { width: 100%; height: 60px; border-right: none; border-bottom: 1px solid #eaeaea; z-index: 1001; }

    /* Header (Titolo sito) si adatta */
    .top-nav-fixed { width: 100%; left: 0; top: 0; height: auto; padding: 20px; position: relative; border-bottom: 1px solid #eaeaea; }
    .site-title { font-size: 1.1rem; white-space: normal; line-height: 1.4; }

    /* Colonna centrale a tutto schermo */
    .left-column {
        width: 100%;
        height: auto;
        padding: 30px 20px;
        border-right: none;
        overflow-y: visible;
    }

    /* Ricalibra le font-size per il telefono (rimuove i vw che su telefono diventano minuscoli) */
    .week-main-title { font-size: 1.8rem; margin-top: 10px; }
    .titolo-capitolo { font-size: 1.4rem; margin-top: 30px; }
    .numero-gigante-sx { font-size: 4rem !important; }
    .numero-gigante-dx { font-size: 3.5rem !important; top: 20px; }
    .week-title { font-size: 1.4rem; }
    .hero-date { margin-bottom: 5px; }

    /* Slider inferiore */
    .right-column {
        width: 100%;
        height: auto;
        padding: 20px 0 40px 0;
        border-top: 1px solid #eaeaea;
    }
    .horizontal-scroll-container { flex-direction: row; overflow-x: auto; padding: 10px 20px; gap: 15px; }
    .card-link { flex: 0 0 85%; width: 85%; min-width: 0; border-right: none; border: 1px solid #eaeaea; border-radius: 8px; overflow: hidden; }
    .week-card { padding: 25px 20px; }

    /* Fix per immagini affiancate */
    .image-row { flex-direction: column; }
    .image-row img, .image-row video { width: 100%; }
    .media-grid { grid-template-columns: 1fr; }
    
    .side-drawer { width: 100vw; padding: 50px 30px; }
}