/* ============================================================================
   AL CINEMA — la pagina di una rassegna/film in sala, «modello semplice» (set 2026)

   Tre pezzi soli, uguali per tutti (Wenders con 8 sale, Django con 1 sala e 4 date):
   1) l'immagine col titolo e il conteggio   2) i film, rimando alla scheda (SENZA
   prezzo: nel test nessuno lo cercava)   3) sale per regione, UNA RIGA PER PROIEZIONE
   a colonne fisse — giorno in grassetto tabulare (la colonna che l'occhio scende),
   mese per esteso, giorno della settimana attenuato, film — e la riga per gli
   esercenti. Le chip sono state provate e bocciate (optometrista: cinque bordi in
   più per riga e nessuna gerarchia; test 10 secondi: 2 date giuste su 5 → 5 su 5
   con le righe). Le passate si attenuano, non si barrano.
   Tutto dai token di theme.json; spazi sulla Fibonacci del progetto. Scope .dvd-prog*.
   ========================================================================= */
.dvd-prog {
	--p-s1: 8px; --p-s2: 13px; --p-s3: 21px; --p-s4: 34px; --p-s5: 55px;
	/* IL GUTTER LO METTE QUESTO CONTENITORE (misurato con la sonda, 3 set 2026): su
	   questa pagina `main` e `.wp-site-blocks` hanno padding ZERO — il tema dà il
	   margine pagina per pagina (come `.dvd-news-art`), e l'header se lo mette da
	   solo. Senza questo padding il margine negativo del banner lo spingeva a -89px
	   (178px di sforo orizzontale) e il testo, a 89 dentro un banner partito da -89,
	   cadeva a 0 invece che sul logo. Padding qui, cap sui figli: mai insieme. */
	box-sizing: border-box; width: 100%;
	padding: 0 var(--wp--style--root--padding-right, 1.5rem) 0 var(--wp--style--root--padding-left, 1.5rem);
}

/* ---------- 1) APERTURA: full-bleed via margini negativi = root padding (mai 100vw);
   il margine negativo in alto annulla il respiro `header + *` delle pagine interne ---------- */
.dvd-prog__hero {
	position: relative;
	margin: calc(-1 * clamp(1.5rem, 4vw, 2.5rem)) calc(-1 * var(--wp--style--root--padding-right, 1.5rem)) 0 calc(-1 * var(--wp--style--root--padding-left, 1.5rem));
	background: var(--wp--preset--color--surface); overflow: hidden;
}
.dvd-prog__img { display: block; width: 100%; height: auto; aspect-ratio: var(--prog-ratio, 16 / 9); min-height: 46vh; object-fit: cover; filter: contrast(1.04) saturate(0.96); }
.dvd-prog__scrim { position: absolute; inset: 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--wp--preset--color--base) 55%, transparent) 0, transparent 30%, transparent 50%, color-mix(in srgb, var(--wp--preset--color--base) 92%, transparent) 100%); }
.dvd-prog__in { position: absolute; left: var(--wp--style--root--padding-left, 1.5rem); right: var(--wp--style--root--padding-right, 1.5rem); bottom: var(--p-s4); max-width: 62rem; }
.dvd-prog__back { position: absolute; top: var(--p-s3); left: var(--wp--style--root--padding-left, 1.5rem); margin: 0; font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--x-small); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; z-index: 1; }
.dvd-prog__back a { color: var(--wp--preset--color--muted); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.dvd-prog__back a:hover { color: var(--wp--preset--color--accent); }
.dvd-prog__kick { margin: 0 0 var(--p-s2); font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--x-small); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.dvd-prog__kick i { font-style: normal; color: var(--wp--preset--color--accent); }
.dvd-prog__t { margin: 0 0 var(--p-s2); font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: var(--wp--preset--font-size--xx-large); line-height: .98; letter-spacing: -.038em; text-wrap: balance; }
.dvd-prog__lede { margin: 0; font-size: var(--wp--preset--font-size--base); color: var(--wp--preset--color--muted); }
.dvd-prog__lede b { color: var(--wp--preset--color--contrast); }

/* ---------- sezioni ---------- */
/* a filo del LOGO, non dentro un cap: per allinearsi a un elemento si adotta il suo
   vincolo (il root padding), non ci si avvicina con un numero — lezione dell'articolo */
.dvd-prog__sec { max-width: none; margin: var(--p-s5) 0 0; }
.dvd-prog__eb { margin: 0 0 var(--p-s3); font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--x-small); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--muted-2); }
.dvd-prog__hd { display: flex; justify-content: space-between; align-items: baseline; gap: var(--p-s3); flex-wrap: wrap; }
.dvd-prog__upd { margin: 0 0 var(--p-s3); font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--muted-2); }

/* ---------- 2) i film: poster a ratio nativo, raggio-stampa, niente prezzo ---------- */
.dvd-prog__films { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--p-s3); }
.dvd-prog__films--one { grid-template-columns: 132px; }
.dvd-prog__film { text-decoration: none; color: inherit; display: block; }
.dvd-prog__film img { display: block; width: 100%; height: auto; aspect-ratio: var(--wp--custom--poster--ratio); object-fit: cover; border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--poster--radius); background: var(--wp--preset--color--surface-2); box-shadow: 0 6px 20px rgba(0,0,0,.45); transition: transform .2s ease, border-color .2s ease; }
.dvd-prog__film:hover img { transform: translateY(-4px); border-color: var(--wp--preset--color--line-2); }
.dvd-prog__film b { display: block; margin-top: var(--p-s2); font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: var(--wp--preset--font-size--small); line-height: 1.25; }
.dvd-prog__film span { display: block; margin-top: 2px; font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--muted-2); }

/* ---------- 3) SALE E DATE ---------- */
.dvd-prog__reg { margin: 0 0 var(--p-s4); }
.dvd-prog__reg h2 { margin: 0 0 var(--p-s1); padding-bottom: var(--p-s1); border-bottom: 1px solid var(--wp--preset--color--line); font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--x-small); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--contrast); }
/* PANEL 8 set 2026 — «una riga per proiezione», MOBILE FIRST (le regole base sono il telefono,
   il desktop sta nel @media min-width in fondo). Ogni <li> e' una griglia SUA a due colonne, data
   e film: niente `display:contents`, niente colonna di stato. Prima era UNA griglia a 4 colonne
   condivisa da tutte le righe, e ogni riga emetteva 3 o 4 celle a seconda di «passata»: a Brescia
   (1 passata + 3 future) ogni riga scivolava di una colonna. Le passate stanno in un <details>
   in coda alla sala, attenuate e mai barrate (barrare si legge «annullata»). */
.dvd-prog__sala { display: grid; grid-template-columns: 1fr; gap: var(--p-s1); align-items: start; padding: var(--p-s2) 0; border-bottom: 1px solid var(--wp--preset--color--line); }
.dvd-prog__sala:last-child { border-bottom: 0; }
/* la città in maiuscolo è la chiave di scansione: 5 su 5 la trovano in 10 secondi */
.dvd-prog__n b { display: block; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: var(--wp--preset--font-size--base); line-height: 1.2; text-transform: uppercase; letter-spacing: .02em; }
.dvd-prog__n span { display: block; margin-top: 2px; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }
/* specificita' (0,2,0) sopra `.dvd-prog__n span` (0,1,1): niente !important */
.dvd-prog__n .dvd-prog__done { font-size: var(--wp--preset--font-size--x-small); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--muted-2); margin-top: 4px; }
.dvd-prog__sala.is-over .dvd-prog__n b, .dvd-prog__sala.is-over .dvd-prog__n span { color: var(--wp--preset--color--muted-2); }
.dvd-prog__dates { min-width: 0; }
/* righe-data a `base` (over-45: mai sotto 18px); la colonna della data e' FISSA in rem, larga quanto
   la forma piu' lunga che puo' contenere — cosi' i film si allineano fra tutte le sale di una regione */
.dvd-prog__dl { list-style: none; margin: 0; padding: 0; display: grid; row-gap: var(--p-s1); font-size: var(--wp--preset--font-size--base); line-height: 1.35; }
.dvd-prog__dl li { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); column-gap: var(--p-s2); align-items: baseline; }
.dvd-prog__d { font-family: var(--wp--preset--font-family--heading); font-weight: 800; color: var(--wp--preset--color--contrast); font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.1; }
.dvd-prog__d b { font-size: var(--wp--preset--font-size--medium); font-weight: 800; }
/* la tessera: numero grande, sotto «set · ven» piccolo; la forma per esteso resta nel DOM per gli screen reader */
.dvd-prog__d small { display: block; font-family: var(--wp--preset--font-family--body); font-weight: 500; font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--muted); letter-spacing: .04em; text-transform: uppercase; margin-top: 1px; }
.dvd-prog__m-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.dvd-prog__f { color: var(--wp--preset--color--contrast); min-width: 0; }
.dvd-prog__f a { color: inherit; text-decoration: none; } .dvd-prog__f a:hover { color: var(--wp--preset--color--accent); }
/* nota della proiezione (tool Al Cinema, 8 set 2026): corsivo, riga propria sotto il film */
.dvd-prog__note { display: block; font-style: italic; font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--muted-2); margin-top: 2px; }
/* film fuori catalogo: stessa card, niente link né sollevamento */
.dvd-prog__film--static:hover img { transform: none; border-color: var(--wp--preset--color--line); }
/* le passate: cassetto nativo (<details>, come l'accordion del footer), tocco 44px, chevron in CSS */
.dvd-prog__past { margin-top: var(--p-s1); }
.dvd-prog__past summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--x-small); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--muted-2); }
.dvd-prog__past summary::-webkit-details-marker { display: none; }
.dvd-prog__past summary::before { content: ""; width: 7px; height: 7px; border-right: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor; transform: rotate(-45deg); transition: transform .15s ease; }
.dvd-prog__past[open] summary::before { transform: rotate(45deg); }
.dvd-prog__past summary:hover, .dvd-prog__past summary:focus-visible { color: var(--wp--preset--color--contrast); }
.dvd-prog__past .dvd-prog__dl { margin-top: var(--p-s1); }
.dvd-prog__past .dvd-prog__d, .dvd-prog__past .dvd-prog__d small, .dvd-prog__past .dvd-prog__f { color: var(--wp--preset--color--muted-2); }
.dvd-prog__past .dvd-prog__d b { font-weight: 600; }
@media (min-width: 641px) {
	.dvd-prog__sala { grid-template-columns: minmax(220px, .8fr) minmax(0, 1.618fr); gap: var(--p-s3); padding: var(--p-s3) 0; }
	.dvd-prog__n b { font-size: var(--wp--preset--font-size--medium); }
	.dvd-prog__dl { font-size: var(--wp--preset--font-size--small); }
	/* 15.5rem = la data piu' lunga possibile per esteso, «22 settembre · mercoledì», misurata */
	.dvd-prog__dl li { grid-template-columns: 15.5rem minmax(0, 1fr); }
	.dvd-prog__d b { font-size: var(--wp--preset--font-size--base); }
	.dvd-prog__d small { display: inline; margin-left: .35em; text-transform: none; letter-spacing: 0; font-size: var(--wp--preset--font-size--small); }
	.dvd-prog__m-s { display: none; }
	.dvd-prog__m-l { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; }
}

/* ---------- 4) gli esercenti: LA CARD (scelta fra 4 versioni). E' un'azione vera →
   bottone rosso (regola del sito: rosso = azione); la mail resta come seconda strada. ---------- */
.dvd-prog__exh {
	display: grid; grid-template-columns: 1.618fr 1fr; gap: var(--p-s4); align-items: center;
	padding: var(--p-s4);
	background: var(--wp--custom--card--background); border: var(--wp--custom--card--border);
	border-radius: var(--wp--custom--card--radius); box-shadow: var(--wp--custom--card--shadow);
}
.dvd-prog__exh h2 { margin: 0 0 var(--p-s2); font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: var(--wp--preset--font-size--x-large); line-height: 1.05; letter-spacing: -.025em; text-wrap: balance; }
.dvd-prog__exh p { margin: 0; color: var(--wp--preset--color--muted); }
.dvd-prog__exh-act { display: grid; gap: var(--p-s2); justify-items: start; }
.dvd-prog__exh-alt { font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--muted-2); }
.dvd-prog__exh-alt a { color: var(--wp--preset--color--muted); text-decoration: underline dotted; text-decoration-color: var(--wp--preset--color--line-2); text-underline-offset: 4px; }
.dvd-prog__exh-alt a:hover { color: var(--wp--preset--color--accent); }
/* ESERCENTI (19 ott 2026: prima card con bottone rosso, poi su richiesta utente una riga
   minimal, poi il PANEL per la coerenza — variante A). Grammatica della pagina, nessuna
   misura nuova: occhiello .dvd-prog__eb come le altre sezioni; filetto sopra come fra le
   sale; la domanda alla taglia dei nomi delle città (medium, Bricolage); «Scrivici →»
   come «Guarda ora →» e «Prenota →» nel resto del sito: accent, grassetto, senza
   sottolineatura (compare all'hover), alla taglia delle date (base, corpo). */
.dvd-prog__ask { margin: 0; padding-top: var(--p-s3); border-top: 1px solid var(--wp--preset--color--line);
	display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--p-s1) var(--p-s3); }
.dvd-prog__ask span { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: var(--wp--preset--font-size--medium);
	line-height: 1.2; letter-spacing: -0.01em; color: var(--wp--preset--color--contrast); }
.dvd-prog__ask a { font-family: var(--wp--preset--font-family--body); font-weight: 700; font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--accent); text-decoration: none; white-space: nowrap; }
.dvd-prog__ask a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dvd-prog__ask a:focus-visible { outline: none; box-shadow: var(--wp--custom--focus--ring); border-radius: 2px; }
.dvd-prog__btn {
	display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 26px;
	border-radius: var(--wp--custom--radius--control); text-decoration: none; white-space: nowrap;
	font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: var(--wp--preset--font-size--small);
	border: 1px solid transparent; transition: filter .15s ease;
}
.dvd-prog__btn--primary { background: var(--wp--preset--color--primary); color: #fff; box-shadow: 0 8px 30px color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent); }
.dvd-prog__btn--primary:hover { filter: brightness(1.06); }

/* ---------- MOBILE (in fondo: un @media non ha specificità propria) ---------- */
@media (max-width: 1024px) { .dvd-prog__films { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
	/* apertura 4:5 (la <source> Cloudflare con gravity=auto, vedi PHP): niente min-height,
	   il ratio lo decide la sorgente; titolo e conteggio appoggiati in basso */
	.dvd-prog__img { aspect-ratio: 4 / 5; min-height: 0; }
	.dvd-prog__in { bottom: var(--p-s3); }
	.dvd-prog__lede { font-size: var(--wp--preset--font-size--base); }
	/* PRIMA LE DATE, POI I FILM: sul telefono i poster erano tre schermate prima delle sale */
	.dvd-prog { display: flex; flex-direction: column; }
	.dvd-prog__hero { order: 0; }
	#programmazione { order: 1; }
	.dvd-prog__sec { order: 2; margin-top: var(--p-s4); }
	.dvd-prog__films { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--p-s2); }
	.dvd-prog__films--one { grid-template-columns: 106px; }
	/* la regione resta appiccicata in cima mentre si scorre: con otto sale non si perde il «dove» */
	.dvd-prog__reg h2 { position: sticky; top: 0; z-index: 1; margin: 0 calc(-1 * var(--wp--style--root--padding-right, 1.5rem)) var(--p-s1) calc(-1 * var(--wp--style--root--padding-left, 1.5rem)); padding: 10px var(--wp--style--root--padding-right, 1.5rem) 10px var(--wp--style--root--padding-left, 1.5rem); background: color-mix(in srgb, var(--wp--preset--color--base) 92%, transparent); backdrop-filter: blur(8px); }
	.dvd-prog__exh { grid-template-columns: 1fr; padding: var(--p-s3); gap: var(--p-s2); }
	.dvd-prog__exh-act { justify-items: stretch; }
	.dvd-prog__btn { justify-content: center; min-height: 56px; font-size: var(--wp--preset--font-size--base); }
	.dvd-prog__exh-alt { text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .dvd-prog__film img { transition: none; } }

/* =============================================================================
 * /al-cinema/ — «I film disponibili per la proiezione» sotto i banner (.dvd-cin)
 * Caroselli = quelli di Novità (.dvd-nov__*), slide = BOTTONE che apre il lightbox
 * (nessun prezzo, nessun link alla scheda). Il teatro è .dvd-pdp__lbx della scheda.
 * ========================================================================== */
.dvd-exc.dvd-cin { padding-top: clamp(3rem, 6vw, 5.5rem); padding-bottom: clamp(3.5rem, 7vw, 6rem); background: var(--wp--preset--color--base); }
.dvd-cin .dvd-exc__claim { max-width: 22ch; }
.dvd-cin .dvd-exc__sub { max-width: 40ch; }
/* il bottone-slide: nudo, eredita il look del link-slide di Novità; zoom-in dice cosa fa */
.dvd-cin__open { appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0; margin: 0; width: 100%; text-align: left; font: inherit; color: inherit; cursor: zoom-in; }
.dvd-cin__open:focus-visible { outline: 2px solid var(--wp--preset--color--contrast); outline-offset: 4px; border-radius: var(--wp--custom--poster--radius); }
.dvd-cin__ph { cursor: default; }
.dvd-cin__ph:hover { transform: none; }
/* rimando alle sale, in coda: ghost — il rosso resta al pulsante della pagina programmazione */
.dvd-cin__foot { margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; text-align: center; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--base); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.6rem 1rem; }
.dvd-cin__ask { display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.3rem; border: 1px solid var(--wp--preset--color--line-2); border-radius: var(--wp--custom--r-pill, 999px); font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--contrast); text-decoration: none; transition: background 0.18s, border-color 0.18s; }
.dvd-cin__ask:hover, .dvd-cin__ask:focus-visible { background: color-mix(in srgb, currentColor 12%, transparent); border-color: var(--wp--preset--color--contrast); }
/* lightbox: solo la locandina (la didascalia col titolo finiva tagliata); [hidden] vince su display:grid */
.dvd-cin__lbx[hidden] { display: none !important; }
.dvd-cin__lbx img { max-width: min(92vw, 600px); max-height: 92vh; border-radius: var(--wp--custom--poster--radius); box-shadow: 0 30px 80px rgba(0,0,0,0.6); cursor: default; }