/* Videos on phones.
   Two problems this fixes:
   1) The Elementor widget container carries 50px of side padding, which on a
      390px phone left the video only 270px wide. Removed below 768px.
   2) Fullscreen is granted in the iframe's allow= attribute (done in the HTML);
      here we just make sure the player fills the width and keeps 16:9. */
@media (max-width: 767px) {
  .elementor-widget-container:has(iframe[src*="player.vimeo"]) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .elementor-widget-wrap:has(iframe[src*="player.vimeo"]) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .elementor-wrapper:has(> iframe[src*="player.vimeo"]),
  .elementor-open-inline:has(> iframe[src*="player.vimeo"]) {
    width: 100% !important;
    max-width: 100% !important;
  }
  iframe[src*="player.vimeo"] {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 9;
    height: auto !important;
    display: block;
  }
}

/* Landscape phones: use the height available rather than overflowing it. */
@media (max-width: 900px) and (orientation: landscape) {
  iframe[src*="player.vimeo"] {
    max-height: 88vh;
  }
}