/* ==========================================================================
   TQ Widgets — stili pubblici
   Le variabili --tqw-* possono essere sovrascritte dal widget Elementor
   (attributo style inline) o dal tema.
   ========================================================================== */
/* Colori presi dai token del Figma "Restyling 2026":
   tq_titoli, tq_main, tq_accent-principale, tq_testo,
   tq_sfondo-beige, tq_sfondo-light. */
:root {
    --tqw-navy:        #1F3A5F;   /* tq_titoli */
    --tqw-navy-soft:   #2B3A67;
    --tqw-link:        #014F9C;   /* tq_main */
    --tqw-giallo:      #FFB800;   /* tq_accent-principale */
    --tqw-testo:       #1A1A1A;   /* tq_testo */
    --tqw-testo-soft:  #6b7280;
    --tqw-testo-2:     #5b6472;   /* tq-testo-secondario */
    --tqw-rosso:       #EC0033;   /* etichetta di rubrica */
    --tqw-rosso-scuro: #AC140D;   /* etichetta sulla foto: sopra una foto
                                     chiara il rosso acceso sbiadisce */
    --tqw-bordo:       #e5e7eb;
    --tqw-beige:       #F8F4EA;   /* tq_sfondo-beige */
    --tqw-azzurro:     #EEF4FA;   /* tq_sfondo-light */
    --tqw-font-body:    'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --tqw-font-heading: 'Nimbus Roman', 'Times New Roman', Times, serif;
    --tqw-gap:         20px;
    --tqw-radius:      0;
    --tqw-radius-btn:  8px;
}

/* ── Contenitore ─────────────────────────────────────────────────────────── */
.tqw-block {
    font-family: var(--tqw-font-body);
    color: var(--tqw-testo);
    background: var(--tqw-bg, transparent);
    padding: 32px clamp(16px, 3vw, 36px);
    box-sizing: border-box;
}
.tqw-block *, .tqw-block *::before, .tqw-block *::after { box-sizing: inherit; }
.tqw-block img { max-width: 100%; height: auto; display: block; }

/* I temi (e alcuni visualizzatori) sottolineano i link con regole più
   specifiche di questa: l'!important è circoscritto ai nostri blocchi e
   impedisce che le card arrivino sottolineate. */
.tqw-block a,
.tqw-block a:hover,
.tqw-block a:focus,
.tqw-block a:visited { text-decoration: none !important; }

/* Nessun elenco dei nostri blocchi è un elenco puntato: sono strutture, e il
   pallino o il quadratino accanto è rumore.

   `list-style: none` sull'<ul> non basta: è un valore **ereditato** dagli
   <li>, e l'ereditarietà perde contro qualunque regola del tema che colpisca
   l'<li> direttamente — un `.widget li { list-style: square }` basta a farlo
   ricomparire. Alcuni temi poi non usano il marcatore ma un ::before con un
   carattere dentro, che `list-style` non tocca affatto.

   Stesso ragionamento dell'!important qui sopra: circoscritto ai nostri
   blocchi, e serve perché la regola da battere non si sa quale sia. Le
   regole dei nostri componenti stanno più in basso e continuano a vincere
   per ordine di scrittura. */
.tqw-block ul,
.tqw-block ol,
.tqw-block ul li,
.tqw-block ol li { list-style: none !important; }
.tqw-block ul li::before,
.tqw-block ol li::before { content: none !important; }

/* ── Titoli ──────────────────────────────────────────────────────────────── */
.tqw-heading {
    font-family: var(--tqw-font-heading);
    color: var(--tqw-heading-col, var(--tqw-navy));
    font-weight: 700;
    /* Figma: 36px/40px. Interlinea senza unità: dà 40px esatti a 36px e
       resta proporzionata quando il clamp riduce il corpo sul mobile. */
    font-size: clamp(26px, 3.2vw, 36px);
    line-height: 1.111;
    margin: 0 0 24px;
}
.tqw-heading--center { text-align: center; margin-bottom: 32px; }
/* Figma: filetto giallo di 180×2px centrato sotto al titolo
   (166px nel blocco Webinar: uso il valore prevalente) */
.tqw-heading--center::after {
    content: "";
    display: block;
    width: 180px;
    max-width: 60%;
    height: 2px;
    margin: 6px auto 0;
    background: var(--tqw-giallo);
}

/* ── Pulsante CTA ────────────────────────────────────────────────────────── */
.tqw-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Figma: padding 10px 20px, altezza 40px, raggio 8px, Lato Bold 14px */
    padding: 10px 20px;
    min-height: 40px;
    background: var(--tqw-giallo);
    color: #1a1a1a;
    border-radius: var(--tqw-radius-btn);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    transition: background .15s, color .15s, transform .05s;
}
.tqw-cta:hover, .tqw-cta:focus-visible { background: var(--tqw-navy-soft); color: #fff; }
.tqw-cta:active { transform: translateY(1px); }

.tqw-block-footer { display: flex; justify-content: center; margin-top: 28px; }

/* ── Avviso per redattori (mai visibile ai visitatori) ───────────────────── */
.tqw-empty {
    font-family: var(--tqw-font-body);
    font-size: 13px;
    line-height: 1.5;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 4px;
    padding: 12px 14px;
}
.tqw-empty span { color: #b45309; font-style: italic; }

/* ==========================================================================
   Carosello (scroll-snap nativo, nessuna libreria)
   ========================================================================== */
.tqw-carousel { position: relative; }

.tqw-track {
    display: flex;
    gap: var(--tqw-gap);
    overflow-x: auto;
    /* "proximity" e non "mandatory": con mandatory il browser ri-aggancia il
       track quando le immagini lazy cambiano le dimensioni, e il carosello
       parte già scorrito in fondo. */
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
}
.tqw-track::-webkit-scrollbar { display: none; }

.tqw-carousel--statico .tqw-track { overflow-x: visible; scroll-snap-type: none; flex-wrap: wrap; }

/* Frecce: fuori dal track sul desktop, sovrapposte sotto i 1200px */
.tqw-arrow {
    position: absolute;
    top: 40%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--tqw-navy);
    cursor: pointer;
    transition: opacity .15s, color .15s;
}
.tqw-arrow svg { width: 26px; height: 26px; }
.tqw-arrow:hover { color: var(--tqw-link); }
.tqw-arrow--prev { left: -34px; }
.tqw-arrow--next { right: -34px; }
/* Nascondi la freccia quando non c'è altro da scorrere (gestito da JS) */
.tqw-arrow[hidden] { display: none; }

@media (max-width: 1200px) {
    .tqw-arrow {
        background: rgba(255,255,255,.92);
        border-radius: 50%;
        box-shadow: 0 1px 6px rgba(0,0,0,.18);
    }
    .tqw-arrow--prev { left: 2px; }
    .tqw-arrow--next { right: 2px; }
}

/* ── Card generica ───────────────────────────────────────────────────────── */
.tqw-card {
    flex: 0 0 calc((100% - var(--tqw-gap) * 3) / 4);
    scroll-snap-align: start;
    min-width: 0;
}
.tqw-card-link { display: flex; flex-direction: column; height: 100%; color: inherit; }

/* Figma: le immagini delle card di Eventi e Webinar sono quadrate (140×140) */
.tqw-card-media { display: block; overflow: hidden; background: #e8e5df; }
.tqw-card-media--quadrata { aspect-ratio: 1 / 1; }
.tqw-card-media .tqw-img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.tqw-card-link:hover .tqw-card-media .tqw-img { transform: scale(1.04); }

.tqw-card-body { display: block; padding: 10px 0 0; }
/* Figma: 18px/24px, come i titoli secondari del Reportage */
.tqw-card-title {
    display: block;
    font-family: var(--tqw-font-heading);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.333;
    color: var(--tqw-navy);
    margin-bottom: 6px;
}
.tqw-card-link:hover .tqw-card-title { color: var(--tqw-link); }
/* Logo della tipologia evento: 107×24 nel Figma */
.tqw-card-logo { height: 24px; width: auto; margin-bottom: 6px; }

/* Figma: luogo e data in Lato Regular 13px, righe distanti 20px */
.tqw-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    line-height: 16px;
    color: var(--tqw-testo);
    margin-top: 4px;
}
.tqw-meta-icon { width: 14px; height: 14px; flex: none; color: var(--tqw-link); }

/* Breakpoint del carosello: 4 → 3 → 2 → 1,2 card visibili */
@media (max-width: 1024px) { .tqw-card { flex-basis: calc((100% - var(--tqw-gap) * 2) / 3); } }
@media (max-width: 782px)  { .tqw-card { flex-basis: calc((100% - var(--tqw-gap)) / 2); } }
@media (max-width: 520px)  { .tqw-card { flex-basis: 78%; } }

/* ==========================================================================
   Blocco Reportage
   ========================================================================== */
/* Misure dal Figma: blocco 730×432, padding 32/20/36, due colonne da 330px
   con 30px di gap, bordo superiore di 2px. */
.tqw-reportage {
    --tqw-bg: var(--tqw-beige);
    border-top: 2px solid var(--tqw-giallo);
    padding: 32px 20px 36px;
}
.tqw-reportage-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 30px;
    align-items: start;
}
.tqw-reportage-hero { display: block; color: inherit; }
/* 330×234 nel Figma */
.tqw-reportage-hero-media { display: block; aspect-ratio: 330 / 234; overflow: hidden; background: #e8e5df; }
.tqw-reportage-hero-media .tqw-img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.tqw-reportage-hero:hover .tqw-img { transform: scale(1.03); }
/* Figma: 24px/36px per il titolo, 18px/24px per il sottotitolo */
.tqw-reportage-hero-title {
    font-family: var(--tqw-font-heading);
    font-size: clamp(20px, 1.9vw, 24px);
    font-weight: 700;
    color: var(--tqw-navy);
    line-height: 1.5;
    margin: 14px 0 0;
}
.tqw-reportage-hero:hover .tqw-reportage-hero-title { color: var(--tqw-link); }
.tqw-reportage-hero-sub { font-size: 18px; line-height: 1.333; color: var(--tqw-testo); margin: 0; }

/* Nel Figma le due voci secondarie distano 38px */
.tqw-reportage-side { display: flex; flex-direction: column; gap: 38px; }
/* Miniatura 120×86, testo a 10px dalla miniatura */
.tqw-reportage-item { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; align-items: start; color: inherit; }
.tqw-reportage-item-media { display: block; aspect-ratio: 120 / 86; overflow: hidden; background: #e8e5df; }
.tqw-reportage-item-media .tqw-img { width: 100%; height: 100%; object-fit: cover; }
/* Figma: 18px/24px */
.tqw-reportage-item-title {
    font-family: var(--tqw-font-heading);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.333;
    color: var(--tqw-navy);
    margin: 0;
}
.tqw-reportage-item:hover .tqw-reportage-item-title { color: var(--tqw-link); }
/* Il gap della colonna (38px) fa già da spaziatura sopra il pulsante */
.tqw-reportage-footer { display: flex; justify-content: center; margin-top: 0; }

@media (max-width: 782px) {
    .tqw-reportage-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .tqw-reportage-item { grid-template-columns: 110px minmax(0, 1fr); gap: 12px; }
    .tqw-reportage-item-title { font-size: 16px; }
}

/* ==========================================================================
   Blocco ItaliAbsolutely
   ========================================================================== */
/* Misure dal Figma (nodo 353:2872): blocco 350×510, padding 20px, bordo
   superiore di 2px in tq_main, logo alto 76px, miniature 120×86 con 10px
   di distanza dal testo, voci distanziate 20px. Nessun separatore. */
.tqw-ia {
    --tqw-bg: var(--tqw-azzurro);
    border-top: 2px solid var(--tqw-link);
    padding: 20px 20px 30px;
}
.tqw-ia-logo { padding-bottom: 16px; }
.tqw-ia-logo img { max-height: 76px; width: auto; }

.tqw-ia-list { list-style: none; margin: 0; padding: 0; }
.tqw-ia-item + .tqw-ia-item { margin-top: 20px; }
.tqw-ia-link { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; align-items: center; color: inherit; }
.tqw-ia-media { display: block; aspect-ratio: 120 / 86; overflow: hidden; background: #dfe4ef; }
.tqw-ia-media .tqw-img { width: 100%; height: 100%; object-fit: cover; }
/* Figma: 16px/22px */
.tqw-ia-title {
    font-family: var(--tqw-font-heading);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.375;
    color: var(--tqw-navy);
}
.tqw-ia-link:hover .tqw-ia-title { color: var(--tqw-link); }

/* Il pulsante sta a 30px dall'ultima voce */
.tqw-ia .tqw-block-footer { margin-top: 30px; }

@media (max-width: 400px) {
    .tqw-ia-link { grid-template-columns: 92px minmax(0, 1fr); }
    .tqw-ia-title { font-size: 15px; line-height: 20px; }
}

/* ==========================================================================
   Blocco Eventi / Webinar
   ========================================================================== */
/* Nel Figma i due blocchi hanno sfondi propri, diversi dal beige del
   Reportage, e nessun bordo superiore colorato. Il blocco è 730×406
   (Eventi) e 729×438 (Webinar), con le card inserite di 56px per lasciare
   spazio alle frecce. */
.tqw-eventi  { --tqw-bg: #F4F1EA; }
.tqw-webinar { --tqw-bg: #EEF4FA; }

/* La decorazione dietro al blocco — la mappa su Eventi, i monumenti su
   Webinar — arriva dalle impostazioni del widget come variabile.

   background-image e non la scorciatoia `background`: .tqw-block usa la
   scorciatoia per il colore, e ripeterla qui azzererebbe di nuovo l'immagine.
   Con `none` come ripiego un blocco senza immagine resta esattamente com'era.

   `cover`: nel Figma il disegno è fatto sulle proporzioni del blocco (729×438
   Webinar, 747×424 Eventi), quindi sul desktop combacia senza tagli. Su un
   telefono il blocco diventa alto e stretto e un pezzo si perde per forza —
   ma è una decorazione, e vederne una porzione ingrandita funziona meglio di
   `contain`, che la ridurrebbe a una striscia sottile sospesa in mezzo al
   bianco. */
.tqw-eventi,
.tqw-webinar {
    background-image: var(--tqw-bg-img, none);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.tqw-eventi, .tqw-webinar { padding-left: 20px; padding-right: 20px; }

/* Corsia laterale per le frecce, così non finiscono sopra le card */
.tqw-eventi .tqw-carousel,
.tqw-webinar .tqw-carousel { padding: 0 clamp(24px, 2.6vw, 36px); }
.tqw-eventi .tqw-arrow,
.tqw-webinar .tqw-arrow { background: transparent; box-shadow: none; border-radius: 0; }
.tqw-eventi .tqw-arrow--prev,
.tqw-webinar .tqw-arrow--prev { left: -6px; }
.tqw-eventi .tqw-arrow--next,
.tqw-webinar .tqw-arrow--next { right: -6px; }

/* ==========================================================================
   Blocco Instagram (Social Diary)
   ========================================================================== */
/* Misure dal Figma: blocco 350px, padding 20px, tessere 124×169 con gap 16px,
   corsia laterale di 23px per le frecce. */
.tqw-ig {
    --tqw-bg: var(--tqw-beige);
    border-top: 2px solid var(--tqw-giallo);
    padding-left: 20px;
    padding-right: 20px;
}
/* Due righe che scorrono una colonna alla volta: la griglia si riempie per
   colonne, e ogni colonna è larga quanto una tessera. Il passo delle frecce
   (public.js) è la larghezza della prima tessera più lo spazio, cioè una
   colonna: due post nuovi a ogni clic. */
.tqw-ig {
    --tqw-ig-gap: 16px;
}
.tqw-ig .tqw-track {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, auto);
    grid-auto-columns: calc((100% - var(--tqw-ig-gap) * (var(--tqw-ig-colonne, 2) - 1)) / var(--tqw-ig-colonne, 2));
    gap: var(--tqw-ig-gap);
}
.tqw-ig .tqw-ig-tile { scroll-snap-align: start; }

/* Durante lo scorrimento con le frecce: la destinazione è già una colonna,
   e senza snap i post in arrivo si aggiungono senza far tornare indietro il
   carosello. Vedi public.js, vaiA(). */
.tqw-track.tqw-track--guidato { scroll-snap-type: none; }

/* Senza frecce: griglia ferma, per righe, con tutte le righe che servono. */
.tqw-ig .tqw-carousel--statico .tqw-track {
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-template-columns: repeat(var(--tqw-ig-colonne, 2), minmax(0, 1fr));
    overflow-x: visible;
}

/* Il blocco vive in colonna stretta: le frecce hanno una corsia dedicata ai
   lati della griglia, invece di finire sopra le immagini come nei caroselli
   a tutta larghezza. */
.tqw-ig .tqw-carousel { padding: 0 23px; }
.tqw-ig .tqw-arrow {
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}
.tqw-ig .tqw-arrow--prev { left: -4px; }
.tqw-ig .tqw-arrow--next { right: -4px; }
.tqw-ig-tile {
    position: relative;
    display: block;
    /* Nel Figma le tessere sono verticali (124×169), non quadrate */
    aspect-ratio: 124 / 169;
    overflow: hidden;
    background: #e8e5df;
}
.tqw-ig-tile .tqw-img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease, filter .2s; }
.tqw-ig-tile:hover .tqw-img { transform: scale(1.05); filter: brightness(.92); }
.tqw-ig-play {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(0,0,0,.45);
    border-radius: 50%;
}
.tqw-ig-play svg { width: 16px; height: 16px; }

/* Utility di accessibilità: presente in molti temi, la ridefiniamo per sicurezza */
.tqw-block .screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   Blocco Adnkronos — ticker e griglia
   ========================================================================== */

/* Badge testuale: niente logo esterno da scaricare né licenza da gestire. */
.tqw-adn-etichetta,
.tqw-adn-badge {
    display: inline-block;
    background: var(--tqw-navy);
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 3px;
}
.tqw-adn-etichetta { background: var(--tqw-link); margin-bottom: 6px; }

/* ── Ticker ──────────────────────────────────────────────────────────── */
/* Specificità doppiata (.tqw-block.tqw-adn-ticker) apposta: il ticker è una
   striscia sottile e non deve ricevere il padding verticale che la sezione
   "Mobile" più sotto assegna a .tqw-block da solo. */
.tqw-block.tqw-adn-ticker {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px clamp(12px, 2vw, 24px);
    background: #fff;
    border-top: 1px solid var(--tqw-bordo);
    border-bottom: 1px solid var(--tqw-bordo);
}
.tqw-adn-badge { flex: none; }

/* Il logo della fonte: altezza fissa e larghezza libera, così va bene sia un
   marchio orizzontale sia uno quadrato senza deformarsi.
   Selettore discendente per necessità: `.tqw-block img` più sopra impone
   height:auto ed è più specifico di una classe da sola — il logo uscirebbe
   alla sua dimensione naturale, larga quanto la striscia. */
.tqw-adn-ticker .tqw-adn-logo {
    flex: none;
    height: 22px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
}

.tqw-adn-viewport { flex: 1 1 auto; overflow: hidden; min-width: 0; }

.tqw-adn-pista {
    display: flex;
    width: max-content;
    animation-name: tqw-adn-scorri;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 30s; /* valore di attesa: il JS lo ricalcola sulla larghezza reale */
}
.tqw-adn-ticker--pausabile:hover .tqw-adn-pista,
.tqw-adn-ticker--pausabile:focus-within .tqw-adn-pista { animation-play-state: paused; }

.tqw-adn-lista { display: flex; list-style: none; margin: 0; padding: 0; }
.tqw-adn-item { flex: none; white-space: nowrap; margin-right: 44px; font-size: 14px; }
.tqw-adn-voce { color: var(--tqw-testo); display: inline-flex; align-items: center; gap: 6px; }
a.tqw-adn-voce:hover { color: var(--tqw-link); }
.tqw-adn-ora { color: var(--tqw-navy); font-weight: 700; }
.tqw-adn-icon-video { width: 14px; height: 14px; color: var(--tqw-link); flex: none; }

@keyframes tqw-adn-scorri {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ── Griglia ─────────────────────────────────────────────────────────── */
.tqw-adn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--tqw-gap);
}
.tqw-adn-estratto { display: block; font-size: 14px; color: var(--tqw-testo-soft); margin: 4px 0; }

.tqw-play-badge {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(0,0,0,.5);
    border-radius: 50%;
}
.tqw-play-badge svg { width: 17px; height: 17px; }
.tqw-card-media { position: relative; } /* ancora per .tqw-play-badge */

/* ── Pagina di dettaglio ─────────────────────────────────────────────── */
.tqw-adn-dettaglio { max-width: 760px; margin: 0 auto; }
.tqw-adn-dettaglio-titolo {
    font-family: var(--tqw-font-heading);
    color: var(--tqw-navy);
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.2;
    margin: 10px 0 6px;
}
.tqw-adn-dettaglio-data { color: var(--tqw-testo-soft); font-size: 14px; margin: 0 0 20px; }
.tqw-adn-dettaglio-img { width: 100%; height: auto; margin-bottom: 20px; }
.tqw-adn-video { width: 100%; height: auto; background: #000; margin-bottom: 16px; }
.tqw-adn-dettaglio-estratto { font-size: 17px; color: var(--tqw-testo); }
.tqw-adn-dettaglio-testo p { font-size: 16px; line-height: 1.6; margin: 0 0 16px; }
.tqw-adn-fonte { font-size: 13px; color: var(--tqw-testo-soft); font-style: italic; margin-top: 24px; }

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 782px) {

    /* Bersagli da 44px: 34px sono scomodi da centrare col pollice */
    .tqw-arrow { width: 44px; height: 44px; }
    .tqw-arrow svg { width: 24px; height: 24px; }
    .tqw-cta { min-height: 44px; }

    /* Su schermo stretto la corsia laterale ruberebbe troppo spazio alle
       immagini: le frecce tornano sovrapposte, con il pallino bianco che le
       rende leggibili sopra qualsiasi foto. */
    .tqw-eventi .tqw-carousel,
    .tqw-webinar .tqw-carousel,
    .tqw-ig .tqw-carousel { padding-left: 0; padding-right: 0; }

    .tqw-eventi .tqw-arrow,
    .tqw-webinar .tqw-arrow,
    .tqw-ig .tqw-arrow {
        background: rgba(255,255,255,.92);
        border-radius: 50%;
        box-shadow: 0 1px 6px rgba(0,0,0,.18);
    }
    .tqw-eventi .tqw-arrow--prev,
    .tqw-webinar .tqw-arrow--prev,
    .tqw-ig .tqw-arrow--prev { left: 2px; }
    .tqw-eventi .tqw-arrow--next,
    .tqw-webinar .tqw-arrow--next,
    .tqw-ig .tqw-arrow--next { right: 2px; }

    /* Il Social Diary resta a 2 colonne anche se il widget ne chiede 3 o 4:
       su uno schermo stretto le immagini diventerebbero francobolli. */
    .tqw-ig { --tqw-ig-colonne: 2 !important; }

    /* Meno aria verticale: sul mobile lo scroll costa più dello spazio bianco */
    .tqw-block { padding-top: 24px; padding-bottom: 28px; }
    .tqw-heading { margin-bottom: 18px; }
    .tqw-heading--center { margin-bottom: 24px; }

    /* Il ticker non è un .tqw-block (è una striscia sottile, non un blocco
       con padding verticale): niente aria da togliere, solo un po' meno
       margine fra le voci per farne stare di più a schermo. */
    .tqw-adn-item { margin-right: 28px; font-size: 13px; }
    .tqw-adn-ticker .tqw-adn-logo { height: 18px; max-width: 110px; }
}


/* ── L'Atelier ───────────────────────────────────────────────────────────── */
/* Figma: Restyling 2026 → Group 185 (353:2792). Riquadro 350×428, sfondo
   tq_sfondo-light, filetto tq_main da 2px **solo in alto** — non tutto
   attorno: è quel filetto a segnalare lo spazio pubblicitario.

   Il blocco esterno non ha né sfondo né padding: serve solo a contenere il
   riquadro e, sotto, il "Guardali tutti". Sfondo e filetto stanno sul
   riquadro, perché il pulsante deve poter sporgere oltre il suo bordo. */
.tqw-atelier {
    background: none;
    padding: 0;
    text-align: left;
}

.tqw-atelier-riquadro {
    position: relative;
    background: var(--tqw-bg, var(--tqw-azzurro));
    border-top: 2px solid var(--tqw-link);
    /* In basso lo spazio per la metà di pulsante che entra nel riquadro:
       20px sono l'altezza del pulsante (40px) diviso due. */
    padding: 20px 20px 40px;
}

/* Figma: Lato Semibold 12px, tracking 2.4px (= .2em), tq-testo-secondario. */
.tqw-atelier-occhiello {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--tqw-testo-2);
}

.tqw-atelier .tqw-heading { margin-bottom: 20px; }

.tqw-atelier-card { display: block; color: inherit; }

/* Figma: 310×207 dentro un riquadro da 350 con 20px di margine per lato,
   cioè 3:2 tondo tondo. Nessun raggio: gli angoli restano vivi. */
.tqw-atelier-media {
    display: block;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    background: var(--tqw-bordo);
}
.tqw-atelier-media .tqw-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}
.tqw-atelier-card:hover .tqw-atelier-media .tqw-img { transform: scale(1.03); }

/* La riserva: l'immagine intera, con le sue proporzioni.

   La card vera ritaglia la foto in 3:2 perché è una fotografia, e un taglio
   non le toglie niente. L'immagine di riserva è spesso una grafica con del
   testo dentro — "il tuo marchio qui", un invito a guardare l'archivio — e
   ritagliandola si taglierebbe proprio quello. Qui niente proporzione fissa:
   l'immagine decide la sua altezza. */
.tqw-atelier--riserva .tqw-atelier-media { aspect-ratio: auto; }
.tqw-atelier--riserva .tqw-atelier-media .tqw-img { height: auto; object-fit: contain; }
.tqw-atelier--riserva .tqw-atelier-media:hover .tqw-img { transform: scale(1.02); }

/* Figma: Nimbus Roman Bold 20/28, tq_titoli. Misura fissa e non fluida: nel
   disegno il riquadro ha una larghezza sua, e il titolo ci va su due righe.

   Selettore raddoppiato: la stessa classe veste anche la frase d'invito della
   riserva, che è un <p>. Con la sola classe (0,1,0) un `.widget p` del tema
   (0,1,1) le rimetterebbe corpo e carattere suoi. */
.tqw-atelier .tqw-atelier-titolo {
    font-family: var(--tqw-font-heading);
    color: var(--tqw-navy);
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    margin: 20px 0 0;
}

/* A cavallo del bordo inferiore: bottom 0 lo appoggia al bordo, la traslazione
   del 50% lo lascia mezzo dentro e mezzo fuori. Nel Figma il pulsante è alto
   40px e sta 18px dentro e 22 fuori: metà e metà è la stessa cosa, e non
   dipende da quanto è alto il pulsante. */
.tqw-atelier-azione {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
    margin: 0;
    white-space: nowrap;
    /* flex: il contenitore veste il pulsante esatto, senza lo spazio che una
       riga di testo gli lascerebbe sotto. Qui non cambia niente — l'ho
       verificato — ma toglie di mezzo una dipendenza dall'interlinea che il
       tema può cambiare in qualsiasi momento. */
    display: flex;
}

/* Figma: Lato Medium 13/18, nero, centrato sotto al riquadro. Il margine
   superiore scavalca la metà di pulsante che sporge (20px) più l'aria del
   disegno. */
.tqw-atelier-tutti {
    margin: 30px 0 0;
    text-align: center;
    font-size: 13px;
    line-height: 18px;
    font-weight: 500;
}
.tqw-atelier-tutti a { color: #000; }
.tqw-atelier-tutti a:hover { color: var(--tqw-link); }

/* ── In Scena ────────────────────────────────────────────────────────────── */
/* Figma: Restyling 2026 → Group 107 (353:2747). Riquadro 350×417, sfondo
   tq_main al 15%, filetto da 2px **solo a sinistra**.

   Come per l'Atelier: il blocco esterno è solo un contenitore, sfondo e
   filetto stanno sul riquadro perché il pulsante deve sporgere oltre il suo
   bordo. Il padding in basso riserva lo spazio della metà che sporge, così
   il pulsante non finisce sopra a quello che viene dopo nella pagina.

   z-index 0 sul riquadro: apre un contesto di impilamento, così la filigrana
   con z-index negativo resta dentro la card invece di finire dietro allo
   sfondo della pagina. */
.tqw-inscena {
    background: none;
    padding: 0 0 20px;
}

.tqw-inscena-riquadro {
    position: relative;
    z-index: 0;
    background: var(--tqw-bg, rgba(1, 79, 156, .15));
    border-left: 2px solid var(--tqw-link);
    padding: 20px 20px 40px;
}

/* La sigla sta sullo sfondo di tutto il blocco.

   Serve z-index NEGATIVO, non 0: un elemento posizionato con z-index 0 viene
   disegnato sopra al contenuto statico che lo segue, quindi la sigla finiva
   davanti al testo e all'immagine. Con -1 sta sotto a tutto il contenuto ma
   sopra allo sfondo della card, che è esattamente il posto suo.

   Figma: Nimbus Roman Regular 140px, bianco al 45%. */
.tqw-inscena-filigrana {
    position: absolute;
    z-index: -1;
    top: 6px;
    left: 12px;
    font-family: var(--tqw-font-heading);
    font-weight: 400;
    font-size: 140px;
    line-height: 1;
    color: rgba(255, 255, 255, .45);
    pointer-events: none;
    user-select: none;
}

/* Figma: Lato Regular 16/24, tq_testo. */
.tqw-inscena-testo {
    margin: 16px 0 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--tqw-testo);
}

/* Figma: 310×189, raggio 3px. Le misure sono le stesse per il video e per
   l'immagine, così la card non cambia altezza a seconda di cosa contiene. */
.tqw-inscena-media {
    position: relative;
    display: block;
    width: 100%;
    margin-top: 24px;
    padding: 0;
    border: 0;
    overflow: hidden;
    aspect-ratio: 310 / 189;
    border-radius: 3px;
    background: var(--tqw-bordo);
}
.tqw-inscena-media .tqw-img { width: 100%; height: 100%; object-fit: cover; }

/* L'incorporamento arriva da WordPress con larghezza e altezza fisse: qui
   viene riportato alle misure del contenitore, altrimenti sborderebbe. */
.tqw-inscena-media iframe,
.tqw-inscena-media video,
.tqw-inscena-media embed,
.tqw-inscena-media object {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* A cavallo del bordo inferiore, allineato a destra come nel Figma. */
.tqw-inscena-azione {
    position: absolute;
    right: 20px;
    bottom: 0;
    transform: translateY(50%);
    margin: 0;
    white-space: nowrap;
    /* Vedi .tqw-atelier-azione. */
    display: flex;
}

/* "ADV" in basso a sinistra, in piccolo: dentro i 40px che il riquadro
   riserva sotto ai media, centrato sulla metà interna del pulsante (che
   sporge di 20px), così le due cose stanno sulla stessa linea. */
.tqw-inscena-adv {
    position: absolute;
    left: 20px;
    bottom: 5px; /* centro a 10px dal bordo, come la metà interna del pulsante */
    font-size: 10px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tqw-testo-2);
    pointer-events: none;
}

/* Il tema figlio spinge tutti i pulsanti 10px più in basso:

       .tq_btn, .wpjb-btn-cta, .tqw-cta, .jeg_readmore { top: .625rem; position: relative }

   Serve dove il pulsante sta nel flusso del testo e va allineato a quello che
   ha accanto. Qui il pulsante è posizionato a mano sul bordo del riquadro, e
   quei 10px lo scentrano: metà dentro diventa un quarto dentro. Si annulla
   solo dentro questi due contenitori, così altrove la regola del tema
   continua a valere. Due classi bastano a batterne una: niente !important. */
.tqw-atelier-azione .tqw-cta,
.tqw-inscena-azione .tqw-cta { top: 0; }

/* ── Articoli in evidenza ─────────────────────────────────────────────────── */
/* Figma: Restyling 2026 → Group 717 (918:8761). Un articolo grande — foto
   730×485 a sinistra, testo a destra — e sotto una fila di card con foto
   350×250. Le proporzioni sono quelle del disegno; le larghezze no, perché
   qui le decide il contenitore che ospita il blocco. */
.tqw-evidenza-hero {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    color: inherit;
}

.tqw-evidenza-hero-media,
.tqw-evidenza-media {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--tqw-bordo);
}
.tqw-evidenza-hero-media { aspect-ratio: 730 / 485; }
.tqw-evidenza-media      { aspect-ratio: 350 / 250; }

.tqw-evidenza-hero-media .tqw-img,
.tqw-evidenza-media .tqw-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}
.tqw-evidenza-hero-media:hover .tqw-img,
.tqw-evidenza-media:hover .tqw-img { transform: scale(1.03); }

/* L'incorporamento arriva da WordPress con larghezza e altezza fisse: qui
   viene riportato alle misure del riquadro, altrimenti sborderebbe. */
.tqw-evidenza-hero-media iframe,
.tqw-evidenza-media iframe,
.tqw-evidenza-hero-media video,
.tqw-evidenza-media video,
.tqw-evidenza-hero-media embed,
.tqw-evidenza-media embed,
.tqw-evidenza-hero-media object,
.tqw-evidenza-media object {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* L'etichetta resta sopra all'incorporamento: l'iframe si disegna per ultimo
   e altrimenti la coprirebbe. */
.tqw-evidenza-etichetta { z-index: 1; }

.tqw-evidenza-hero-testo { display: block; }

/* Figma: Nimbus Roman Bold 36/42 per il grande, 24/31 per le card. */
.tqw-evidenza-hero-titolo,
.tqw-evidenza-titolo {
    font-family: var(--tqw-font-heading);
    color: var(--tqw-navy);
    font-weight: 700;
    margin: 0;
}
.tqw-evidenza-hero-titolo a,
.tqw-evidenza-titolo a { color: inherit; }
.tqw-evidenza-hero-titolo a:hover,
.tqw-evidenza-titolo a:hover { color: var(--tqw-link); }
.tqw-evidenza-hero-titolo { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.167; }
.tqw-evidenza-titolo      { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.292; margin-top: 16px; }

/* Figma: Lato Regular 18/27, nero. */
.tqw-evidenza-hero-estratto {
    display: block;
    margin-top: 18px;
    font-size: clamp(16px, 1.3vw, 18px);
    line-height: 1.5;
    color: #000;
}

/* La data usa .tqw-meta, che è già l'orologio + testo degli altri blocchi:
   stessa icona, stesso corpo. Qui si allinea solo al colore del disegno. */
.tqw-evidenza .tqw-meta {
    margin-top: 14px;
    font-size: 13px;
    line-height: 18px;
    color: var(--tqw-testo-2);
}

/* Figma: rettangolo #EC0033 alto 28px, Lato Medium 11px bianco maiuscolo,
   appoggiato all'angolo in alto a sinistra della foto. */
.tqw-evidenza-etichetta {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 9px;
    background: var(--tqw-rosso-scuro);
    color: #fff;
    font-family: var(--tqw-font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.tqw-evidenza-griglia {
    display: grid;
    /* auto-fit invece di tre colonne fisse: con due articoli si dispongono da
       soli senza lasciare una colonna vuota, e scendendo di larghezza passano
       a due e poi a una senza bisogno di soglie scritte a mano. */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 28px;
    margin-top: 36px;
}

.tqw-evidenza-card { display: block; color: inherit; }

.tqw-evidenza-azione { margin-top: 28px; text-align: center; }

@media (max-width: 860px) {
    /* Il grande diventa una colonna sola: a fianco a una foto larga meno di
       500px il testo verrebbe in righe da quattro parole. */
    .tqw-evidenza-hero { grid-template-columns: 1fr; gap: 18px; }
}

/* ── Adnkronos, colonna laterale ──────────────────────────────────────────── */
/* Un elenco di notizie che si aprono una alla volta. Sta in una colonna
   stretta accanto al contenuto vero, quindi è compatto per scelta: il titolo
   di sezione non usa il corpo da 36px degli altri blocchi, le voci hanno
   un'interlinea da elenco e non da articolo, e il blocco non aggiunge padding
   proprio — quello lo mette già la colonna che lo ospita.

   L'aspetto è quello del giornale, non quello del widget della fonte: il
   marchio resta in fondo come attribuzione, non apre il blocco. */
.tqw-adn-colonna { padding: 0; }

/* Testata: titolo a sinistra, marchio della fonte a destra, sulla stessa
   riga. Allineati sulla linea di base e non al centro, così il marchio siede
   sulla stessa riga d'appoggio del titolo invece di galleggiare. */
.tqw-adn-colonna-testa {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

/* Un titolo da barra laterale: più contenuto dei 26-36px dei blocchi grandi,
   ma abbastanza da reggere il confronto con il marchio che gli sta a fianco. */
.tqw-adn-colonna .tqw-heading {
    font-size: 24px;
    line-height: 1.2;
    margin: 0;
}

.tqw-adn-colonna-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--tqw-bordo);
}
.tqw-adn-colonna-voce { border-bottom: 1px solid var(--tqw-bordo); }

/* Il triangolino di serie di <summary> non è uguale in tutti i browser: lo si
   toglie e si disegna il proprio, così la voce è identica ovunque. */
.tqw-adn-colonna-titolo {
    display: flex;
    align-items: baseline;
    gap: 5px;
    padding: 8px 18px 8px 0;
    position: relative;
    cursor: pointer;
    list-style: none;
    font-size: 13px;
    line-height: 1.38;
    color: var(--tqw-testo);
    transition: color .15s;
}
.tqw-adn-colonna-titolo::-webkit-details-marker { display: none; }
.tqw-adn-colonna-titolo:hover { color: var(--tqw-link); }

/* Il chevron: ruota all'apertura. Due bordi invece di una SVG — è una freccia
   di due tratti, non vale una richiesta né un path. */
.tqw-adn-colonna-titolo::after {
    content: "";
    position: absolute;
    right: 2px;
    top: 13px;
    width: 5px;
    height: 5px;
    border-right: 2px solid var(--tqw-testo-2);
    border-bottom: 2px solid var(--tqw-testo-2);
    transform: rotate(45deg);
    transition: transform .2s ease;
}
.tqw-adn-dettaglio[open] .tqw-adn-colonna-titolo::after {
    transform: rotate(-135deg);
    top: 15px;
}

/* L'ora è il riferimento che si cerca scorrendo l'elenco: resta in evidenza. */
.tqw-adn-colonna .tqw-adn-ora {
    color: var(--tqw-rosso);
    font-weight: 700;
    font-size: 12px;
    white-space: nowrap;
}
.tqw-adn-colonna .tqw-adn-trattino { color: var(--tqw-testo-2); }
.tqw-adn-colonna-testo { flex: 1; }

/* Due punti sotto al titolo della voce (13px): il dettaglio si legge come
   testo di servizio, e la gerarchia fra titolo e corpo resta visibile anche
   con il pannello aperto. */
.tqw-adn-colonna-corpo { padding: 0 18px 10px 0; }

/* La tipografia sta sul <p> e non sul contenitore.

   Non è pignoleria: un valore ereditato perde contro **qualunque** regola che
   colpisca il <p> direttamente. Basta un `.widget p { font-size: … }` nel tema
   — e ce n'è quasi sempre uno — perché il corpo del testo torni quello del
   tema e il nostro venga ignorato senza che niente lo segnali. Con la classe
   raddoppiata (0,2,1) la regola del tema non arriva.

   Vale per tutto quello che qui è ereditabile: corpo, interlinea, colore,
   allineamento, sillabazione. */
.tqw-adn-colonna .tqw-adn-colonna-corpo p {
    margin: 0 0 7px;
    font-size: 10px;
    line-height: 12px;
    color: #3c3c3c;
    text-align: justify;
    /* La sillabazione è quello che rende il giustificato leggibile in una
       colonna stretta: senza, il browser allarga gli spazi fra le parole per
       arrivare al margine e si aprono i "fiumi" di bianco fra una riga e
       l'altra. Serve la lingua sull'elemento perché il browser sappia con
       quali regole spezzare: la mette WordPress sull'<html>. */
    hyphens: auto;
    -webkit-hyphens: auto;
    /* Ultima difesa per un indirizzo o una parola lunghissima: si spezza
       invece di sfondare la colonna. */
    overflow-wrap: break-word;
}

.tqw-adn-colonna-leggi {
    font-size: 11px;
    font-weight: 700;
    color: var(--tqw-link);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.tqw-adn-colonna-leggi:hover { text-decoration: underline !important; }

/* Il marchio accanto al titolo: non deve superarlo in peso, quindi resta
   basso e leggermente smorzato. flex: none perché non si comprima quando il
   titolo è lungo — piuttosto va a capo il titolo. */
.tqw-adn-colonna-fonte { flex: none; line-height: 0; }

/* Selettore raddoppiato apposta: `.tqw-block img { height: auto }` qui sopra
   ha specificità (0,1,1) e batterebbe la sola classe, lasciando il marchio
   alla sua altezza naturale. Verificato in un browser: senza il raddoppio
   esce a 28px invece che a 18. */
.tqw-adn-colonna .tqw-adn-colonna-marchio {
    height: 18px;
    width: auto;
    opacity: .8;
    transition: opacity .15s;
}
a.tqw-adn-colonna-fonte:hover .tqw-adn-colonna-marchio { opacity: 1; }

/* ── Primo piano (Gli Speciali) ───────────────────────────────────────────── */
/* Figma: Restyling 2026 → Group 321 (353:891). Riquadro sfondo
   tq_sfondo-light con filetto tq_main da 2px in alto; foto 330×361 a
   sinistra, testo a destra. */
.tqw-primo-piano {
    background: var(--tqw-bg, var(--tqw-azzurro));
    border-top: 2px solid var(--tqw-link);
    padding: 20px;
}
.tqw-primo-piano .tqw-heading { margin-bottom: 26px; }

.tqw-primo-piano-griglia {
    display: grid;
    grid-template-columns: minmax(0, 330fr) minmax(0, 340fr);
    gap: 30px;
    align-items: start;
}

.tqw-primo-piano-media {
    display: block;
    overflow: hidden;
    aspect-ratio: 330 / 361;
    background: var(--tqw-bordo);
}
.tqw-primo-piano-media .tqw-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}
.tqw-primo-piano-media:hover .tqw-img { transform: scale(1.03); }

/* Figma: Nimbus Roman Bold 24/31, tq_titoli. */
.tqw-primo-piano-titolo {
    font-family: var(--tqw-font-heading);
    font-size: clamp(20px, 2vw, 24px);
    line-height: 1.292;
    font-weight: 700;
    color: var(--tqw-navy);
    margin: 0;
}
.tqw-primo-piano-titolo a { color: inherit; }
.tqw-primo-piano-titolo a:hover { color: var(--tqw-link); }

/* Figma: Lato 16/24, tq_testo, con le aziende citate in Lato Bold.
   Il grassetto sta sul <strong>/<b> dell'estratto scritto a mano: qui si
   dichiara solo il peso, perché alcuni temi azzerano <b>. */
.tqw-primo-piano-estratto {
    margin: 16px 0 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--tqw-testo);
}
.tqw-primo-piano-estratto strong,
.tqw-primo-piano-estratto b { font-weight: 700; }

.tqw-primo-piano-azione { margin-top: 24px; text-align: center; }

.tqw-primo-piano-link { margin: 28px 0 0; padding: 0; }
.tqw-primo-piano-link li { margin: 0 0 12px; }
.tqw-primo-piano-link li:last-child { margin-bottom: 0; }

/* Figma: Lato Medium 15px, tq_main, sottolineato.

   `.tqw-block a` in cima al foglio toglie la sottolineatura a tutti i link
   dei nostri blocchi, con !important. Qui la sottolineatura è il disegno,
   quindi va rimessa con la stessa forza e una specificità più alta — le
   pseudo-classi comprese, che la regola generale elenca una per una. */
.tqw-primo-piano a.tqw-primo-piano-voce,
.tqw-primo-piano a.tqw-primo-piano-voce:hover,
.tqw-primo-piano a.tqw-primo-piano-voce:focus,
.tqw-primo-piano a.tqw-primo-piano-voce:visited {
    text-decoration: underline !important;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.tqw-primo-piano-voce {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 500;
    color: var(--tqw-link);
}
.tqw-primo-piano-voce:hover { color: var(--tqw-navy); }

/* Il triangolo giallo: tracciato esportato dal Figma, 6×10. Sta nell'<a> e
   non in un li::before — quelli il foglio li spegne apposta. La
   sottolineatura del link non lo attraversa perché è un elemento a sé. */
.tqw-primo-piano-freccia {
    flex: none;
    width: 6px;
    height: 10px;
    color: var(--tqw-giallo);
}

@media (max-width: 700px) {
    /* Sotto una certa larghezza la foto a fianco lascerebbe al testo righe di
       tre parole: una colonna sola, la foto sopra. */
    .tqw-primo-piano-griglia { grid-template-columns: 1fr; gap: 20px; }
    .tqw-primo-piano-media { aspect-ratio: 16 / 10; }
}

/* Rispetta le preferenze di movimento ridotto */
@media (prefers-reduced-motion: reduce) {
    .tqw-track { scroll-behavior: auto; }
    .tqw-card-media .tqw-img,
    .tqw-ig-tile .tqw-img,
    .tqw-reportage-hero-media .tqw-img { transition: none; }
    .tqw-card-link:hover .tqw-card-media .tqw-img,
    .tqw-ig-tile:hover .tqw-img,
    .tqw-atelier-card:hover .tqw-atelier-media .tqw-img,
    .tqw-reportage-hero:hover .tqw-img { transform: none; }

    .tqw-atelier-media .tqw-img,
    .tqw-evidenza-hero-media .tqw-img,
    .tqw-evidenza-media .tqw-img,
    .tqw-primo-piano-media .tqw-img,
    .tqw-adn-colonna-titolo::after { transition: none; }
    .tqw-evidenza-hero-media:hover .tqw-img,
    .tqw-evidenza-media:hover .tqw-img { transform: none; }

    /* Il ticker mostra la lista duplicata solo per il loop di scorrimento:
       fermata l'animazione, la seconda copia andrebbe ripetuta a video. */
    .tqw-adn-pista { animation: none !important; transform: none !important; flex-wrap: wrap; width: auto; }
    .tqw-adn-lista[aria-hidden="true"] { display: none; }
    .tqw-adn-viewport { overflow-x: auto; }
}