/* ================================
           VARIABILI GLOBALI LAYOUT
           ================================ */
        :root {
            /* Colori specifici per sezione/
            --editoriali-color: #e79d3c;
            --evidenza-color: #e74c3c;
            --ultimi-color: #27ae60;
            /*/
            --editoriali-color: red;
            --evidenza-color: red;
            --ultimi-color: red;

            /* Layout variables */
            --homepage-gap: 0.5rem;
            --homepage-margin: 0.5rem;
            --homepage-border-radius: 10px;
            --homepage-shadow: 0 2px 10px rgba(0,0,0,0.1);
            --homepage-shadow-hover: 0 4px 15px rgba(0,0,0,0.1);
            --homepage-transition: all 0.3s ease;

            /* Altezza sezioni desktop */
            --section-height: calc(100vh - var(--nav-height) - var(--footer-collapsed-height) - var(--admin-bar-heigth));

            /* Altezze per header fissi */
            --section-header-height: 60px;
        }

        /* ================================
           GRID LAYOUT PRINCIPALE HOMEPAGE
           ================================ */
        #page{
            width: 98vw;
            max-width: 100vw;
        }

        .homepage-grid {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: var(--homepage-gap);
            margin: var(--homepage-margin);
            min-height: var(--homepage-min-height);
        }

        /* Definizione delle grid areas */
        .carousel-section {
            grid-column: 1 / -1;
            grid-row: span 2;
            /*margin-bottom: 1rem;*/
        }

        .editoriali-section,
        .evidenza-section,
        .ultimi-section
        {
	        height: var(--section-height);
            overflow: auto; /* con hidden la section non scrollava, delegava al container */
        }

        @media screen and (min-width: 1025px) and (max-height: 770px) {
            .editoriali-section,
            .evidenza-section,
            .ultimi-section
            {
                height: calc(var(--section-height) + 150px);
            }
        }

        .editoriali-section {
            grid-column: span 3;
        }

        .evidenza-section {
            grid-column: span 6;
        }

        .ultimi-section {
            grid-column: span 3;
        }

        /* ================================
           RESPONSIVE DESIGN
           ================================ */
        /* Quando la sezione Ultimi non riesce a
           contenere il testo a destra dell'immagine*/
        @media (min-width: 1024px) and (max-width: 1500px) {
            .recent-item {
                flex-direction: column;   /* immagine sopra, testo sotto */
                text-align: left;         /* testo allineato a sinistra */
            }

            .recent-thumbnail {
                width: 100% !important;
                height: 140px;
                align-self: stretch;      /* larghezza piena */
            }
        }

        /* Tablet (≤1024px) */
        @media (max-width: 1024px) {
            :root {
                /* Ridefinisce --section-height sottraendo gli elementi aggiuntivi mobile */
                --section-height: calc(100vh - var(--nav-height) - var(--footer-collapsed-height) - var(--admin-bar-heigth) - var(--head-1024-height) - var(--carousel-thumbnail-height) - 200px);
            }

            .editoriali-section,
            .evidenza-section,
            .ultimi-section {
                grid-column: span 12;
                /*max-height: 400px;*/
                min-height: 300px;
            }
        }

        /* Accordion tablet+mobile (≤1024px)
           Architettura scroll:
           - La SECTION è il contenitore che scrolla (overflow-y: auto, max-height: 70vh)
           - Il TITOLO è sticky rispetto alla section (position: sticky, top: 0)
           - La > DIV anima su max-height/padding ma non gestisce lo scroll
        ================================ */
        @media (max-width: 1024px) {

            /* SECTION aperta: scroll container con altezza massima */
            .editoriali-section,
            .evidenza-section,
            .ultimi-section {
                grid-column:  1 / -1               !important;
                grid-row:     auto                 !important;
                height:       auto                 !important;
                min-height:   0                    !important;
                max-height: var(--section-height);
                overflow-x:   hidden               !important;
                overflow-y:   auto                 !important;  /* scroll sulla section */
                transition:   box-shadow 0.3s ease !important;  /* evita artefatti su transition:all */
            }

            /* SECTION collassata: niente scroll, si riduce al titolo */
            .editoriali-section.section-collapsed,
            .evidenza-section.section-collapsed,
            .ultimi-section.section-collapsed {
                overflow:   hidden !important;
                max-height: none   !important;
            }

            /* TITOLO: sticky rispetto alla section che scrolla */
            .editoriali-section .section-title,
            .evidenza-section   .section-title,
            .ultimi-section     .section-title {
                /*display:          flex;*/
                justify-content:  space-between;
                align-items:      center;
                cursor:           pointer;
                user-select:      none;
                position:         sticky;
                top:              0;
                z-index:          10;
            }

            /* Outline solo da tastiera, non al click del mouse/tap */
            .editoriali-section .section-title:focus,
            .evidenza-section   .section-title:focus,
            .ultimi-section     .section-title:focus {
                outline: none;
            }

            .editoriali-section .section-title:focus-visible,
            .evidenza-section   .section-title:focus-visible,
            .ultimi-section     .section-title:focus-visible {
                outline:        2px solid currentColor;
                outline-offset: 2px;
            }

            /* CHEVRON: aperto = rotate(180deg) = ∧, chiuso = rotate(0deg) = ∨ */
            .section-toggle-chevron {
                flex-shrink: 0;
                margin-left: 0.5rem;
                color:       inherit;
                transform:   rotate(180deg);
                transition:  transform 0.35s ease;
            }

            .section-collapsed .section-toggle-chevron {
                transform: rotate(0deg);
            }

            /* > DIV: anima apertura/chiusura su max-height e padding.
               overflow-y: visible per non interferire con lo scroll della section. */
            .editoriali-section > div,
            .evidenza-section   > div,
            .ultimi-section     > div {
                overflow:   hidden;
                overflow-y: visible;
                transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                padding    0.4s cubic-bezier(0.4, 0, 0.2, 1);
            }

            /* > DIV collassata: azzera il padding per eliminare spazio residuo */
            .editoriali-section.section-collapsed > div,
            .evidenza-section.section-collapsed   > div,
            .ultimi-section.section-collapsed     > div {
                padding-top:    0;
                padding-bottom: 0;
            }
        }

        /* ================================
           STRUTTURA COMUNE PER TUTTE LE SEZIONI
           ================================ */

        /* Tutte le sezioni hanno ora la stessa struttura con header fisso */
        .editoriali-section,
        .evidenza-section,
        .ultimi-section {
            flex-grow: 1;
            /*overflow-y: auto; /* Cambiato da visible */
            overflow-x: hidden;
            /* resto invariato */
            background: white;
            border-radius: var(--homepage-border-radius);
            box-shadow: var(--homepage-shadow);
            transition: var(--homepage-transition);
            display: flex;
            flex-direction: column;
        }
        .editoriali-section:hover,
        .evidenza-section:hover,
        .ultimi-section:hover {
            box-shadow: var(--homepage-shadow-hover);
        }
        /* ================================
           STILI COMUNI HEADER SEZIONI
           ================================ */
        .section-title {
            font-size: clamp(1rem,2vh,1.5rem);
            /*font-size: 1.5rem;*/
            font-weight: 700;
            /*text-transform: uppercase;*/
            letter-spacing: 0.5px;
            /* Header fisso */
            position: sticky;
            top: 0;
            background: white;
            z-index: 10;
            margin: 0;
            padding: 1.5vh 2vw;
            border-bottom: 3px solid;
            cursor: grab;
        }
        .editoriali-section .section-title {
            color: var(--editoriali-color);
            border-bottom-color: var(--editoriali-color);
            border-bottom: 3px solid var(--editoriali-color);
        }

        .evidenza-section .section-title {
            color: var(--evidenza-color);
            border-bottom-color: var(--evidenza-color);
            border-bottom: 3px solid var(--evidenza-color);
        }

        .ultimi-section .section-title {
            color: var(--ultimi-color);
            border-bottom-color: var(--ultimi-color);
            border-bottom: 3px solid var(--ultimi-color);
        }