/**
 * V1.52 — le superfici media.
 *
 * PERCHE' QUESTO FILE ESISTE ORA
 * Fino alla V1.51b queste regole vivevano dentro `media-ui.js`, in una
 * stringa iniettata a runtime in un tag `<style>`. CSS dentro
 * JavaScript e' CSS che nessuno vede: non compare in nessun audit, non
 * ha un posto nella cascata (arriva sempre ultimo, quando arriva), non
 * passa dal cache busting, e non si puo' dire quale pagina lo carichi.
 *
 * E' la stessa categoria di problema che ha fatto sparire la mappa in
 * V1.51: una regola funzionale senza un proprietario dichiarato.
 *
 * `.media-slot` e' il contenitore che tiene lo spazio mentre l'immagine
 * arriva. E' cio' che impedisce alla pagina di saltare quando la foto
 * di uno stand finisce di caricare.
 */

.media-slot {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: var(--surface-soft, #FFFDF7);
}

/*
 * V1.74 — LE IMMAGINI SI ADATTANO, NON SI TAGLIANO.
 *
 * Il rapporto dichiarato qui e' quello che lo slot tiene MENTRE
 * l'immagine arriva: serve a non far saltare la pagina. Appena il file
 * e' in casa, `media-ui.js` scrive il rapporto VERO in
 * `--media-aspect`, e lo slot prende la forma della foto.
 *
 * E' il modo di non tagliare senza riempire di bande nere: una
 * locandina verticale resta verticale, una foto panoramica resta
 * panoramica, e nessuna delle due perde un pezzo. Le bande restano solo
 * dove la forma non puo' cambiare — una miniatura quadrata in un
 * elenco — e li' sono il male minore rispetto a una testa tagliata.
 */
.media-slot[data-ratio="cover"] { aspect-ratio: var(--media-aspect, 16 / 10); }
.media-slot[data-ratio="square"] { aspect-ratio: var(--media-aspect, 1 / 1); }
.media-slot[data-ratio="reel"] { aspect-ratio: var(--media-aspect, 9 / 16); }
.media-slot[data-ratio="free"] { aspect-ratio: auto; }

/*
 * Un limite all'altezza: una locandina molto stretta e molto alta,
 * lasciata libera di prendere la propria forma, spingerebbe tutto il
 * resto della pagina sotto la piega. Oltre il tetto l'immagine si
 * rimpicciolisce dentro lo spazio — e continua a non tagliarsi.
 */
.media-slot[data-ratio="cover"],
.media-slot[data-ratio="reel"] { max-height: 70vh; }

.media-slot > img,
.media-slot > video {
  display: block;
  width: 100%;
  opacity: 0;
  transition: opacity .18s ease;
}

/*
 * L'altezza la impone lo slot solo quando dichiara un rapporto:
 * con ratio "free" comanda il CSS della pagina ospite, che per
 * cover e miniature ha gia le sue dimensioni.
 *
 * V1.74 — un'immagine si vede INTERA. Con lo slot che ne prende la
 * forma, `contain` non lascia nessuna banda quasi mai; quando il tetto
 * in altezza accorcia il riquadro, la banda resta ed e' il male minore
 * — una locandina e' fatta di parole, e tagliarne una riga vuol dire
 * perderla.
 */
.media-slot:not([data-ratio="free"]) > img {
  height: 100%;
  object-fit: contain;
}

/*
 * V1.77c — UN VIDEO NO: RIEMPIE.
 *
 * Un filmato non ha parole da leggere ai bordi, e un riquadro con due
 * fasce bianche sembra rotto, non rispettoso. Il ritaglio qui non e'
 * quello cieco di prima: lo slot ha gia' preso la forma del video (la
 * dichiara `media-ui.js` ai metadati), quindi `cover` combacia esatto
 * e toglie qualcosa solo nell'unico caso in cui il riquadro non puo'
 * seguire il video — quando il tetto in altezza lo accorcia.
 */
.media-slot:not([data-ratio="free"]) > video {
  height: 100%;
  object-fit: cover;
}

.media-slot.is-ready > img,
.media-slot.is-ready > video { opacity: 1; }

/*
  V1.86 — IL COMANDO DELL'AUDIO.

  Sta sopra il video e non sotto: un video a tutto riquadro non lascia
  spazio sotto di se', e un comando che scorre via con la pagina non si
  trova quando serve. In basso a destra, dove non copre il soggetto —
  che nei video verticali sta al centro — e dove il pollice arriva.
*/
.media-slot-sound {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  display: grid;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(17, 17, 17, .55);
  color: #fff;
  cursor: pointer;
  place-items: center;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* Acceso si vede: il fondo si fa pieno, perche' "sta suonando" e'
   uno stato e non un bottone qualunque. */
.media-slot-sound[data-state="playing"] { background: rgba(17, 17, 17, .82); }

.media-slot-sound svg { display: block; }

.media-slot-layer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  text-align: center;
}

.media-slot.is-ready .media-slot-layer { display: none; }

.media-slot-skeleton {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    var(--surface-soft, #FFFDF7) 30%,
    var(--line, #E7DEC8) 50%,
    var(--surface-soft, #FFFDF7) 70%
  );
  background-size: 220% 100%;
  animation: mediaSlotShimmer 1.4s linear infinite;
}

@keyframes mediaSlotShimmer {
  from { background-position: 140% 0; }
  to { background-position: -40% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .media-slot-skeleton { animation: none; }
}

.media-slot-label {
  position: relative;
  color: var(--muted, #6C675E);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.media-slot.is-error .media-slot-label { color: var(--danger, #B93E37); }

.media-slot-bar {
  position: relative;
  width: min(150px, 70%);
  height: 4px;
  border-radius: 999px;
  background: var(--line, #E7DEC8);
  overflow: hidden;
}

.media-slot-bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--hearth-ink, #111);
  transition: width .2s ease;
}

.media-slot-retry {
  position: relative;
  min-height: 28px;
  padding: 4px 11px;
  border: 1px solid var(--line, #E7DEC8);
  border-radius: 999px;
  background: var(--surface, #fff);
  color: inherit;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.media-slot-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 253, 247, .78);
  color: var(--muted, #6C675E);
  font-size: 11px;
  font-weight: 800;
}

@media print {
  .media-slot-layer,
  .media-slot-overlay { display: none !important; }
  .media-slot > img { opacity: 1 !important; }
}