@layer dasy.components {

  /* Responsive wrapper for third-party learning videos. Keep the iframe's
     accessible name in markup and provide a direct-link fallback beneath it. */
  .wp-block-group.is-style-dasy-video-embed,
  .wp-block-group.dasy-video-embed {
    margin-block: var(--dasy-pad-y) calc(var(--dasy-pad-y) * 2);
  }

  .dasy-video-embed__frame {
    aspect-ratio: 16 / 9;
    width: 100%;
    overflow: hidden;
    border-radius: var(--dasy-radius-md);
    background: var(--dasy-ink);
  }

  .dasy-video-embed__frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
  }

  .wp-block-group.is-style-dasy-video-embed > :last-child,
  .wp-block-group.dasy-video-embed > :last-child {
    margin-block-end: 0;
  }
}

/* WordPress emits its constrained-layout child widths outside cascade layers,
   so this integration rule must also be unlayered. Let the video frame and
   fallback text use the full module content column instead of inheriting the
   core 800px cap and automatic inline margins. */
.wp-block-group.is-style-dasy-video-embed > *,
.wp-block-group.dasy-video-embed > * {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}