/* ==========================================================================
   articolo.css - impaginazione degli articoli del blog
   Lo caricano le pagine che usano .blog-details-area. Si chiamava
   guida-cin.css finche' l'articolo era uno solo.
   ========================================================================== */

/* Nel template questa pagina aveva una foto a tutta larghezza fra il blocco
   dell'autore e il testo, e lo stacco lo faceva lei: .blog-details-area
   .image-wrapper vale 89px sopra e 50px sotto (59+40 sotto i 1919px, 29+30
   sotto i 1199px). Tolta la foto, i due blocchi si toccavano: la distanza
   misurata era 0px. Qui si rimette il respiro, agli stessi scalini ma dimezzato:
   139/99/59 era la distanza giusta attorno a una foto, troppa senza. */
.blog-details-area .section-details {
    margin-top: 70px;
}

@media only screen and (max-width: 1919px) {
    .blog-details-area .section-details {
        margin-top: 50px;
    }
}

@media only screen and (max-width: 1199px) {
    .blog-details-area .section-details {
        margin-top: 30px;
    }
}

/* I due tasti in fondo. .btn-wrapper non ha regole proprie in style.css e le
   altre sedici pagine lo usano con un tasto solo: la regola sta qui, dove
   tocca questa pagina e basta. Senza il flex i due .rr-btn — che sono
   inline-flex — si toccherebbero, separati dal solo spazio fra due parole. */
.blog-details-area .btn-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 35px;
}

/* I link dentro il testo. Nel template prendono il colore del paragrafo e
   restano senza sottolineatura: su fondo scuro sono indistinguibili dal resto
   e nessuno li clicca. Qui prendono il giallo del marchio (--theme) e la
   sottolineatura, staccata di qualche pixel perche' non tagli le lettere. */
.blog-details-area .section-details .text a,
.blog-details-area .section-details .feature-list a {
    color: var(--theme);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.blog-details-area .section-details .text a:hover,
.blog-details-area .section-details .feature-list a:hover {
    text-decoration-thickness: 2px;
}

/* Il filo sopra la riga dell'autore. Nelle altre pagine (Chi siamo, la home)
   ogni blocco di testo parte da un filo sottile a tutta larghezza del
   contenitore: e' quello che tiene allineato a sinistra il titolo con il
   resto della pagina. Qui il titolo stava da solo, e sui display larghi —
   dove il testo dell'articolo, piu' stretto, comincia molto piu' a destra —
   il blocco sembrava fuori asse. Stesso filo e stesso colore della pagina
   Chi siamo (.about-area-details .section-header). */
.blog-details-area .section-header .meta {
    border-top: 1px solid var(--border);
    padding-top: 15px;
}

@media only screen and (max-width: 1199px) {
    .blog-details-area .section-header .meta {
        padding-top: 10px;
    }
}