/**
 * TQ Banner — stili pubblici.
 *
 * Le misure che dipendono dalle impostazioni (larghezza del riquadro, soglia,
 * spazio in cima) non stanno qui: le stampa TQB_Skin nell'head, perché la
 * soglia di una media query non può essere una variabile CSS.
 */

/* ── Banner ──────────────────────────────────────────────────────────── */
/* Nessun margine di serie: dentro Elementor lo spazio attorno al widget lo
   decide chi impagina, da Avanzate → Margine. Aggiungerne uno qui gli
   metterebbe 16px che non ha chiesto e che non trova in nessun pannello. */
.tqb-banner {
    display: block;
    line-height: 0; /* niente spazio fantasma sotto l'immagine */
}
/* Nelle posizioni del tema il margine invece serve: lì non esiste nessun
   pannello dove regolarlo e il banner arriverebbe attaccato al contenuto. */
.tqb-posizione .tqb-banner { margin: 16px 0; }

.tqb-allinea-sinistra { text-align: left; }
.tqb-allinea-centro   { text-align: center; }
.tqb-allinea-destra   { text-align: right; }

.tqb-banner .tqb-immagine {
    display: inline-block;
    max-width: 100%;
    height: auto;
}

/* Lo slot è centrato dal text-align del contenitore: il div che GPT riempie è
   inline-block proprio per poter essere allineato come un'immagine.

   L'altezza riservata cambia per fascia: le tre variabili le scrive il PHP
   sull'elemento, in base ai formati configurati. Si parte dal telefono e si
   sale, così una fascia non configurata non riserva niente invece di
   ereditare l'altezza del desktop. */
.tqb-slot {
    display: inline-block;
    max-width: 100%;
    min-height: var(--tqb-h-telefono, 0);
}
@media (min-width: 768px)  { .tqb-slot { min-height: var(--tqb-h-tablet, 0); } }
@media (min-width: 1024px) { .tqb-slot { min-height: var(--tqb-h-desktop, 0); } }

.tqb-etichetta {
    display: block;
    font-size: 10px;
    line-height: 1.4;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #9a9a9a;
    margin-bottom: 4px;
    text-align: inherit;
}

.tqb-vuoto {
    padding: 12px;
    border: 1px dashed #c3c4c7;
    background: #fbfbfb;
    color: #646970;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}

@media (max-width: 767px) {
    .tqb-nascondi-mobile { display: none !important; }
}

/* ── Skin ────────────────────────────────────────────────────────────── */
/* Nascosta di serie: la mostra la media query stampata da TQB_Skin, così
   sotto la soglia non viene nemmeno scaricata l'immagine di sfondo. */
.tqb-skin-sfondo {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    text-align: center;
}

/* Il link copre l'intera area: i click arrivano solo dove il contenuto (che
   sta sopra, a z-index 1, con fondo opaco) non lo copre — cioè nelle fasce
   laterali e nella striscia in cima. */
.tqb-skin-click {
    display: block;
    width: 100%;
    height: 100%;
}

/* Lo slot GAM della skin: centrato in alto, non deve intercettare i click
   fuori dalla creatività. */
.tqb-skin-slot {
    display: inline-block;
    pointer-events: auto;
}

html.tqb-skin { background: #f2f2f2; }