/*
 * /voce-agli-esperti/ — stile proprio della pagina. Si accoda dopo
 * ii-pagine.css e vale solo dentro [data-ii="voce-agli-esperti"].
 *
 * Valori dal CSS inline del mockup riferimento/voce-agli-esperti.html.
 * Qui stanno soltanto i pezzi che i blocchi condivisi non hanno (la strip dei
 * temi) e gli scostamenti di questa pagina dai valori condivisi (le
 * proporzioni dell'hero con il modulo accanto, il passo delle sezioni, il
 * titolo piu' piccolo della fascia fonti).
 *
 * Solo selettori di classe: il global-settings.css di Oxygen viene servito
 * dopo questo foglio.
 */

/* ------------------------------------------------------------------- hero */

/*
 * Nell'hero condiviso testo e lato pesano uguale; qui il mockup da' piu' spazio
 * all'h1 (flex 1.5 1 520px) e tiene il modulo a 340px.
 */
[data-ii="voce-agli-esperti"] .ii-heroin__testo {
    flex: 1.5 1 520px;
}

[data-ii="voce-agli-esperti"] .ii-heroin__p {
    max-width: 620px;
}

/* ---------------------------------------------------------- strip dei temi */

/*
 * Fascia bianca con il filetto sotto, fra l'hero navy e l'articolo in
 * evidenza. Le voci sono <li>, non <button>: nel mockup i filtri non
 * funzionano (vedi il blocco voce-agli-esperti-filtri). Il disegno e' quello
 * dei pulsanti del mockup, percio' quando diventeranno filtri veri il CSS
 * resta questo.
 */
[data-ii="voce-agli-esperti"] .ii-ve-filtri {
    background: var(--ii-bianco);
    border-bottom: 1px solid var(--ii-bordo);
}

[data-ii="voce-agli-esperti"] .ii-ve-filtri__in {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding-top: 16px;
    padding-bottom: 16px;
}

[data-ii="voce-agli-esperti"] .ii-ve-filtri__l {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ii-grigio-testo);
    margin-right: 8px;
}

[data-ii="voce-agli-esperti"] .ii-ve-temi {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Il margine va dichiarato: i <li> non sono nel reset condiviso. */
[data-ii="voce-agli-esperti"] .ii-ve-tema {
    display: inline-flex;
    align-items: center;
    margin: 0;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--ii-bordo-grigio);
    border-radius: 0;
    background: var(--ii-bianco);
    color: var(--ii-navy);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
}

[data-ii="voce-agli-esperti"] .ii-ve-tema--attivo {
    background: var(--ii-navy);
    border-color: var(--ii-navy);
    color: var(--ii-bianco);
}

/* --------------------------------------------------------------- griglia */

/*
 * Il passo di questa pagina non e' quello standard: l'articolo in evidenza
 * apre a clamp(48-72px) e chiude col proprio filetto navy (ii-sec--stretta +
 * ii-sec--senza-sotto, dal file di contenuto), la griglia apre a 48-72px e
 * chiude a 64-96px prima della fascia grigia.
 */
[data-ii="voce-agli-esperti"] .ii-ve-arts {
    padding: clamp(48px, 6vw, 72px) 0 clamp(64px, 8vw, 96px);
}

[data-ii="voce-agli-esperti"] .ii-ve-arts .ii-art__coda .ii-art__p {
    font-size: 14.5px;
}

/* Il titolo della tessera "Temi 1-8" e' serif, non un testo. */
[data-ii="voce-agli-esperti"] .ii-ve-arts .ii-art__coda .ii-art__coda-t {
    font-family: var(--ii-serif);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ii-navy);
}

/* ----------------------------------------------------------- fascia fonti */

/*
 * Titolo e paragrafo affiancati e allineati al centro, non in basso come la
 * testata standard; h2 piu' piccolo (24-30px) e paragrafo largo 440px.
 */
[data-ii="voce-agli-esperti"] .ii-ve-fonti__h {
    align-items: center;
    gap: 24px 64px;
}

[data-ii="voce-agli-esperti"] .ii-ve-fonti__h .ii-shead__testo {
    flex: 1 1 320px;
    max-width: none;
}

[data-ii="voce-agli-esperti"] .ii-ve-fonti__h .ii-h2 {
    font-size: clamp(24px, 2.2vw, 30px);
    line-height: 1.2;
}

[data-ii="voce-agli-esperti"] .ii-ve-fonti__h .ii-shead__p--lato {
    flex: 1.5 1 440px;
    max-width: none;
    font-size: 16px;
}

/* ------------------------------------------------------------- responsive */

/*
 * Il mockup e' tutto fluido e non ha media query, e a 390px regge: la strip
 * dei temi va a capo da sola, la griglia scende a una colonna, il modulo
 * dell'hero tiene input e bottone sulla stessa riga (flex 1 1 200px con
 * wrap) e niente esce dallo schermo. L'unico ritocco e' il titolo della
 * tessera "Temi 1-8", che a 22px manda a capo le parole lunghe.
 *
 * Attenzione a non impilare .ii-news__riga con flex-direction: column: il
 * flex-basis 200px dell'input diventerebbe altezza e il campo crescerebbe a
 * 200px.
 */
@media (max-width: 560px) {
    [data-ii="voce-agli-esperti"] .ii-ve-arts .ii-art__coda .ii-art__coda-t {
        font-size: 20px;
    }
}