/**
 * @copyright   (C) 2026 Valkire Ltd.
 * @license     Valkire License
 *
 * The YouTube player plg_content_youtube shows for a video placeholder: a
 * figure holding the 16:9 frame and the description. Without an alignment it
 * fills the width of the text; the alignment set in the editor narrows it and
 * lets the text flow around a left or right video on wider screens. A width
 * picked in grid columns overrides that, from the small breakpoint up, like
 * Bootstrap's col-sm-* classes; below it every video fills the width.
 * The editor mirrors these sizes (media/plg_editors-xtd_youtube/css/placeholder.css).
 */

.youtube-player-center {
  max-width: 720px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.youtube-player figcaption {
  margin-top: .5rem;
}

@media (min-width: 576px) {
  .youtube-player-left,
  .youtube-player-right {
    width: min(480px, 50%);
  }

  .youtube-player-left {
    float: left;
    margin-right: 1.5rem;
  }

  .youtube-player-right {
    float: right;
    margin-left: 1.5rem;
  }

  .youtube-player-col-3 { width: 25%; max-width: none; }
  .youtube-player-col-4 { width: 33.3333%; max-width: none; }
  .youtube-player-col-6 { width: 50%; max-width: none; }
  .youtube-player-col-8 { width: 66.6667%; max-width: none; }
  .youtube-player-col-9 { width: 75%; max-width: none; }
  .youtube-player-col-12 { width: 100%; max-width: none; }
}