/* =====================================================================
   Banner «Promo cucine» della home - in HTML dal 2026-10-01
   Markup: scripts/promo-9box.inc.php (token {{MODULO::promo-9box}} nella home)

   Il principio: il banner e' disegnato su una tela di 1080 x 1620 unita',
   le stesse misure della vecchia immagine promo2026.png, e OGNI misura
   (posizioni, riquadri, corpo del testo) e' espressa in quelle unita'.
   L'unita' vale 1/1080 della larghezza del banner (`cqw`), quindi il
   banner si rimpicciolisce tutto insieme come una fotografia: su un
   telefono e' identico alla versione computer, solo piu' piccolo.
   A differenza dell'immagine pero' il testo resta testo: nitido a ogni
   densita' di schermo, leggibile da Google e dai lettori di schermo, e i
   prezzi si cambiano scrivendo, non ridisegnando.

   --t  = dove cade la cima delle MAIUSCOLE, misurata sull'immagine vecchia
   --k  = distanza fra la cima della riga e la cima delle maiuscole, in em:
          dipende dal carattere, si tara una volta sola per famiglia
   --fs = corpo del testo, in unita'
   ===================================================================== */

@font-face {
    font-family: 'PB Montserrat';
    src: url('../fonts/promo-banner-montserrat.woff2') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'PB Lato';
    src: url('../fonts/promo-banner-lato-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

.pb {
    container-type: inline-size;
    max-width: 1080px;
    margin: 0 auto;
}
.pb-canvas {
    --u: calc(100cqw / 1080);
    --k: .16;
    --blu: #22456f;
    --azzurro: #4581c9;
    --rosso: #e84c3d;
    --inchiostro: #213039;
    position: relative;
    aspect-ratio: 1080 / 1607;   /* l'altezza della tela: se si sposta la fascia bassa, va cambiata qui */
    overflow: hidden;
    background: #fff;
    color: var(--inchiostro);
    font-family: 'PB Montserrat', 'Montserrat', Arial, sans-serif;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
}
/* Browser senza container query (prima del 2023): si ripiega sulla finestra */
@supports not (width: 1cqw) {
    .pb-canvas { --u: calc(min(100vw, 1080px) / 1080); }
}
.pb-canvas * { margin: 0; padding: 0; box-sizing: border-box; }
.pb-canvas ul { list-style: none; }

/* Riquadri: x, y, larghezza e altezza in unita' */
.pb-box {
    position: absolute;
    left: calc(var(--x) * var(--u));
    top: calc(var(--y) * var(--u));
    width: calc(var(--w) * var(--u));
    height: calc(var(--h) * var(--u));
}
/* Righe di testo: si posizionano dalla cima delle maiuscole */
.pb-l {
    position: absolute;
    left: calc(var(--x, 0) * var(--u));
    width: calc(var(--w, 1080) * var(--u));
    top: calc((var(--t) - var(--k) * var(--fs)) * var(--u));
    font-size: calc(var(--fs) * var(--u));
    line-height: 1;
    white-space: nowrap;
}
.pb-sx { --x: 32;  --w: 461; }   /* colonna sinistra  */
.pb-dx { --x: 557; --w: 487; }   /* colonna destra    */

/* --- Fascia alta: titolo, marchi, foto -------------------------------- */
.pb-fondo-blu   { background: var(--blu); }
.pb-titolo      { --x: 0; --w: 526; color: #fff; font-weight: 500; }
.pb-logo        { display: block; }
.pb-logo img,
.pb-foto img    { display: block; width: 100%; height: 100%; }
.pb-foto img    { object-fit: cover; object-position: 50% 50%; }

/* --- Prezzi ----------------------------------------------------------- */
.pb-cornice {
    border: max(1px, calc(1 * var(--u))) solid #4d86cb;
}
.pb-banda       { background: var(--azzurro); }
.pb-prezzi .pb-l { color: var(--blu); }
.pb-prezzi .pb-bianco { color: #fff; }
.pb-forte       { font-weight: 700; }
.pb-semi        { font-weight: 600; }

/* --- Trasporto e montaggio ------------------------------------------- */
.pb-trasporto-l { color: #fff; font-weight: 400; }
.pb-gratuiti    { color: #fff; font-weight: 600; }
.pb-rosso       { color: var(--rosso); }
.pb-l[data-w="600"] { font-weight: 600; }

/* --- Elettrodomestici ------------------------------------------------- */
.pb-fondo-rosso { background: var(--rosso); }
.pb-inclusi     { color: #fff; font-weight: 400; }
.pb-icona {
    position: absolute;
    left: calc(var(--x) * var(--u));
    top: calc(var(--y) * var(--u));
    width: calc(var(--w) * var(--u));
    height: calc(var(--h) * var(--u));
    color: var(--inchiostro);
}
.pb-voce        { --x: 686; --w: 380; text-align: left; font-weight: 600; }
.pb-nota {
    --x: 686; --w: 380;
    --k: .13;
    font-family: 'PB Lato', 'Lato', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    text-transform: none;
    text-align: left;
}
.pb-scelta      { color: var(--rosso); font-weight: 600; }
.pb-marche      { font-weight: 400; }

/* --- Fascia bassa: sconti sui top ------------------------------------- */
.pb-sconto      { color: #fff; font-weight: 400; }
.pb-sconto b    { font-weight: 700; }
.pb-sconto .pb-pct { font-size: 1.24em; line-height: 0; }

/* --- Collegamento: tutta la superficie e' cliccabile ------------------ */
.pb-link {
    position: absolute;
    inset: 0;
    z-index: 2;
}
.pb-link:focus-visible {
    outline: max(3px, calc(6 * var(--u))) solid #ffbf00;
    outline-offset: calc(-6 * var(--u));
}
.pb-sr {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}