/* ===== Base / Tokens ===== */
:root{
  --bg:#0a0a0a;
  --card:#121212;
  --muted:#b9b9b9;
  --bd:rgba(255,255,255,.08);
  --bd2:rgba(255,255,255,.12);
  --fg:#fff;
  --acc:#00ffd5;
  /* Rapporto poster: mobile = 9:16, desktop = 16:9 */
  --poster-ratio: 9 / 16;
}
@media (min-width: 768px){ :root{ --poster-ratio: 16 / 9; } }

*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--fg);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Ubuntu,Cantarell,Noto Sans,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol',sans-serif;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.container{ width:min(1200px, 92vw); margin-inline:auto; }
.page-archive main{ padding-block:24px 64px; }
.muted{ color:var(--muted); }

/* ===== Topbar ===== */
.arch-topbar{
  position: fixed;
  top: 0;
  left: 0; right: 0;
  z-index: 1000;
  background: rgba(0,0,0,.92);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
}
.arch-topbar{ transform: none !important; }
/* Logo come sulle altre pagine */
.arch-logo img{
  height: 60px;            /* stesso valore di .euto-logo img in layout.css */
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
}

/* Mobile: stessa riduzione delle altre pagine, se la usi */
@media (max-width:640px){
  .arch-logo img{ height: 40px; }
}


/* ===== Hero / Filtri ===== */
.arch-hero{
  display:grid;
  gap:16px;
  align-items:end;
  padding-block:64px 24px;   /* ↑ era 24px, ora 64px sopra */
}
.arch-title{ font-family:'Bebas Neue',system-ui; font-size:clamp(36px,7vw,60px); letter-spacing:.06em; margin:0; }
.arch-sub{ margin:0; color:var(--muted); }

/* ======= ACCESSIBILITÀ ======= */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ======= FILTRI (restyle) ======= */
.arch-filters{
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.arch-filters.is-sticky{
  position: sticky; top: 72px;  /* sotto la topbar */
  z-index: 5;
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
}
.f-row{ display:flex; flex-wrap:wrap; gap:10px; }
.f-item{ flex: 0 0 auto; }
.f-item.grow{ flex: 1 1 280px; min-width: 220px; }

/* Campi base */
.field{ position: relative; }
.arch-filters input,
.arch-filters select{
  width: 100%;
  height: 42px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18);
  background: #0d0d0d;
  color: #fff;
  font: 600 14px/1.2 Inter, system-ui, sans-serif;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.arch-filters input::placeholder{ color: #aaa; }

/* Focus ring monocromatico */
.arch-filters input:focus,
.arch-filters select:focus{
  outline: none;
  border-color: #fff;
  box-shadow: 0 0 0 4px rgba(255,255,255,.10);
  background: #0f0f0f;
}

/* Search: icona e clear */
.field--search .field-icon{
  position: absolute;
  left: 10px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px;
  color: #fff;               /* usa currentColor nello SVG */
  pointer-events: none;
}
.field--search input{ padding-left: 34px; padding-right: 34px; }

.field-clear{
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 999px;
  display:grid; place-items:center;
  border: 1px solid rgba(255,255,255,.18);
  background: transparent; color: #fff; font-weight: 700;
  line-height: 1; cursor: pointer;
}
.field-clear:hover{ background: rgba(255,255,255,.08); }

/* Select: caret custom bianco/nero */
.field--select select{
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 38px;          /* spazio per la freccia */
  background-image: none !important; /* evita freccia di sistema */
}
.select-caret{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:14px; height:14px;
  color:#fff;
  pointer-events:none;
}

/* Reset “pill” */
.btn-reset{
  height: 42px; padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: transparent; color: #fff; font-weight: 800; letter-spacing: .04em;
  transition: background .18s, border-color .18s, transform .18s;
}
.btn-reset:hover{ background: rgba(255,255,255,.08); border-color: #fff; transform: translateY(-1px); }

/* Compattezza su desktop */
@media (min-width: 980px){
  .arch-filters{ padding: 12px; }
  .f-item.grow{ min-width: 320px; }
}

/* Miglior allineamento del contatore nella testata lista */
.arch-list .arch-list__head{ display:flex; align-items:center; gap:10px; }
.arch-list #counter{
  display:inline-grid; place-items:center; min-width:28px; height:22px;
  padding:0 8px; border-radius:999px; font: 800 12px/1 Inter, system-ui, sans-serif;
  background:#111; border:1px solid rgba(255,255,255,.18); color:#fff;
}


/* ===== Carousel (full-bleed) ===== */
.arch-carousel{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns: clamp(220px, 70vw, 720px);
  gap: clamp(10px,1.6vw,18px);
  overflow-x:auto;
  padding:8px 2px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.arch-carousel::-webkit-scrollbar{ display:none; }

.arch-slide{
  aspect-ratio: var(--poster-ratio);
  height:auto;
  scroll-snap-align:start;
  border-radius:18px;
  overflow:hidden;
  background:#000;
  position:relative;
}
.arch-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.arch-slide .cap{
  position:absolute;
  left:8px; bottom:8px;
  background:rgba(0,0,0,.45);
  padding:6px 10px;
  border-radius:10px;
  font-size:.9rem;
}
@media (max-width: 767px), (orientation: portrait){
  .arch-slide img{
    object-fit: contain;     /* invece di cover */
    background: #000;        /* niente bande chiare */
  }
}
/* NAV */
.arch-carousel__nav{
  display:flex; gap:10px; justify-content:flex-end; padding-top:8px;
}
.arch-carousel__nav button{
  border:1px solid var(--bd2); background:rgba(255,255,255,.06);
  padding:8px 12px; border-radius:12px; color:#fff; cursor:pointer;
}

/* ===== LISTA EVENTI ===== */
.arch-list{ margin-top:28px; }
.group{ border-top:1px dashed var(--bd2); padding-top:12px; }
.e-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }

.e-item{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px;
  border:1px solid var(--bd);
  background:var(--card);
  border-radius:12px;
}

/* Thumbs: foto intera senza bande (contenitore = rapporto reale) */
.e-thumb{
  aspect-ratio: var(--ar, 1 / 1); /* impostato via JS = w / h */
  width: 72px;                    /* desktop compatto; mobile sotto */
  height: auto;
  border-radius: 10px;
  overflow: hidden;
  background: transparent;
  flex: 0 0 auto;
  border: 1px solid var(--bd);
}
.e-thumb img{
  width: 100%;
  height: 100%;
  object-fit: contain;            /* tutta la foto, zero crop */
  object-position: center;
  display: block;
  background: transparent;
  border: none !important;
  box-shadow: none !important
}

/* Testi/bottone */
.e-meta{ display:grid; gap:4px; }
.e-meta .t{ font-weight:600; }
.e-meta .s{ color:var(--muted); font-size:.92rem; }
.e-open{
  margin-left:auto;
  padding:8px 10px;
  border:1px solid var(--bd2);
  background:transparent;
  border-radius:10px;
  color:#fff;
}
.e-open:hover{ background:rgba(255,255,255,.06); }

/* ===== MOBILE (invariato per carosello; thumb più grandi) ===== */
@media (max-width: 767px){
  .arch-carousel{
    grid-auto-columns: clamp(180px, 70vw, 320px);
    gap:12px;
    padding-inline:8px;
  }
  .arch-slide{ border-radius:12px; }
  .arch-slide .cap{ font-size:.8rem; padding:4px 8px; }

  .e-thumb{ width: clamp(84px, 26vw, 140px); }
}

/* ===== DESKTOP COMPACT ===== */
@media (min-width: 768px){
  .arch-carousel{
    grid-auto-columns: clamp(180px, 45vw, 520px);
    gap:12px;
  }
  .arch-slide{ border-radius:16px; }
  .arch-slide .cap{ font-size:.82rem; padding:5px 9px; }

  .e-item{
    padding:8px 10px;
    gap:10px;
    min-height:68px;
  }
  .e-meta .t{ font-size:1rem; }
  .e-meta .s{ font-size:.85rem; }
  .e-open{
    padding:6px 10px;
    font-size:.88rem;
    border-radius:10px;
  }
}

/* ===== Sentinel ===== */
.arch-sentinel{ height:1px; }
.carousel-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.55);
  display: grid; place-items: center;
  cursor: pointer;
  z-index: 10;
}
.carousel-nav.prev { left: 8px; }
.carousel-nav.next { right: 8px; }

.carousel-nav::before{
  /* frecce vere, non < > */
  font: 700 22px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: #fff;
  display: block;
}

.carousel-nav.prev::before { content: "\2039"; } /* ‹  (U+2039) */
.carousel-nav.next::before { content: "\203A"; } /* ›  (U+203A) */

/* facoltativo: effetto hover */
.carousel-nav:hover{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.45);
}
/* — Rimuovi ogni alterazione del logo sulla pagina Archivio — */
.euto-topbar .euto-logo img{
  height: var(--logo-size-desktop) !important;
  max-width: none;
  transform: none !important;
  scale: 1 !important;
}

@media (max-width: 640px){
  .euto-topbar .euto-logo img{
    height: var(--logo-size-mobile) !important;
  }
}

/* Evita che la topbar/row venga scalata su Archivio */
.euto-topbar,
.euto-topbar__row{
  transform: none !important;
}
/* ===== ARCHIVE: hard reset header/logo ===== */
.page-archive .euto-topbar,
.page-archive .euto-topbar__row{
  transform: none !important;
}

.page-archive .euto-logo img{
  height: 60px !important;
  width: auto !important;
  max-width: none !important;  /* evita “scalate” strane */
  transform: none !important;
  scale: 1 !important;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
}

@media (max-width: 640px){
  .page-archive .euto-logo img{ height: 40px !important; }
}

/* assicura che il contenuto parta sotto la topbar */
.page-archive main{ padding-top: 12px; }

/* blocca qualsiasi eventuale elemento “hero” globale */
.page-archive .fold,
.page-archive .inset-hero,
.page-archive .bg-hero{
  display: none !important;
}
/* === Archivio — allinea perfettamente la riga data (clean) === */

/* 0) imposta 1 riga fissa per i titoli nella pagina Archivio */
.page-archive{
  --lh: 1.2;          /* line-height numerico del titolo */
  --title-lines: 1;   /* <— 1 riga fissa */
  --title-h: calc(1em * var(--lh) * var(--title-lines));
}

/* 1) griglia card: allinea in alto, non al centro */
.e-list .e-item{
  display: grid;
  grid-template-columns: 96px 1fr auto; /* thumb | meta | azione */
  align-items: start;                    /* <— evita disallineamento data */
  gap: 12px;
  padding: 12px 10px;
}

/* 2) thumb coerente */
.e-list .e-thumb{
  width:96px; height:64px;
  border-radius:12px; overflow:hidden;
}
.e-list .e-thumb img{
  width:100%; height:100%;
  object-fit:cover; display:block;
}

/* 3) meta con titolo a altezza fissa */
.e-list .e-meta{
  display:grid;
  grid-template-rows: var(--title-h) auto;
}
.e-list .e-meta .t{
  margin:0;                     /* azzera margini se è <h*> */
  line-height: var(--lh);
  min-height: var(--title-h);
  max-height: var(--title-h);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--title-lines);
  white-space: normal;
  text-overflow: ellipsis;
}
.e-list .e-meta .s{
  margin: 4px 0 0 0;
  opacity:.8;
}

/* 4) bottone/placeholder */
.e-list .e-open.muted{
  opacity:.45; pointer-events:none; cursor:default;
}
/* === ARCHIVIO — forza allineamento a sinistra ovunque serve === */

/* Carosello poster (sotto): didascalia a sinistra */
.page-archive #posterCarousel .arch-slide { text-align: left; }
.page-archive #posterCarousel .arch-slide .cap {
  display:block;
  text-align:left;
}

/* Lista eventi: griglia e testi allineati a sinistra */
.page-archive .e-list .e-item{
  display:grid;
  grid-template-columns: 96px 1fr auto;
  align-items:start;
  justify-items:start;      /* <— niente centrature in cella */
  gap:12px;
  padding:12px 10px;
}

/* Colonna metadati (titolo + data) a sinistra */
.page-archive .e-list .e-meta,
.page-archive .e-list .e-meta .t,
.page-archive .e-list .e-meta .s{
  text-align:left !important;  /* <— sovrascrive centraggi ereditati */
  margin-left:0;
  margin-right:0;
}

/* Titolo: 1 riga fissa (così la data è allineata su tutte) */
.page-archive{
  --lh: 1.2;
  --title-lines: 1;                 /* metti 2 se vuoi due righe */
  --title-h: calc(1em * var(--lh) * var(--title-lines));
}
.page-archive .e-list .e-meta{ display:grid; grid-template-rows: var(--title-h) auto; }
.page-archive .e-list .e-meta .t{
  margin:0;
  line-height:var(--lh);
  min-height:var(--title-h);
  max-height:var(--title-h);
  overflow:hidden;
  display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:var(--title-lines);
  white-space:normal;
  text-overflow:ellipsis;
}

/* Thumb coerente (se presente) */
.page-archive .e-list .e-thumb{ width:96px; height:64px; border-radius:12px; overflow:hidden; }
.page-archive .e-list .e-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* “—” disabilitato */
.page-archive .e-list .e-open.muted{ opacity:.45; pointer-events:none; cursor:default; }

/* === FEATURED / POSTER CAROUSEL — frecce ai bordi (desktop) === */
/* il contenitore del carosello grande deve fare da riferimento */
#posterCarousel{ position: relative !important; }

/* stile base (riuso dei tuoi bottoni) */
#posterCarousel .carousel-nav{
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.55);
  display: grid; place-items: center;
  cursor: pointer;
}

/* posizionamento alle ESTREMITÀ del carosello */
#posterCarousel .carousel-nav.prev{ left: -26px !important; }
#posterCarousel .carousel-nav.next{ right: -26px !important; }

/* hover desktop */
@media (hover:hover){
  #posterCarousel .carousel-nav:hover{
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.45);
  }
}

/* su viewport più stretti, rientra le frecce dentro il box */
@media (max-width: 1200px){
  #posterCarousel .carousel-nav.prev{ left: 6px !important; }
  #posterCarousel .carousel-nav.next{ right: 6px !important; }
}

/* su mobile tienile come ora o nascondile, se vuoi */
@media (max-width: 767px){
  /* opzionale: nascondi le frecce e usa lo swipe */
  /* #posterCarousel .carousel-nav{ display:none !important; } */
}

/* ===== FEATURED (poster) — frecce corrette + no overflow + swipe ===== */

/* Contenitore della sezione “FEATURED”
   (in archive.html lo abbiamo come <section id="featuredSection">) */
#featuredSection{ 
  position: relative !important;
}

/* Il carosello non deve sbordare */
#featuredSection #posterCarousel{
  overflow: hidden !important;               /* <— prima era visible: ora no sbordo */
}

/* La viewport non deve tagliare lo swipe orizzontale della lib */
#featuredSection #posterCarousel .ec-viewport{
  overflow: hidden !important;
  touch-action: pan-y;                        /* evita conflitti con lo swipe orizzontale */
}

/* La barra che contiene i bottoni navigazione viene “stesa” sopra al carosello,
   ma non intercetta i tocchi tranne che sui bottoni */
#featuredSection .arch-carousel__nav{
  position: absolute !important;
  inset: 0 !important;                        /* occupa tutto il box del featured */
  pointer-events: none !important;            /* i tocchi passano al carosello */
  z-index: 20 !important;
}

/* Bottoni: riattiviamo i tocchi SOLO sui bottoni e li posizioniamo */
#featuredSection .arch-carousel__nav .carousel-nav{
  position: absolute !important;
  pointer-events: auto !important;
  display: grid !important;
  place-items: center !important;
  width: 46px; height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.55);
  color: #fff;
  cursor: pointer;
  /* posizionamento */
  /* spostale più in basso regolando --arrow-top */
  top: var(--arrow-top, 58%) !important;      /* 58% ≈ un po' sotto il centro */
  transform: translateY(-50%) !important;
}

/* rientro laterale dentro il box (puoi aumentare/diminuire) */
#featuredSection{
  --arrow-gap: 12px;                           /* distanza dal bordo interno */
}
#featuredSection .arch-carousel__nav .carousel-nav.prev{ left:  var(--arrow-gap) !important; }
#featuredSection .arch-carousel__nav .carousel-nav.next{ right: var(--arrow-gap) !important; }

/* hover desktop coerente con lo stile */
@media (hover:hover){
  #featuredSection .arch-carousel__nav .carousel-nav:hover{
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.45);
  }
}

/* Schermi larghi: puoi farle “sbordare” leggermente, se ti piace */
@media (min-width: 1400px){
  #featuredSection{ --arrow-gap: 6px; }        /* quasi a filo bordo */
}

/* Mobile: niente frecce, solo swipe */
@media (max-width: 820px){
  #featuredSection .arch-carousel__nav{ display: none !important; }
}
/* === FEATURED: swipe mobile + frecce più esterne === */

/* Contesto della sezione featured */
#featuredSection{ position: relative !important; }

/* Viewport del carosello: no sbordo, ma abilita swipe */
#featuredSection #posterCarousel{
  overflow: hidden !important;
}
#featuredSection #posterCarousel .ec-viewport{
  overflow: hidden !important;
  /* consenti alla lib di gestire lo swipe orizzontale lasciando lo scroll verticale */
  touch-action: pan-y !important;
  -ms-touch-action: pan-y !important;
}

/* (alcune lib usano anche .ec-track per il pointer handling) */
#featuredSection #posterCarousel .ec-track{
  touch-action: pan-y !important;
  -ms-touch-action: pan-y !important;
}

/* Nav come overlay che non blocca i tocchi, solo i bottoni cliccabili */
#featuredSection .arch-carousel__nav{
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 20 !important;
}
#featuredSection .arch-carousel__nav .carousel-nav{
  pointer-events: auto !important;
  position: absolute !important;
  top: var(--arrow-top, 58%) !important;       /* alzale/abbassale qui (es. 56% / 60%) */
  transform: translateY(-50%) !important;
  width: 46px; height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.55);
  color:#fff; display:grid; place-items:center; cursor:pointer;
}

/* FRECCE PIÙ ESTERNE: offset negativo (regolabile) */
#featuredSection{ --arrow-gap-out: 28px; }     /* aumenta se le vuoi ancora più esterne */
#featuredSection .arch-carousel__nav .carousel-nav.prev{ left:  calc(-1 * var(--arrow-gap-out)) !important; }
#featuredSection .arch-carousel__nav .carousel-nav.next{ right: calc(-1 * var(--arrow-gap-out)) !important; }

/* su schermi più larghi puoi spingerle ancora fuori */
@media (min-width: 1600px){
  #featuredSection{ --arrow-gap-out: 36px; }
}

/* su viewport medi rientrale dentro al box */
@media (max-width: 1280px){
  #featuredSection .arch-carousel__nav .carousel-nav.prev{ left: 8px !important; }
  #featuredSection .arch-carousel__nav .carousel-nav.next{ right: 8px !important; }
}

/* MOBILE: niente frecce, solo swipe */
@media (max-width: 820px){
  #featuredSection .arch-carousel__nav{ display:none !important; }
}
/* === FIX SWIPE FEATURED (mobile real) === */
#posterCarousel{
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-x: contain !important;
  touch-action: pan-x !important;              /* ← di' al browser: orizzontale */
  scroll-snap-type: x mandatory;               /* già lo usi altrove: rinforzo locale */
}

/* gli elementi interni non devono “rubare” il gesto orizzontale */
#posterCarousel a,
#posterCarousel picture,
#posterCarousel img {
  touch-action: pan-x !important;              /* ← iOS/Safari: fondamentale */
}

/* assicura l’aggancio */
#posterCarousel .arch-slide{
  scroll-snap-align: start;
}
/* === HARD OVERRIDE SWIPE (featured) === */
#posterCarousel{
  overflow-x: auto !important;
  overflow-y: hidden !important;
  touch-action: none !important;             /* niente gesti nativi: ci pensiamo noi */
  -webkit-overflow-scrolling: auto !important;
  overscroll-behavior-x: contain !important;
  scroll-snap-type: none !important;         /* disattiva snap nativo: lo faremo via JS */
}

/* nessun elemento interno deve “rubare” il gesto */
#posterCarousel *{
  touch-action: none !important;
  -webkit-user-drag: none !important;
  user-select: none !important;
}
/* === SWIPE FEATURED: minimal, no-block vertical === */
#posterCarousel{
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-x: contain !important;
  /* Lasciamo gestire al browser lo scroll verticale: */
  touch-action: pan-y !important;
}

/* evita che elementi interni rubino il gesto orizzontale,
   ma permetti comunque lo scroll verticale (pan-y) */
#posterCarousel a,
#posterCarousel picture,
#posterCarousel img {
  touch-action: pan-y !important;
}

/* (se esiste) overlay nav: non deve bloccare i tocchi; solo i bottoni sì */
#featuredSection .arch-carousel__nav{ pointer-events: none !important; }
#featuredSection .arch-carousel__nav .carousel-nav{ pointer-events: auto !important; }
/* ===== SWIPE FEATURED — RESET & FIX (device real) ===== */
#posterCarousel{
  /* container scorrevole orizzontale */
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-x: contain !important;

  /* il browser può gestire lo scroll verticale (NON blocchiamo su/giù) */
  touch-action: pan-y !important;
}

/* gli elementi interni non devono annullare il gesto orizzontale */
#posterCarousel .arch-slide,
#posterCarousel a,
#posterCarousel picture,
#posterCarousel img{
  touch-action: pan-y !important;  /* verticale libero: l’orizzontale lo gestiamo noi via JS */
  -webkit-user-drag: none !important;
  user-select: none !important;
}

/* se hai un overlay nav, non deve mangiare i tocchi */
#featuredSection .arch-carousel__nav{ pointer-events: none !important; }
#featuredSection .arch-carousel__nav .carousel-nav{ pointer-events: auto !important; }
/* layout base */
.arch{ width:min(1200px,92vw); margin:0 auto; padding:32px 0; }

/* ===== TITOLO PAGINA ===== */
.page-title{
  font-family:'Bebas Neue',system-ui;
  font-size: clamp(32px, 6vw, 48px);
  letter-spacing:.08em;
  margin: 0 0 10px;
  text-align:center;
}

/* ===== ULTIMO EVENTO (poster più piccolo e centrato) ===== */
.latest{ margin-bottom:24px; }
.latest__card{
  display:block; position:relative; overflow:hidden;
  border-radius:14px; background:#0b0b0b;
  outline:1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  width:100%;
  max-width: min(820px, 92vw);   /* <— più piccola su desktop */
  margin-inline:auto;            /* centrata */
}
.latest__card picture,
.latest__card img{ display:block; width:100%; height:auto; }

/* mobile: un filo più compatta */
@media (max-width: 767px){
  .latest__card{ max-width: 92vw; border-radius:12px; }
}

/* rimosso il badge data/città: se resta in DOM, non mostrarlo */
.latest__badge{ display:none !important; }

/* ===== SEARCH/FILTRI ===== */
.search-panel{ position:sticky; top:0; padding:12px 0 18px; background:var(--bg,#0a0a0a); z-index:2; }
.filters{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.field--search{ position:relative; flex:1 1 420px; }
.field--search input{
  width:100%; height:44px; border-radius:999px; padding:0 44px 0 16px;
  background:#131313; color:#fff; border:1px solid rgba(255,255,255,.12);
}
.field-clear{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; border-radius:999px; background:#202020; color:#ddd; border:none; cursor:pointer;
}
select, .btn-reset{
  height:44px; border-radius:999px; padding:0 14px; background:#131313; color:#fff;
  border:1px solid rgba(255,255,255,.12);
}

/* ===== LISTA EVENTI (com’era) ===== */
.group{ margin:28px 0; }
.group > h3{
  font-size:18px; letter-spacing:.12em; margin:6px 0 12px; text-transform:uppercase; opacity:.9;
  border-top:1px dashed rgba(255,255,255,.12); padding-top:16px;
}
.e-list{ display:grid; grid-template-columns:1fr; gap:10px; }
.e-item{
  display:grid; grid-template-columns:88px 1fr auto; gap:14px; align-items:center;
  padding:12px; border-radius:14px; background:#101010; outline:1px solid rgba(255,255,255,.08);
}
.e-thumb{ width:88px; height:56px; overflow:hidden; border-radius:10px; background:#0b0b0b; }
.e-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.e-meta .t{ font-weight:700; letter-spacing:.04em; }
.e-meta .s{ opacity:.75; font-size:.92rem; }
.e-open{ padding:8px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.18); }
.e-open.muted{ opacity:.35; pointer-events:none; }

@media (min-width:640px){ .e-list{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .e-list{ grid-template-columns:1fr 1fr 1fr; } }

/* disattiva eventuale vecchio featured */
#posterCarousel, .arch-carousel, .arch-carousel__nav{ display:none !important; }
/* === shrink "Ultimo evento" card === */
.latest__card{
  max-width: 720px !important;   /* desktop: prima era 820px */
}

@media (max-width: 767px){
  .latest__card{
    max-width: 62vw !important;  /* mobile: prima era 92vw */
  }
}
/* Eyebrow "ULTIMO EVENTO" sopra la locandina */
.latest-eyebrow{
  margin: 0 0 10px;
  font-family: 'Bebas Neue', system-ui, sans-serif;
  font-size: clamp(14px, 2.8vw, 20px);
  letter-spacing: .18em;
  opacity: .85;
}

/* Titolo GALLERIA centrato, separato dalla card */
.archive-title{
  padding: clamp(8px, 2.6vw, 20px) 0 clamp(12px, 3vw, 24px);
}
.archive-title .page-title{
  margin: 0;
  text-align: center;
}

/* Togli i separatori tratteggiati dai gruppi anno */
.group > h3{
  border: 0 !important;
  padding-top: 0 !important;
}
/* --- RIMUOVI intestazioni anno + righe tratteggiate --- */
.group > h3{
  display: none !important;      /* nasconde "2025", "2024", ecc. */
  border: 0 !important;          /* annulla eventuali bordi */
  padding: 0 !important;
  margin: 0 !important;
}

/* alcuni temi disegnano la riga con pseudo-elementi: spegnili */
.group::before,
.group::after,
.group > h3::before,
.group > h3::after{
  display: none !important;
  content: none !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* se serve un po’ di aria tra i blocchi dopo aver tolto il titolo */
.group{ margin-top: 12px !important; }
/* Bottone icona “Galleria foto” */
.btn-icon {
  display:inline-grid;
  place-items:center;
  width:44px; height:44px;
  border-radius:999px;
  padding:0;                          /* niente testo, solo icona */
  border:1px solid rgba(255,255,255,.18);
  background:transparent;
  color:#fff;
  transition:transform .15s ease, background-color .15s ease, border-color .15s ease, opacity .15s ease;
}
.btn-icon svg{ width:20px; height:20px; display:block; }

.btn-icon:hover{ transform:translateY(-1px); border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.06); }
.btn-icon:active{ transform:translateY(0); }
.btn-icon.muted{ opacity:.35; pointer-events:none; }

/* Se avevi regole precedenti su .e-open (es. padding 8px 14px), sovrascrivi: */
.e-open{ padding:0 !important; }
/* Spazio tra topbar e locandina "Ultimo evento" */
.euto-topbar + .arch .latest{
  margin-top: clamp(16px, 4vw, 48px);
}
/* Spazio tra topbar e locandina (PC + mobile) */
.euto-topbar + .arch .latest,
.arch .latest{
  margin-top: clamp(40px, 6vw, 80px) !important;
}

/* nel dubbio, nasconde qualsiasi residuo di “ULTIMO EVENTO” */
.latest-eyebrow{ display:none !important; }
/* === Spazio sotto la topbar (PC + mobile) === */
/* imposta l'altezza della topbar una sola volta */
:root{
  --topbar-h: 88px;            /* desktop stimato */
}

/* su mobile di solito è un filo più bassa */
@media (max-width: 768px){
  :root{ --topbar-h: 72px; }   /* regola se necessario */
}

/* spinta del contenuto verso il basso */
.arch{
  /* spazio = altezza topbar + un piccolo margine */
  padding-top: calc(var(--topbar-h) + 12px) !important;
}

/* bonus: su iPhone con notch evita che tocchi il bordo */
@supports (padding: max(0px)){
  .arch{
    padding-top: calc(var(--topbar-h) + max(12px, env(safe-area-inset-top))) !important;
  }
}