/* ============================================================================
   FOTOGRAFIE — trattamento cromatico e riquadri
   ============================================================================

   Le foto sono il contenuto principale di questo sito: la tipografia fa da
   didascalia. Perché immagini scattate in anni, teatri e luci diverse
   sembrino appartenere alla stessa pubblicazione, passano tutte dalla stessa
   correzione, definita **una volta sola** qui sotto.

   Il trattamento è in due strati:

   1. un ritocco sull'immagine (`--photo-filter`): un filo di contrasto in più,
      un filo di luminosità in meno, colori appena più pieni;
   2. un velo di blu oltremare steso sopra in `mix-blend-mode: color`, che
      agisce solo sulla tinta e lascia intatti luci e ombre. È questo a legare
      cromaticamente foto diverse fra loro.

   Nessuna foto viene resa in bianco e nero o seppia.

   Il markup lo produce il template tag `responsive_image`, che scrive sempre
   larghezza e altezza dell'originale: è ciò che impedisce alla pagina di
   sobbalzare quando la foto arriva.
   ========================================================================= */

.foto {
  position: relative;
  display: block;
  overflow: hidden;

  /* Rete di sicurezza: nessun riquadro fotografico può sporgere dal proprio
     contenitore. Serve davvero — la banda panoramica, che ha insieme una
     proporzione fissa e un'altezza minima, senza questo si allargava fino a
     873px dentro uno schermo da 900 e faceva scorrere la pagina di lato. */
  max-width: 100%;

  /* `isolation` chiude il velo dentro il riquadro della foto: senza, la
     fusione dei colori uscirebbe e tingerebbe anche ciò che sta intorno. */
  isolation: isolate;

  & img {
    display: block;
    width: 100%;
    height: auto;
    filter: var(--photo-filter);
  }

  /* Il velo di colore. `pointer-events: none` gli impedisce di intercettare i
     clic: senza, una foto dentro un collegamento smetterebbe di rispondere. */
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--ultra);
    mix-blend-mode: color;
    opacity: var(--photo-veil);
    pointer-events: none;
  }
}

/* --- Riquadri di proporzione fissa -------------------------------------------
   Senza classe, la foto conserva le proprie proporzioni originali e non serve
   altro. Quando invece deve riempire un riquadro di forma decisa — la
   locandina verticale di una produzione, la foto in cima a una scheda, la
   banda panoramica — si aggiunge una di queste classi: il riquadro ha la
   forma voluta e l'immagine lo riempie ritagliandosi, senza deformarsi. */

.foto--cover,
.foto--card,
.foto--panorama,
.foto--banda {
  & img {
    height: 100%;
    object-fit: cover;
  }
}

.foto--cover {
  aspect-ratio: var(--ratio-cover);
}

.foto--card {
  aspect-ratio: var(--ratio-card);
}

.foto--panorama {
  aspect-ratio: var(--ratio-panorama);
}

.foto--banda {
  aspect-ratio: var(--ratio-band);
  min-height: 300px;
}

@media (max-width: 640px) {
  /* Su telefono una banda 32:11 diventa una striscia illeggibile, e anche il
     2:1 della foto di apertura si riduce a poche decine di pixel di altezza. */
  .foto--panorama,
  .foto--banda {
    aspect-ratio: var(--ratio-card);
    min-height: 0;
  }
}