/* ==========================================================================
   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-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; }

/* ── 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; }

.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;
}
.tqw-ig .tqw-track { gap: 0; }

/* 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-page {
    flex: 0 0 100%;
    scroll-snap-align: start;
    display: grid;
    grid-template-columns: repeat(var(--tqw-ig-colonne, 2), minmax(0, 1fr));
    gap: 16px;
}
.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-page { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* 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; }
}

/* 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-reportage-hero: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; }
}