/* ==========================================================================
   Schermo verticale del bar (32", 1080 x 1920): menu grande da bancone.
   Tutte le misure sono in cqi, cioe' in percentuale della larghezza dello
   schermo: su qualsiasi schermo verticale le proporzioni restano uguali.
   Su uno schermo orizzontale (per le prove) resta 9:16 al centro.
   ========================================================================== */
@font-face { font-family: "Archivo Var"; src: url("../fonts/archivo-variable.woff2") format("woff2"); font-weight: 400 900; font-stretch: 100% 125%; font-display: block; }

:root {
  --paper: #F7F0DE;
  --ink: #1C1C1B;
  --ink-soft: #4A4540;
  --orange: #E04914;
  --line: rgba(28, 28, 27, .22);
  --f: "Archivo Var", "Archivo", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
p, h2, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }

.board { display: grid; place-items: center; overflow: hidden; background: #111; color: var(--ink); font-family: var(--f); cursor: none; -webkit-font-smoothing: antialiased; }
.bd { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); width: min(100vw, 56.25vh); height: min(100vh, 177.78vw); overflow: hidden; background: var(--paper); container-type: inline-size; }

/* Fascia arancione in alto, con il bordo smerlato */
.bd-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 5cqi; padding: 6cqi 6cqi 5cqi; background: var(--orange); color: var(--paper); }
.bd-top::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 2.4cqi; background: radial-gradient(circle at 50% 0, var(--orange) 1.6cqi, transparent 1.7cqi) 0 0 / 4cqi 2.4cqi repeat-x; }
.bd-logo { flex-shrink: 0; width: 40cqi; height: auto; }
.bd-greet { min-width: 0; max-width: 50cqi; font-stretch: 125%; font-weight: 900; font-size: 6.4cqi; line-height: .95; letter-spacing: -.01em; text-align: right; text-transform: uppercase; }

/* Contenuto della fascia oraria: la misura delle scritte si adatta allo spazio (--k, da lavagna.js) */
.bd-stage { --k: 1; position: relative; display: flex; flex-direction: column; justify-content: space-evenly; min-height: 0; overflow: hidden; padding: 5cqi 6cqi 3cqi; transition: opacity .7s ease; }
.bd-stage.is-out { opacity: 0; }

.bd-sec { position: relative; min-width: 0; }
.bd-sec + .bd-sec { margin-top: calc(4cqi * var(--k)); }
.bd-head { position: relative; display: flex; align-items: center; min-height: calc(9cqi * var(--k)); }
.bd-title { display: inline-block; padding: calc(1.5cqi * var(--k)) calc(3.2cqi * var(--k)) calc(1.3cqi * var(--k)); border-radius: 1.6cqi; background: var(--ink); color: var(--paper); font-stretch: 125%; font-weight: 900; font-size: calc(5.6cqi * var(--k)); line-height: 1; letter-spacing: -.005em; text-transform: uppercase; }
.bd-head:has(.bd-cut) .bd-title { max-width: 70%; }
.bd-cut { position: absolute; right: -1cqi; bottom: calc(-3cqi * var(--k)); width: auto; height: calc(20cqi * var(--k)); max-width: 32%; object-fit: contain; transform: rotate(4deg); filter: drop-shadow(0 1.2cqi 1.4cqi rgba(0, 0, 0, .28)); }
.bd-vetrina .bd-note, .bd-cocktail .bd-note { display: none; }
.bd-note { margin-top: calc(1.6cqi * var(--k)); color: var(--ink-soft); font-size: calc(2.7cqi * var(--k)); font-weight: 500; }

/* Elenco: due colonne */
.bd-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 6cqi; margin-top: calc(3.4cqi * var(--k)); }
.bd-item { padding-block: calc(1.25cqi * var(--k)); border-bottom: .25cqi solid var(--line); }
.bd-line { display: flex; align-items: baseline; gap: 1.6cqi; }
.bd-name { min-width: 0; font-stretch: 112%; font-weight: 800; font-size: calc(3.8cqi * var(--k)); line-height: 1.12; text-transform: uppercase; }
.bd-dots { flex: 1; min-width: 2cqi; }
.bd-price { flex-shrink: 0; color: var(--orange); font-stretch: 125%; font-weight: 900; font-size: calc(4.8cqi * var(--k)); line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bd-desc { margin-top: .5cqi; color: var(--ink-soft); font-size: calc(2.7cqi * var(--k)); font-weight: 500; line-height: 1.3; }
.bd-lista .bd-desc { display: none; }
.bd-pic { display: none; }

/* Vetrina: foto scontornata grande, nome, prezzo, descrizione */
.bd-vetrina .bd-list { grid-auto-rows: auto auto; row-gap: calc(3cqi * var(--k)); }
/* due per riga; quando sono esattamente 4, tutti in una riga */
.bd-vetrina .bd-list:has(> .bd-item:nth-child(4)):not(:has(> .bd-item:nth-child(5))) { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 3cqi; }
.bd-vetrina .bd-item { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: calc(1.4cqi * var(--k)); padding: 0; border: 0; }
.bd-vetrina .bd-pic { display: block; grid-row: 1; align-self: end; justify-self: center; width: auto; height: calc(25cqi * var(--k)); max-width: 100%; object-fit: contain; filter: drop-shadow(0 1.4cqi 1.6cqi rgba(0, 0, 0, .25)); }
.bd-vetrina .bd-txt { grid-row: 2; text-align: center; }
.bd-vetrina .bd-line { flex-direction: column; align-items: center; gap: .8cqi; }
.bd-vetrina .bd-dots { display: none; }
.bd-vetrina .bd-name { font-size: calc(4.2cqi * var(--k)); }
.bd-vetrina .bd-price { font-size: calc(5.6cqi * var(--k)); }

/* Cocktail: due colonne con gli ingredienti */
.bd-cocktail .bd-list { row-gap: calc(.6cqi * var(--k)); }
.bd-cocktail .bd-item { padding-block: calc(1.6cqi * var(--k)); }
.bd-cocktail .bd-desc { font-size: calc(2.6cqi * var(--k)); }
.bd-cocktail .bd-cut { height: calc(28cqi * var(--k)); bottom: calc(-6cqi * var(--k)); transform: rotate(2deg); }
.bd-cocktail .bd-list { margin-top: calc(6cqi * var(--k)); }

/* In fondo */
.bd-foot { display: flex; align-items: center; justify-content: center; gap: 4cqi; padding: 2.6cqi 6cqi 3.4cqi; color: var(--ink-soft); font-size: 2.6cqi; font-weight: 500; text-align: center; }
.bd-pages { display: flex; gap: 1.4cqi; }
.bd-pages i { width: 1.8cqi; height: 1.8cqi; border-radius: 50%; border: .3cqi solid var(--ink-soft); }
.bd-pages i.on { background: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
  .bd-stage { transition: none; }
}