/* Top banner on phones.
   The section carries a hard min-height of 550px, which on a 390x844 phone eats
   65% of the screen before a single word is read. The slide image was also set
   to background-size:auto, so it did not fill its box cleanly.
   Below 768px: shorter banner, and the image covers it properly. */
@media (max-width: 767px) {
  .elementor-element:has(> .elementor-background-slideshow),
  .elementor-element:has(> .elementor-background-slideshow__slide) {
    --min-height: 320px !important;
    min-height: 320px !important;
    height: 320px !important;
  }
  .elementor-background-slideshow,
  .elementor-background-slideshow .swiper-wrapper,
  .elementor-background-slideshow__slide,
  .elementor-background-slideshow__slide__image {
    height: 320px !important;
  }
  .elementor-background-slideshow__slide,
  .elementor-background-slideshow__slide__image {
    background-size: cover !important;
    background-position: center center !important;
  }
}

/* Landscape phones. The artwork is 16:9, so on a 852px wide screen the whole
   image would need 479px of height - more than the screen has. At 210px the
   crop was slicing the LOICA wordmark, which sits below the middle of the
   image. Taller, and the crop is pulled upward so the wordmark stays whole. */
@media (max-width: 900px) and (orientation: landscape) {
  .elementor-element:has(> .elementor-background-slideshow) {
    --min-height: 300px !important;
    min-height: 300px !important;
    height: 300px !important;
  }
  .elementor-background-slideshow,
  .elementor-background-slideshow .swiper-wrapper,
  .elementor-background-slideshow__slide,
  .elementor-background-slideshow__slide__image { height: 300px !important; }
  /* cover MUST be repeated here. The portrait block above is max-width:767px,
     which a 852px landscape phone never matches, so without this the artwork
     stayed at its natural size and background-position did literally nothing
     (verified: two different positions rendered pixel-identical). */
  .elementor-background-slideshow__slide,
  .elementor-background-slideshow__slide__image {
    background-size: cover !important;
    background-position: center 50% !important;
  }
}