/* ============================================================
   TOTEM.CSS — Layout condiviso sezione consultazione
   ------------------------------------------------------------
   Le regole di base valgono su entrambi gli orientamenti.
   Le override .portrait / .landscape adattano solo le
   dimensioni alla risoluzione (stage 1080×1920 vs 1920×1080).
   Sfondo pagina dal #stage (index-portrait.svg /
   consultazione-portrait.svg / -landscape.svg).


/* ============================================================
   DIPENDENZE COPIATE DA layout.css
   ------------------------------------------------------------
   Rese autonome per evitare che la sezione consultazione si
   rompa se layout.css cambia. Queste regole sono *identiche* a
   quelle in layout.css ma hanno un loro "domicilio" qui.
   ============================================================ */

.page-inner {
    width: 100%;
    height: 100%;
}

/* Bottone fullscreen sul viewer PDF (riusato anche dal vecchio markup) */
.btn-fullscreen {
    position: absolute;
    bottom: var(--space-sm);
    right: var(--space-sm);
    width: var(--touch-min);
    height: var(--touch-min);
    background: rgba(0, 0, 0, 0.6);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.btn-fullscreen img {
    width: 60%;
}

/* Barra controlli custom video (play/pausa + mute).
   Cerchi blu Poste solidi così sono visibili sia sopra al frame del video
   sia sopra alle bande nere lasciate da object-fit:contain.
   Nascosti di default: appaiono al tap sul wrapper (.is-visible) e si
   richiudono dopo 5s di inattività — gestito in app.js. */
.video-controls {
    position: absolute;
    right: var(--space-sm);
    bottom: var(--space-sm);
    display: flex;
    gap: var(--space-xs);
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.video-controls.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.cmd-video-ctrl {
    width: var(--touch-min);
    height: var(--touch-min);
    background: #0047bb;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    transition: transform 0.14s ease;
}

.cmd-video-ctrl:active {
    transform: scale(0.94);
}

.cmd-video-ctrl img {
    width: 50%;
}

/* Toggle icona play/pause via attributo data-playing */
.cmd-video-ctrl .ico-pause,
.cmd-video-ctrl[data-playing="true"] .ico-play {
    display: none;
}

.cmd-video-ctrl[data-playing="true"] .ico-pause {
    display: inline-block;
}

/* Toggle icona volume on/off via attributo data-muted */
.cmd-video-ctrl .ico-vol-off,
.cmd-video-ctrl[data-muted="true"] .ico-vol-on {
    display: none;
}

.cmd-video-ctrl[data-muted="true"] .ico-vol-off {
    display: inline-block;
}

/* Wrapper per video residenti sul server (.mp4). Riempie tutto il box
   del .tt-viewer; il <video> dentro usa object-fit:contain così sia un
   sorgente verticale che orizzontale vengono mostrati interi (con bande
   nere ai lati o sopra/sotto a seconda dell'orientamento del totem).
   NIENTE display:flex qui: il flex+align-items centro insieme a
   height:100% sul figlio rompe il sizing del <video> e il sorgente
   verticale finiva fuori dal box. */
.video-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 3px solid #0047bb;
    /*border-radius: var(--radius-md);*/
    overflow: hidden;
    background: #000;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
}

.video-wrapper video {
    /*position: absolute;*/
    inset: 0;
    width: 100%;
    height: calc(var(--stage-h) * 0.55);
    object-fit: contain;
    display: block;
    background: #000;
}

body.landscape .video-wrapper video {
    height: calc(var(--stage-h) * 0.7);
}

.pdf-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.pdf-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Contenitore del PDF sfogliabile (PdfFlipbook = PDF.js + StPageFlip).
   width:100% + height:auto + aspect-ratio dimensiona il box; pdf-flipbook.js
   inietta inline anche max-width e max-height calcolati sull'aspect ratio
   del PDF, in modo che il flipbook non superi mai l'80% dell'altezza dello
   stage e mantenga le proporzioni anche quando viene capato. */
.pdf-flipbook {
    position: relative;
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 0;
    border: 3px solid #0047bb;
    /*border-radius: var(--radius-md);*/
    background: #fff;
    overflow: hidden;
    /* aspect-ratio + max-width + max-height iniettati inline da pdf-flipbook.js */
    /* NOTA: niente will-change:transform qui. In portrait con cornice
       (transform: scale(0.96) sul .pdf-flipbook + scale(2) dello #stage)
       il will-change forzava un bitmap-cache intermedio alla risoluzione
       logica del .pdf-flipbook (~1037px), poi lo stage lo upscalava 2× →
       blur visibile sulle slide. Rimosso, il browser può comporre l'img
       direttamente nel layer dello stage che ha will-change. */
}

/* Variante con cornice decorativa SVG sul <main> della pagina viewer.
   Applicata in app.js solo a una whitelist di PDF (pol-*, psm-*): il bg
   è renderizzato sull'intera area .tt-main, così la cornice è visibile
   tutt'attorno al perimetro del PDF (header + flipbook + pulsanti). */
.tt-viewer-main--cornice {
    background: url('/assets/svg/ui/bg-cornice-orizzontale.svg') no-repeat center center transparent;
    background-size: calc(var(--stage-h) * 1.28);
    background-position: center calc(var(--stage-h) * 0.115);
}

body.portrait .tt-viewer-main--cornice {
    background-size: calc(var(--stage-h) * 0.568);
    background-position: center calc(var(--stage-h) * 0.215);
}

/* PDF dentro la cornice: ridotto al 95% così resta un margine di
   respiro fra il bordo del PDF e il frame decorativo. transform:scale
   non altera il layout (il box originale resta), quindi la cornice
   sullo sfondo del <main> mantiene la sua posizione. */
body.landscape .tt-viewer-main--cornice .pdf-flipbook {
    transform: scale(0.85);
    transform-origin: center center;
}

body.portrait .tt-viewer-main--cornice .pdf-flipbook {
    /*transform: scale(0.96);*/
}

.pdf-flipbook .pf-page {
    background: #fff;
    overflow: hidden;
    /* Riferimento per gli overlay link (.pf-link) posizionati in % */
    position: relative;
}

.pdf-flipbook .pf-page img {
    width: 100%;
    height: 100%;
    display: block;
    -webkit-user-drag: none;
    user-select: none;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
}

/* ── Swiper mode (cartella di immagini al posto del PDF) ────
   Quando pdf-flipbook.js trova una cartella omonima al PDF, monta
   uno Swiper.js di <img> al posto di StPageFlip. Niente layer 3D
   del compositor (effect:'fade' usa solo opacity) → immagini nitide
   al pixel-perfect. Lo Swiper-bundle CSS è caricato via CDN; qui
   solo override di scoping e stile per le <img>. */
.pdf-flipbook .pf-swiper {
    width: 100%;
    height: 100%;
}

.pdf-flipbook .pf-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    -webkit-user-drag: none;
    user-select: none;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
}

/* La slide Swiper è già position:relative dal bundle: gli hotspot
   (.pf-link assoluti in %) si ancorano correttamente alla slide. */

/* Disabilita 3D rendering del flipbook: in single-page mode (forzato
   via patch in pdf-flipbook.js) il flip è 2D piano. Senza 3D layer
   il compositor non bitmap-cacha alla risoluzione logica della pagina,
   evitando l'upscaling-blur quando il transform: scale dello #stage
   (presente sempre in portrait sui totem 4K) ingrandisce la cache. */
.pdf-flipbook .stf__block {
    perspective: none;
}

.pdf-flipbook .pf-page,
.pdf-flipbook .stf__item {
    transform-style: flat;
}

/* Hotspot cliccabili sopra le pagine (link annotation del PDF). Coordinate
   in % iniettate inline da pdf-flipbook.js, scalano con l'immagine. */
.pdf-flipbook .pf-link {
    position: absolute;
    display: block;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    z-index: 5;
    -webkit-tap-highlight-color: rgba(0, 71, 187, 0.12);
}

/* Stato di caricamento del flipbook: solo spinner blu, centrato.
   Il container ha height:auto finché le pagine non vengono montate,
   quindi forziamo una min-height per non far collassare il layout. */
.pdf-flipbook .pf-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: calc(var(--stage-h) * 0.40);
}

.pdf-flipbook .pf-spinner {
    width: calc(var(--stage-h) * 0.060);
    height: calc(var(--stage-h) * 0.060);
    border: calc(var(--stage-h) * 0.005) solid rgba(0, 71, 187, 0.18);
    border-top-color: #0047bb;
    border-radius: 50%;
    animation: pf-spin 0.85s linear infinite;
}

@keyframes pf-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Cerchio "hub" centrale copiato dalla home landscape */
.ls-home-circle {
    flex-shrink: 0;
    width: calc(var(--stage-h) * 0.50);
    height: calc(var(--stage-h) * 0.50);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-lg);
    gap: var(--space-sm);
    cursor: pointer;
    transition: transform 0.14s ease;
    background: none;
    border: none;
}

.ls-home-circle:active {
    transform: scale(0.97);
}

.ls-home-circle.ls-hub {
    width: calc(var(--stage-h) * 0.39);
    height: calc(var(--stage-h) * 0.48);
    cursor: default;
}

/* SVG di sfondo assoluto per i cerchi */
.ls-circle-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    user-select: none;
}

/* Contenuto sovrapposto allo SVG del cerchio hub */
.ls-hub-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
    margin-top: calc(var(--stage-h) * 0.02);
}

.ls-hub-logo {
    height: calc(var(--stage-h) * 0.05);
}

.ls-hub-tagline {
    font-size: calc(var(--stage-h) * 0.015);
    color: #0047bb;
    margin-bottom: calc(var(--stage-h) * 0.005);
}

.ls-hub-featured {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xxs);
    margin-bottom: calc(var(--stage-h) * 0.01);
}

.ls-hub-featured-icon {
    width: calc(var(--stage-h) * 0.05);
}

.ls-hub-featured-label {
    font-size: calc(var(--stage-h) * 0.008);
    color: #0047bb;
    letter-spacing: 0.03em;
}

.ls-hub-icons {
    display: none;
    gap: calc(var(--stage-h) * 0.015);
    justify-content: center;
}

.ls-hub-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xxs);
}

.ls-hub-icon-item img {
    width: calc(var(--stage-h) * 0.025);
}

.ls-hub-icon-item span {
    font-size: calc(var(--stage-h) * 0.008);
    color: #0047bb;
    white-space: nowrap;
}

/* ============================================================
   FINE DIPENDENZE COPIATE — stili originali totem qui sotto
   ============================================================ */

/* ── Wrapper pagina ─────────────────────────────────────── */
.tt-page {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Header: logo brand + titolo sezione ───────────────── */
.tt-header {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: calc(var(--stage-w) * 0.020);
    z-index: 3;
    /* svg: /assets/svg/totem/bg-header.svg */
    background: transparent center/100% 100% no-repeat;
}

.tt-header-logo {
    width: auto;
    flex-shrink: 0;
}

.tt-header-title {
    flex: 1;
    font-weight: var(--font-weight-black);
    color: #00205b;
    letter-spacing: 0.02em;
    line-height: 1.1;
}

/* ── Logo Poste Italiane: standalone in basso a sinistra ─── */
.tt-nav-brand-logo {
    position: absolute;
    bottom: calc(var(--stage-h) * 0.028);
    left: calc(var(--stage-w) * 0.040);
    width: auto;
    display: block;
    user-select: none;
    z-index: 5;
}

.tt-nav-brand-logo:not([data-poste-link]) {
    pointer-events: none;
}

/* ── Main content ──────────────────────────────────────── */
.tt-main {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* ── HUB consultazione (3 aree) ────────────────────────── */
.tt-hub {
    display: grid;
    width: 100%;
    justify-content: center;
}

.tt-hub .tt-hub-tile--pagamenti {
    grid-area: 1/1/3/2;
}

.tt-hub .tt-hub-tile--logistica {
    grid-area: 2/2/4/3;
}

.tt-hub .tt-hub-tile--spedizioni {
    grid-area: 1/3/3/4;
}

.tt-hub-tile {
    border: none;
    background: url("/assets/svg/ui/circle-game.svg") center/100% 100% no-repeat;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-align: center;
    flex-shrink: 0;
    border-radius: 50%;
}

.tt-hub-tile:active {
    transform: scale(0.98);
}

.tt-hub-tile-icon {
    flex-shrink: 0;
    background: transparent;
    mix-blend-mode: lighten;
}

.tt-hub-tile-label {
    font-weight: var(--font-weight-black);
    color: #ffd700;
    line-height: 1.15;
    text-align: center;
}

/* ══════════════════════════════════════════════════════════
   SUB-HUB: pagina interna con parent + N figli-cerchio
   Usata da:
     /consultazione/pagamenti               (3 figli)
     /consultazione/pagamenti/online        (3 figli)
     /consultazione/pagamenti/store         (2 figli)
     /consultazione/pagamenti/abbonamenti   (2 figli)
     /consultazione/logistica               (N figli)
     /consultazione/spedizioni              (2 figli)
   ══════════════════════════════════════════════════════════ */

/* Cerchio "parent" al top: riassunto dell'area */
.tt-sub-parent {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: transparent center/100% 100% no-repeat;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-shrink: 0;
}

.tt-sub-parent-icon {
    flex-shrink: 0;
    background: transparent;
    mix-blend-mode: lighten;
}

.tt-sub-parent-label {
    font-weight: var(--font-weight-black);
    color: #ffd700;
    line-height: 1.15;
    text-align: center;
}

/* Contenitore dei figli */
.tt-sub-items {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
    align-items: center;
    width: 100%;
    margin-top: calc(var(--stage-h) * -0.15);
    z-index: 1;
}

.tt-sub-parent {
    grid-area: 1/2/3/3;
}

/* Singolo figlio: clickable, circolare */
.tt-sub-item {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: transparent center/100% 100% no-repeat;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-align: center;
    flex-shrink: 0;
}

.tt-sub-item--cyan {
    grid-area: 2/1/4/2;
}

.tt-sub-item--green {
    grid-area: 3/2/5/3;
}

.tt-sub-item--magenta {
    grid-area: 2/3/4/4;
}

/* Posizionamento basato sull'indice: evita la sovrapposizione quando più
   item condividono lo stesso colore (Pagamenti Online: 3 ciano; Pagamenti
   Store: 2 green; Gestione Abbonamenti: 2 magenta). Lascia invariate le
   pagine con item di colori misti (Pagamenti hub, Spedizioni). */
.tt-sub-items--3 .tt-sub-item:nth-of-type(1) {
    grid-area: 2/1/4/2;
}

.tt-sub-items--3 .tt-sub-item:nth-of-type(2) {
    grid-area: 3/2/5/3;
}

.tt-sub-items--3 .tt-sub-item:nth-of-type(3) {
    grid-area: 2/3/4/4;
}

.tt-sub-items--2 .tt-sub-item:nth-of-type(1) {
    grid-area: 2/1/4/2;
}

.tt-sub-items--2 .tt-sub-item:nth-of-type(2) {
    grid-area: 2/3/4/4;
}

.tt-sub-item:active {
    transform: scale(0.98);
}

.tt-sub-item-icon {
    flex-shrink: 0;
    background: transparent;
    mix-blend-mode: lighten;
}

.tt-sub-item-label {
    font-weight: var(--font-weight-black);
    color: #ffd700;
    line-height: 1.15;
    text-align: center;
}

/* ── Varianti colore: SVG di sfondo per ogni area ──────────
   Ogni coppia parent/item di un'area condivide lo stesso cerchio.
   I file SVG vanno forniti in /assets/svg/ui/ con i nomi sotto. */
/* blue → stesso asset del bottone "Pagamenti" in home (circle-game.svg),
   così il cerchio parent di /consultazione/pagamenti è identico. */
.tt-sub-parent--blue,
.tt-sub-item--blue {
    background-image: url("/assets/svg/ui/circle-game.svg");
}

/* Varianti colore: stessa forma del circle-game ma colorata diversamente.
   I tre file sono da fornire con la stessa geometria per coerenza visiva. */
.tt-sub-parent--cyan, /*{ background-image: url("/assets/svg/ui/circle-hub-cyan-title.svg"); }*/
.tt-sub-item--cyan {
    background-image: url("/assets/svg/ui/circle-hub-cyan.svg");
}

.tt-sub-parent--green, /*{ background-image: url("/assets/svg/ui/circle-hub-green-title.svg"); }*/
.tt-sub-item--green {
    background-image: url("/assets/svg/ui/circle-hub-green.svg");
}

.tt-sub-parent--magenta, /*{ background-image: url("/assets/svg/ui/circle-hub-magenta-title.svg"); }*/
.tt-sub-item--magenta {
    background-image: url("/assets/svg/ui/circle-hub-magenta.svg");
}

/* Solo /consultazione/spedizioni: cerchio parent con grafica
   brandizzata "Posteitaliane Delivery Business".
   Niente label né icona dentro il cerchio: SVG self-contained. */
.tt-sub-parent--delivery-business {
    background-image: url("/assets/svg/ui/circle-delivery-business.svg");
    grid-area: 1/2/3/3;
}

.tt-page--spedizioni .tt-sub-item--blue {
    background-image: url("/assets/svg/ui/circle-hub-cyan.svg");
    grid-area: 2/1/4/2;
}

.tt-page--spedizioni .tt-sub-item--green {
    background-image: url("/assets/svg/ui/circle-hub-green-old.svg");
    grid-area: 2/3/4/4;
}

/* ── Sub-hub: lista sezioni ────────────────────────────── */
.tt-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow-y: auto;
}

.tt-list-item {
    width: 100%;
    border: none;
    border-radius: var(--radius-lg);
    background: transparent center/100% 100% no-repeat;
    /* svg: /assets/svg/totem/bg-list-item.svg */
    display: flex;
    align-items: center;
    cursor: pointer;
    text-align: left;
    flex-shrink: 0;
}

.tt-list-item:active {
    transform: scale(0.98);
}

.tt-list-item-icon {
    flex-shrink: 0;
}

.tt-list-item-label {
    flex: 1;
    font-weight: var(--font-weight-bold);
    color: #ffffff;
    line-height: 1.2;
}

.tt-list-item-badge {
    font-weight: var(--font-weight-bold);
    color: #ffd700;
    background: rgba(255, 215, 0, 0.14);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    white-space: nowrap;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ── Home portrait-only ────────────────────────────────── */
.tt-home-hero {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.tt-home-title {
    font-weight: var(--font-weight-black);
    color: #00205b;
    line-height: 1.05;
    letter-spacing: 0.01em;
}

.tt-home-subtitle {
    font-weight: var(--font-weight-regular);
    color: #00205b;
    opacity: 0.75;
    line-height: 1.3;
    max-width: 80%;
}

.tt-home-cta {
    border: none;
    border-radius: var(--radius-full);
    background: transparent center/100% 100% no-repeat;
    /* svg: /assets/svg/ui/bg-pulsante-blu.svg */
    color: #ffd700;
    font-weight: var(--font-weight-black);
    letter-spacing: 0.04em;
    cursor: pointer;
    text-align: center;
}

.tt-home-cta:active {
    transform: scale(0.97);
}

.tt-home-event {
    position: absolute;
    bottom: calc(var(--stage-h) * 0.025);
    left: 0;
    right: 0;
    text-align: center;
    color: rgba(0, 32, 91, 0.55);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    pointer-events: none;
}

/* ── Viewer (PDF / video) ──────────────────────────────── */
.tt-viewer {
    flex: 1;
    align-self: stretch; /* full-width dentro tt-main (align-items:center) */
    width: 100%;
    position: relative;
    overflow: hidden;
    background: transparent; /* niente nero di default: lo mette solo il video */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* PDF: il flipbook va ancorato in alto al contenitore. */
.tt-viewer:has(.pdf-flipbook) {
    align-items: flex-start;
}

/* Video: niente flex centering — il .video-wrapper riempie l'intera area
   del viewer e usa object-fit:contain sul <video> per gestire sia
   sorgenti verticali che orizzontali senza tagli o overflow. */
.tt-viewer:has(.video-wrapper) {
    display: block;
}

/* ── Viewer header: cerchio hub + titolo del contenuto ───
   Layout pagine viewer: cerchio "Posteitaliane — Non è solo eCommerce"
   in alto + titolo del contenuto sotto, riprendendo il mockup pagina23.pdf. */
.tt-page--viewer .tt-viewer-main {
    justify-content: flex-start;
}

/* Solo portrait: sfondo dedicato per le pagine PDF/video del totem.
   Copre lo sfondo dello #stage (consultazione-portrait.svg). */
body.portrait .tt-page--viewer {
    background: url("/assets/svg/bg/consultazione-portrait-contenuti.svg") center/cover no-repeat;
}

/* Pagine viewer: il .tt-viewer (PDF/video) e i pulsanti home/back
   sono entrambi figli di un wrapper .tt-viewer-stage che ne diventa il
   contenitore di riferimento. Lo stage è position:relative, così le
   regole .btn-home / .btn-torna-indietro (position:absolute con bottom
   e right già espressi in unità relative allo stage) puntano allo stage
   invece che alla .tt-page → i pulsanti finiscono SEMPRE appena sotto/
   accanto al viewer, qualsiasi sia l'altezza del PDF/video.
   Lo stage padding-bottom riserva l'area dei pulsanti così il .tt-viewer
   (al suo interno) non li copre mai. */
.tt-viewer-stage {
    position: relative;
    /*flex: 1;*/
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0; /* permette al figlio flex:1 di restringere */
}

body.portrait .tt-viewer-stage {
    padding-bottom: calc(var(--stage-w) * 0.10/* altezza pulsante */
    + var(--stage-h) * 0.025/* bottom pulsante */
    + var(--stage-h) * 0.025); /* breathing */
}

body.landscape .tt-viewer-stage {
    padding-bottom: calc(var(--stage-h) * 0.07/* altezza pulsante */
    + var(--stage-h) * 0.04/* bottom pulsante */
    + var(--stage-h) * 0.025); /* breathing */
    margin-top: calc(var(--stage-h) * 0.015);
}

/* Variante "video-only" dello stage: matcha SOLO se al suo interno c'è un
   .video-wrapper, escludendo i PDF (.pdf-flipbook). Usala per regole
   specifiche del viewer video (es. dimensionamenti diversi, padding
   custom, ecc.) senza toccare il caso PDF. */
.tt-viewer-stage:has(.video-wrapper) {
    width: auto;
}

body.portrait .tt-viewer-stage:has(.video-wrapper) {
    /* override portrait solo-video */
}

body.landscape .tt-viewer-stage:has(.video-wrapper) {
    /* override landscape solo-video */
}

/* Il viewer riempie l'area dello stage al netto del padding-bottom
   (che è la zona dei pulsanti). Niente più position:absolute qui:
   resta in flex flow e si adatta alle dimensioni dello stage. */
.tt-page--viewer .tt-viewer {
    flex: 1;
    width: 100%;
    min-height: 0;
}

/* Container dei due pulsanti home/back nel viewer.
   È position:absolute riferito a .tt-viewer-stage (suo positioned ancestor)
   e ospita i pulsanti in flex row, ancorato in basso a destra dello stage.
   I .btn-home / .btn-torna-indietro al suo interno tornano position:static
   (override del rule globale in layout.css), ordinati dal flex. */
.tt-viewer-actions {
    display: flex;
    justify-content: right;
    align-items: center;
    margin-top: 25px;
    z-index: 5;
}

body.portrait .tt-viewer-actions {
    right: calc(var(--stage-w) * 0.045);
    bottom: calc(var(--stage-h) * 0.025);
    gap: calc(var(--stage-w) * 0.020);
}

body.landscape .tt-viewer-actions {
    position: absolute !important;
    right: calc(var(--stage-w) * 0);
    bottom: calc(var(--stage-h) * 0.040);
    gap: calc(var(--stage-h) * 0.015);
}

.tt-viewer-actions .btn-home,
.tt-viewer-actions .btn-torna-indietro,
.tt-viewer-actions .btn-first-page {
    position: static;
    right: auto;
    bottom: auto;
}

.tt-viewer-header {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 100%;
    margin-top: calc(var(--stage-h) * -0.015);
}

.tt-viewer-title {
    font-weight: 600;
    color: #0047bb;
    letter-spacing: 0.01em;
    text-align: center;
    line-height: 1.1;
    max-width: 90%;
}

/* PDF: cornice nera con radius. Il video porta lo stesso stile dentro al
   wrapper così il box nero coincide con la forma 16:9 del player. */
.tt-viewer:has(.pdf-wrapper) {
    background: #000;
    border-radius: var(--radius-md);
}

.tt-viewer iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* ── Placeholder ───────────────────────────────────────── */
.tt-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(0, 32, 91, 0.55);
    text-align: center;
}

.tt-placeholder img {
    height: auto;
    opacity: 0.45;
}

/* ============================================================
   PORTRAIT (totem 9:16 — 1080×1920)
   ============================================================ */
/* Header consultazione nascosto su entrambi gli orientamenti:
   il logo Poste è già nella nav in basso (tt-nav-brand-logo). */
.tt-header {
    display: none;
}

body.portrait .tt-nav-brand-logo {
    height: calc(var(--stage-h) * 0.018);
    left: calc(var(--stage-h) * 0.04);
    bottom: calc(var(--stage-h) * 0.038);
}

body.portrait .tt-main {
    padding: calc(var(--stage-h) * 0.015) calc(var(--stage-w) * 0.020) calc(var(--stage-h) * 0.120);
    gap: calc(var(--stage-h) * 0.030);
    justify-content: start;
}

body.portrait .tt-hub {
    width: 100%;
    margin-top: calc(var(--stage-h) * -0.10);
    grid-template-columns: 1fr 1fr 1fr;
    gap: calc(var(--stage-h) * 0.020);
}

body.portrait .tt-hub-tile {
    flex: 1;
    max-width: calc(var(--stage-w) * 0.28);
    gap: 0;
    padding: calc(var(--stage-w) * 0.030);
}

body.portrait .tt-hub-tile-icon {
    width: calc(var(--stage-w) * 0.070);
    height: calc(var(--stage-w) * 0.085);
}

body.portrait .tt-hub-tile-label {
    font-size: calc(var(--stage-w) * 0.018);
    font-weight: 600;
}

/* Sub-hub portrait: parent ~44% stage-w, figli in riga sotto */
body.portrait .tt-sub-parent {
    width: calc(var(--stage-w) * 0.20);
    gap: calc(var(--stage-h) * 0);
    padding: calc(var(--stage-w) * 0.035);
    /*margin-bottom: calc(var(--stage-h) * 0.035);*/
}

body.portrait .tt-sub-parent-icon {
    width: calc(var(--stage-w) * 0.065);
    height: calc(var(--stage-w) * 0.060);
}

body.portrait .tt-sub-parent-label {
    font-size: calc(var(--stage-w) * 0.015);
    font-weight: 600;
}

body.portrait .tt-sub-items {
    gap: calc(var(--stage-w) * 0.030) calc(var(--stage-w) * 0.025);
    max-width: 100%;
}

/* 2 figli: tile più grande (≈40% stage-w); 3 figli: più piccoli (≈28%) */
body.portrait .tt-sub-items--2 .tt-sub-item {
    width: calc(var(--stage-w) * 0.31);
}

body.portrait .tt-sub-items--3 .tt-sub-item {
    width: calc(var(--stage-w) * 0.30);
}

body.portrait .tt-sub-item {
    gap: calc(var(--stage-h) * 0.008);
    padding: calc(var(--stage-w) * 0.025);
}

body.portrait .tt-sub-item-icon {
    width: calc(var(--stage-w) * 0.085);
    height: calc(var(--stage-w) * 0.085);
}

body.portrait .tt-sub-items--2 .tt-sub-item-label {
    font-size: calc(var(--stage-w) * 0.0175);
    font-weight: 600;
}

body.portrait .tt-sub-items--3 .tt-sub-item-label {
    font-size: calc(var(--stage-w) * 0.020);
    font-weight: 600;
}

body.portrait .tt-list {
    gap: calc(var(--stage-h) * 0.020);
    padding: calc(var(--stage-h) * 0.010) 0;
}

body.portrait .tt-list-item {
    min-height: calc(var(--stage-h) * 0.090);
    gap: calc(var(--stage-w) * 0.035);
    padding: calc(var(--stage-h) * 0.016) calc(var(--stage-w) * 0.045);
}

body.portrait .tt-list-item-icon {
    width: calc(var(--stage-w) * 0.080);
    height: calc(var(--stage-w) * 0.080);
}

body.portrait .tt-list-item-label {
    font-size: calc(var(--stage-w) * 0.038);
}

body.portrait .tt-list-item-badge {
    font-size: calc(var(--stage-w) * 0.024);
    padding: 0.25em 0.60em;
}

body.portrait .tt-home-hero {
    gap: calc(var(--stage-h) * 0.025);
}

body.portrait .tt-home-title {
    font-size: calc(var(--stage-w) * 0.070);
}

body.portrait .tt-home-subtitle {
    font-size: calc(var(--stage-w) * 0.034);
}

body.portrait .tt-home-cta {
    width: calc(var(--stage-w) * 0.70);
    min-height: calc(var(--stage-h) * 0.095);
    font-size: calc(var(--stage-w) * 0.052);
    padding: calc(var(--stage-h) * 0.014) calc(var(--stage-w) * 0.050);
}

body.portrait .tt-home-event {
    font-size: calc(var(--stage-w) * 0.026);
}

body.portrait .tt-viewer {
    /* niente margini laterali: il flipbook è già al 90% dello stage */
    /*margin: calc(var(--stage-h) * -0.250) 0 calc(var(--stage-h) * 0.100);*/
    margin: 0;
}

/* Viewer header portrait: cerchio compatto + titolo */
body.portrait .tt-page--viewer .tt-viewer-main {
    gap: calc(var(--stage-h) * 0.018);
}

body.portrait .tt-viewer-header .ls-home-circle.ls-hub {
    width: calc(var(--stage-w) * 0.30);
    height: calc(var(--stage-w) * 0.30);
    padding: 0;
}

body.portrait .tt-viewer-header .ls-hub-logo {
    height: calc(var(--stage-w) * 0.040);
}

body.portrait .tt-viewer-header .ls-hub-tagline {
    font-size: calc(var(--stage-w) * 0.018);
    margin-bottom: 0;
    white-space: nowrap;
}

body.portrait .tt-viewer-header .ls-hub-featured,
body.portrait .tt-viewer-header .ls-hub-icons {
    display: none;
}

body.portrait .tt-viewer-header .ls-hub-content {
    margin-top: calc(var(--stage-h) * 0.015);
}

body.portrait .tt-viewer-title {
    font-size: calc(var(--stage-w) * 0.036);
    margin: calc(var(--stage-h) * 0.02) 0 0;
    white-space: nowrap;
}

body.portrait .tt-viewer-main--cornice .tt-viewer-title {
    margin: calc(var(--stage-h) * 0.02) 0 0;
}

body.portrait .tt-viewer-title span {
    font-weight: 400;
}

/* Video portrait: wrapper a piena area del viewer; il <video> dentro
   resta centrato con object-fit:contain (sorgenti verticali e
   orizzontali vengono entrambi mostrati interi). */

/* Sul totem i comandi del video sono più compatti: dimezzati rispetto al
   default (--touch-min). L'icona resta al 60% del bottone, il radius scende
   anch'esso a metà per mantenere le proporzioni. */
body.portrait .cmd-video-ctrl {
    width: calc(var(--touch-min) * 0.5);
    height: calc(var(--touch-min) * 0.5);
    border-radius: calc(var(--radius-md) * 0.5);
}

body.portrait .video-controls {
    gap: calc(var(--space-xs) * 0.6);
}

body.portrait .tt-placeholder {
    gap: calc(var(--stage-h) * 0.018);
    font-size: calc(var(--stage-w) * 0.036);
    padding: calc(var(--stage-h) * 0.060) calc(var(--stage-w) * 0.080);
}

body.portrait .tt-placeholder img {
    width: calc(var(--stage-w) * 0.14);
}

body.portrait .tt-placeholder small {
    font-size: calc(var(--stage-w) * 0.028);
}

/* ============================================================
   LANDSCAPE (tavolo 16:9 — 1920×1080)
   ------------------------------------------------------------
   Proporzioni allineate al portrait usando stage-h (= 1080) come
   base, equivalente a stage-w (= 1080) del portrait. I valori
   ricalcano i moltiplicatori del portrait così che gli elementi
   appaiano con la stessa stazza visiva su entrambi gli schermi.
   Le sole differenze legittime sono layout-specifiche
   (flex-direction:row sull'hub, padding-bottom maggiore per il
   logo + back nel margine inferiore landscape).
   ============================================================ */
body.landscape .tt-nav-brand-logo {
    bottom: calc(var(--stage-h) * 0.038);
    left: calc(var(--stage-w) * 0.024);
    height: calc(var(--stage-h) * 0.025);
}

body.landscape .tt-main {
    padding: calc(var(--stage-h) * 0.030) calc(var(--stage-w) * 0.040) calc(var(--stage-h) * 0);
    gap: calc(var(--stage-h) * 0.030);
    justify-content: start;
}

body.landscape .ls-hub-logo {
    height: calc(var(--stage-h) * 0.060);
}

body.landscape .ls-hub-featured-icon {
    width: calc(var(--stage-h) * 0.085);
}

body.landscape .ls-hub-featured-label {
    font-size: calc(var(--stage-h) * 0.010);
    color: #0047bb;
    letter-spacing: 0.03em;
}

body.landscape .ls-hub-tagline {
    font-size: var(--font-size-sm);
    color: #0047bb;
    margin-bottom: calc(var(--stage-h) * 0.005);
}

body.landscape .ls-home-circle.ls-hub {
    width: calc(var(--stage-h) * 0.45);
    height: calc(var(--stage-h) * 0.45);
}

body.landscape .consultazione-home .ls-home-circle.ls-hub {
    width: calc(var(--stage-h) * 0.55);
    height: calc(var(--stage-h) * 0.55);
}

body.landscape .ls-hub-icon-item img {
    width: calc(var(--stage-h) * 0.045);
}

body.landscape .ls-hub-featured {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xxs);
    margin-bottom: var(--space-sm);
}

/* HUB consultazione: 3 aree in fila orizzontale (vs grid 3-col del portrait) */
body.landscape .tt-hub {
    flex-direction: row;
    gap: calc(var(--stage-h) * 0.030);
    padding: calc(var(--stage-h) * 0.015) 0;
    max-width: calc(var(--stage-w) * 0.90);
    margin-top: calc(var(--stage-h) * -0.10);
    justify-content: center;
}

body.landscape .tt-hub-tile {
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    width: calc(var(--stage-h) * 0.28);
    max-width: calc(var(--stage-h) * 0.28);
    gap: 0;
    padding: calc(var(--stage-h) * 0.030);
}

body.landscape .tt-hub-tile-icon {
    width: calc(var(--stage-h) * 0.065);
    height: calc(var(--stage-h) * 0.090);
}

body.landscape .tt-hub-tile-label {
    font-size: calc(var(--stage-h) * 0.022);
    font-weight: 600;
    text-align: center;
    flex: 0 0 auto;
}

/* Sub-hub: parent in alto + N figli (cerchi colorati) sotto */
body.landscape .tt-sub-parent {
    width: calc(var(--stage-h) * 0.20);
    gap: 0;
    padding: calc(var(--stage-h) * 0.035);
    margin-bottom: 0;
}

body.landscape .tt-sub-parent-icon {
    width: calc(var(--stage-h) * 0.065);
    height: calc(var(--stage-h) * 0.060);
}

body.landscape .tt-sub-parent-label {
    font-size: calc(var(--stage-h) * 0.015);
    font-weight: 600;
}

body.landscape .tt-sub-items {
    gap: calc(var(--stage-h) * 0.030) calc(var(--stage-h) * 0.025);
    max-width: calc(var(--stage-w) * 0.65);
}

body.landscape .tt-sub-items--2 .tt-sub-item {
    width: calc(var(--stage-h) * 0.31);
}

body.landscape .tt-sub-items--3 .tt-sub-item {
    width: calc(var(--stage-h) * 0.30);
}

body.landscape .tt-sub-item {
    gap: calc(var(--stage-h) * 0.008);
    padding: calc(var(--stage-h) * 0.025);
}

body.landscape .tt-sub-item-icon {
    width: calc(var(--stage-h) * 0.085);
    height: calc(var(--stage-h) * 0.085);
}

body.landscape .tt-sub-items--2 .tt-sub-item-label,
body.landscape .tt-sub-items--3 .tt-sub-item-label {
    font-size: calc(var(--stage-h) * 0.0175);
    font-weight: 600;
}

body.landscape .tt-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--stage-h) * 0.022) calc(var(--stage-w) * 0.022);
    padding: calc(var(--stage-h) * 0.015) 0;
    max-width: calc(var(--stage-w) * 0.90);
    overflow-y: auto;
}

body.landscape .tt-list-item {
    min-height: calc(var(--stage-h) * 0.110);
    gap: calc(var(--stage-w) * 0.018);
    padding: calc(var(--stage-h) * 0.020) calc(var(--stage-w) * 0.025);
}

body.landscape .tt-list-item-icon {
    width: calc(var(--stage-h) * 0.080);
    height: calc(var(--stage-h) * 0.080);
}

body.landscape .tt-list-item-label {
    font-size: calc(var(--stage-h) * 0.034);
}

body.landscape .tt-list-item-badge {
    font-size: calc(var(--stage-h) * 0.022);
    padding: 0.30em 0.70em;
}

body.landscape .tt-viewer {
    /* niente margini: stesso comportamento del portrait, è lo stage stesso
       a riservare lo spazio sotto per i pulsanti. */
    margin: 0;
}

/* Viewer header landscape: SOLO titolo, nessun cerchio
   (sul tavolo orizzontale lo spazio verticale è limitato e il cerchio
   ruba area al PDF; il titolo da solo è sufficiente da identificatore). */
body.landscape .tt-page--viewer .tt-viewer-main {
    gap: calc(var(--stage-h) * 0.018);
}

body.landscape .tt-viewer-header .ls-home-circle.ls-hub {
    display: none;
}

body.landscape .tt-viewer-title {
    font-size: calc(var(--stage-h) * 0.040);
    margin: 0;
    white-space: nowrap;
}

body.landscape .tt-viewer-title span {
    font-weight: 400;
}

/* Video landscape: stessa logica del portrait — wrapper a piena area,
   il <video> con object-fit:contain si adatta sia 16:9 che 9:16. */

body.landscape .tt-placeholder {
    gap: calc(var(--stage-h) * 0.025);
    font-size: calc(var(--stage-h) * 0.035);
    padding: calc(var(--stage-h) * 0.060) calc(var(--stage-w) * 0.120);
}

body.landscape .tt-placeholder img {
    width: calc(var(--stage-h) * 0.14);
}

body.landscape .tt-placeholder small {
    font-size: calc(var(--stage-h) * 0.026);
}