/* ass-blocks · miniature
   Miniature 9:16 (.sthumb, Shorts) e 16:9 (.vthumb, video lunghi): cornice comune e segnaposto disegnati in CSS
   nei colori fissi delle serie (token --ass-series-*, uguali nel tema chiaro e scuro), portati 1:1 dalla demo
   approvata (brand/gate-1b/demo/assets/demo.css, PATTERN shorts-strip e video-grid).
   Con una miniatura vera (immagine locale) resta solo la cornice: l'immagine copre tutto il riquadro.
   Valori scritti a mano: solo le misure in cqi dei segnaposto e i raggi dei puntini del retino, come nella demo. */

/* ------------------------------------------------------------------ 9:16 */
.sthumb {
  --th-bg: var(--ass-color-c1); --th-fg: var(--ass-color-ink); --th-dot: var(--ass-color-lime-dot);
  --th-chip-bg: var(--ass-color-ink); --th-chip-fg: var(--ass-color-paper);
  --th-em-bg: var(--ass-color-ink); --th-em-fg: var(--ass-color-c1);
  position: relative; isolation: isolate; overflow: hidden; display: block;
  aspect-ratio: 9 / 16; container-type: inline-size;
  background: var(--th-bg); color: var(--th-fg);
  border: var(--ass-border-sm) solid var(--ass-color-border);
  border-radius: var(--ass-radius-lg);
  box-shadow: var(--ass-shadow-md);
  transition: transform var(--ass-duration-fast) var(--ass-ease-standard), box-shadow var(--ass-duration-fast) var(--ass-ease-standard);
}
.sthumb::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(var(--th-dot) 1.4px, transparent 1.6px);
  background-size: var(--ass-pattern-halftone-size);
  opacity: var(--th-dot-opacity, var(--ass-opacity-halftone));
}

/* ------------------------------------------------------------------ 16:9 */
.vthumb {
  --th-bg: var(--ass-color-ink); --th-fg: var(--ass-color-paper); --th-dot: var(--ass-color-neutral-700);
  --th-chip-bg: var(--ass-color-c1); --th-chip-fg: var(--ass-color-ink);
  --th-em-bg: var(--ass-color-c1); --th-em-fg: var(--ass-color-ink);
  position: relative; isolation: isolate; overflow: hidden; display: block;
  aspect-ratio: 16 / 9; container-type: inline-size;
  background: var(--th-bg); color: var(--th-fg);
  border: var(--ass-border-sm) solid var(--ass-color-border);
  border-radius: var(--ass-radius-lg);
  box-shadow: var(--ass-shadow-md);
  transition: transform var(--ass-duration-fast) var(--ass-ease-standard), box-shadow var(--ass-duration-fast) var(--ass-ease-standard);
}
.vthumb::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(var(--th-dot) 1.4px, transparent 1.6px);
  background-size: var(--ass-pattern-halftone-size);
  opacity: var(--th-dot-opacity, var(--ass-opacity-halftone));
}

/* miniatura vera: copre la cornice. Due classi, perché nel testo di un articolo «.prose img» del tema (0,1,1,
   caricata dopo) metterebbe altezza automatica e angoli arrotondati anche alle immagini delle miniature. */
.sthumb .sthumb__img, .vthumb .vthumb__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; }
:is(.sthumb, .vthumb) :is(.sthumb__art, .vthumb__art) { border-radius: 0; }

/* ------------------------------------------------------------------ colori fissi delle serie */
/* Sul Serio?!: lime, retino lime, pillola carta, titolo in Bangers con l'ombra corallo */
.sthumb.sthumb--sul-serio, .vthumb.vthumb--sul-serio {
  --th-bg: var(--ass-series-sul-serio-bg); --th-fg: var(--ass-series-sul-serio-title);
  --th-dot: var(--ass-series-sul-serio-halftone); --th-dot-opacity: var(--ass-series-sul-serio-halftone-opacity);
  --th-chip-bg: var(--ass-series-sul-serio-tag-bg); --th-chip-fg: var(--ass-series-sul-serio-tag-text);
}
/* Clic per Clic / Tap per Tap: acqua, retino d'inchiostro, pillola carta, evidenziatore lime */
.sthumb.sthumb--clic-per-clic, .vthumb.vthumb--clic-per-clic {
  --th-bg: var(--ass-series-clic-per-clic-bg); --th-fg: var(--ass-series-clic-per-clic-title);
  --th-dot: var(--ass-series-clic-per-clic-halftone); --th-dot-opacity: var(--ass-series-clic-per-clic-halftone-opacity);
  --th-chip-bg: var(--ass-series-clic-per-clic-tag-bg); --th-chip-fg: var(--ass-series-clic-per-clic-tag-text);
  --th-em-bg: var(--ass-series-clic-per-clic-highlight); --th-em-fg: var(--ass-series-clic-per-clic-on-highlight);
}
.sthumb.sthumb--tap-per-tap, .vthumb.vthumb--tap-per-tap {
  --th-bg: var(--ass-series-tap-per-tap-bg); --th-fg: var(--ass-series-tap-per-tap-title);
  --th-dot: var(--ass-series-tap-per-tap-halftone); --th-dot-opacity: var(--ass-series-tap-per-tap-halftone-opacity);
  --th-chip-bg: var(--ass-series-tap-per-tap-tag-bg); --th-chip-fg: var(--ass-series-tap-per-tap-tag-text);
  --th-em-bg: var(--ass-series-tap-per-tap-highlight); --th-em-fg: var(--ass-series-tap-per-tap-on-highlight);
}
/* Occhio alla truffa AI e Vero o AI?: notte, retino scuro, nastro corallo inclinato, evidenziatore corallo */
.sthumb.sthumb--truffa, .vthumb.vthumb--truffa {
  --th-bg: var(--ass-series-truffa-bg); --th-fg: var(--ass-series-truffa-title);
  --th-dot: var(--ass-series-truffa-halftone); --th-dot-opacity: var(--ass-series-truffa-halftone-opacity);
  --th-em-bg: var(--ass-series-truffa-highlight); --th-em-fg: var(--ass-series-truffa-on-highlight);
}
/* pieni scuri: ombra lime, mai ombra scura su fondo scuro */
.sthumb--truffa, .vthumb--truffa { box-shadow: var(--ass-space-1) var(--ass-space-1) 0 0 var(--ass-color-c1); }

/* ------------------------------------------------------------------ segnaposto 9:16 */
.sthumb__series {
  position: absolute; top: 5cqi; left: 6cqi;
  font: var(--ass-font-weight-extrabold) 6cqi/1 var(--ass-font-display); letter-spacing: var(--ass-tracking-caps); text-transform: uppercase;
  background: var(--th-chip-bg); color: var(--th-chip-fg);
  border: 0.8cqi solid var(--ass-color-ink);
  padding: 1.7cqi 3.4cqi 1.5cqi; border-radius: var(--ass-radius-pill);
}
.sthumb__tape {
  position: absolute; left: -12%; right: -12%; top: 8cqi;
  font: var(--ass-font-weight-extrabold) 5.4cqi/1 var(--ass-font-display); letter-spacing: var(--ass-tracking-caps); text-transform: uppercase;
  background: var(--ass-series-truffa-tape); color: var(--ass-series-truffa-tape-text);
  border-block: 0.9cqi solid var(--ass-color-ink);
  padding: 1.8cqi 0 1.6cqi; white-space: nowrap; overflow: hidden; text-align: center;
  transform: rotate(-7deg);
}
/* il gancio è il titolo del video finché lo Studio non manda la miniatura vera: al massimo 4 righe */
.sthumb__hook {
  position: absolute; top: 20cqi; left: 6cqi; right: 6cqi;
  font: var(--ass-font-weight-extrabold) 11.5cqi/1.04 var(--ass-font-display);
  letter-spacing: var(--ass-tracking-tight);
  text-wrap: balance;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden;
}
.sthumb--sul-serio .sthumb__hook {
  top: 23cqi;
  font: var(--ass-font-weight-regular) 14cqi/0.98 var(--ass-font-comic); letter-spacing: var(--ass-tracking-comic); text-transform: uppercase;
  text-shadow: 0.07em 0.07em 0 var(--ass-series-sul-serio-title-shadow);
  -webkit-line-clamp: 3; line-clamp: 3;
}
.sthumb--truffa .sthumb__hook { top: 30cqi; -webkit-line-clamp: 3; line-clamp: 3; }
.sthumb__art { position: absolute; left: 0; bottom: 2cqi; width: 100%; max-width: none; height: auto; }
.sthumb__time, .vthumb__time {
  position: absolute; right: 4cqi; bottom: 4cqi;
  font: var(--ass-font-weight-bold) 6.5cqi/1 var(--ass-font-mono);
  background: var(--ass-color-ink); color: var(--ass-color-paper);
  padding: 1.2cqi 2cqi; border-radius: var(--ass-radius-xs);
}
.sthumb--truffa .sthumb__time, .vthumb--truffa .vthumb__time { background: var(--ass-color-paper); color: var(--ass-color-ink); }

/* ------------------------------------------------------------------ segnaposto 16:9 */
.vthumb__series {
  position: absolute; top: 5cqi; left: 5cqi;
  font: var(--ass-font-weight-extrabold) 3.4cqi/1 var(--ass-font-display); letter-spacing: var(--ass-tracking-caps); text-transform: uppercase;
  background: var(--th-chip-bg); color: var(--th-chip-fg);
  border: 0.45cqi solid var(--ass-color-ink);
  padding: 1cqi 2cqi 0.9cqi; border-radius: var(--ass-radius-pill);
}
.vthumb__title {
  position: absolute; left: 5cqi; top: 15cqi; width: 40cqi;
  font: var(--ass-font-weight-extrabold) 7.4cqi/1.02 var(--ass-font-display);
  letter-spacing: var(--ass-tracking-tight); text-wrap: balance;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden;
}
.sthumb__hook em, .vthumb__title em {
  font-style: normal; background: var(--th-em-bg); color: var(--th-em-fg);
  padding: 0 0.12em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* schermo dell'AI: cornice carta + bordo d'inchiostro, righe di testo finte, pulsante lime corto in basso a destra */
.vthumb__screen {
  position: absolute; right: 5cqi; top: 9cqi; width: 34cqi; height: 26cqi;
  background: var(--ass-color-c3);
  border: 1.4cqi solid var(--ass-color-paper);
  outline: 0.7cqi solid var(--ass-color-ink);
  border-radius: 2.4cqi;
  display: flex; flex-direction: column; gap: 2.2cqi; padding: 3.4cqi 3cqi;
  transform: rotate(3deg);
}
.vthumb__screen span { display: block; height: 2.2cqi; border-radius: 1cqi; background: var(--ass-color-paper); }
.vthumb__screen span:nth-child(1) { width: 80%; }
.vthumb__screen span:nth-child(2) { width: 62%; }
.vthumb__screen span:nth-child(3) {
  width: 34%; height: 3.2cqi; margin-top: auto; align-self: flex-end;
  border-radius: var(--ass-radius-pill); background: var(--ass-color-c1); box-shadow: 0 0 0 0.4cqi var(--ass-color-ink);
}
.vthumb--clic-per-clic .vthumb__screen, .vthumb--tap-per-tap .vthumb__screen { background: var(--ass-color-paper); }
.vthumb--clic-per-clic .vthumb__screen span:not(:nth-child(3)), .vthumb--tap-per-tap .vthumb__screen span:not(:nth-child(3)) { background: var(--ass-color-neutral-400); }
.vthumb__art { position: absolute; right: 9cqi; bottom: 1.5cqi; width: 46cqi; max-width: none; height: auto; }
.vthumb__time { font-size: 3.8cqi; right: 3cqi; bottom: 3cqi; padding: 0.8cqi 1.3cqi; }