/* ============================================
   Front-end responsive video styles
   ============================================ */
.field-oembed-video-wrapper .ratio.oembed-responsive {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}

.field-oembed-video-wrapper .ratio.oembed-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ============================================
   CKEditor 5 - Simple aspect ratio approach
   ============================================ */
.ck-content .drupal-media {
  display: inline-block;
  width: 100%;
  max-width: 720px;
}

.ck-content .ratio.oembed-responsive {
  width: 100% !important;
  max-width: 720px !important;
  aspect-ratio: 16 / 9 !important;
  position: relative !important;
  padding: 0 !important;
  height: auto !important;
}

.ck-content .ratio.oembed-responsive iframe {
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  inset: 0 !important;
}