/* OSDM Parallax 1.0.6 - mobile image sizing with template-safe specificity */
.osdm-parallax {
  display: block;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: var(--osdm-parallax-height, 550px);
  width: 100vw;
  max-width: none;
  left: 50%;
  margin-left: -50vw;
  box-sizing: border-box;
}
.osdm-parallax__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center var(--osdm-parallax-focus, center);
  max-width: none;
  transform-origin: center center;
  transform: translate3d(0, var(--osdm-parallax-offset, 0px), 0) scale(var(--osdm-parallax-scale, 1.45));
  will-change: transform;
}
/* In fixed mode the image remains visible until JS confirms the CSS
   background is ready. Only then is the img made transparent. */
.osdm-parallax--mode-fixed .osdm-parallax__image {
  transform: none;
  will-change: auto;
}
.osdm-parallax--mode-fixed.osdm-parallax--background-ready .osdm-parallax__image {
  opacity: 0;
}
/* This mode uses a stationary background instead of scrolling an image node. */
.osdm-parallax--mode-fixed {
  background-size: cover;
  background-position: center calc(var(--osdm-parallax-focus-y, 50%) + var(--osdm-parallax-fixed-offset, 0px));
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.osdm-parallax--mode-fixed.osdm-parallax--effect-off {
  background-attachment: scroll;
}
@media (max-width: 767px), (prefers-reduced-motion: reduce) {
  .osdm-parallax { height: var(--osdm-parallax-mobile-height, 320px); }
  .osdm-parallax--mode-fixed { background-attachment: scroll; }
  .osdm-parallax__image { will-change: auto; }
}

/* On narrow screens the picture is a normal, cropped image, not a fixed
   viewport background. The module height remains controlled in Joomla. */
@media (max-width: 767px) {
  .osdm-parallax {
    height: var(--osdm-parallax-mobile-height, 320px);
    min-height: 0;
    margin-top: 0;
    margin-bottom: 0;
  }
  .osdm-parallax .osdm-parallax__image,
  .osdm-parallax--mode-fixed.osdm-parallax--background-ready .osdm-parallax__image {
    opacity: 1;
    transform: none;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center var(--osdm-parallax-focus, center);
    will-change: auto;
  }
  .osdm-parallax--mode-fixed {
    background-image: none !important;
    background-attachment: scroll;
  }
  /* Joomla template slider must shrink to the module's visible height. */
  body.site.osdm-home .site-grid > .osdm-slider:has(> .osdm-parallax),
  body.site.osdm-home .site-grid > .osdm-slider:has(.osdm-parallax) {
    min-height: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* OSDM Parallax 1.0.6 — Mobile. The Cassiopeia child template applies
   .osdm-slider img { height:auto }; that selector outranks the bare image
   class used above and left a short image inside the correctly sized module.
   Use a selector stronger than the template rule, scoped to THIS module. */
@media (max-width: 767px) {
  .osdm-parallax[data-osdm-parallax] {
    position: relative;
    height: var(--osdm-parallax-mobile-height, 320px);
    overflow: hidden;
  }
  .osdm-parallax[data-osdm-parallax] > img.osdm-parallax__image {
    position: absolute;
    inset: 0;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center var(--osdm-parallax-focus, center);
    transform: none;
    opacity: 1;
    will-change: auto;
  }
}