/* «Sessioni aperte» (Sito #21): elenco per categoria e dettagli in un
   <dialog>. Unico foglio della pagina pubblica e dell'anteprima locale
   (dev/prossime-sessioni/), sopra il linguaggio .dce/.dca delle pagine App. */


.os-page .os-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:0;
  min-width:0;
}

.os-page .os-session{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:10px 20px;
  padding:18px 0;
  border-top:1px solid var(--dce-line);
}
.os-page .os-session:last-child{ border-bottom:1px solid var(--dce-line-soft); }

.os-page .os-session__when{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 12px;
}
.os-page .os-session__day{
  font-weight:700;
  color:var(--dce-ink);
  font-size:var(--dce-fs-body);
}
.os-page .os-session__time{
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  font-weight:700;
  font-size:clamp(1.25rem, 1.1rem + .6vw, 1.55rem);
  color:var(--dce-gold-hi);
}

.os-page .os-session__service{
  margin:0 0 4px;
  font-size:clamp(1.08rem, 1rem + .35vw, 1.25rem);
  color:var(--dce-ink);
}
.os-page .os-session__meta{
  margin:0;
  color:rgba(242,236,226,.78);
  font-size:.98rem;
}

.os-page .os-session__act{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 14px;
}

.os-page .os-seats{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--dce-line);
  font-size:.88rem;
  font-weight:600;
  color:var(--dce-ink);
  white-space:nowrap;
}
.os-page .os-seats--last{
  border-color:var(--dce-gold-hi);
  color:var(--dce-gold-hi);
}
.os-page .os-seats--full{
  border-color:rgba(242,236,226,.35);
  color:rgba(242,236,226,.7);
}
.os-page .os-session--full .os-session__service,
.os-page .os-session--full .os-session__time{
  opacity:.72;
}

.os-page .os-session__open{ min-height:44px; }

@media (min-width: 720px){
  .os-page .os-session{
    grid-template-columns:minmax(170px, 1.1fr) minmax(0, 2fr) auto;
    align-items:center;
  }
  .os-page .os-session__when{
    flex-direction:column;
    align-items:flex-start;
  }
  .os-page .os-session__act{ justify-content:flex-end; }
}

/* Dettagli: <dialog> nativo, modale, chiudibile con Esc e dal pulsante. */
.os-dialog{
  width:min(560px, calc(100vw - 32px));
  max-height:calc(100dvh - 32px);
  margin:auto;
  padding:0;
  border:1px solid rgba(214,176,111,.46);
  border-radius:12px;
  background:#121212;
  color:#F2ECE2;
}
.os-dialog::backdrop{ background:rgba(0,0,0,.66); }
.os-dialog__body{ padding:22px clamp(16px, 4vw, 28px) 24px; overflow:auto; }
.os-dialog__kicker{ margin:0 0 6px; }
.os-dialog__title{ margin:0 0 14px; font-size:clamp(1.3rem, 1.15rem + .6vw, 1.6rem); }
.os-dialog__label{ margin:18px 0 6px; }
.os-dialog .os-rows{ margin:0; display:grid; gap:0; }
.os-dialog .os-rows > div{
  display:grid;
  grid-template-columns:minmax(120px, 40%) minmax(0, 1fr);
  gap:12px;
  padding:9px 0;
  border-bottom:1px solid rgba(214,176,111,.18);
}
.os-dialog dt{ color:rgba(242,236,226,.72); }
.os-dialog dd{ margin:0; font-weight:600; }
.os-dialog__note{
  margin:16px 0 18px;
  padding:10px 12px;
  border-left:3px solid #E3C792;
  background:rgba(214,176,111,.08);
}

/* Stato della pagina pubblica: nessuna sessione o servizio non raggiungibile. */
.os-page .os-status{
  margin:0;
  padding:14px 16px;
  border:1px solid var(--dce-line);
  border-radius:8px;
  background:rgba(214,176,111,.06);
  color:var(--dce-ink);
}
.os-page .os-status--error{ border-color:rgba(242,236,226,.35); }
.os-page .os-book{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 18px;
  margin:0 0 18px;
}
.os-page .os-book p{ margin:0; color:rgba(242,236,226,.78); }