/* BB Coda — sala d'attesa.
   Token e misure ripresi dal tema del sito (bbcom-child-theme: 00-tokens.css,
   header.css, home.css dello staging): bianco/nero, Jost per titoli e servizio,
   Playfair Display corsivo per il racconto, hero a tutto schermo con testo bianco. */

:root {
  --bb-bg: #fff;
  --bb-fg: #111;
  --bb-black: #000;
  --bb-muted: rgba(17, 17, 17, .68);
  --bb-line: rgba(17, 17, 17, .08);
  --bb-line-forte: rgba(17, 17, 17, .14);
  --bb-bg-dark: #1a1a1a;
  --bb-gutter: clamp(14px, 2.2vw, 28px);
  --bb-max: 1720px;
  --bb-font: 'Jost', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --bb-font-editorial: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --bb-body: 14px;
  --bb-small: 12px;
  --bb-ls-heading: 0.16em;
  --bb-ls-wide: 0.08em;
  --bb-h1-hero: clamp(22px, 2.2vw, 32px);
  --bb-transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
  /* testata: fascia bianca come sul sito (XD: 60px, logo 22px desktop / 16px telefono) */
  --testata-h: 60px;
  --logo-h: 22px;
  --dissolvenza: 1600ms;
  /* fondo del palco finche' non arriva la prima immagine: neutro caldo, non nero */
  --palco-fondo: #d9d6d1;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

@property --velo { syntax: '<number>'; inherits: true; initial-value: .30; }
@property --velo-centro { syntax: '<number>'; inherits: true; initial-value: .22; }
@property --velo-bordo { syntax: '<number>'; inherits: true; initial-value: .30; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bb-bg);
  color: var(--bb-fg);
  font-family: var(--bb-font);
  font-size: var(--bb-body);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--testata-h) minmax(140px, 1fr) max-content;
  grid-template-areas: "testata" "palco" "pannello";
  height: 100vh;
  height: 100dvh;
  min-height: 420px;
  /* di norma tutto sta in una schermata; con lo zoom forte (200%) si scorre */
  overflow-x: hidden;
  overflow-y: auto;
}

button { font: inherit; color: inherit; }
p { margin: 0; }

:where(a, button):focus-visible {
  outline: 2px solid rgba(17, 17, 17, .55);
  outline-offset: 2px;
}

.solo-lettori {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- testata: come l'header del sito ---------- */

.testata {
  grid-area: testata;
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--bb-gutter);
  background: var(--bb-bg);
  border-bottom: 1px solid var(--bb-line);
}

.testata__logo {
  grid-column: 2;
  display: block;
  height: var(--logo-h);
  width: auto;
  max-width: 100%;
  /* con lo zoom forte la colonna si stringe: il logo si rimpicciolisce, non si deforma */
  object-fit: contain;
}

.testata__lingue {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  margin-right: -10px;
  font-size: var(--bb-small);
  letter-spacing: var(--bb-ls-wide);
}

.testata__lingue button {
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  background: none;
  border: 0;
  cursor: pointer;
  letter-spacing: inherit;
  color: var(--bb-muted);
  transition: color var(--bb-transition-slow);
}

.testata__lingue button:hover { color: var(--bb-fg); }

.testata__lingue button[aria-current="true"] {
  color: var(--bb-fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

.testata__sep {
  width: 1px;
  height: 12px;
  background: var(--bb-line-forte);
}

/* ---------- palco: media a rotazione + racconto ---------- */

.palco {
  grid-area: palco;
  position: relative;
  overflow: hidden;
  background: var(--palco-fondo);
  color: #fff;
  container: palco / size;
}

.primo-poster,
.primo-poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scena {
  position: absolute;
  inset: 0;
}

.quadro {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--dissolvenza) ease, --velo .8s ease, --velo-centro .8s ease, --velo-bordo .8s ease;
  /* intensita' del velo: la calcola coda.js sulla luminosita' reale dell'immagine
     nella zona del testo; questi sono i valori prudenti finche' non la conosce */
  --velo: .26;
  --velo-centro: .22;
  --velo-bordo: .30;
}

.quadro.attivo { opacity: 1; z-index: 1; }
/* il primo quadro e' uguale al poster gia' in pagina: niente dissolvenza */
.quadro.subito { transition: none; }

.quadro img,
.quadro video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* velo per leggere il bianco: uniforme leggero (come la hero del sito) + un alone
   largo e morbido dietro al testo (al massimo ~0.32) + il fondo appena piu' scuro
   sotto il bottone Pausa. Con la frase in alto o in basso l'alone diventa un
   gradiente dal bordo: sulle foto chiarissime e' quello che tiene il contrasto. */
.quadro::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse var(--alone-l, 78%) var(--alone-a, 62%) at 50% 50%, rgba(0, 0, 0, var(--velo-centro)) 0%, rgba(0, 0, 0, calc(var(--velo-centro) * .7)) 45%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(300px 160px at 100% 100%, rgba(0, 0, 0, .36), rgba(0, 0, 0, 0)),
    rgba(0, 0, 0, var(--velo));
}

.quadro--basso::after {
  background:
    linear-gradient(to top, rgba(0, 0, 0, var(--velo-bordo)) 0%, rgba(0, 0, 0, calc(var(--velo-bordo) * .78)) 30%, rgba(0, 0, 0, calc(var(--velo-bordo) * .3)) 55%, rgba(0, 0, 0, 0) 75%),
    rgba(0, 0, 0, var(--velo));
}

.quadro--alto::after {
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, var(--velo-bordo)) 0%, rgba(0, 0, 0, calc(var(--velo-bordo) * .78)) 30%, rgba(0, 0, 0, calc(var(--velo-bordo) * .3)) 55%, rgba(0, 0, 0, 0) 75%),
    radial-gradient(300px 160px at 100% 100%, rgba(0, 0, 0, .36), rgba(0, 0, 0, 0)),
    rgba(0, 0, 0, var(--velo));
}

.racconto {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* in basso resta libero lo spazio del bottone Pausa */
  padding: 48px max(var(--bb-gutter), 24px) 76px;
  text-align: center;
  pointer-events: none;
  transition: opacity 700ms ease;
  text-shadow: 0 0 2px rgba(0, 0, 0, .28), 0 1px 10px rgba(0, 0, 0, .28);
}

.racconto--alto { justify-content: flex-start; padding-top: clamp(36px, 7cqh, 72px); }
.racconto--basso { justify-content: flex-end; padding-bottom: clamp(64px, 11cqh, 96px); }

.racconto.nascosto { opacity: 0; }

.racconto__testo {
  max-width: 30em;
  font-family: var(--bb-font-editorial);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(21px, 2.1vw, 30px);
  line-height: 1.42;
  text-wrap: balance;
}

/* il titolone come "MORE THAN BAGS" della home */
.racconto.titolo .racconto__testo {
  max-width: none;
  font-family: var(--bb-font);
  font-style: normal;
  font-weight: 300;
  font-size: var(--bb-h1-hero);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: var(--bb-ls-heading);
  /* il tracking aggiunge spazio dopo l'ultima lettera: si compensa per centrare */
  margin-right: calc(-1 * var(--bb-ls-heading));
}

.racconto__firma {
  margin-top: 26px;
  font-size: var(--bb-small);
  font-weight: 400;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: var(--bb-ls-heading);
}

.racconto__firma:empty { display: none; }

/* ---------- e' il tuo turno: il momento protagonista ---------- */

.momento {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 4cqh, 36px);
  padding: 24px max(var(--bb-gutter), 20px);
  background: rgba(0, 0, 0, .46);
  text-align: center;
  animation: entra-momento .8s ease both;
}

.momento[hidden] { display: none; }

.momento__titolo {
  font-family: var(--bb-font);
  font-weight: 300;
  font-size: clamp(30px, 4.4vw, 60px);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: var(--bb-ls-heading);
  margin-right: calc(-1 * var(--bb-ls-heading));
  text-shadow: 0 0 2px rgba(0, 0, 0, .25), 0 1px 12px rgba(0, 0, 0, .25);
}

.momento__nota {
  max-width: 34em;
  margin-top: calc(-1 * clamp(8px, 2cqh, 18px));
  font-size: var(--bb-body);
  line-height: 1.5;
  text-shadow: 0 0 2px rgba(0, 0, 0, .35);
}

.momento__nota[hidden] { display: none; }

@keyframes entra-momento { from { opacity: 0; } to { opacity: 1; } }

body.in-turno .racconto,
body.in-turno .pausa { display: none; }

/* ---------- pausa ---------- */

.pausa {
  position: absolute;
  z-index: 3;
  right: calc(var(--bb-gutter) - 8px);
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 8px;
  background: none;
  border: 0;
  color: #fff;
  font-size: var(--bb-small);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--bb-ls-heading);
  text-shadow: 0 0 2px rgba(0, 0, 0, .25), 0 0 12px rgba(0, 0, 0, .4);
  cursor: pointer;
  transition: opacity .3s ease;
}

.pausa:hover { opacity: .7; }
.pausa:focus-visible { outline-color: #fff; }

.pausa__icona {
  flex: none;
  width: 8px;
  height: 10px;
  border-left: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

.pausa.ferma .pausa__icona {
  width: 0;
  height: 0;
  border: 0;
  border-left: 8px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

/* ---------- pannello di stato ---------- */

.pannello {
  grid-area: pannello;
  position: relative;
  z-index: 3;
  background: var(--bb-bg);
  /* altezza stabile: il palco non salta quando cambia lo stato */
  display: grid;
  align-content: center;
  min-height: 240px;
  padding: clamp(22px, 2.4vw, 32px) var(--bb-gutter) calc(clamp(22px, 2.4vw, 32px) + env(safe-area-inset-bottom));
}

/* avanzamento della coda: sotto il numero, dentro il pannello */
.avanzamento {
  position: relative;
  height: 2px;
  margin: 16px auto 0;
  width: 100%;
  max-width: 260px;
  background: rgba(17, 17, 17, .16);
  overflow: hidden;
}

.avanzamento[hidden] { display: none; }

.avanzamento__riempimento {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--bb-fg);
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.pannello__avviso {
  max-width: var(--bb-max);
  margin: -6px auto 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--bb-line);
  font-size: var(--bb-small);
  line-height: 1.5;
  letter-spacing: .02em;
  text-align: center;
}

.pannello__griglia {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 3vw, 56px);
  max-width: var(--bb-max);
  margin: 0 auto;
}

.occhiello {
  margin-bottom: 8px;
  font-size: var(--bb-small);
  font-weight: 400;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: var(--bb-ls-heading);
  color: var(--bb-muted);
}

.occhiello:empty { display: none; }

.pannello__stato {
  margin: 0;
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 400;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: var(--bb-ls-heading);
}

.pannello__centro {
  text-align: center;
  min-width: 240px;
}

/* stati senza numero (estrazione, rete, turno...): una colonna sola, centrata */
.pannello--semplice .pannello__griglia {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 12px;
  text-align: center;
}
.pannello--semplice .pannello__centro { display: none; }
.pannello--semplice .pannello__intro,
.pannello--semplice .pannello__dettaglio { grid-column: auto; grid-row: auto; justify-self: center; }
.pannello--semplice .pannello__dettaglio { width: min(560px, 100%); }

.numero {
  display: block;
  font-size: clamp(44px, 4.4vw, 64px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}

.numero__etichetta {
  display: block;
  margin-top: 10px;
  font-size: var(--bb-small);
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: var(--bb-ls-heading);
  color: var(--bb-muted);
}

.numero--parola {
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: var(--bb-ls-heading);
  margin-right: calc(-1 * var(--bb-ls-heading));
}

.nota { margin: 0; }

.conto {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px clamp(18px, 2vw, 32px);
}

.conto__parte {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.conto__parte .numero { min-width: 1.25em; text-align: center; }

.pannello__dettaglio {
  justify-self: end;
  width: min(400px, 100%);
  font-size: var(--bb-body);
  line-height: 1.6;
  color: var(--bb-muted);
  text-wrap: pretty;
}

.dato { margin-bottom: 10px; }

.dato__etichetta {
  display: block;
  font-size: var(--bb-small);
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: var(--bb-ls-heading);
  color: var(--bb-muted);
}

.dato__valore {
  display: block;
  margin-top: 4px;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.3;
  color: var(--bb-fg);
}

.dato__extra {
  display: block;
  margin-top: 2px;
  font-size: var(--bb-small);
  color: var(--bb-muted);
}

.pannello__dettaglio strong { font-weight: 500; color: var(--bb-fg); }

/* CTA come quelle del sito: nero pieno, angoli vivi, maiuscolo */
.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  min-width: 220px;
  padding: 0 48px;
  background: var(--bb-black);
  color: #fff;
  border: 1px solid var(--bb-black);
  font-size: var(--bb-small);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--bb-ls-heading);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--bb-transition-slow), color var(--bb-transition-slow);
}

.bottone:hover { background: #fff; color: var(--bb-black); }

/* sul palco scuro: bianco pieno */
.bottone--chiaro { background: #fff; color: var(--bb-black); border-color: #fff; }
.bottone--chiaro:hover { background: transparent; color: #fff; }
.bottone--chiaro:focus-visible { outline-color: #fff; outline-offset: 3px; }

.puntini::after {
  content: '';
  display: inline-block;
  width: 1.4em;
  text-align: left;
  animation: puntini 1.6s steps(4, end) infinite;
}

@keyframes puntini {
  0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; }
}

.senza-js {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 10;
  padding: 28px var(--bb-gutter);
  background: #fff;
  text-align: center;
}

.senza-js p + p { margin-top: 6px; color: var(--bb-muted); }

/* ---------- tablet stretto ---------- */

@media (max-width: 1000px) and (min-width: 768px) {
  .pannello__griglia { grid-template-columns: minmax(0, 1fr) auto; }
  .pannello__intro { grid-column: 1; }
  .pannello__centro { grid-column: 2; grid-row: 1 / span 2; }
  .pannello__dettaglio { grid-column: 1; grid-row: 2; justify-self: start; }
}

/* ---------- telefono ---------- */

@media (max-width: 767px) {
  :root {
    --logo-h: 16px;
    --testata-h: 56px;
  }

  /* come il sito sul telefono: logo a sinistra, comandi a destra, 20px dai bordi */
  .testata {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 0 20px;
  }
  .testata__logo { grid-column: 1; justify-self: start; }
  .testata__lingue { grid-column: 2; margin-right: -12px; }

  .quadro { --alone-l: 90%; --alone-a: 40%; }
  .racconto { padding: 32px 22px 64px; }
  .racconto__testo { font-size: clamp(19px, 5.2vw, 22px); line-height: 1.45; }
  .racconto.titolo .racconto__testo { font-size: 22px; }
  .racconto__firma { margin-top: 18px; font-size: 11px; }

  .pausa { right: 12px; bottom: 6px; font-size: 11px; }

  .pannello { min-height: 330px; padding: 20px 20px calc(18px + env(safe-area-inset-bottom)); }
  .pannello__avviso { margin: -4px 0 14px; padding-bottom: 12px; }

  .pannello__griglia {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    text-align: center;
  }

  .pannello__centro { min-width: 0; }
  .pannello__dettaglio { justify-self: stretch; width: auto; font-size: 13px; line-height: 1.55; }
  .pannello--semplice .pannello__dettaglio { width: 100%; }
  .momento__nota { font-size: 13px; }
  .occhiello { margin-bottom: 6px; font-size: 11px; }
  .pannello__stato { font-size: 15px; }
  .numero { font-size: 48px; }
  .numero__etichetta { margin-top: 8px; font-size: 11px; }
  .numero.numero--parola { font-size: 24px; }
  .conto { gap: 22px; }

  /* sul telefono il dato e' una riga sola: "TEMPO STIMATO  circa 21 minuti" */
  .dato {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 4px 10px;
    margin-bottom: 6px;
  }
  .dato__etichetta { font-size: 11px; }
  .dato__valore { margin-top: 0; font-size: 15px; }
  .dato__extra { flex-basis: 100%; margin-top: 0; font-size: 12px; }

  .bottone { width: 100%; min-width: 0; }
  .momento .bottone { width: min(320px, 100%); }
}

@media (max-width: 767px) and (max-height: 700px) {
  .pannello { min-height: 300px; padding-top: 16px; }
  .pannello__griglia { gap: 10px; }
  .numero { font-size: 42px; }
}

/* telefono in orizzontale: racconto a sinistra, pannello a destra */
@media (max-height: 520px) and (orientation: landscape) {
  :root { --testata-h: 48px; --logo-h: 15px; }
  body {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 38%);
    grid-template-rows: var(--testata-h) minmax(0, 1fr);
    grid-template-areas: "testata testata" "palco pannello";
    min-height: 0;
    overflow: hidden;
  }
  .testata { grid-template-columns: minmax(0, 1fr) auto; padding: 0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); }
  .testata__logo { grid-column: 1; justify-self: start; }
  .testata__lingue { grid-column: 2; }
  .pannello {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
    overflow-y: auto;
    padding: 16px max(20px, env(safe-area-inset-right)) 16px 20px;
    border-left: 1px solid var(--bb-line);
  }
  .avanzamento { margin-top: 10px; }
  .pannello__griglia { grid-template-columns: minmax(0, 1fr); gap: 10px; text-align: center; }
  .pannello__intro, .pannello__centro, .pannello__dettaglio { grid-column: auto; grid-row: auto; }
  .pannello__centro { min-width: 0; }
  .pannello__avviso { margin: 0 0 12px; padding-bottom: 10px; }
  .occhiello { margin-bottom: 4px; font-size: 11px; }
  .pannello__stato { font-size: 14px; }
  .numero__etichetta { margin-top: 6px; font-size: 11px; }
  .numero.numero--parola { font-size: 22px; }
  .dato { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 8px; margin-bottom: 4px; }
  .dato__etichetta { font-size: 11px; }
  .dato__valore { margin-top: 0; font-size: 14px; }
  .conto { gap: 16px; }
  .pannello__dettaglio { justify-self: stretch; font-size: 13px; }
  .numero { font-size: 38px; }
  .racconto { padding: 20px 24px 52px; }
  .racconto__testo { font-size: 18px; }
  .racconto.titolo .racconto__testo { font-size: 20px; }
  .bottone { width: 100%; min-width: 0; }
  .momento .bottone { width: min(300px, 100%); }
  .momento__titolo { font-size: 28px; }
}

/* palco molto basso (zoom 200% sul telefono, finestre minuscole): via il racconto,
   del momento "tocca a te" resta solo il bottone */
@container palco (max-height: 200px) {
  .racconto { display: none; }
  .momento__titolo, .momento__nota { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dissolvenza: 0ms; }
  .racconto { transition: none; }
  .puntini::after { animation: none; content: '…'; }
  .avanzamento__riempimento { transition: none; }
  .momento { animation: none; }
}