/* =============================================================================
   Video neben Text — eingebettetes Video neben WYSIWYG-Text (ACF: acf/video-text)
   -----------------------------------------------------------------------------
   Zwei gleich breite Spalten: links das Video (16:9), rechts die Beschreibung.
   Sektions-Rhythmus (.section) und Lesebreite (.inner) kommen aus
   styles/layout.css; hier nur die block-spezifische Zeilen-Aufteilung.
   ========================================================================== */

@scope (.video-text) {
  /* Kein eigener voller margin-block: der Sektions-Rhythmus (layout.css) liefert
     bereits 60px, hier kommt nur die Differenz zum Zielwert (80px) dazu. */
  .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-block: 20px;
  }

  .video-media {
    flex: 0 0 48%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 20px;

    & iframe,
    & img {
      display: block;
      inline-size: 100%;
      block-size: 100%;
      border: 0;
    }
  }

  .video-copy {
    flex: 0 0 48%;
    font-weight: var(--font-weight-medium);

    & > :last-child {
      margin-block-end: 0;
    }
  }

  /* Unter 768px: Video und Text stapeln, mit gap statt space-between. */
  @media (width <= 767px) {
    .row {
      flex-direction: column;
      align-items: stretch; /* sonst zentriert center die Spalten auf Inhaltsbreite */
      gap: 1em;
    }

    .video-media,
    .video-copy {
      flex-basis: auto;
      inline-size: 100%;
    }
  }
}