/* =========================================================
   IMPOSTAZIONI GENERALI
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: #d8d5cd;
    color: #111;
    font-family: Georgia, "Times New Roman", serif;
}


/* =========================================================
   CONTENITORE DEL GIORNALE
   ========================================================= */

.giornale {
    width: min(1100px, 94%);
    margin: 40px auto;
}


/* =========================================================
   SINGOLA PAGINA
   ========================================================= */

.pagina {
    position: relative;

    background:
        linear-gradient(
            rgba(255,255,255,0.78),
            rgba(255,255,255,0.78)
        ),
        url("https://www.transparenttextures.com/patterns/paper-fibers.png");

    padding: 55px 65px 45px;

    margin-bottom: 45px;

    box-shadow:
        0 8px 25px rgba(0,0,0,0.18);

    min-height: 1000px;
}


/* =========================================================
   TESTATA
   ========================================================= */

.testata {
    border-top: 2px solid #111;
    border-bottom: 2px solid #111;

    padding: 8px 0;

    display: flex;
    justify-content: space-between;
    align-items: center;

    font-size: 15px;
    letter-spacing: 0.5px;
}

.testata-centro {
    font-weight: bold;
    text-transform: uppercase;
}


/* =========================================================
   PRIMA PAGINA
   ========================================================= */

.prima-pagina .nome-giornale {
    font-size: clamp(48px, 8vw, 90px);
    line-height: 0.95;

    text-align: center;

    margin: 25px 0 15px;

    font-weight: 900;
    text-transform: uppercase;

    letter-spacing: -2px;
}

.linea {
    height: 2px;
    background: #111;
    margin-bottom: 18px;
}


/* =========================================================
   TITOLI
   ========================================================= */

.titolo-principale {
    text-align: center;

    font-size: clamp(32px, 5vw, 55px);

    margin: 15px 0 25px;

    line-height: 1.05;
}

.titolo-articolo {
    font-size: 34px;
    line-height: 1.05;

    margin: 0 0 15px;
}

.sottotitolo {
    font-size: 18px;
    font-style: italic;

    margin-bottom: 20px;
}


/* =========================================================
   TESTO
   ========================================================= */

p {
    font-size: 17px;
    line-height: 1.45;

    margin-top: 0;
    margin-bottom: 18px;

    text-align: justify;
}

.capolettera::first-letter {
    float: left;

    font-size: 55px;
    line-height: 42px;

    padding-right: 6px;

    font-weight: bold;
}


/* =========================================================
   COLONNE
   ========================================================= */

.colonne {
    display: grid;

    grid-template-columns: 1.15fr 0.85fr;

    gap: 35px;

    align-items: start;
}

.colonne-uguali {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 35px;

    align-items: start;
}


/* =========================================================
   IMMAGINI
   ========================================================= */

.foto {
    width: 100%;
    display: block;

    filter: none;

    margin-bottom: 12px;
}

.didascalia {
    font-size: 13px;
    font-style: italic;

    margin-bottom: 20px;
    line-height: 1.3;
}


/* =========================================================
   PRIMA PAGINA - SOMMARIO
   ========================================================= */

.sommario {

    display: grid;

    grid-template-columns: 1fr 0.42fr;

    gap: 28px;

    align-items: start;

}


/* =========================================================
   ARTICOLI DEL SOMMARIO
   ========================================================= */

.articoli-sommario {

    display: grid;

    grid-template-columns: 1fr 1fr;

    column-gap: 30px;

    row-gap: 25px;

}


/* Singolo articolo */

.articolo-sommario {

    border-bottom: 1px solid #111;

    padding-bottom: 18px;

}


/* Titolo */

.articolo-sommario h2 {

    font-size: 28px;

    line-height: 1.05;

    margin: 0 0 12px;

}


/* Testo */

.articolo-sommario p {

    font-size: 16px;

    line-height: 1.35;

    margin-bottom: 10px;

}


/* Numero pagina */

.numero-articolo {

    font-size: 13px;

    font-weight: bold;

    margin-top: 12px;

    text-transform: uppercase;

}


/* =========================================================
   EDITORIALE
   ========================================================= */

.editoriale {

    border: 2px solid #111;

    padding: 15px 20px;

}


.editoriale h2 {

    text-align: center;

    font-size: 30px;

    margin: 0 0 20px;

}


.editoriale img {

    width: 100%;

    display: block;

    margin-bottom: 18px;

    filter: grayscale(100%);

}


.editoriale p {

    font-size: 15px;

    line-height: 1.35;

}


/* =========================================================
   BOX IN FONDO
   ========================================================= */

.prima-pagina .risalto {

    margin-top: 28px;

}


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

@media (max-width: 700px) {

    .sommario {

        grid-template-columns: 1fr;

    }


    .articoli-sommario {

        grid-template-columns: 1fr;

    }


    .editoriale {

        margin-top: 10px;

    }

}

/* =========================================================
   RIQUADRO SPECIALE
   ========================================================= */

.risalto {
    border: 2px solid #111;

    padding: 12px;

    margin-top: 25px;

    display: grid;

    grid-template-columns: 0.8fr 1.2fr;

    gap: 25px;

    align-items: center;
}

.risalto img {
    width: 100%;
    display: block;
}

.risalto p {
    margin: 0;
}


/* =========================================================
   SEPARATORE
   ========================================================= */

.separatore {
    border: 0;
    border-top: 1px solid #111;

    margin: 30px 0;
}


/* =========================================================
   BOX ARTICOLO BREVE
   ========================================================= */

.box-articolo {
    margin-bottom: 25px;
}

.box-articolo h3 {
    font-size: 24px;
    margin: 0 0 10px;
}


/* =========================================================
   CITAZIONE
   ========================================================= */

.citazione {
    border-left: 4px solid #111;

    padding-left: 18px;

    font-size: 23px;
    font-style: italic;

    margin: 25px 0;
}


/* =========================================================
   PIÈ DI PAGINA
   ========================================================= */

.footer {
    border-top: 2px solid #111;

    margin-top: 35px;
    padding-top: 12px;

    display: flex;
    justify-content: space-between;

    font-size: 15px;
}


/* =========================================================
   LINK
   ========================================================= */

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}


/* =========================================================
   PAGINE SUCCESSIVE
   ========================================================= */

.pagina-successiva {
    padding-top: 45px;
}

.pagina-successiva .testata {
    margin-bottom: 105px;
}

.pagina-successiva .titolo-articolo {
    font-size: clamp(32px, 5vw, 48px);

    text-align: center;

    margin-bottom: 30px;
}


/* =========================================================
   INDICE
   ========================================================= */

.indice {
    border-top: 1px solid #111;
    border-bottom: 1px solid #111;

    padding: 20px 0;

    margin: 25px 0 35px;
}

.indice h2 {
    margin-top: 0;
}

.indice-riga {
    display: flex;
    justify-content: space-between;

    border-bottom: 1px dotted #555;

    padding: 7px 0;
}


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

@media (max-width: 700px) {

    .giornale {
        width: 100%;
        margin: 0;
    }

    .pagina {
        padding: 30px 22px;
        margin-bottom: 20px;

        min-height: auto;

        box-shadow: none;
    }

    .testata {
        font-size: 12px;
    }

    .prima-pagina .nome-giornale {
        font-size: 44px;
        letter-spacing: -1px;
    }

    .titolo-principale {
        font-size: 34px;
    }

    .titolo-articolo {
        font-size: 28px;
    }

    .articolo-principale,
    .colonne,
    .colonne-uguali,
    .risalto {
        grid-template-columns: 1fr;
    }

    .pagina-successiva .testata {
        margin-bottom: 55px;
    }

    p {
        font-size: 16px;
    }

    .citazione {
        font-size: 20px;
    }

    .footer {
        font-size: 12px;
    }
}


/* ========================================================= PAGINA FOTOGRAFICA - STILE EDITORIALE ========================================================= */ .pagina-fotografica .titolo-articolo { margin-bottom: 10px; } 
.introduzione-foto { text-align: center; width: 70%; margin: 0 auto 35px; font-size: 16px; font-style: italic; } /* --------------------------------------------------------- CONTENITORE FOTOGRAFIE --------------------------------------------------------- */ 
.galleria-editoriale { display: grid; 
grid-template-columns:repeat(12, 1fr); 
gap: 28px 20px; 
align-items: start; } 
/* --------------------------------------------------------- FOTO BASE --------------------------------------------------------- */ .foto-editoriale { margin: 0; } 
.foto-editoriale img { width: 100%; 
display: block; 
aspect-ratio: 4 / 3; 
object-fit: cover; 
filter: none; } 
/* --------------------------------------------------------- DIDASCALIA --------------------------------------------------------- */ 
.foto-editoriale figcaption { font-size: 12px; line-height: 1.25; 
font-style: italic; margin-top: 7px;
padding-bottom: 7px; 
border-bottom: 1px solid #111; } 
/* ========================================================= DIMENSIONI DELLE FOTO ========================================================= */ /* Foto piccola */ .foto-piccola { grid-column: span 3; } 
/* Foto media */ 
.foto-media { grid-column: span 4; } 
/* Foto grande */
.foto-grande { grid-column: span 5; } 
/* Foto molto larga */ 
.foto-larga { grid-column: span 6; } 
/* --------------------------------------------------------- FOTO VERTICALI --------------------------------------------------------- */ 
.foto-verticale img { aspect-ratio: 3 / 4; } 
/* --------------------------------------------------------- MOBILE --------------------------------------------------------- */ @media (max-width: 700px) { .galleria-editoriale { grid-template-columns: repeat(2, 1fr); 
gap: 20px 14px; } 
.foto-piccola, 
.foto-media, 
.foto-grande,
.foto-larga { grid-column: span 1; } 
.foto-larga { grid-column: span 2; } 
.introduzione-foto { width: 100%; } }