/* The portrait modifier on `.video-wrapper` — a 9:16 box for a YouTube
 * playlist of Shorts, which the embed plays in YouTube's vertical skin and a
 * 16:9 box letterboxes between wide black bars (METIS-pub#431).
 *
 * Here, in the shared component layer every surface loads, and not beside one
 * of the `.video-wrapper` base rules: those live in the CRM's detail.css and
 * the public design-1-detail.css (and invite's signup.css) — three copies whose
 * consolidation is its own change — and the playlist renders on both the CRM
 * and the public page. `@layer components` beats either base copy regardless
 * of link order.
 *
 * Self-sufficient rather than a one-line padding override: the width is capped
 * so the box is never taller than most of the viewport (a full-width 9:16 box
 * on a desktop column is taller than the screen), and padding-bottom is a
 * percentage of the *parent's* width, so a capped box cannot use it. So the
 * base's padding trick is swapped for `aspect-ratio`, and the iframe rule is
 * restated so the modifier also draws correctly where no base copy is loaded
 * (the styleguide).
 */
@layer components {
  .video-wrapper--portrait {
    position: relative;
    height: auto;
    padding-bottom: 0;
    aspect-ratio: 9 / 16;
    inline-size: min(100%, calc(80vh * 9 / 16));
    margin-inline: auto;
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  .video-wrapper--portrait iframe {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    border: none;
  }
}