/* ==========================================================================
   /il-locale — la pagina del posto
   Riusa il sistema di style.css (.locale per le sezioni crema, .ticket,
   .ph-slot, .dove-orari, .divider); qui solo ciò che è di questa pagina.
   Prefisso lc- per le classi specifiche.
   ========================================================================== */

/* --testo-tenue e --arancio-testo (testi piccoli AA sulla carta) e i bottoni
   dell'apertura che vanno a capo stanno nel sistema, style.css */

/* ---------- Apertura: la foto vera come polaroid ---------- */
/* l'inclinazione sta sulla polaroid: .apertura-lato la anima GSAP */
.lc-polaroid {
  position: relative;
  max-width: 470px;
  margin-left: auto;
  padding: 12px 12px 10px;
  background: #FBF6E9;
  border-radius: 6px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, .45), 0 3px 8px rgba(0, 0, 0, .3);
  transform: rotate(2.2deg);
}
.lc-polaroid-foto { border-radius: 3px; }
.lc-polaroid figcaption {
  padding-top: 11px;
  font-weight: 600;
  font-size: .86rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--testo-tenue);
  text-align: center;
}
/* l'adesivo col logo, come quello sulla porta a vetri del locale.
   Sta sull'angolo in alto a DESTRA: lì la foto è solo muro bianco. A sinistra
   copriva l'insegna a bandiera, cioè proprio una delle cose che la pagina racconta. */
.lc-adesivo {
  position: absolute;
  top: -26px;
  right: -22px;
  width: clamp(72px, 8vw, 96px);
  height: auto;
  border-radius: 50%;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .4);
  transform: rotate(10deg);
}

/* ---------- Sezioni crema: gli stessi colori di /menu e /contatti ---------- */
/* il tan e il tan-scuro del sistema su carta crema non reggono il contrasto */
.locale .eyebrow { color: var(--arancio-testo); }
.locale .section-intro { color: var(--testo-tenue); }
.locale .ph-slot { color: var(--testo-tenue); }

/* L'anello del focus del sistema è arancio: sul biglietto arancio sparisce (1:1)
   e sulla carta crema misura 2,1:1. Sui fondi chiari si fa bruno-900, come su /menu e /contatti. */
.locale :focus-visible,
.lc-biglietti :focus-visible { outline-color: var(--bruno-900); }

/* ==========================================================================
   COM'È — testo + inventario a sinistra, mosaico di segnaposto a destra
   ========================================================================== */
.lc-com-griglia {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(40px, 6vw, 84px);
  align-items: start;
  padding-bottom: clamp(64px, 10vw, 110px);
}

.lc-com-intro {
  margin-top: 18px;
  font-size: 1.12rem;
  color: var(--bruno-750);
  max-width: 44ch;
}

/* l'inventario di quello che si vede: righe tratteggiate come la parete delle birre */
.lc-inventario { margin-top: clamp(26px, 3.4vw, 36px); }
.lc-inventario-riga {
  display: grid;
  grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr);
  gap: 6px 20px;
  align-items: baseline;
  padding: 14px 0;
  border-top: 1px dashed rgba(31, 21, 12, .28);
}
.lc-inventario-riga:last-child { border-bottom: 1px dashed rgba(31, 21, 12, .28); }
.lc-inventario dt {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--bruno-900);
}
/* la tacca arancio dei separatori del sito */
.lc-inventario dt::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 1px;
  background: var(--arancio);
  transform: rotate(45deg);
}
.lc-inventario dd { font-size: 1.02rem; line-height: 1.5; color: var(--bruno-750); }

/* mosaico asimmetrico: una foto alta a sinistra, a destra due più corte e
   scalate verso il basso. Regge anche coi soli segnaposto. */
.lc-mosaico {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  grid-template-rows: auto auto;
  gap: clamp(14px, 2vw, 22px);
}
.lc-mosaico-a.lc-foto { grid-column: 1; grid-row: 1 / 3; min-height: 440px; }
.lc-mosaico-b.lc-foto { grid-column: 2; grid-row: 1; min-height: 230px; margin-top: 56px; }
.lc-mosaico-c.lc-foto { grid-column: 2; grid-row: 2; min-height: 200px; }
.lc-foto {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: var(--bruno-900);
}
.lc-foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   TRE MODI PER MANGIARE — biglietti in fila, sovrapposti e sfalsati
   ========================================================================== */
.lc-modi {
  background: var(--bruno-900);
  padding-top: clamp(48px, 8vw, 90px);
}
.lc-modi .container { padding-bottom: clamp(64px, 10vw, 110px); }

.lc-biglietti {
  display: flex;
  align-items: flex-start;
  padding-inline: 8px;
}
.lc-biglietti .ticket {
  flex: 1 1 0;
  min-width: 0;
}
/* i biglietti buttati sul bancone: si coprono un poco lo strappo a vicenda */
.lc-biglietti .ticket + .ticket { margin-left: -16px; }
.lc-biglietti .ticket:nth-child(1) { --tilt: rotate(-2deg); z-index: 1; }
.lc-biglietti .ticket:nth-child(2) { --tilt: rotate(1.6deg); z-index: 2; margin-top: 44px; }
.lc-biglietti .ticket:nth-child(3) { --tilt: rotate(-1deg); z-index: 1; margin-top: 12px; }
.lc-biglietti .ticket:hover { z-index: 3; }

.lc-biglietti .ticket-body { display: flex; flex-direction: column; }
.lc-biglietti .ticket-body p:not(.lc-biglietto-riga) { flex: 1 1 auto; }
.lc-biglietto-riga { margin-top: 18px; }
.lc-biglietto-azione {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 800;
  font-size: .84rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-decoration: none;
  color: var(--crema-chiara);
  background: var(--bruno-900);
  transition: background-color .18s var(--ease-forte), transform .18s var(--ease-forte);
}
.lc-biglietto-azione:hover { background: var(--bruno-750); transform: translateY(-2px); }
.lc-biglietto-azione:active { transform: scale(.97); }

/* ==========================================================================
   I FORMAT — i nomi grandi come lettere d'insegna
   ========================================================================== */
.lc-serate .container { padding-bottom: clamp(64px, 10vw, 110px); }

.lc-insegna { border-top: 4px solid var(--bruno-900); }
.lc-insegna-riga {
  display: grid;
  grid-template-columns: minmax(0, 5.2rem) minmax(0, 1fr) minmax(0, 20rem);
  gap: 10px clamp(18px, 3vw, 40px);
  align-items: baseline;
  padding: clamp(20px, 2.8vw, 30px) 0;
  border-bottom: 2px solid rgba(31, 21, 12, .82);
}
.lc-insegna-riga:last-child { border-bottom-width: 4px; border-bottom-color: var(--bruno-900); }
.lc-insegna-num {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: .08em;
  color: var(--bruno-900);
  white-space: nowrap;
}
/* «Smashweekend» è una parola sola da ~8,4em in Alfa Slab: il corpo si misura
   sulla colonna del nome, non a occhio (vedi i passaggi in RESPONSIVE) */
.lc-insegna-nome {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 5.4vw, 4.1rem);
  line-height: .98;
  letter-spacing: .005em;
  color: var(--bruno-900);
  text-wrap: balance;
}
.lc-amp { color: var(--arancio-scuro); }
.lc-insegna-testo { font-size: 1.02rem; line-height: 1.5; color: var(--bruno-750); }

.lc-serate-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  margin-top: clamp(30px, 4.4vw, 46px);
}
.lc-serate-handle {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .04em;
  color: var(--bruno-750);
}

/* ==========================================================================
   CHIUSURA — l'indirizzo dentro il panino, come AL'S dentro l'insegna
   ========================================================================== */
.lc-chiusura {
  background: var(--bruno-950);
  padding-top: clamp(48px, 8vw, 90px);
}
.lc-chiusura-griglia {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "panino testa"
    "panino info";
  grid-template-rows: auto 1fr;
  column-gap: clamp(40px, 6vw, 88px);
  align-items: center;
  padding-bottom: clamp(64px, 10vw, 110px);
}
.lc-chiusura-testa { grid-area: testa; align-self: end; }
.lc-chiusura-info { grid-area: info; align-self: start; }
.lc-orari { margin-top: 26px; }

.lc-panino {
  grid-area: panino;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.lc-panino-sopra { width: clamp(210px, 30vw, 360px); }
.lc-panino-indirizzo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-block: clamp(6px, 1vw, 12px);
}
.lc-panino-via {
  font-weight: 800;
  font-size: clamp(.84rem, 1.3vw, 1rem);
  text-transform: uppercase;
  letter-spacing: .24em;
  text-indent: .24em; /* compensa l'ultimo tracking per centrare davvero */
  line-height: 1.2;
  color: var(--crema-chiara);
}
.lc-panino-civico {
  font-family: var(--font-display);
  font-size: clamp(4.2rem, 11vw, 8rem);
  line-height: .9;
  letter-spacing: .01em;
  color: var(--crema);
  margin-top: 4px;
}
.lc-panino-citta {
  font-weight: 800;
  font-size: clamp(.84rem, 1.3vw, 1rem);
  text-transform: uppercase;
  letter-spacing: .3em;
  text-indent: .3em;
  line-height: 1.2;
  color: var(--arancio);
  margin-top: 6px;
}
.lc-panino-sotto { width: clamp(230px, 33vw, 395px); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* sotto i 1100px la riga a tre colonne lascia al nome meno di 8,4em: la descrizione va sotto */
@media (max-width: 1100px) {
  .lc-insegna-riga { grid-template-columns: minmax(0, 4.6rem) minmax(0, 1fr); }
  .lc-insegna-testo { grid-column: 2; max-width: 46ch; }
}

/* sotto i 1000px tre biglietti in fila non respirano più: si impilano sfalsati */
@media (max-width: 1000px) {
  .lc-biglietti {
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
    padding-inline: 0;
  }
  .lc-biglietti .ticket { flex: 0 0 auto; width: min(100%, 540px); }
  .lc-biglietti .ticket + .ticket { margin-left: 0; }
  .lc-biglietti .ticket:nth-child(1) { margin-top: 0; }
  .lc-biglietti .ticket:nth-child(2) { align-self: flex-end; margin-top: 0; }
  /* scarto a sinistra solo con lo spazio che avanza oltre i 540px del biglietto */
  .lc-biglietti .ticket:nth-child(3) { margin-top: 0; margin-left: clamp(0px, calc(100% - 540px), 60px); }
}

@media (max-width: 880px) {
  .lc-polaroid { margin-inline: 0 auto; max-width: min(100%, 520px); transform: rotate(1.6deg); }
  /* il margine laterale del telefono è 20px: l'adesivo sporge meno per non uscire dallo schermo */
  .lc-adesivo { top: -20px; right: -8px; }

  .lc-com-griglia { grid-template-columns: 1fr; }

  .lc-chiusura-griglia {
    grid-template-columns: 1fr;
    grid-template-areas: "testa" "panino" "info";
    grid-template-rows: auto;
    row-gap: clamp(28px, 5vw, 40px);
  }
  .lc-chiusura-testa { text-align: center; }
  .lc-chiusura-info { justify-self: center; width: min(100%, 420px); }
  .lc-orari { margin-top: 0; }
  .lc-orari h3, .lc-orari .orari-nota { text-align: center; margin-inline: auto; }
  .lc-orari .orari-riga { max-width: none; }
  .lc-chiusura-info .dove-cta { justify-content: center; }
}

@media (max-width: 560px) {
  .lc-mosaico { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* l'insegna in orizzontale: 330px la tengono intera, ovale e targa */
  .lc-mosaico-a.lc-foto { grid-column: 1 / -1; grid-row: 1; min-height: 330px; }
  .lc-mosaico-b.lc-foto { grid-column: 1; grid-row: 2; min-height: 210px; margin-top: 0; }
  /* scalato in basso con top e non con transform: il transform è del reveal */
  .lc-mosaico-c.lc-foto { grid-column: 2; grid-row: 2; min-height: 210px; position: relative; top: 34px; }
  .lc-mosaico { margin-bottom: 34px; }

  .lc-inventario-riga { grid-template-columns: 1fr; }

  .lc-biglietti .ticket { width: 100%; }
  .lc-biglietti .ticket:nth-child(1) { --tilt: rotate(-1.2deg); }
  .lc-biglietti .ticket:nth-child(2) { --tilt: rotate(1deg); }
  .lc-biglietti .ticket:nth-child(3) { --tilt: rotate(-.8deg); margin-left: 0; }

  .lc-insegna-riga { grid-template-columns: 1fr; gap: 6px; }
  .lc-insegna-testo { grid-column: 1; }
  /* colonna unica: il nome ha tutta la riga, 10vw lascia margine anche a 280px */
  .lc-insegna-nome { font-size: clamp(1.6rem, 10vw, 3.4rem); }

  .lc-serate-cta { flex-direction: column; align-items: flex-start; }
}

/* come il piede e la chiusura di /menu: da telefono i bottoni prendono tutta la riga */
@media (max-width: 520px) {
  .lc-chiusura-info .dove-cta .btn { flex: 1 1 100%; text-align: center; }
}

@media (max-width: 380px) {
  .lc-mosaico-c.lc-foto { top: 24px; }
  .lc-mosaico { margin-bottom: 24px; }
}

/* telefono girato / portatili bassi: la polaroid non deve spingere l'apertura oltre misura */
@media (min-width: 640px) and (max-height: 520px) {
  .lc-polaroid { max-width: 360px; }
}