/**
 * 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 */
    /* La larghezza del banner fa da riferimento (cqw) per ridurre lo spazio
       riservato in proporzione, quando la colonna è più stretta del formato. */
    container-type: inline-size;
}
/* Il widget prende la larghezza della colonna. I contenitori di Elementor
   centrano i figli, e un figlio centrato si stringe sul suo contenuto: finché
   Google non ha disegnato la creatività il banner era largo 0, e senza una
   larghezza non c'è niente su cui riservare lo spazio o scalare il banner.

   Due classi e non una: Elementor mette `.elementor-element { align-self:
   var(--align-self) }`, con la stessa specificità, in un foglio caricato dopo
   questo, e con una classe sola vinceva lui. Il banner restava largo 0 e, con
   container-type, la creatività partiva dal centro della colonna e usciva
   dallo schermo. */
.elementor-element.elementor-widget-tq_banner {
    align-self: stretch;
    max-width: 100%;
}

/* 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);
    /* Mai più alto del formato ridotto alla larghezza disponibile: un
       970x250 in una colonna da 375 riserva 97px, non 250. La riga sopra
       resta per i browser che non conoscono le unità di contenitore. */
    min-height: min(var(--tqb-h-telefono, 0px), 100cqw * var(--tqb-r-telefono, 1));
}
@media (min-width: 768px)  { .tqb-slot { min-height: var(--tqb-h-tablet, 0);  min-height: min(var(--tqb-h-tablet, 0px), 100cqw * var(--tqb-r-tablet, 1)); } }
@media (min-width: 1024px) { .tqb-slot { min-height: var(--tqb-h-desktop, 0); min-height: min(var(--tqb-h-desktop, 0px), 100cqw * var(--tqb-r-desktop, 1)); } }

.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; }
}

/* ── Segnaposto nell'editor di Elementor ────────────────────────────────
   Nell'editor il banner vero non si carica: uno spazio GAM senza campagna
   si chiude a zero e il widget non si trova più se non dalla vista a
   livelli. Al suo posto un riquadro grande quanto il formato, che dice cosa
   uscirà e, in rosso, perché non uscirà.

   Selettori raddoppiati: .tqb-banner porta line-height 0, e il tema mette
   le sue regole su strong e span dentro i widget. */
.tqb-banner.tqb-segnaposto { line-height: 1.4; }

.tqb-segnaposto .tqb-segnaposto-riquadro {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    box-sizing: border-box;
    width: var(--tqb-w, 100%);
    max-width: 100%;
    min-height: var(--tqb-h, 90px);
    padding: 8px 12px;
    border: 2px dashed #2271b1;
    background: repeating-linear-gradient(45deg, #f0f6fc 0 10px, #e3edf7 10px 20px);
    color: #1d2327;
    font: 12px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    text-align: center;
    overflow: hidden;
    vertical-align: top;
}
.tqb-segnaposto .tqb-segnaposto-titolo {
    font-size: 13px;
    font-weight: 600;
    color: #2271b1;
}
.tqb-segnaposto .tqb-segnaposto-riga {
    display: block;
    font-size: 12px;
    word-break: break-all;
}
.tqb-segnaposto .tqb-segnaposto-nota {
    display: block;
    font-size: 11px;
    color: #646970;
}

/* Il carattere va sui testi, non solo sul riquadro: un tema che colpisce
   direttamente span e strong vince su qualunque valore ereditato. */
.tqb-segnaposto .tqb-segnaposto-titolo,
.tqb-segnaposto .tqb-segnaposto-riga,
.tqb-segnaposto .tqb-segnaposto-nota,
.tqb-segnaposto .tqb-segnaposto-etichetta {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    letter-spacing: normal;
    text-transform: none;
    line-height: 1.4;
}

/* Non uscirà: stesso riquadro, in rosso, con il motivo. */
.tqb-segnaposto--avviso .tqb-segnaposto-riquadro {
    border-color: #d63638;
    background: repeating-linear-gradient(45deg, #fcf0f1 0 10px, #f9e2e4 10px 20px);
}
.tqb-segnaposto--avviso .tqb-segnaposto-titolo,
.tqb-segnaposto--avviso .tqb-segnaposto-motivo { color: #b32d2e; font-weight: 600; }

/* Immagine: si vede già, basta un contorno e l'etichetta. */
.tqb-segnaposto .tqb-segnaposto-cornice {
    position: relative;
    display: inline-block;
    max-width: 100%;
    outline: 2px dashed #2271b1;
    outline-offset: 2px;
}
.tqb-segnaposto .tqb-segnaposto-etichetta {
    position: absolute;
    top: 4px;
    left: 4px;
    padding: 2px 6px;
    background: #2271b1;
    color: #fff;
    font: 600 11px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    pointer-events: none;
}

/* ── 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;
    /* La creatività è più larga dello schermo, soprattutto su telefono: senza,
       su alcuni browser mobili la pagina diventerebbe scorrevole di lato. */
    overflow: hidden;
}

/* 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à.

   Centrato con left 50% e traslazione, non con il text-align del
   contenitore: una creatività più larga della finestra (1920 su uno schermo
   da 1680) come elemento in riga non si centra, parte da sinistra e sborda a
   destra. Le due fasce laterali mostrerebbero allora parti diverse
   dell'immagine, e a destra non il suo bordo ma un pezzo interno. */
.tqb-skin-slot {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    /* Sotto la soglia TQB_Skin aggiunge una riduzione: dall'alto al centro,
       la creatività resta centrata e attaccata al bordo superiore. */
    transform-origin: top center;
    display: block;
    pointer-events: auto;
}

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