/* ============================================================
   Calendario eventi PLINTO — la seconda finta piattaforma della sezione
   #funzioni di /ristoranti/. Riusa la finestra generica (.rt-win*, definita in
   menu.css) cambiandone solo le proporzioni: nasce LARGA e lo switch la porta
   alla colonna stretta.

   Impianto tipografico preso dalla reference (Röda Sten Konsthall): grigio
   chiarissimo, nero, una sola grottesca compressa per il titolo del mese,
   quadratini di stato accanto al numero del giorno, niente colore se non per
   dire una cosa sola (esaurito).
   ============================================================ */

.rt-win--wide .rt-win__frame {
  --mn-bg: #efefed;
  border-radius: 18px;   /* non è un telefono: angoli meno tondi */
}
/* ⚠️ Larghezza e altezza le scrive eventi.js in pixel, non `aspect-ratio`:
   il rapporto non si anima, e lo switch deve poter cambiare forma con una
   transizione invece che con uno scatto. */
.rt-win--wide .rt-win__frame { transition: width 0.5s var(--ease), height 0.5s var(--ease); }
html.reduce .rt-win--wide .rt-win__frame { transition: none; }

.ev {
  position: absolute; inset: 0;
  background: #efefed; color: #111;
  font-family: var(--ff-sans);
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* ---- testata ---- */
.ev-head { padding: 1.1rem 1.3rem 0.9rem; border-bottom: 1px solid rgba(0, 0, 0, 0.18); }
.ev-brand { display: flex; gap: 0.6rem; align-items: baseline; font-size: 0.68rem; letter-spacing: 0.06em; }
.ev-brand b { font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; }
.ev-brand span { opacity: 0.5; }
.ev-headmain { display: flex; align-items: flex-start; gap: 2rem; margin-top: 0.7rem; }
/* il titolo del mese è il pezzo grosso, come nella reference */
.ev-title {
  font-family: var(--ff-display); font-weight: 900;
  font-size: clamp(2.4rem, 7vw, 5.2rem); line-height: 0.85;
  letter-spacing: -0.045em; text-transform: uppercase;
  margin-right: auto;
}
.ev-title i { display: block; font-style: normal; font-size: 0.18em; font-weight: 700; letter-spacing: 0.16em; margin-bottom: 0.5em; }
.ev-meta { display: flex; gap: 1.8rem; padding-top: 0.4rem; }
.ev-info__lab { font-size: 0.66rem; font-weight: 700; margin-bottom: 0.35rem; }
.ev-info ul { list-style: none; display: flex; flex-direction: column; gap: 0.22rem; }
.ev-info li, .ev-info__txt { font-size: 0.66rem; opacity: 0.75; display: flex; align-items: center; gap: 0.35rem; }

/* quadratini di stato: nero per tutto ciò che è disponibile, rosso solo per
   ciò su cui non si può più contare — un colore, un significato */
.ev-sq { width: 7px; height: 7px; flex: none; display: inline-block; background: #111; }
.ev-sq--booking { background: #111; opacity: 0.45; }
.ev-sq--last { background: #111; box-shadow: inset 0 0 0 1px #efefed; outline: 1px solid #111; outline-offset: 1px; }
.ev-sq--soldout { background: #e5321b; }

/* ---- switch Desktop/Mobile: fuori dal riquadro, sopra la card ----
   Non è un comando dell'app ma di chi la guarda, quindi non sta nella
   schermata. Sta in cima alla colonna di destra (.rt-win__side), sulla stessa
   riga: etichetta, Desktop, Mobile. */
.ev-switch {
  display: flex; align-items: center; gap: 0.4rem;
  color: var(--cream);
}
.ev-switch__lab {
  font-size: 0.56rem; text-transform: uppercase; letter-spacing: 0.14em;
  font-weight: 800; opacity: 0.5; margin-right: 0.15rem;
}
.ev-switch button {
  font: inherit; font-size: 0.72rem; font-weight: 700; cursor: pointer;
  padding: 0.4rem 0.85rem; border-radius: 999px; white-space: nowrap;
  background: rgba(246, 243, 236, 0.14); color: var(--cream);
  border: 2px solid transparent;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.ev-switch button[aria-pressed="true"] { background: var(--cream); color: var(--ink); }
/* sotto i 1000px la colonna di destra sparisce con la card (vedi menu.css):
   lo switch torna sopra il riquadro, dove lo spazio c'è sempre */
@media (max-width: 1000px) {
  .ev-switch {
    position: absolute; bottom: calc(100% + 12px); left: 0;
  }
}

/* ---- corpo ---- */
.ev-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ---- vista calendario ---- */
.ev-grid { padding: 0.9rem 1.3rem 1.4rem; }
.ev-dow, .ev-cells { display: grid; grid-template-columns: repeat(7, 1fr); }
.ev-dow { gap: 1px; margin-bottom: 0.5rem; }
.ev-dow span { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.45; }
.ev-cells { gap: 1px; background: rgba(0, 0, 0, 0.14); border: 1px solid rgba(0, 0, 0, 0.14); }
.ev-cell { background: #efefed; min-height: 132px; padding: 0.45rem 0.5rem 0.6rem; }
.ev-cell--closed { background: #e7e7e4; }
.ev-num { display: flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.ev-closed { margin-top: 0.5rem; font-size: 0.6rem; line-height: 1.35; opacity: 0.5; }

.ev-item {
  display: block; width: 100%; margin-top: 0.45rem;
  font: inherit; text-align: left; color: inherit; background: none; border: none;
  padding: 0; cursor: pointer;
}
.ev-item__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: rgba(0, 0, 0, 0.08); }
.ev-item__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease); }
.ev-item:hover .ev-item__media img { transform: scale(1.05); }
.ev-item__t { display: block; margin-top: 0.35rem; font-size: 0.72rem; font-weight: 700; line-height: 1.2; }
.ev-item__s { display: block; font-size: 0.66rem; line-height: 1.3; opacity: 0.6; }

/* ---- vista lista ---- */
.ev-list { list-style: none; padding: 0 1.1rem 1.4rem; }
.ev-row {
  display: flex; align-items: flex-start; gap: 0.9rem;
  padding: 0.75rem 0; border-bottom: 1px solid rgba(0, 0, 0, 0.14);
}
.ev-row__n {
  display: flex; align-items: center; gap: 0.3rem;
  font-family: var(--ff-display); font-weight: 800;
  font-size: 1.5rem; line-height: 1; font-variant-numeric: tabular-nums;
  min-width: 3.1rem;
}
.ev-row--closed .ev-row__n { opacity: 0.35; }
/* tre colonne: miniatura, testo, freccia */
.ev-row__b {
  flex: 1; display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 0.2rem 0.7rem; font: inherit; text-align: left; color: inherit;
  background: none; border: none; padding: 0; cursor: pointer;
}
.ev-row__media {
  grid-column: 1; grid-row: 1 / 3; align-self: start;
  width: 62px; aspect-ratio: 1; overflow: hidden; background: rgba(0, 0, 0, 0.08);
}
.ev-row__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ⚠️ Le colonne vanno dichiarate su TUTTI e tre i figli: senza `grid-column`
   esplicita la freccia veniva collocata automaticamente nella prima cella e
   spingeva il titolo a destra. */
.ev-row__t { grid-column: 2; grid-row: 1; align-self: end; font-size: 0.86rem; font-weight: 700; }
.ev-row__s { grid-column: 2; grid-row: 2; align-self: start; font-size: 0.76rem; opacity: 0.6; line-height: 1.35; }
.ev-row__a { grid-column: 3; grid-row: 1 / 3; align-self: center; opacity: 0.45; }
.ev-row__closed { font-size: 0.76rem; opacity: 0.4; padding-top: 0.35rem; }

/* una vista alla volta */
.ev[data-view="grid"] .ev-list,
.ev[data-view="list"] .ev-grid { display: none; }

.ev-disclaimer { padding: 0 1.3rem 1.4rem; font-size: 0.6rem; opacity: 0.45; line-height: 1.5; }

/* ---- dettaglio ---- */
/* ⚠️ Colonna flex, non un blocco: solo così `.ev-scroll` (flex:1 + min-height:0)
   ha un'altezza definita e può davvero scorrere. Da blocco, il pannello
   cresceva oltre il bordo della finestra e il testo finiva fuori. */
.ev-detail { position: absolute; inset: 0; background: #efefed; z-index: 5; display: flex; flex-direction: column; }
.ev-detail[hidden] { display: none; }
.ev-detail .ev-scroll { min-height: 0; }
/* il 16/9 va bene nella colonna stretta, ma in finestra larga varrebbe due
   terzi dell'altezza: il tetto in percentuale lo tiene a una fascia */
/* ⚠️ `width: 100%` esplicita: con la larghezza in automatico, il tetto in
   altezza fa ricalcolare anche la larghezza per rispettare l'`aspect-ratio`, e
   l'immagine si rimpiccioliva lasciando mezzo pannello vuoto. Con la larghezza
   fissata il rapporto salta e a ritagliare ci pensa `object-fit: cover`. */
.ev-detail__media { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 46%; overflow: hidden; }
.ev-detail__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev-back {
  position: absolute; top: 14px; left: 14px; z-index: 10;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: #fff; color: #111; border: 2px solid #111;
}
.ev-detail__body { padding: 1.2rem 1.4rem 2rem; max-width: 62ch; }
.ev-detail__when { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.55; }
.ev-detail__t {
  margin-top: 0.4rem; font-family: var(--ff-display); font-weight: 900;
  font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1; letter-spacing: -0.035em; text-transform: uppercase;
}
.ev-detail__s { margin-top: 0.4rem; font-size: 1.02rem; font-weight: 600; }
.ev-detail__d { margin-top: 0.9rem; font-size: 1.02rem; line-height: 1.55; opacity: 0.8; }
.ev-detail__p { margin-top: 1.1rem; display: flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; font-weight: 700; }

@keyframes ev-detail-in { from { transform: translateY(3%); opacity: 0; } to { transform: none; opacity: 1; } }
.ev-detail.is-in { animation: ev-detail-in 0.32s var(--ease); }
html.reduce .ev-detail.is-in { animation: none; }

/* ---- vista lista dentro una finestra stretta ---- */
.ev[data-view="list"] .ev-headmain { display: block; }
.ev[data-view="list"] .ev-meta { display: none; }
.ev[data-view="list"] .ev-title { font-size: clamp(2.2rem, 12vw, 3.4rem); }