/* ============================================================================
NEWS — la home /news/ e la scheda articolo
Tutto dai token di theme.json: nessun hex, nessuna taglia fuori dalla scala φ,
spazi sulla Fibonacci del progetto (8/13/21/34/55) — la stessa di scheda
prodotto, checkout e conferma ordine.
LE COPERTINE SONO STRISCE. Misurate sui file veri: 404 su 596 sono 2004x600
(ratio 3.34), 190 sono 1120x398 (2.81). Nessun altro formato.
CORREZIONE A UN'ASSUNZIONE SBAGLIATA (verificata aprendo sei copertine): NON
contengono testo grafico. Sono FOTOGRAMMI di film — Gassman in un interno,
Tarantino in sala, la Sandrelli fra le agavi. Il vincolo «non si puo' croppare
o si tagliano le scritte» che questo commento affermava non esisteva.
Il vincolo VERO e' un altro: il soggetto non e' sempre al centro. Su sei, due
sono nettamente decentrati (la Sandrelli a destra, Toffolo a destra con meta'
fotogramma nero) e in uno i due personaggi stanno ai LATI OPPOSTI. Percio' il
crop non puo' essere centrato fisso: serve `gravity=auto` dell'edge Cloudflare,
che individua il soggetto — lo stesso parametro gia' in uso per l'hero della
scheda prodotto.
HOME: 21/9, per le ragioni misurate sopra `.dvd-news__leadart`.
ARTICOLO: 10/3 nativo — li' la striscia e' un banner in cima a un pezzo.
MINIATURA della lista: 16/9, l'unico crop che NON dipende dal ratio scelto
(a 128px di larghezza, spiegato piu' sotto).
========================================================================= */
.dvd-news {
/* Fibonacci, come il resto del progetto */
--n-s1: 8px;
--n-s2: 13px;
--n-s3: 21px;
--n-s4: 34px;
--n-s5: 55px;
/* GABBIA: padding QUI, cap sui figli — mai sullo stesso elemento.
Senza `border-box` si sommerebbero; con `border-box` si sottrarrebbero
dal cap (a 1920px il contenuto perderebbe ~230px). Sono due facce dello
stesso errore, ed e' gia' costato un giro su `.dvd-nov`. */
box-sizing: border-box;
width: 100%;
max-width: none;
margin: 0 auto;
padding: 0 var(--wp--style--root--padding-right, 1.5rem);
}
.dvd-news > * {
box-sizing: border-box;
width: 100%;
max-width: 1200px;
margin-inline: auto;
}
/* L'intestazione e' `.dvd-exc__head`, la firma di famiglia delle vetrine: si
eredita da style.css e NON si ridichiara. Qui solo lo stacco verso il primo
blocco — landmark, perche' sotto comincia un'altra sezione della pagina. */
.dvd-news__head {
margin-bottom: var(--n-s5);
}
/* ---------- APERTURA: punta a sinistra, recenti a destra ---------- */
.dvd-news__top {
display: grid;
grid-template-columns: 1.618fr 1fr; /* φ, come le colonne del checkout */
gap: var(--n-s5);
align-items: start;
margin-bottom: var(--n-s5);
}
.dvd-news__lead { min-width: 0; } /* o un titolo lungo sfonda la colonna */
/* IL RATIO DELLA HOME: 21/9 (2.33), non il nativo 3.34 — verdetto Leonardo.
*
* La diagnosi che conta non e' quella che si vede: le immagini non sono «troppo
* larghe», sono TROPPO BASSE. Su una colonna da 707px la larghezza e' imposta
* dalla gabbia, quindi il ratio e' l'unica variabile che governa l'altezza — e a
* 3.34 l'immagine di punta viene alta 212px contro 269 di testo sotto: la punta
* PESA MENO del proprio testo. Sono due letture dello stesso numero.
*
* Cosa si guadagna, misurato: punta 212 → 304px (rapporto 1.13 a favore
* dell'immagine, era 0.79); card 2x2 da un pareggio 1.04 a 1.37 (≈√2, un rapporto
* che vive); e i 100px di vuoto dentro la fascia scendono a 13.
*
* Cosa costa: si conserva il 69,8% centrale (l'83% sui file 2.81), cioe' si taglia
* la fascia dei bordi. La soglia sta fra 2.33 e 2.00: oltre, il taglio smette di
* essere ai margini e entra nella composizione, e in cambio la punta guadagna solo
* 50px. Cinquanta pixel non valgono il 5% di grafica su 596 file.
*
* E 21:9 e' il ratio dello SCOPE cinematografico: su un distributore di film il
* vincolo tecnico e il significato coincidono, il che capita di rado.
*
* L'ARTICOLO resta al nativo 10/3 (vedi `.dvd-news-art__cover`): li' la striscia e'
* un banner in cima a un pezzo, ed e' al suo posto. */
.dvd-news__leadart,
.dvd-news__bandart,
.dvd-news__cardart {
display: block;
position: relative;
aspect-ratio: 21 / 9;
overflow: hidden;
border: 1px solid var(--wp--preset--color--line);
border-radius: var(--wp--custom--radius--surface);
background: var(--wp--preset--color--surface-2);
transition: transform 0.2s ease, border-color 0.2s ease;
}
/* L'immagine va ANCORATA, non lasciata in flusso: su un box con solo
`aspect-ratio` un ![]()
con `height:100%` non ha un riferimento risolto e la
sua altezza intrinseca sfonda il contenitore. Gotcha gia' misurato sulle card
del catalogo. */
.dvd-news__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.dvd-news__ph {
position: absolute;
inset: 0;
background: var(--wp--preset--color--surface-2);
}
.dvd-news__leadt {
font-family: var(--wp--preset--font-family--heading);
font-weight: 700;
font-size: var(--wp--preset--font-size--large);
line-height: 1.14;
letter-spacing: -0.02em;
margin: var(--n-s3) 0 var(--n-s2);
text-wrap: balance;
}
.dvd-news__leadt a,
.dvd-news__bandt a,
.dvd-news__cardt a {
color: inherit;
text-decoration: none;
}
/* HOVER — UNA REGOLA SOLA, e il criterio non e' «immagine vs testo».
*
* Censite tutte le 144 dichiarazioni :hover del tema, la variabile vera e' un'altra:
*
* E' UNA CARD (bordo + fondo)? -> si muove la CARD INTERA, testo compreso.
* `.dvd-x` vetrine -3px · `.dvd-stu` Startup -3px · `.cgtv-order-card` -2px
* Tutte contengono prosa e si muovono da mesi.
*
* E' un'IMMAGINE NUDA in un blocco senza contorno? -> si muove la SOLA IMMAGINE.
* `.dvd-arc__poster` catalogo -4px — e li' il titolo sta FUORI dal poster,
* quindi «il testo non si muove» e' una CONSEGUENZA del markup, non una regola.
*
* Percio': la punta (nessun bordo, nessun fondo) muove la sola immagine; fascia e
* card 2x2 (bordo + fondo) si muovono intere. Non e' un'incoerenza: e' la stessa
* regola applicata a due nature diverse — la stessa distinzione per cui il drawer
* carrello e' tutto `surface` e il checkout e' `base` + card.
*
* -4px OVUNQUE, non 4/3/3/2: l'ampiezza e' la voce con cui il sito dice
* «cliccabile», e ne ha una. E' il valore del catalogo (style.css:2453), dei
* caroselli (2167) e della fascia film in fondo a questa pagina.
*
* IL BORDO `line -> line-2` accompagna sempre: e' materia, non colore, ed e' la
* conferma che sopravvive a `prefers-reduced-motion`.
*
* NIENTE ROSSO sul titolo. Su 11 contenuti cliccabili censiti, 9 si muovono e uno
* solo colora il titolo — la vista LISTA del catalogo, dove l'immagine e' una
* miniatura satellite e non c'e' altro da muovere. Sei titoli rossi in una griglia
* moltiplicherebbero i campi rossi in una pagina che ne ha gia' tre. */
@media (hover: hover) {
/* LA PUNTA: nessun bordo, nessun fondo — non e' una card. Si muove la sola
immagine, come il poster del catalogo. */
.dvd-news__lead:hover .dvd-news__leadart {
transform: translateY(-4px);
border-color: var(--wp--preset--color--line-2);
}
/* FASCIA e CARD 2x2 sono card vere: si muovono intere, come `.dvd-x`. */
.dvd-news__band:hover,
.dvd-news__card:hover {
transform: translateY(-4px);
border-color: var(--wp--preset--color--line-2);
}
/* LA RIGA dei recenti NON si alza: si accende il fondo.
Alzandola si alzava con lei il suo `border-bottom`, e il passo fra le hairline
diventava 2px corto sopra e 2px lungo sotto — lo scarto si legge come
instabilita' della LISTA, non come feedback sull'elemento puntato. E' il
trattamento di `.dvd-arc` in vista lista (style.css:2510), stesso oggetto. */
.dvd-news__row:hover {
background: var(--wp--preset--color--surface);
border-radius: var(--wp--custom--radius--control);
border-bottom-color: transparent;
}
.dvd-news__row:hover .dvd-news__rowart {
border-color: var(--wp--preset--color--line-2);
}
/* I FILM CITATI: immagine nuda, come la punta. Era fuori dal guard touch. */
.dvd-news__film:hover .dvd-news__filmp {
transform: translateY(-4px);
border-color: var(--wp--preset--color--line-2);
}
}
/* `base` e non `small`: e' il sommario dell'articolo di punta, si legge. */
.dvd-news__leadx {
margin: 0 0 var(--n-s3);
max-width: 56ch;
font-size: var(--wp--preset--font-size--base);
line-height: 1.55;
color: var(--wp--preset--color--muted);
}
/* La data: sempre presente, mai dominante. Il 45% del corpus e' datato e
scaduto, quindi nasconderla sarebbe disonesto; darle rilievo svaluterebbe il
31% che non scade mai (ritratti, approfondimenti). Sta in fondo, piccola. */
.dvd-news__d {
margin: 0;
font-size: var(--wp--preset--font-size--x-small);
letter-spacing: 0.04em;
/* `muted` e non `muted-2`: una data E' informativa — questo commento stesso
argomenta che nasconderla sarebbe disonesto. Se e' troppo importante per
nasconderla, e' troppo importante per prendere insieme la taglia minima E il
grigio piu' debole. Misurato: muted-2 su surface da' 5.97:1 (sotto l'AAA che
DESIGN.md chiede dove si legge), muted da' 9.77:1. */
color: var(--wp--preset--color--muted);
font-variant-numeric: tabular-nums;
}
/* ---------- la colonna dei recenti ---------- */
.dvd-news__recent { min-width: 0; }
.dvd-news__recenth {
margin: 0 0 var(--n-s3);
padding-bottom: var(--n-s2);
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: 0.16em;
text-transform: uppercase;
color: var(--wp--preset--color--muted-2);
}
.dvd-news__row {
display: grid;
grid-template-columns: 128px 1fr;
gap: var(--n-s2);
align-items: start;
/* padding laterale + margine negativo: il fondo acceso deborda dal testo invece
di sembrare un rettangolo appiccicato, e la colonna non si stringe. */
padding: var(--n-s3) var(--n-s2);
margin-inline: calc(-1 * var(--n-s2));
border-bottom: 1px solid var(--wp--preset--color--line);
text-decoration: none;
color: inherit;
/* 0.15s e non 0.2: un cambio di colore su un'area grande, alla durata di un
movimento, si legge come un lampeggio. Stesso valore del catalogo in lista. */
transition: background 0.15s ease, border-radius 0.15s ease;
}
.dvd-news__row:last-child { border-bottom: 0; }
/* L'UNICO CROP della pagina, ed e' deliberato: 16:9 invece del ratio nativo.
A 128px di larghezza una striscia 3.34 sarebbe alta 38px — una fettuccia, non
un'immagine. Si perde il testo grafico della copertina, ma a quella dimensione
era gia' illeggibile: meglio un frammento riconoscibile di fotogramma.
Niente `object-position` fisso: su 599 immagini il soggetto non e' sempre
nello stesso punto, quindi nessuna posizione sarebbe sicura. */
.dvd-news__rowart {
display: block;
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
border: 1px solid var(--wp--preset--color--line);
border-radius: var(--wp--custom--radius--micro);
background: var(--wp--preset--color--surface-2);
transition: transform 0.2s ease, border-color 0.2s ease;
}
.dvd-news__rowb { min-width: 0; }
.dvd-news__rowt {
display: -webkit-box;
-webkit-line-clamp: 3; /* a 2 righe si perderebbe il senso di 206 titoli */
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0 0 var(--n-s1); /* era 6px, fuori scala Fibonacci */
font-family: var(--wp--preset--font-family--heading);
font-weight: 600;
/* `base` e non `small`: in una lista di link-titolo il titolo E' il contenuto,
non un'etichetta — l'over-45 lo legge per decidere se cliccare, e `small`
sono 16px fissi contro i 18-20 che DESIGN.md impone sul corpo. */
font-size: var(--wp--preset--font-size--base);
line-height: 1.25;
letter-spacing: -0.01em;
}
/* ---------- FASCIA larga, immagine a lato ---------- */
/* s4 e non s5: la fascia e la griglia che la segue sono lo STESSO blocco editoriale
— `cgtv_news_blocco()` le genera insieme. Fra loro c'e' continuita' (s4), non un
landmark. Con 55 su entrambi la pagina scandiva un metro uniforme che negava la
struttura costruita dal PHP: fascia—55—griglia—55—fascia. Ora il landmark cade
dove comincia davvero un blocco nuovo. */
.dvd-news__bandwrap { margin-bottom: var(--n-s4); }
.dvd-news__band {
display: grid;
grid-template-columns: 1.618fr 1fr; /* l'immagine prende il maggiore: e' lei
a portare il titolo grafico */
gap: var(--n-s4);
/* `start` e non `center`: col ratio 21/9 lo scarto fra immagine e testo scende
da 100px a 13, e a quel punto ancorare immagine e titolo alla STESSA LINEA
superiore e' il gesto editoriale — lo stesso principio gia' applicato alla
scheda prodotto (cover e testo ancorati in alto). `center` serviva solo a
nascondere un vuoto che ora non c'e' piu'. */
align-items: start;
/* s3 e NON s4: un padding interno di 34 EGUAGLIA il gap di continuita', e il
bordo della card smette di separare — la scatola sembra un contenitore vuoto.
La regola del progetto dice «padding interno ≤ s3», ed e' la regola ad avere
ragione. Recupera anche 26px di larghezza utile per colonna. */
padding: var(--n-s3);
border: var(--wp--custom--card--border);
border-radius: var(--wp--custom--radius--surface);
background: var(--wp--preset--color--surface);
transition: transform 0.2s ease, border-color 0.2s ease;
}
/* L'alternanza: un blocco su due ha l'immagine a destra. */
.dvd-news__bandwrap--flip .dvd-news__bandart { order: 2; }
.dvd-news__bandart { border-radius: var(--wp--custom--radius--control); }
.dvd-news__bandb { min-width: 0; }
.dvd-news__bandt {
font-family: var(--wp--preset--font-family--heading);
font-weight: 700;
font-size: var(--wp--preset--font-size--medium);
line-height: 1.18;
letter-spacing: -0.015em;
margin: 0 0 var(--n-s2);
text-wrap: balance;
}
.dvd-news__bandx {
margin: 0 0 var(--n-s2);
/* `base`: e' lo STESSO testo del sommario di punta, visto da piu' vicino. La
differenza fra i due e' geometrica, non semantica — e li' e' gia' `base`. */
font-size: var(--wp--preset--font-size--base);
line-height: 1.55;
color: var(--wp--preset--color--muted);
}
/* ---------- GRIGLIA 2x2 ---------- */
.dvd-news__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--n-s4);
margin-bottom: var(--n-s5);
}
/* In coda al corpus l'ultimo blocco puo' avere una sola card, e a due colonne
lascerebbe mezza riga vuota larga meta' pagina. */
.dvd-news__grid:has(> :only-child) { grid-template-columns: 1fr; }
.dvd-news__card {
display: flex;
flex-direction: column;
overflow: hidden;
border: var(--wp--custom--card--border);
border-radius: var(--wp--custom--radius--surface);
background: var(--wp--preset--color--surface);
box-shadow: var(--wp--custom--card--shadow);
transition: transform 0.2s ease, border-color 0.2s ease;
}
.dvd-news__cardart {
border: 0;
border-bottom: 1px solid var(--wp--preset--color--line);
border-radius: 0;
}
.dvd-news__cardb {
display: flex;
flex-direction: column;
gap: var(--n-s1);
padding: var(--n-s3);
}
.dvd-news__cardt {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0;
font-family: var(--wp--preset--font-family--heading);
font-weight: 700;
font-size: var(--wp--preset--font-size--base);
line-height: 1.2;
letter-spacing: -0.015em;
}
.dvd-news__cardx {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0;
font-size: var(--wp--preset--font-size--base); /* prosa: mai `small` */
line-height: 1.5;
color: var(--wp--preset--color--muted);
}
.dvd-news__cardb .dvd-news__d {
margin-top: auto; /* il gap del flex padre da' gia' lo stacco: niente padding */
}
.dvd-news__empty {
padding: var(--n-s5) 0;
text-align: center;
color: var(--wp--preset--color--muted-2);
}
/* ---------- I FILM CITATI, in coda all'articolo ----------
Non sono un campo compilato: si rileggono i link del testo. La fascia e' cio'
che fa lavorare l'archivio per il negozio — 1800 link portano a schede vive. */
/* Le variabili si ridichiarano QUI: la fascia puo' trovarsi fuori da `.dvd-news`
(nella home ci sta dentro, nell'articolo dentro `.dvd-news-art`), e una `gap`
che punta a una variabile non ereditata risolve a ZERO — senza errori, senza
avvisi. E' esattamente cio' che l'inspector ha misurato: gap 0 fra tutte le card. */
.dvd-news__films {
--n-s1: 8px;
--n-s2: 13px;
--n-s3: 21px;
--n-s4: 34px;
--n-s5: 55px;
max-width: 1200px;
margin: var(--n-s5) auto 0;
padding: 0 var(--wp--style--root--padding-right, 1.5rem);
box-sizing: border-box;
}
.dvd-news__filmsh {
margin: 0 0 var(--n-s3);
padding-bottom: var(--n-s2);
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: 0.16em;
text-transform: uppercase;
color: var(--wp--preset--color--muted-2);
}
.dvd-news__filmsl {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: var(--n-s3);
}
.dvd-news__film {
text-decoration: none;
color: inherit;
}
/* Il poster al ratio NATIVO delle locandine (token del progetto: non sono 2:3,
sono 599/847 — misurato) e col raggio-STAMPA: e' carta, non un elemento UI. */
.dvd-news__filmp {
display: block;
position: relative;
aspect-ratio: var(--wp--custom--poster--ratio);
overflow: hidden;
margin-bottom: var(--n-s2);
border: 1px solid var(--wp--preset--color--line);
border-radius: var(--wp--custom--poster--radius);
background: var(--wp--preset--color--surface-2);
transition: transform 0.2s ease, border-color 0.2s ease;
}
.dvd-news__filmp img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.dvd-news__filmt {
display: block;
margin-bottom: var(--n-s1); /* era 4px, fuori scala */
font-family: var(--wp--preset--font-family--heading);
font-weight: 700;
font-size: var(--wp--preset--font-size--small);
line-height: 1.2;
}
.dvd-news__filmpr {
display: block;
font-family: var(--wp--preset--font-family--heading);
font-weight: 700;
font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--muted);
font-variant-numeric: tabular-nums;
}
.dvd-news__filmpr del { opacity: 0.55; margin-right: 4px; }
.dvd-news__filmpr ins { text-decoration: none; }
/* ---------- I LINK DISINNESCATI ----------
1358 link puntavano a film non piu' a catalogo: l'href e' stato tolto, il
titolo e' rimasto. Deve leggersi come testo normale, non come un link rotto. */
.cgtv-news-nolink {
color: inherit;
text-decoration: none;
cursor: text;
}
/* ---------- MOBILE ----------
Il blocco sta IN FONDO al foglio: un `@media` non ha specificita' propria, e
se la regola generica sta piu' avanti il breakpoint non scatta mai — in
silenzio. Gotcha gia' pagato nel progetto. */
/* `news.css` era l'unico foglio del tema senza questa guardia. Si azzera il
MOVIMENTO; il bordo che schiarisce e il fondo che si accende RESTANO — chi
disattiva le animazioni non perde il feedback, perde solo il movimento. E' il
motivo per cui il feedback non poteva essere affidato al solo transform. */
@media (prefers-reduced-motion: reduce) {
.dvd-news__lead:hover .dvd-news__leadart,
.dvd-news__band:hover,
.dvd-news__card:hover,
.dvd-news__film:hover .dvd-news__filmp {
transform: none;
}
}
@media (max-width: 860px) {
.dvd-news__top {
grid-template-columns: 1fr;
gap: var(--n-s4);
}
/* la miniatura si stringe, ma il titolo deve restare sopra i ~30 caratteri
per riga o il troncamento a 3 righe comincia a mangiare il senso */
.dvd-news__row { grid-template-columns: 104px 1fr; }
.dvd-news__band {
grid-template-columns: 1fr;
gap: var(--n-s3);
padding: var(--n-s3);
}
/* impilato, l'alternanza non ha piu' senso: l'immagine sta sempre sopra */
.dvd-news__bandwrap--flip .dvd-news__bandart { order: 0; }
.dvd-news__grid {
grid-template-columns: 1fr;
gap: var(--n-s3);
}
.dvd-news__filmsl { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}
/* ============================================================================
LA SCHEDA DELL'ARTICOLO — «l'apertura grande»
IL BLOCCO D'APERTURA: rigo di servizio, titolo e copertina stanno alla STESSA
larghezza (1200px), poi l'articolo comincia in colonna stretta.
Prima la pagina cambiava gabbia TRE volte — testata 62ch, copertina 1200, testo
62ch — e la copertina restava sola in mezzo a due blocchi stretti: «un pesce
fuor d'acqua», e il difetto era esattamente quello. Ora i cambi sono DUE, e la
copertina non e' piu' isolata perche' il titolo le sta sopra alla stessa misura.
L'INTRO E' TOLTA dalla testata: l'articolo comincia diretto. L'excerpt non si
perde — vive nelle card della home e nella meta description, dove fa il lavoro
per cui e' stato scritto.
========================================================================= */
.dvd-news-art {
--n-s1: 8px;
--n-s2: 13px;
--n-s3: 21px;
--n-s4: 34px;
--n-s5: 55px;
/* LE DUE GABBIE, dichiarate una volta sola: cambiandone una si muove tutto
cio' che la legge, invece di disallineare un pezzo alla volta.
`--n-gab: none` — IL RIFERIMENTO E' IL LOGO, non un numero.
Un cap da 1200 e' stato PROVATO e MISURATO con l'inspector (viewport 1464):
il logo cade a 89, ma titolo/copertina/film finivano a 132 e il rigo di
servizio e il corpo restavano a 89. Non era un rientro simmetrico, era uno
SBILANCIAMENTO: `margin-inline:auto` centra il blocco nell'area utile (1286),
che pero' comincia GIA' dopo il padding — i 86px avanzati si dividevano a
meta' e si sommavano al padding solo a sinistra, lasciando 89 a sinistra e
43 a destra. Con un cap piu' stretto dell'area utile questo e' inevitabile.
Quindi: nessun cap. Il padding di root e' l'unico limite, e titolo,
copertina e fascia film cadono ESATTAMENTE sulla verticale del logo, a filo
sia a destra sia a sinistra. E' la stessa scelta dell'header, che cap non ne
ha: per allinearsi a un elemento bisogna adottarne il vincolo, non
avvicinarglisi con un numero.
NB il gotcha "cap e padding sullo stesso elemento" qui non c'entra: il
padding sta su `.dvd-news-art` (il padre) e il cap starebbe su
`.dvd-news-art > *` (i figli, che padding proprio non ne hanno). Sono
elementi separati e non si sommano — il motivo per non mettere il cap e'
l'allineamento al logo, non quel gotcha. */
--n-gab: none;
--n-col: 62ch;
box-sizing: border-box;
width: 100%;
margin: 0 auto;
padding: 0 var(--wp--style--root--padding-right, 1.5rem);
}
/* Ogni figlio nasce nella gabbia LARGA: e' la colonna di lettura a essere
l'eccezione, non il contrario. */
.dvd-news-art > * {
box-sizing: border-box;
width: 100%;
max-width: var(--n-gab);
margin-inline: auto;
}
/* IL RIGO DI SERVIZIO — ritorno, data e lettura su una riga sola, alla gabbia
larga come il titolo che segue.
E' un `` che CONTIENE il link, non un link che contiene tutto: prima data e
minuti stavano dentro l', quindi si coloravano all'hover e cliccandoli si
finiva su /news/. Sono DATI, non azioni. */
.dvd-news-art__back {
display: flex;
align-items: center;
gap: var(--n-s1);
flex-wrap: wrap;
max-width: var(--n-gab);
margin: 0 0 var(--n-s3);
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--x-small);
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--wp--preset--color--muted-2);
}
/* Il tap target da 48px sta sul LINK, che e' l'unica cosa cliccabile. Cresce in
verticale con padding e si riprende lo spazio col margine negativo, cosi' non
spinge giu' il titolo. */
.dvd-news-art__backlink {
display: inline-flex;
align-items: center;
min-height: 48px;
margin-block: calc(var(--n-s2) * -1);
color: inherit;
text-decoration: none;
transition: color 0.15s ease;
}
.dvd-news-art__backlink:hover { color: var(--wp--preset--color--accent); }
.dvd-news-art__sep { color: var(--wp--preset--color--line-2); }
/* LA TESTATA — allineata a SINISTRA, come `.dvd-pdp__id` della scheda prodotto:
li' eyebrow, titolo e sottotitolo cadono sulla stessa verticale e l'occhio
scende lungo un bordo solo. Il centrato resta alla home, che e' una testata di
sezione con claim breve; qui siamo in un articolo, e un articolo si legge. */
.dvd-news-art__hd {
max-width: var(--n-gab);
text-align: left;
/* s4 e non s5: titolo e copertina sono lo STESSO blocco d'apertura, e fra
loro corre continuita'. Il landmark sta sotto la copertina, dove comincia
davvero un'altra cosa. */
margin-bottom: var(--n-s4);
}
/* IL TITOLO — «il cartellone»: corpo da insegna, righe che si toccano.
*
* NESSUN cap interno in `ch`: deve essere largo quanto la copertina, ed e' il
* vincolo esplicito del committente. Un cap a 34ch lo riporterebbe a 660px, cioe'
* alla larghezza del corpo — l'opposto di quel che serve.
*
* INTERLINEA 0.98, sotto l'unita': e' la scelta che fa la differenza sul titolo
* lungo. I titoli del corpus vanno da 9 a 127 caratteri, e a 127 su questa gabbia
* si va su tre righe: con un'interlinea normale sarebbero tre righe SEPARATE, una
* lista; sotto 1 si toccano e diventano un blocco unico — un'insegna.
* A `xx-large` (3.6rem, fluid da 2.6) il corpo e' quello di un manifesto: si legge
* prima di avvicinarsi, che e' esattamente cio' che deve fare una testata.
*
* La tracciatura scende a -0.038em: piu' grande e' il corpo, piu' lo spazio fra
* le lettere si nota — a 58px il default sembrerebbe slegato. */
.dvd-news-art__t {
font-family: var(--wp--preset--font-family--heading);
font-weight: 800;
font-size: var(--wp--preset--font-size--xx-large);
line-height: 0.98;
letter-spacing: -0.038em;
margin: 0;
text-wrap: balance;
overflow-wrap: break-word; /* paracadute per un titolo senza spazi */
}
/* LA COPERTINA — AL RATIO NATIVO, zero crop.
*
* In home le copertine sono rese a 21:9 e va bene: li' sono card in una griglia,
* e il crop del 15% per lato toglie i margini per dare alle immagini un'altezza
* confrontabile. Qui invece l'immagine e' UNA SOLA, e' l'apertura dell'articolo,
* e non ha vicini con cui pareggiarsi: tagliarla non serve a niente.
*
* Il valore e' 3.34, misurato sui file veri — 404 copertine su 596 sono 2004x600.
* Le 190 a 2.81 perdono il 16% in altezza, non in larghezza: nessun contenuto se
* ne va, il box e' solo un po' piu' generoso di loro.
*
* Il margine sotto e' s5, LANDMARK: dichiara che sotto comincia un altro
* registro. E' il salto che rende leggibile il cambio di gabbia invece di
* lasciarlo capitare. */
.dvd-news-art__cover {
position: relative;
aspect-ratio: 3.34;
overflow: hidden;
margin-bottom: var(--n-s5);
border: 1px solid var(--wp--preset--color--line);
border-radius: var(--wp--custom--radius--surface);
background: var(--wp--preset--color--surface-2);
}
/* Ancoraggio difensivo: su un box con solo `aspect-ratio` un ![]()
in flusso non
ha un riferimento risolto e la sua altezza intrinseca sfonda il contenitore. */
.dvd-news-art__cover > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* IL CORPO — colonna stretta ancorata al BORDO SINISTRO della gabbia larga.
`margin-inline: 0 auto` e non `auto`: condividendo la verticale sinistra col
titolo e con la copertina l'occhio scende lungo UN bordo solo.
PERCHE' NON VA A FILO ANCHE A DESTRA, a differenza di titolo/copertina/film:
quelli sono APPARATO e si guardano, questo e' PROSA e si legge. A filo dei due
bordi la riga misurerebbe ~1286px su un viewport da 1464 — piu' del doppio del
limite di leggibilita', e il vincolo del progetto sul pubblico over-45 e'
esplicito. La riga resta a 62ch (~690px, dentro il canone 45-75 caratteri):
il testo cambia LARGHEZZA, non allineamento.
NON e' un'eccezione di questa pagina: e' il pattern del sito per la prosa lunga.
La scheda prodotto fa lo stesso (`style.css`: sinossi, citazioni, premi,
curiosita' tutte a 62ch senza `margin-inline:auto` dentro la gabbia da 1280) e
Chi Siamo pure, con la colonna di lettura a sinistra e la spalla a destra. */
/* (set 2026, panel «marginalia») La colonna non e' piu' ancorata a sinistra: il
corpo e' uno SPREAD a tre tracce — margine · prosa 62ch · margine — e la prosa
sta AL CENTRO sotto la copertina, come la pagina di una rivista. I poster dei
film citati vanno nelle tracce laterali, alternati. La MISURA non cambia: il
testo cambia posizione, non larghezza. Regole in fondo al foglio. */
.dvd-news-art__arch {
max-width: var(--n-col);
margin-inline: auto;
}
/* L'AVVISO D'ARCHIVIO: il 45% del corpus e' legato a un evento concluso. Dirlo e'
piu' onesto di un anno muto, e prepara a trovare link che non portano piu'. */
.dvd-news-art__arch {
margin-bottom: var(--n-s4);
padding: var(--n-s2) var(--n-s3);
border: 1px solid color-mix(in srgb, var(--wp--preset--color--warning) 40%, transparent);
border-radius: var(--wp--custom--radius--control);
background: color-mix(in srgb, var(--wp--preset--color--warning) 10%, transparent);
font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--muted);
}
.dvd-news-art__arch b { color: var(--wp--preset--color--contrast); }
/* Interlinea 1.7: su paragrafi da 542 caratteri — la mediana misurata, quattro o
cinque righe piene — e' l'interlinea a separare i blocchi piu' del margine. */
.dvd-news-art__body p {
font-size: var(--wp--preset--font-size--base);
line-height: 1.7;
margin: 0 0 var(--n-s3);
}
.dvd-news-art__body p:last-child { margin-bottom: 0; }
/* IL PRIMO PARAGRAFO FA DA PONTE, non solo da attacco.
E' l'unica gerarchia possibile senza sapere niente del contenuto (il 53% degli
articoli e' SOLO paragrafi, i sottotitoli sono nel 4%), e qui ha un secondo
compito: essere il primo elemento della colonna stretta sotto un blocco largo
1200. A `medium` il salto di gabbia non avviene su una riga minuta. */
.dvd-news-art__body > p:first-child {
font-size: var(--wp--preset--font-size--medium);
line-height: 1.55;
color: var(--wp--preset--color--contrast);
margin-bottom: var(--n-s4);
}
.dvd-news-art__body h2,
.dvd-news-art__body h3 {
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.015em;
margin: var(--n-s5) 0 var(--n-s2);
}
/* h2 = landmark, h3 = continuita': lo stesso salto per due livelli appiattirebbe
la gerarchia proprio dove serve distinguerla. */
.dvd-news-art__body h3 { margin-top: var(--n-s4); }
/* I LINK NELLA PROSA — bianchi con sottolineato punteggiato, non rossi.
*
* Sono 2717 in 477 articoli: quasi SEI per articolo, dentro un testo che si legge
* per minuti. Sei parole rosse in una pagina di prosa non sono un accento, sono
* una punteggiatura che compete con la lettura — e nel progetto il rosso e'
* riservato all'AZIONE e al PREGIO.
*
* MISURATO: `accent` su `base` da' 5.30:1, sotto l'AAA (7:1) che DESIGN.md chiede
* «dove si legge a lungo»; `contrast` da' 17.71:1. Il colore giusto per un testo
* di lettura e' quello del testo.
*
* IL PUNTEGGIATO fa il lavoro che faceva il colore: distingue il link senza
* cambiare la tinta della parola. E' piu' leggero di un sottolineato pieno, che
* su sei occorrenze per pagina diventerebbe un reticolo.
*
* NIENTE CORSIVO pero': nel progetto il corsivo e' gia' impegnato — marca la
* citazione (la nota del cliente nella conferma d'ordine) e per convenzione
* tipografica i titoli d'opera, che in questi articoli sono ovunque. Un link in
* corsivo dentro un pezzo pieno di titoli di film direbbe due cose insieme.
* Il ROSSO torna sull'hover: li' e' un gesto, ed e' la regola del sito. */
.dvd-news-art__body a {
color: var(--wp--preset--color--contrast);
text-decoration: underline dotted;
text-decoration-color: var(--wp--preset--color--line-2);
text-decoration-thickness: 1px;
text-underline-offset: 4px;
transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.dvd-news-art__body a:hover {
color: var(--wp--preset--color--accent);
text-decoration-color: var(--wp--preset--color--accent);
}
/* i 1358 link disinnescati non sono link: non devono colorarsi */
.dvd-news-art__body a.cgtv-news-nolink {
color: inherit;
text-decoration: none;
cursor: text;
}
/* LE IMMAGINI NEL CORPO — nel flusso, mai flottanti.
Il markup del 2016 le manda in `float`: locandine da 350px in una colonna da
62ch lasciavano al testo 26 CARATTERI per riga, contro un canone di 45-75.
Riguarda 99 articoli su 599. */
.dvd-news-art__body img {
max-width: 100%;
height: auto;
border-radius: var(--wp--custom--radius--control);
}
.dvd-news-art__body img.alignleft,
.dvd-news-art__body img.alignright,
.dvd-news-art__body img.aligncenter {
float: none;
display: block;
width: auto;
max-width: 260px;
height: auto;
margin: var(--n-s4) 0 var(--n-s1);
border: 1px solid var(--wp--preset--color--line);
border-radius: var(--wp--custom--poster--radius); /* raggio-STAMPA: e' carta */
background: var(--wp--preset--color--surface-2);
}
/* Nel markup 2016 immagine e titolo del film stanno nello stesso : il
titolo diventa la DIDASCALIA — non una struttura inventata, solo spostata. */
.dvd-news-art__body p:has(> strong > a > img[class*="align"]) {
margin-bottom: var(--n-s4);
font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--muted-2);
}
.dvd-news-art__body p:has(> strong > a > img[class*="align"]) strong { font-weight: 400; }
.dvd-news-art__body p:has(> strong > a > img[class*="align"]) a:not(:has(img)) {
color: var(--wp--preset--color--contrast);
font-weight: 700;
text-decoration: none;
}
/* I VIDEO: il 28% degli articoli ne ha uno. Restano nella colonna di lettura. */
.dvd-news-art__body iframe {
width: 100%;
aspect-ratio: 16 / 9;
height: auto;
border: 0;
border-radius: var(--wp--custom--radius--control);
margin: var(--n-s4) 0;
}
/* LA FASCIA FILM — RITORNO alla gabbia larga, in riga orizzontale che scorre.
*
* Non e' un terzo sfasamento: e' la STESSA misura della testata. La pagina fa
* largo -> stretto -> largo, e le due larghe coincidono, quindi la fascia chiude
* la composizione invece di aprirne una nuova.
*
* NIENTE SCROLL ORIZZONTALE: una griglia che va a capo.
*
* La barra compariva per TRE PIXEL — 8 poster da 132 piu' 7 gap da 21 fanno 1203
* contro una gabbia di 1200 — e nel resto del sito `overflow-x` non e' usato in
* nessun punto: i caroselli di Novita' scorrono con Swiper e le frecce, le
* vetrine vanno a capo. Una barra nuda era l'unica del sito.
*
* POSTER A LARGHEZZA FISSA, non elastica. `auto-fit` + `1fr` faceva DIPENDERE LA
* TAGLIA DAL NUMERO: due film citati diventavano due poster da 633px, otto ne
* davano da 132. Un articolo con pochi rimandi urlava piu' forte di uno che ne ha
* otto, e il formato del poster — che nel resto del sito e' una costante — non era
* piu' riconoscibile. Un rimando e' un rimando: la sua importanza non cresce
* perche' e' solo.
*
* Le due mosse vanno INSIEME: `auto-fill` invece di `auto-fit` (auto-fit COLLASSA
* le tracce vuote e lascia espandere le superstiti — e' esattamente il meccanismo
* dell'ingrandimento) e larghezza secca al posto di `1fr`. Con `auto-fill` la riga
* conserva le colonne anche quando sono vuote, quindi i poster restano incolonnati
* con quelli dell'articolo accanto.
*
* 132px = 8 poster piu' 7 gap da 21 stanno in 1203, cioe' la riga piena col cap
* massimo della fascia (8 film, `CGTV_NEWS_MAX_FILM`). `justify-content: start`
* li tiene a filo del logo come tutto il resto invece di centrarli nell'avanzo. */
.dvd-news-art .dvd-news__films {
max-width: var(--n-gab);
margin: var(--n-s5) auto 0;
padding: var(--n-s4) 0 0;
border-top: 1px solid var(--wp--preset--color--line);
}
.dvd-news-art .dvd-news__filmsl {
display: grid;
grid-template-columns: repeat(auto-fill, 132px);
justify-content: start;
gap: var(--n-s4) var(--n-s3);
}
.dvd-news-art .dvd-news__film {
display: block;
padding: 0;
border: 0;
}
.dvd-news-art .dvd-news__filmp { margin-bottom: var(--n-s1); }
/* Il titolo va a CAPO su due righe, non si tronca: il 22% dei titoli del catalogo
supera i 26 caratteri e il 10% arriva a 34. In verticale lo spazio c'e'. */
.dvd-news-art .dvd-news__filmt {
font-size: var(--wp--preset--font-size--x-small);
line-height: 1.25;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.dvd-news-art .dvd-news__filmpr {
font-size: var(--wp--preset--font-size--x-small);
text-align: left;
white-space: nowrap;
}
/* ---------- MOBILE ----------
Il blocco sta IN FONDO al foglio: un `@media` non ha specificita' propria, e
se la regola generica gli sta dopo il breakpoint non scatta mai, in silenzio. */
@media (max-width: 1023px) {
/* sotto i 1024 la gabbia larga e la colonna coincidono di fatto — il viewport
e' piu' stretto di entrambe — e il gradino sparisce da solo */
.dvd-news-art { --n-gab: 100%; }
}
@media (max-width: 640px) {
/* `xx-large` e' gia' fluid (2.6rem al minimo): a schermo stretto scende da
solo a 42px, che su 360px di viewport sono ancora un'insegna. Si tocca
solo la tracciatura, che a corpo minore va allentata o le lettere si
scontrano. */
.dvd-news-art__t { letter-spacing: -0.028em; }
/* Poster piu' stretti, ma sempre FISSI. Le misure sono CALCOLATE sul viewport,
non scelte a occhio: a 132px su 390 di larghezza ne entrerebbero due con un
avanzo di 105px, un vuoto largo quanto un terzo poster. A 100px e gap s2
(13, non 21: su mobile il gap largo e' quello che fa perdere la colonna) ne
entrano TRE con 16px di avanzo.
A 360px (iPhone SE) restano due per riga qualunque misura si scelga — la
gabbia li' e' 312px e tre poster leggibili non ci stanno: si accetta, non si
rimpiccioliscono i poster sotto la soglia di riconoscibilita' per far tornare
un conto.
Era `flex-basis`, residuo di quando la fascia era flex — su un grid item non
fa NULLA, quindi quella riga non aveva mai avuto alcun effetto. */
.dvd-news-art .dvd-news__filmsl {
grid-template-columns: repeat(auto-fill, 100px);
gap: var(--n-s3) var(--n-s2);
}
}
/* ============================================================================
«MARGINALIA» — i poster dei film citati come SCHEDE nel margine (panel, set 2026)
Il PHP (cgtv_news_marginalia) trasforma il blocco del 2016 «titolo in
grassetto + poster» in un seguito da una
con poster del prodotto, titolo, regista·anno, prezzo.
NIENTE GRIGLIA SUL CORPO — provata e bocciata dal vivo. `display:grid` blockifica
OGNI figlio: negli articoli senza paragrafi (testo unico con in linea e
, il markup dei comunicati del 2016) ogni grassetto e ogni frammento di
testo diventava una cella su una riga propria — una colonna di pezzi. Gassman
reggeva solo perche' li' i c'erano. Su un corpus di 599 articoli con markup
eterogeneo il layout non puo' dipendere dalla struttura del contenuto.
LA FORMULA: il corpo resta una colonna normale (62ch, centrata) e la scheda e'
un FLOAT portato FUORI dalla colonna con un margine negativo pari alla sua
larghezza piu' il gap. Il margin box del float sta tutto fuori dal contenuto,
quindi le righe di testo NON si accorciano: la misura resta 62ch. La scheda si
posiziona da sola dove sta nel flusso — subito dopo l'h3 — e i lati alternati
(PHP) evitano che due schede vicine si contendano lo stesso margine. Sullo
stesso lato, un float successivo non puo' salire sopra il precedente: si
accoda, mai si sovrappone. Vale per qualunque markup.
LO SPAZIO NEL MARGINE si misura con le unita' di container: `.dvd-news-art` e'
un container inline-size, e (100cqw - 62ch)/2 e' il margine disponibile da
ciascun lato, calcolato dove serve (una custom property con `%` risolverebbe
contro il containing block del float, cioe' la colonna: zero). La scheda e'
larga min(220px, margine - gap): si stringe da sola quando lo spazio cala, e
sotto i 1050px di container rientra nella colonna in float classico a 150px.
========================================================================= */
.dvd-news-art { container-type: inline-size; }
.dvd-news-art__body {
max-width: var(--n-col);
margin-inline: auto;
}
/* contiene i float: l'ultima scheda non deve scendere sulla fascia film */
.dvd-news-art__body::after { content: ""; display: block; clear: both; }
.dvd-news-art__film .dvd-news-art__yr { font-weight: 500; color: var(--wp--preset--color--muted-2); }
.dvd-news-art__mg {
--n-gut: calc((100cqw - var(--n-col)) / 2); /* margine disponibile per lato */
--n-mgw: min(220px, calc(var(--n-gut) - var(--n-s4))); /* larghezza scheda */
width: var(--n-mgw);
margin: 0 0 var(--n-s3);
}
.dvd-news-art__mg--left { float: left; margin-left: calc(-1 * (var(--n-mgw) + var(--n-s4))); }
.dvd-news-art__mg--right { float: right; margin-right: calc(-1 * (var(--n-mgw) + var(--n-s4))); }
.dvd-news-art__mg a { display: block; text-decoration: none; color: inherit; }
.dvd-news-art__mg img {
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); /* raggio-STAMPA: e' carta */
background: var(--wp--preset--color--surface-2);
box-shadow: 0 6px 20px rgba(0,0,0,0.45);
transition: transform 0.2s ease, border-color 0.2s ease;
}
.dvd-news-art__mg a:hover img { transform: translateY(-3px); border-color: var(--wp--preset--color--line-2); }
.dvd-news-art__mg figcaption { margin-top: var(--n-s2); display: grid; gap: 2px; line-height: 1.3; }
.dvd-news-art__mg figcaption b {
font-family: var(--wp--preset--font-family--heading);
font-weight: 700; font-size: var(--wp--preset--font-size--small);
}
.dvd-news-art__mg figcaption span { font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--muted-2); }
/* il prezzo: come nel catalogo (Bricolage, tabular; il "da" piccolo e muted) */
.dvd-news-art__mg figcaption em {
font-style: normal;
font-family: var(--wp--preset--font-family--heading);
font-weight: 700; font-size: var(--wp--preset--font-size--small);
font-variant-numeric: tabular-nums; color: var(--wp--preset--color--contrast);
}
/* film in uscita / solo streaming nel margine: la pastiglia del catalogo, non il prezzo
(l' qui sopra darebbe Bricolage 700 anche alla pastiglia) */
.dvd-news-art__mg figcaption em .dvd-arc__soon,
.dvd-news-art__mg figcaption em .dvd-arc__stream {
display: inline-flex; align-items: center; gap: 5px;
background: var(--wp--preset--color--surface-3); color: var(--wp--preset--color--contrast);
border-radius: var(--r-pill); padding: 3px 10px 3px 8px;
font-family: var(--wp--preset--font-family--body); font-weight: 700;
font-size: var(--wp--preset--font-size--x-small); line-height: 1.3; letter-spacing: 0.01em;
}
.dvd-news-art__mg figcaption em .dvd-arc__soon .dvd-icon,
.dvd-news-art__mg figcaption em .dvd-arc__stream .dvd-icon { flex: none; font-size: 1.1em; }
.dvd-news-art__mg .dvd-arc__da {
font-family: var(--wp--preset--font-family--body);
font-weight: 600; font-size: 0.74em; margin-right: 0.35em;
color: var(--wp--preset--color--muted-2);
}
@media (prefers-reduced-motion: reduce) { .dvd-news-art__mg img { transition: none; } }
/* Container stretto: il margine non basta a un poster leggibile. La scheda ENTRA
nella colonna in float classico a 150px, alternato — a 62ch restano oltre 45
caratteri per riga, dentro il canone 45-75. Il titolo del film successivo fa
`clear`, cosi' il testo del film dopo non avvolge il poster di quello prima. */
@container (max-width: 1050px) {
.dvd-news-art__mg { width: 150px; margin: 6px 0 var(--n-s2); }
.dvd-news-art__mg--left { margin-left: 0; margin-right: var(--n-s3); }
.dvd-news-art__mg--right { margin-right: 0; margin-left: var(--n-s3); }
.dvd-news-art__film { clear: both; }
}
/* Sul telefono la scheda e' una RIGA-PRODOTTO (poster 72px, testo a destra) fra
il titolo del film e il suo paragrafo: alta la meta' di un poster centrato, e
si legge come un oggetto da comprare, non come una figura. */
@media (max-width: 560px) {
.dvd-news-art__mg, .dvd-news-art__mg--left, .dvd-news-art__mg--right {
float: none; width: 100%; margin: var(--n-s2) 0 var(--n-s3);
}
/* la riga-prodotto e' l' quando c'e' un link, la figure stessa quando non c'e' */
.dvd-news-art__mg > a,
.dvd-news-art__mg:not(:has(> a)) {
display: grid; grid-template-columns: 72px 1fr; gap: var(--n-s2); align-items: center;
padding: var(--n-s2);
border: var(--wp--custom--card--border);
border-radius: var(--wp--custom--radius--control);
background: var(--wp--preset--color--surface);
}
.dvd-news-art__mg img { box-shadow: none; }
.dvd-news-art__mg figcaption { margin: 0; }
.dvd-news-art__mg figcaption b { font-size: var(--wp--preset--font-size--base); }
.dvd-news-art__film:has(+ .dvd-news-art__mg) { margin-bottom: 0; }
}
/* ============================================================================
PAGINA PROGRAMMAZIONE di un banner (/al-cinema//, set 2026) — stesso
impianto dell'articolo (.dvd-news-art*): cambia solo l'apertura, che e' lo
sfondo del banner o un'immagine dedicata, a RATIO NATIVO (16:9 di solito),
non la striscia 10:3 delle copertine news. Le regioni sono , le sale
.
========================================================================= */
.dvd-news-art__cover--prog { aspect-ratio: auto; }
.dvd-news-art__cover--prog > img { position: static; width: 100%; height: auto; }
.dvd-news-art--prog .dvd-news-art__body ul,
.dvd-news-art--prog .dvd-news-art__body ol { margin: 0 0 var(--n-s3); padding-left: 1.2em; }
.dvd-news-art--prog .dvd-news-art__body li { margin-bottom: var(--n-s1); line-height: 1.5; }
.dvd-news-art--prog .dvd-news-art__body h2 { text-transform: uppercase; letter-spacing: .06em; font-size: var(--wp--preset--font-size--base); color: var(--wp--preset--color--muted); }
.dvd-news-art--prog .dvd-news-art__body p strong { color: var(--wp--preset--color--contrast); }