/* ============================================================
   PERLA NERA — pages/eventi.css
   Hero tipografico, griglia settimanale trascinabile,
   elenco speciali con data in serif e filtro per mese.
   ============================================================ */

/* (.page-hero vive in base.css: è condiviso dalle pagine interne) */

/* ---------- Fissi settimanali: drag-to-scroll ---------- */
.weekly { overflow: hidden; }
.weekly .wrap h2 { margin-bottom: 2rem; }

.weekly__track {
  overflow-x: auto;
  scrollbar-width: none;           /* nessuna scrollbar visibile */
  cursor: grab;
  padding-inline: var(--gutter);
}
.weekly__track::-webkit-scrollbar { display: none; }
.weekly__track.is-dragging { cursor: grabbing; }

.weekly__grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(220px, 24vw, 300px);
  gap: 1px;                        /* celle separate da linee argento */
  background: var(--linea);
  border-block: 1px solid var(--linea);
  max-width: none;
}

.weekly__cell {
  background: var(--nero);
  padding: 1.8rem 1.4rem 2rem;
  display: grid; gap: 0.7rem;
  align-content: start;
  user-select: none;
}
.weekly__day {
  font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--grigio-muto);
}
.weekly__name {
  font-family: var(--font-display); font-weight: 300;
  font-size: 1.7rem; color: var(--perla); line-height: 1.1;
}
.weekly__time { font-size: 0.78rem; letter-spacing: 0.14em; color: var(--argento); }
.weekly__desc { font-size: 0.85rem; color: var(--grigio-muto); line-height: 1.6; }

/* Cella "chiuso" per i giorni senza serata */
.weekly__cell--closed .weekly__name { color: var(--grigio-muto); }

/* ---------- Speciali: data serif a sinistra ---------- */
.specials__filters {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  margin-bottom: 2.5rem;
}
.specials__filter {
  padding: 0.55em 1.2em;
  border: 1px solid var(--linea); border-radius: var(--radius);
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--argento);
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.specials__filter:hover { color: var(--perla); border-color: var(--argento); }
.specials__filter[aria-pressed="true"] {
  background: var(--metallo); color: var(--nero); border-color: transparent;
}

.specials__list { border-top: 1px solid var(--linea); }
.specials__item {
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding-block: 2.2rem;
  border-bottom: 1px solid var(--linea);
}
@media (max-width: 720px) { .specials__item { grid-template-columns: 1fr; gap: 0.8rem; } }

.specials__date {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1; color: var(--perla);
}
.specials__date small {
  display: block;
  font-family: var(--font-ui); font-size: 0.72rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--grigio-muto); margin-top: 0.5rem;
}
.specials__body { display: grid; gap: 0.5rem; align-content: start; }
.specials__title { font-size: 1.4rem; font-family: var(--font-display); }
.specials__meta { font-size: 0.78rem; letter-spacing: 0.14em; color: var(--grigio-muto); }
.specials__desc { color: var(--argento); font-size: 0.92rem; max-width: 60ch; }
.specials__book { justify-self: start; margin-top: 0.8rem; }

.specials__empty { padding-block: 2rem; }