/* ══════════════════════════════════════════════════════════════════
   SCHEDA LAVORO · pelle scura
   Va dopo tokens.css e site.css, e ne usa i token e i componenti.
   Qui stanno solo le parti che una scheda ha e la home no.
   Le pagine sono generate da _dev/scheda.py: le classi qui sotto
   sono quelle che stampa il generatore, non se ne inventano altre.
   ══════════════════════════════════════════════════════════════════ */

/* ── L'ETICHETTA ──────────────────────────────────────────────────
   La scritta piccola in maiuscoletto spaziato. È il filo che tiene
   insieme cartellino, cartigli e didascalie. */
.etichetta {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.scheda { display: block; }

/* base.css azzerava i margini delle liste di definizione: qui non c'è
   più, e senza questa riga il browser rientra ogni dd di 40px. */
.scheda dl, .scheda dd, .scheda dt { margin: 0; }

/* ── APERTURA: la copertina con il titolo sopra ──────────────────── */
.apertura-scheda {
  position: relative;
  min-height: 78svh;
  display: flex;
  align-items: flex-end;
  padding: 12.5rem var(--content-pad) var(--space-16);
  overflow: hidden;
}
.apertura-foto {
  position: absolute; inset: 0;
  z-index: 0;
}
.apertura-foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 40%;
  filter: brightness(0.62) saturate(0.95);
}
.apertura-scheda::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, var(--color-bg) 1%, rgba(9,7,15,0.72) 34%, rgba(9,7,15,0.20) 78%, rgba(9,7,15,0.34) 100%);
}
.apertura-testo {
  position: relative; z-index: 2;
  max-width: 75rem;
  margin-inline: auto;
  width: 100%;
}
.apertura-testo .occhiello {
  display: inline-flex; align-items: center; gap: var(--space-3);
  color: var(--color-secondary);
  margin-bottom: var(--space-5);
}
.apertura-testo .occhiello::before {
  content: ''; width: 1.5rem; height: 1px;
  background: var(--color-secondary); display: inline-block;
}
.apertura-scheda h1 {
  font-size: clamp(2.75rem, 7vw, 6rem);
  line-height: 1.02;
  margin-bottom: var(--space-6);
}
.apertura-scheda .catenaccio {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.25rem, 2.4vw, 1.875rem);
  line-height: 1.32;
  color: var(--color-text-primary);
  opacity: 0.86;
  max-width: 34ch;
}

/* ── CARTELLINO: cliente, anno, lavorazione, stato ───────────────── */
.cartellino {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-8) var(--content-pad);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.625rem, 1fr));
  gap: var(--space-8);
  border-bottom: 1px solid var(--color-hairline);
}
.cartellino dt { margin-bottom: var(--space-2); }
.cartellino dd {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-primary);
}
.cartellino .stato { color: var(--color-secondary); }

/* ── IL RIMANDO AL LAVORO PUBBLICATO ─────────────────────────────── */
.vai-a-vedere {
  display: block;
  max-width: var(--content-max);
  margin: var(--space-12) auto 0;
  padding: var(--space-8) var(--space-10);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  width: calc(100% - var(--content-pad) * 2);
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.vai-a-vedere:hover {
  border-color: var(--color-primary);
  box-shadow: var(--glow-primary);
  text-decoration: none;
}
.vai-a-vedere .invito { display: block; margin-bottom: var(--space-3); color: var(--color-primary-hover); }
.vai-a-vedere .indirizzo {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 3vw, 2.375rem);
  line-height: 1.1;
  color: var(--color-text-primary);
  word-break: break-word;
}

/* ── IL FILM ─────────────────────────────────────────────────────── */
.film {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--space-16) var(--content-pad) 0;
}
.schermo {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-lg);
}
.schermo iframe { width: 100%; height: 100%; border: 0; display: block; }
.film-etichetta { margin-bottom: var(--space-3); }
.film + .film { padding-top: var(--space-10); }

/* Il primo episodio resta grande (.film); il resto entra qui, più piccolo
   e sparpagliato su colonne, non in fila come il video di apertura. */
.film-griglia {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--space-10) var(--content-pad) 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-8);
}
.film-piccolo .schermo { box-shadow: var(--shadow-md); }
.film-piccolo .film-etichetta { margin-top: var(--space-3); margin-bottom: 0; }

/* ── I LAVORI CORRELATI ──────────────────────────────────────────── */
.correlati {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--space-16) var(--content-pad);
  border-bottom: 1px solid var(--color-hairline);
}
.correlati .cartiglio { display: block; margin-bottom: var(--space-6); }
.correlati .grid-3 { gap: var(--space-6); }

/* ── LA LIGHTBOX DELLE FOTOGRAFIE ─────────────────────────────────── */
/* Le immagini della striscia si aprono qui, a piena vista: la striscia
   resta un assaggio, la lightbox è dove ci si ferma a guardare. */
.striscia img { cursor: zoom-in; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(9,7,15,0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out);
}
.lightbox.open { opacity: 1; pointer-events: all; }
.lightbox-figure {
  max-width: min(92vw, 75rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.lightbox-figure img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--radius-md);
  display: block;
}
.lightbox-caption { color: rgba(255,255,255,0.7); text-align: center; }
.lightbox-caption:empty { display: none; }
.lightbox-close {
  position: fixed;
  top: var(--space-5);
  right: var(--space-5);
  z-index: 10;
  background: rgba(255,255,255,0.1);
  border: none;
  border-radius: 50%;
  width: 2.5rem; height: 2.5rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; line-height: 1;
  cursor: pointer;
  color: rgba(255,255,255,0.8);
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.lightbox-close:hover { background: rgba(255,255,255,0.2); color: #fff; transform: rotate(90deg); }
.lightbox-freccia {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 2.875rem; height: 2.875rem;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 1.125rem;
  cursor: pointer;
  z-index: 10;
  transition: background 0.2s, border-color 0.2s;
}
.lightbox-freccia:hover { background: rgba(255,255,255,0.18); }
.lightbox-freccia.prev { left: var(--space-5); }
.lightbox-freccia.next { right: var(--space-5); }
.lightbox-conta {
  position: fixed;
  bottom: var(--space-5);
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.6);
  z-index: 10;
}
@media (max-width: 640px) {
  .lightbox-freccia { width: 2.375rem; height: 2.375rem; font-size: 1rem; }
  .lightbox-freccia.prev { left: var(--space-3); }
  .lightbox-freccia.next { right: var(--space-3); }
}

/* ── LE CASELLE: cartiglio a sinistra, corpo a destra ────────────── */
.casella {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--space-12) var(--content-pad);
  display: grid;
  gap: var(--space-5);
  border-bottom: 1px solid var(--color-hairline);
}
@media (min-width: 900px) {
  .casella { grid-template-columns: 11.875rem 1fr; gap: var(--space-12); align-items: start; }
}
.cartiglio { padding-top: 0.375rem; color: var(--color-primary-hover); }
.casella-corpo p {
  font-size: clamp(1rem, 1.5vw, 1.1875rem);
  line-height: 1.68;
  color: var(--color-text-secondary);
  max-width: 62ch;
}
.casella-corpo p + p { margin-top: var(--space-5); }
.casella-corpo em { font-family: var(--font-display); font-style: italic; font-size: 1.08em; color: var(--color-text-primary); }

/* Le caselle a elenco: ogni voce è un riquadro */
.tabella {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.4375rem, 1fr));
  gap: var(--space-3);
}
.voce-tabella {
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  transition: border-color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.voce-tabella:hover { background: var(--color-surface-raised); border-color: var(--color-border); }
.voce-tabella dt {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}
.voce-tabella dd { font-size: 0.875rem; line-height: 1.6; color: var(--color-text-secondary); }

/* ── LA GALLERIA: una striscia che scorre ────────────────────────── */
.galleria {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--space-16) 0 var(--space-16) var(--content-pad);
  border-bottom: 1px solid var(--color-hairline);
}
.testa-galleria {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6);
  padding-right: var(--content-pad);
  margin-bottom: var(--space-6);
}
.comandi { display: flex; align-items: center; gap: var(--space-3); }
.conta { color: var(--color-text-tertiary); }
.conta b { color: var(--color-text-primary); font-weight: 600; }
.freccia {
  width: 2.375rem; height: 2.375rem;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-size: 0.9375rem;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
.freccia:hover:not(:disabled) { background: var(--color-primary); border-color: var(--color-primary); }
.freccia:disabled { opacity: 0.28; cursor: default; }

.striscia {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  cursor: grab;
}
.striscia::-webkit-scrollbar { display: none; }
.striscia.in-mano { cursor: grabbing; scroll-behavior: auto; }
.striscia figure {
  flex: 0 0 auto;
  width: min(60vw, 29.375rem);
  scroll-snap-align: start;
}
.striscia img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  display: block;
  filter: brightness(0.86);
  transition: filter var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.striscia figure:hover img { filter: brightness(1); transform: translateY(-3px); }
.striscia figcaption { display: block; margin-top: var(--space-3); line-height: 1.5; max-width: 42ch; }

/* Un'immagine dichiarata mockup, non spacciata per uno scatto vero: una
   barra a tre pallini come una finestra, sotto l'immagine incorniciata. */
.mockup-schermo {
  background: var(--color-surface-raised);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.mockup-barra {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-hairline);
}
.mockup-barra span {
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--color-hairline);
}
.mockup-vetro { display: block; }
.mockup-vetro img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border: 0;
  border-radius: 0;
  filter: brightness(0.86);
  transition: filter var(--dur-base) var(--ease-out);
}
.mockup-schermo:hover .mockup-vetro img { filter: brightness(1); }

/* ── LA POSTA: la citazione firmata ──────────────────────────────── */
.posta-scheda {
  max-width: 53.75rem;
  margin-inline: auto;
  padding: var(--space-24) var(--content-pad);
  text-align: center;
}
.posta-scheda .cartiglio { margin-bottom: var(--space-8); }
.posta-scheda blockquote {
  /* site.css mette un filetto a sinistra alle citazioni: qui la
     citazione è centrata, e un filetto spaiato a lato si nota. */
  border: 0;
  padding: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.75rem, 4.4vw, 3.25rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-8);
}
.posta-lunga blockquote { font-size: clamp(1.5rem, 3.2vw, 2.375rem); }
.firma-posta { display: grid; gap: var(--space-2); }
.firma-posta b {
  font-family: var(--font-body);
  font-weight: 700; font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--color-secondary);
}

/* ── IL RIMANDO FINALE ───────────────────────────────────────────── */
.riga-rimando {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-5);
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-20) var(--content-pad);
  border-top: 1px solid var(--color-hairline);
}
.riga-rimando .voce {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 5vw, 3.625rem);
  line-height: 1.05;
  color: var(--color-text-primary);
  transition: color var(--dur-base) var(--ease-out);
}
.riga-rimando:hover { text-decoration: none; }
.riga-rimando:hover .voce { color: var(--color-primary-hover); }
.riga-rimando .quanti { max-width: 30ch; text-align: right; line-height: 1.6; }

@media (max-width: 640px) {
  .apertura-scheda { min-height: 62svh; padding-top: 9.375rem; }
  .riga-rimando .quanti { text-align: left; }
}

/* ── LA FRASE A TUTTA PAGINA ──────────────────────────────────────
   Una riga sola sopra una fotografia grande. Ci va quello che si
   ricorda a memoria: se serve una spiegazione, non è una frase, è
   una casella. */
.dichiarazione {
  position: relative;
  min-height: 74svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-24) var(--content-pad);
  overflow: hidden;
  margin-block: var(--space-8);
}
.dichiarazione-foto { position: absolute; inset: 0; z-index: 0; }
.dichiarazione-foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* La fotografia è metà del blocco: se la si scurisce come uno sfondo
     tanto vale non metterla. Scende solo quanto basta a far reggere il
     testo, e il velo sotto lo scrive solo al centro. */
  filter: brightness(0.66) saturate(0.98);
}
.dichiarazione::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 62% 52% at 50% 50%, rgba(9,7,15,0.62) 0%, rgba(9,7,15,0.14) 72%),
    linear-gradient(to bottom, rgba(9,7,15,0.55) 0%, rgba(9,7,15,0) 22%, rgba(9,7,15,0) 78%, rgba(9,7,15,0.55) 100%);
}
.dichiarazione-testo {
  position: relative; z-index: 2;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 5.6vw, 4.75rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--color-text-primary);
  max-width: 20ch;
  text-shadow: 0 2px 40px rgba(0,0,0,0.6);
}
.dichiarazione-testo em { font-style: italic; color: var(--color-secondary); }

/* ── LA STRISCIA DEI CAROSELLI ────────────────────────────────────
   Stessa meccanica delle fotografie, proporzione da social: le tavole
   sono 4:5 e si guardano più piccole, perché contano in sequenza. */
.galleria-social .striscia figure { width: min(42vw, 19.375rem); }
.galleria-social .striscia img {
  aspect-ratio: 4 / 5;
  filter: none;
  border-color: var(--color-hairline);
}
.galleria-social .striscia figure:hover img { transform: translateY(-3px); }

/* ── LA STRISCIA DI CIÒ CHE STA IN MOSTRA ─────────────────────────
   Qui dentro convivono le tavole dei pannelli, quadrate, e le foto
   delle sale, verticali. Un ritaglio unico taglierebbe le prime a
   metà, quindi qui l'altezza è fissa e la larghezza segue la forma
   dell'immagine: ogni pezzo si vede intero, come è stato stampato. */
.galleria-mostra .striscia figure { width: auto; }
.galleria-mostra .striscia img {
  height: clamp(15rem, 44vh, 26rem);
  width: auto;
  max-width: min(86vw, 42rem);
  aspect-ratio: auto;
  object-fit: contain;
  filter: none;
  border-color: var(--color-hairline);
}
.galleria-mostra .striscia figcaption { max-width: 24ch; }