/* =======================================================================
 * 3.8.0 — LA COLONNA LATERALE DEGLI ARTICOLI
 *
 * Un impianto solo per tutti gli articoli, a tre corsie, costruito sul server
 * da IEF_Colonna_Laterale:
 *
 *     | sinistra 260 | 48 | TESTO 44rem | 48 | destra 260 |   = 1320 px
 *
 * Il testo resta sempre a 44rem (la misura di lettura del tema): con l'indice
 * non si allarga piu' a 958 px, senza indice non galleggia nel bianco.
 * Sotto i 1200 px la corsia destra scende sotto il testo; sotto i 900 px
 * l'articolo torna a una colonna.
 *
 * Gli spigoli sono vivi e i filetti netti, come nel tema dalla 1.0.0.
 * ======================================================================= */

.ief-articolo-griglia {
    --ief-col-lato: 260px;
    --ief-col-spazio: 48px;
    --ief-col-testo: 44rem;
    --ief-col-cima: 118px;
    display: grid;
    grid-template-columns: var(--ief-col-lato) minmax(0, var(--ief-col-testo)) var(--ief-col-lato);
    column-gap: var(--ief-col-spazio);
    justify-content: center;
    align-items: stretch;
    --ief-col-larghezza: min(var(--ief-layout-width, 1320px), calc(100vw - 30px));
    box-sizing: border-box;
    width: var(--ief-col-larghezza);
    max-width: none;
    /* Esce dalla colonna di lettura del tema e si centra con i margini, non
     * con transform: un transform farebbe da riferimento a qualunque elemento
     * «position: fixed» dentro il testo (finestre, ingrandimenti, video). */
    margin: clamp(40px, 5vw, 64px) 0 0 calc(50% - var(--ief-col-larghezza) / 2);
}

.admin-bar .ief-articolo-griglia { --ief-col-cima: 150px; }

.ief-articolo-testo { grid-column: 2; min-width: 0; }
.ief-articolo-testo > :first-child { margin-top: 0; }

.ief-corsia { min-width: 0; }
.ief-corsia--sinistra { grid-column: 1; grid-row: 1; }
.ief-corsia--destra { grid-column: 3; grid-row: 1; }

/* L'altezza della riga la decide il testo, non le corsie. Con «contain: size»
 * una corsia conta zero nel calcolo della riga e si allunga poi fino alla sua
 * altezza: cosi' la colonna finisce dove finisce il testo e lo script sa
 * quanti widget ci stanno. Quello che avanza e' tagliato. L'indice no: e' la
 * guida del testo e non si taglia. */
.ief-corsia--destra,
.ief-corsia--condivisione { contain: size; overflow: clip; overflow-clip-margin: 24px; }

/* ------------------------------------------------- la corsia di sinistra */

.ief-corsia--sinistra .ief-corsia__fermo,
.ief-corsia--indice .ief-toc--sticky { position: sticky; top: var(--ief-col-cima); }
.ief-corsia--indice .ief-toc { margin: 0; max-width: none; }

.ief-corsia__lettura {
    margin: 0 0 22px;
    padding: 0 0 16px;
    border-bottom: 1px solid rgb(var(--ief-shadow-rgb, 0 0 0) / 0.12);
    font-family: var(--ief-font-heading, Georgia, serif);
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ief-ink-soft, #5b544c);
}

.ief-corsia__numero {
    display: block;
    font-size: 2.6rem;
    line-height: 1;
    letter-spacing: 0;
    color: var(--ief-ink, #171717);
}

.ief-corsia--condivisione .ief-single-share { margin: 0; padding: 0; border: 0; width: auto; }
.ief-corsia--condivisione .ief-single-actions-label { margin: 0 0 10px; }
.ief-corsia--condivisione .ief-single-share-list { display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
.ief-corsia--condivisione .ief-single-share-link {
    justify-content: flex-start;
    width: 100%;
    min-height: 34px;
    padding: 4px 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 0.86rem;
}
.ief-corsia--condivisione .ief-single-share-link:hover,
.ief-corsia--condivisione .ief-single-share-link:focus-visible { background: rgb(var(--ief-shadow-rgb, 0 0 0) / 0.05); color: var(--ief-accent, #8b0000); }

/* --------------------------------------------------- la corsia di destra */

.ief-corsia--destra .ief-corsia__fermo.is-fermo { position: sticky; top: var(--ief-col-cima); }

.ief-widget {
    padding: 14px 0 26px;
    border-top: 2px solid var(--ief-ink, #171717);
    font-size: 0.92rem;
    line-height: 1.5;
}
.ief-widget + .ief-widget { margin-top: 4px; }
.ief-widget[hidden] { display: none; }

.ief-widget__titolo {
    margin: 0 0 14px;
    font-family: var(--ief-font-heading, Georgia, serif);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ief-accent, #8b0000);
}

.ief-widget__sottotitolo {
    margin: 18px 0 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ief-ink-soft, #5b544c);
}

.ief-widget__elenco { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ief-widget__elenco li { display: grid; gap: 2px; }
.ief-widget__elenco a {
    font-family: var(--ief-font-heading, Georgia, serif);
    font-size: 0.98rem;
    line-height: 1.32;
    font-weight: 600;
    color: var(--ief-ink, #171717);
    text-decoration: none;
}
.ief-widget__elenco a:hover,
.ief-widget__elenco a:focus-visible { color: var(--ief-accent, #8b0000); text-decoration: underline; }
.ief-widget__data { font-size: 0.76rem; color: var(--ief-ink-soft, #6b6760); }

.ief-widget__elenco--numerato { counter-reset: ief-letti; gap: 14px; }
.ief-widget__elenco--numerato li { grid-template-columns: 28px minmax(0, 1fr); align-items: start; counter-increment: ief-letti; }
.ief-widget__elenco--numerato li::before {
    content: counter(ief-letti);
    font-family: var(--ief-font-heading, Georgia, serif);
    font-size: 1.6rem;
    line-height: 1;
    color: var(--ief-accent, #8b0000);
}

.ief-widget__persona { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; color: inherit; text-decoration: none; }
.ief-widget__foto { width: 64px; height: 64px; object-fit: cover; border-radius: 50%; filter: grayscale(0.15); }
.ief-widget__nome { display: block; font-family: var(--ief-font-heading, Georgia, serif); font-size: 1.08rem; font-weight: 700; color: var(--ief-ink, #171717); }
.ief-widget__persona:hover .ief-widget__nome { color: var(--ief-accent, #8b0000); }
.ief-widget__qualifica { display: block; font-size: 0.8rem; color: var(--ief-ink-soft, #6b6760); }
.ief-widget__bio { margin: 12px 0 0; color: var(--ief-ink-soft, #3f3a35); }

.ief-widget__copertina { display: grid; gap: 10px; color: inherit; text-decoration: none; }
.ief-widget__copertina img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.ief-widget__titolo-articolo { font-family: var(--ief-font-heading, Georgia, serif); font-size: 1.12rem; line-height: 1.28; font-weight: 700; color: var(--ief-ink, #171717); }
.ief-widget__copertina:hover .ief-widget__titolo-articolo { color: var(--ief-accent, #8b0000); }

.ief-widget__frase { margin: 0 0 14px; font-family: var(--ief-font-heading, Georgia, serif); font-size: 1.02rem; line-height: 1.4; color: var(--ief-ink, #171717); }
.ief-widget__bottone {
    display: inline-block;
    padding: 9px 16px;
    background: var(--ief-accent, #8b0000);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
}
.ief-widget__bottone:hover,
.ief-widget__bottone:focus-visible { background: var(--ief-ink, #171717); color: #fff; }
.ief-widget--sostieni,
.ief-widget--newsletter { border-top-color: var(--ief-accent, #8b0000); }

/* ----------------------------------------------- schermi medi e piccoli */

@media (max-width: 1199px) {
    .ief-articolo-griglia {
        --ief-col-lato: 220px;
        --ief-col-spazio: 40px;
        grid-template-columns: var(--ief-col-lato) minmax(0, var(--ief-col-testo));
    }

    .ief-corsia--destra { grid-column: 2; grid-row: 2; margin-top: 48px; contain: none; overflow: visible; }
    .ief-corsia--destra .ief-corsia__fermo,
    .ief-corsia--destra .ief-corsia__fermo.is-fermo { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
    .ief-widget[hidden] { display: block; }
}

@media (max-width: 899px) {
    .ief-articolo-griglia {
        display: block;
        width: 100%;
        margin: 28px 0 0;
    }

    .ief-corsia--condivisione,
    .ief-corsia--destra { display: none; }

    .ief-corsia--indice .ief-toc--sticky { position: static; }
    .ief-corsia--indice .ief-toc { margin-bottom: 28px; }
}

@media print {
    .ief-corsia { display: none !important; }
    .ief-articolo-griglia { display: block; width: auto; margin: 0; }
}