/* =====================================================================
   Walter Tosto — Special Projects

   Tre fasce a tutta larghezza, alternate: galleria di tre foto da un
   lato, testo dall'altro. Su schermo grande la foto grande prende due
   righe e le due piccole si impilano accanto; su telefono tutto in
   colonna, con la foto grande sopra.

   Questo foglio vive solo qui: styles.css e' condiviso da 27 pagine e
   non va gonfiato per una sola. La lente che ingrandisce le foto invece
   riusa le classi .wt-lente di styles.css, quelle delle schede prodotto,
   cosi' l'aspetto e' lo stesso in tutto il sito.
   ===================================================================== */

.sp-sezione .container { display: grid; gap: clamp(56px, 9vh, 120px); }

.sp-fascia {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

/* Le fasce pari hanno il testo a sinistra. Si inverte l'ordine visivo e
   non quello del codice: chi legge con la tastiera o con un lettore di
   schermo incontra sempre prima il titolo e poi le foto. */
.sp-fascia--invertita .sp-galleria { order: 2; }
.sp-fascia--invertita .sp-testo { order: 1; }

/* ── la galleria ──────────────────────────────────────────────────── */

.sp-galleria {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 12px;
}
.sp-scatto { position: relative; }
.sp-scatto--grande { grid-column: 1 / -1; }

/* Lo spazio immagine ha una sua altezza fissa nel shadow DOM (240x160):
   qui si impone il rettangolo 3:2 e si lascia riempire. */
.sp-scatto image-slot {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
}
.sp-scatto--grande image-slot { aspect-ratio: 16 / 10; }

/* Cursore a lente solo dove il clic ingrandisce davvero: quando sei
   collegato al pannello il clic serve a caricare la foto, e
   special-projects.js toglie questo stato. */
.sp-scatto[data-ingrandibile] { cursor: zoom-in; }
.sp-scatto[data-ingrandibile]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ── il testo ─────────────────────────────────────────────────────── */

.sp-num {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .78rem;
  letter-spacing: .14em;
  color: var(--accent);
  margin: 0 0 .5rem;
}
.sp-testo h2 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.15; }
.sp-riga { width: 46px; height: 3px; background: var(--accent); margin: 1rem 0 1.2rem; }
.sp-testo p {
  color: var(--muted);
  line-height: 1.75;
  margin: 0 0 .9rem;
  max-width: 54ch;
}
.sp-testo p:last-child { margin-bottom: 0; }

/* Un paragrafo senza testo non deve lasciare il buco: serve ai progetti
   in cui i paragrafi previsti sono piu' di quelli scritti. Appena dal
   pannello ci salvi qualcosa, applyLang lo riempie e ricompare da solo. */
.sp-testo p:empty { display: none; }

/* ── telefono e tablet ────────────────────────────────────────────── */

@media (max-width: 900px) {
  .sp-fascia { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  /* in colonna l'ordine e' sempre lo stesso: prima le foto, poi il testo */
  .sp-fascia--invertita .sp-galleria,
  .sp-fascia--invertita .sp-testo { order: 0; }
  .sp-testo p { max-width: none; }
}