/* VINX | Regola editoriale unica per embed | 2026-10-25
   Valida per TUTTE le schede: Works, Events, Projects, Releases, Teaching.
   I formati si distinguono, ma nessun iframe puo' occupare l'intera colonna.
   Non modifica cover, gallerie o immagini editoriali. */
:root {
  --vinx-embed-video-max: 560px;
  --vinx-embed-audio-max: 480px;
  --vinx-embed-social-max: 380px;
  --vinx-embed-general-max: 560px;
  --vinx-embed-gap: clamp(0.9rem, 2vw, 1.4rem);
}

/* Contenitori video del tema (Hugo partial, shortcode, embed contestuali). */
main article :is(.video-embed, .vinx-embedded-media--video,
  .hugo-youtube, .hugo-vimeo, .youtube, .vimeo, .video-container,
  .responsive-video, .embed-responsive, .fluid-width-video-wrapper,
  .wp-block-embed.is-type-video),
main article [data-vinx-embed-shell="video"] {
  display: block !important;
  box-sizing: border-box !important;
  inline-size: min(100%, var(--vinx-embed-video-max)) !important;
  max-inline-size: min(100%, var(--vinx-embed-video-max)) !important;
  aspect-ratio: 16 / 9 !important;
  block-size: auto !important;
  min-block-size: 0 !important;
  max-block-size: none !important;
  padding: 0 !important;
  margin: var(--vinx-embed-gap) 0 !important;
  position: relative !important;
  overflow: hidden;
  background: #111;
}

/* Generici: per tutti gli embed (non soltanto YouTube o Vimeo). */
main article :is(.vinx-embedded-media, .vinx-embed-compact,
  .embed-container, .embed-wrapper, .responsive-embed,
  .wp-block-embed, .instagram-media, .tiktok-embed,
  .twitter-tweet, .fb-post, .fb-video),
main article [data-vinx-embed-shell="generic"],
main article [data-vinx-embed-shell="audio"],
main article [data-vinx-embed-shell="social"] {
  box-sizing: border-box !important;
  inline-size: min(100%, var(--vinx-embed-general-max)) !important;
  max-inline-size: min(100%, var(--vinx-embed-general-max)) !important;
  margin: var(--vinx-embed-gap) 0 !important;
}
main article :is(.vinx-embedded-media--spotify, .vinx-embedded-media--soundcloud,
  .vinx-embedded-media--bandcamp, .vinx-embedded-media--audio),
main article [data-vinx-embed-shell="audio"] {
  inline-size: min(100%, var(--vinx-embed-audio-max)) !important;
  max-inline-size: min(100%, var(--vinx-embed-audio-max)) !important;
  background: transparent !important;
}
main article :is(.vinx-embedded-media--instagram, .vinx-embedded-media--tiktok,
  .instagram-media, .tiktok-embed, .twitter-tweet),
main article [data-vinx-embed-shell="social"] {
  inline-size: min(100%, var(--vinx-embed-social-max)) !important;
  max-inline-size: min(100%, var(--vinx-embed-social-max)) !important;
  background: transparent !important;
}

/* Cintura di sicurezza: ogni media incorporato nel corpo e' contenuto,
   anche quando il provider imposta width/height negli attributi HTML. */
main article :is(iframe, video, audio, object, embed) {
  box-sizing: border-box !important;
  display: block;
  max-inline-size: 100% !important;
  margin-inline: 0 !important;
  border: 0;
}
main article :is(iframe, object, embed) {
  inline-size: 100% !important;
  max-block-size: 420px !important;
}
main article :is(video, audio) {
  inline-size: min(100%, var(--vinx-embed-video-max)) !important;
  block-size: auto !important;
  max-block-size: 360px !important;
  margin-block: var(--vinx-embed-gap) !important;
}
main article audio {
  inline-size: min(100%, var(--vinx-embed-audio-max)) !important;
  max-block-size: 64px !important;
}

/* Rapporto corretto, nessuna altezza lasciata ai vecchi wrapper a padding. */
main article :is(.video-embed, .vinx-embedded-media--video,
  [data-vinx-embed-shell="video"]) > iframe {
  position: absolute !important;
  inset: 0 !important;
  inline-size: 100% !important;
  block-size: 100% !important;
  max-block-size: 100% !important;
  aspect-ratio: 16 / 9;
  margin: 0 !important;
}
main article iframe[src*="youtube.com/embed"],
main article iframe[src*="youtube-nocookie.com/embed"],
main article iframe[src*="player.vimeo.com/video"],
main article iframe[src*="dailymotion.com/embed"],
main article iframe[src*="player.twitch.tv"] {
  aspect-ratio: 16 / 9;
  max-block-size: 360px !important;
}

/* Audio: lettori compatti e diversi per singolo brano/album. */
main article iframe[src*="open.spotify.com/embed"] {
  block-size: 152px !important;
  max-block-size: 152px !important;
}
main article iframe[src*="open.spotify.com/embed/album"] {
  block-size: 232px !important;
  max-block-size: 232px !important;
}
main article iframe[src*="w.soundcloud.com/player"] {
  block-size: 166px !important;
  max-block-size: 166px !important;
}
main article iframe[src*="bandcamp.com/EmbeddedPlayer"],
main article iframe[src*="bandcamp.com/embedded_player"],
main article iframe[src*="bandcamp.com/EmbeddedPlayer"] {
  block-size: min(320px, 80vw) !important;
  max-block-size: 320px !important;
}
main article iframe[src*="mixcloud.com/widget"] {
  block-size: 170px !important;
  max-block-size: 170px !important;
}

/* Widget social: ridotti di larghezza, senza cambiare il contenuto del post. */
main article :is(.instagram-media, .tiktok-embed, .twitter-tweet),
main article [data-vinx-embed-shell="social"] iframe {
  max-block-size: 560px !important;
}

/* Mappa/documento/altro embed sconosciuto: max 560x420, scroll interno.
   L'iframe non viene trasformato forzatamente in video 16:9. */
main article [data-vinx-embed-shell="generic"] iframe {
  max-block-size: 420px !important;
}

@media (max-width: 600px) {
  :root {
    --vinx-embed-video-max: 100%;
    --vinx-embed-audio-max: 100%;
    --vinx-embed-general-max: 100%;
    --vinx-embed-social-max: min(100%, 360px);
    --vinx-embed-gap: .9rem;
  }
  main article iframe { max-block-size: 76svh !important; }
}