/* =====================================
   OFR Image Cluster / Stack
   - Cluster: Standard (1+2), Grid 2x2, Collage
   - Stack: click-to-front cycling (+ pop on activation)
   - Plus indicator on exposed stack cards
   - NOTE: Card stack = click only (no drag).
           Collage parallax remains separate:
           - Scroll sets: --ofr-parallax-y
===================================== */

.ofr-image-gallery{
  --ofr-ig-gap: var(--ofr-space-xs);       /* 16px */
  --ofr-ig-radius: var(--ofr-radius-sm);  /* 16px */
}

/* Gap variants */
.ofr-image-gallery.is-gap-xxs{ --ofr-ig-gap: var(--ofr-space-xxs); } /* 8 */
.ofr-image-gallery.is-gap-xs { --ofr-ig-gap: var(--ofr-space-xs); }  /* 16 */
.ofr-image-gallery.is-gap-s  { --ofr-ig-gap: var(--ofr-space-s); }   /* 24 */

/* Radius variants */
.ofr-image-gallery.is-radius-xs{ --ofr-ig-radius: var(--ofr-radius-xs); }
.ofr-image-gallery.is-radius-sm{ --ofr-ig-radius: var(--ofr-radius-sm); }
.ofr-image-gallery.is-radius-md{ --ofr-ig-radius: var(--ofr-radius-md); }

/* Shared media (cluster + stack) */
.ofr-image-cluster__media,
.ofr-image-stack__media{
  display: block;
  overflow: hidden;
  border-radius: var(--ofr-ig-radius);
}

/* Make WP images behave */
.ofr-image-cluster__img,
.ofr-image-stack__img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* =====================================
   CLUSTER — STANDARD (1 + 2)
===================================== */

.ofr-image-cluster{
  display: flex;
  flex-direction: column;
  gap: var(--ofr-ig-gap);
}

.ofr-image-cluster__bottom{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ofr-ig-gap);
}

/* Aspect presets — standard cluster */
.ofr-image-gallery.is-aspect-top-16x9-bottom-1x1 .ofr-image-cluster__top .ofr-image-cluster__media{
  aspect-ratio: 16 / 9;
}
.ofr-image-gallery.is-aspect-top-16x9-bottom-1x1 .ofr-image-cluster__bottom .ofr-image-cluster__media{
  aspect-ratio: 1 / 1;
}
.ofr-image-gallery.is-aspect-all-1x1 .ofr-image-cluster__media{
  aspect-ratio: 1 / 1;
}

/* =====================================
   CLUSTER — GRID (2 × 2)
===================================== */

.ofr-image-gallery.is-cluster.is-cluster-style-grid.is-cluster-layout-2_2 .ofr-image-grid-2x2{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: var(--ofr-ig-gap) !important;

  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: none !important;
}

.ofr-image-gallery.is-cluster.is-cluster-style-grid.is-cluster-layout-2_2 .ofr-image-grid-2x2 > .ofr-image-grid-2x2__item{
  display: block !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: none !important;
  min-width: 0 !important;
}

/* 2x2 tiles should always be square */
.ofr-image-gallery.is-cluster.is-cluster-style-grid.is-cluster-layout-2_2 .ofr-image-cluster__media{
  aspect-ratio: 1 / 1 !important;
}

/* =====================================
   CLUSTER — COLLAGE (Overlap)
   - Parallax is applied to the MEDIA so item positioning stays clean.
   - A stays fixed (no parallax).
===================================== */

.ofr-image-gallery.is-cluster-style-collage .ofr-image-collage{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: visible;
}

.ofr-image-gallery.is-cluster-style-collage .ofr-image-collage__item{
  position: absolute;
}

/* Tile “card” */
.ofr-image-gallery.is-cluster-style-collage .ofr-image-collage__media{
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--ofr-ig-radius);
  box-shadow: var(--ofr-shadow-lg);
  position: relative;

  /* Parallax hook (scroll) */
  transform: translate3d(0, var(--ofr-parallax-y, 0px), 0);
  will-change: transform;
}

.ofr-image-gallery.is-cluster-style-collage .ofr-image-collage__media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: var(--ofr-ig-radius);
  box-shadow: inset 0 0 0 1px rgba(var(--ofr-ocean-darkest-rgb), 0.06);
}

.ofr-image-gallery.is-cluster-style-collage .ofr-image-collage__img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Depth shadows */
.ofr-image-gallery.is-cluster-style-collage .ofr-image-collage__item.is-b .ofr-image-collage__media{
  box-shadow: var(--ofr-shadow-lg), 0 16px 36px rgba(var(--ofr-ocean-darkest-rgb), 0.18);
}
.ofr-image-gallery.is-cluster-style-collage .ofr-image-collage__item.is-c .ofr-image-collage__media{
  box-shadow: var(--ofr-shadow-lg), 0 20px 44px rgba(var(--ofr-ocean-darkest-rgb), 0.22);
}
.ofr-image-gallery.is-cluster-style-collage .ofr-image-collage__item.is-d .ofr-image-collage__media{
  box-shadow: var(--ofr-shadow-lg), 0 26px 56px rgba(var(--ofr-ocean-darkest-rgb), 0.26);
}

/* Keep A untouched (no scroll motion) */
.ofr-image-gallery.is-cluster-style-collage .ofr-image-collage__item.is-a .ofr-image-collage__media{
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

/* COLLAGE 3 positions (dialled-in) */
.ofr-image-gallery.is-cluster.is-cluster-style-collage.is-collage-3 .ofr-image-collage__item.is-a{
  top: 10%;
  right: -1%;
  width: 79%;
  z-index: 1;
}
.ofr-image-gallery.is-cluster.is-cluster-style-collage.is-collage-3 .ofr-image-collage__item.is-b{
  top: 3%;
  left: -1%;
  width: 40%;
  z-index: 3;
  transform: translateX(4%);
}
.ofr-image-gallery.is-cluster.is-cluster-style-collage.is-collage-3 .ofr-image-collage__item.is-c{
  top: 52%;
  left: 3%;
  width: 32%;
  z-index: 4;
  transform: translateX(5%);
}

/* COLLAGE 4 positions */
.ofr-image-gallery.is-cluster.is-cluster-style-collage.is-collage-4 .ofr-image-collage__item.is-a{
  top: 12%;
  right: 12%;
  width: 76%;
  z-index: 1;
}
.ofr-image-gallery.is-cluster.is-cluster-style-collage.is-collage-4 .ofr-image-collage__item.is-b{
  top: 5%;
  left: 0%;
  width: 33%;
  z-index: 4;
  transform: translateX(4%);
}
.ofr-image-gallery.is-cluster.is-cluster-style-collage.is-collage-4 .ofr-image-collage__item.is-c{
  bottom: 5%;
  left: 3%;
  width: 28%;
  z-index: 5;
  transform: translateX(5%);
}
.ofr-image-gallery.is-cluster.is-cluster-style-collage.is-collage-4 .ofr-image-collage__item.is-d{
  top: 35%;
  right: 0%;
  width: 30%;
  z-index: 6;
  transform: translateY(-6%);
}

/* Mobile behaviour */
@media (max-width: 768px){

  /* GRID (no overlap) */
  .ofr-image-gallery.is-cluster.is-cluster-style-collage.is-collage-mobile-grid .ofr-image-collage{
    position: static;
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: var(--ofr-ig-gap);
    overflow: visible;
  }

  .ofr-image-gallery.is-cluster.is-cluster-style-collage.is-collage-mobile-grid .ofr-image-collage__item{
    position: static;
    width: auto !important;
    height: auto !important;
    transform: none !important;
  }

  /* SOFT = desktop baseline */
  .ofr-image-gallery.is-cluster.is-cluster-style-collage.is-collage-mobile-soft .ofr-image-collage{
    aspect-ratio: 1 / 1;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .ofr-image-gallery.is-cluster-style-collage .ofr-image-collage__media,
  .ofr-image-gallery.is-cluster-style-collage .ofr-image-collage__item{
    transform: none !important;
  }
}

/* =====================================
   STACK (click-to-front, cycles order)
===================================== */

.ofr-image-gallery.is-stack{
  width: 100%;
}

/* Constrain width to allow more spread + centre the whole stack */

/* =====================================
   STACK — desktop-only left bias
   (does not affect mobile / coarse pointers)
===================================== */

@media (min-width: 992px){
  .ofr-image-gallery.is-stack .ofr-image-stack{
    width: 100%;
  	max-width: 74%;
    margin-left: 4%;          /* stop centering */
    margin-right: auto;
  }
}


@media (max-width: 768px){
  .ofr-image-gallery.is-stack .ofr-image-stack{
    max-width: 92%;
    margin:auto;  
  }
}

/* Stack canvas */
.ofr-image-stack{
  position: relative;
  width: 100%;
  height: auto; /* JS sets an explicit height */
  padding-bottom: var(--ofr-space-xs);
}

/* Buttons as cards */
.ofr-image-stack__item{
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  max-width: 100%;

  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;

  z-index: var(--ofr-stack-z, 1);

  /* Pop bump (JS toggles) */
  --ofr-stack-pop: 0;

  transform:
    translate3d(var(--ofr-stack-x, 0px), var(--ofr-stack-y, 0px), 0)
    rotate(var(--ofr-stack-r, 0deg))
    scale(calc(var(--ofr-stack-s, 1) + var(--ofr-stack-pop)));

  transform-origin: 50% 0;

  transition:
    transform 220ms ease,
    filter 220ms ease;

  pointer-events: auto;
}

/* Kill theme hover bleed (buttons) */
.ofr-image-stack__item:hover,
.ofr-image-stack__item:focus,
.ofr-image-stack__item:active{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Media defines hit box + provides “card” look */
.ofr-image-stack__media{
  display: block;
  width: 100%;
  max-width: 100%;
  border-radius: var(--ofr-ig-radius);
  overflow: hidden;
  box-shadow: var(--ofr-shadow-lg);
  position: relative;
  background: transparent !important;
}

/* Subtle inner edge */
.ofr-image-stack__media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: var(--ofr-ig-radius);
  box-shadow: inset 0 0 0 1px rgba(var(--ofr-ocean-darkest-rgb), 0.06);
}

/* Active/top */
.ofr-image-stack__item.is-active{
  filter: none;
}

/* Slightly de-emphasise non-active */
.ofr-image-stack__item:not(.is-active){
  filter: saturate(0.98);
  opacity: 0.985;
}

/* Aspect presets for STACK mode */
.ofr-image-gallery.is-stack.is-aspect-all-1x1 .ofr-image-stack__media{
  aspect-ratio: 1 / 1;
}
.ofr-image-gallery.is-stack.is-aspect-top-16x9-bottom-1x1 .ofr-image-stack__media{
  aspect-ratio: 16 / 9;
}

/* =====================================
   STACK — Accessibility focus ring
   - Visible keyboard focus
   - Keeps your existing shadow style
===================================== */

.ofr-image-stack__item:focus{
  outline: none;
}

.ofr-image-stack__item:focus-visible .ofr-image-stack__media{
  /* keep existing shadow + add a focus halo */
  box-shadow:
    var(--ofr-shadow-lg),
    0 0 0 4px rgba(var(--ofr-accent-sky-rgb, 122,209,249), 0.35);
}


/* =====================================
   STACK — Plus icon indicator (inverted colours)
   - Shown only on exposed cards (not top)
===================================== */

.ofr-image-stack__item::before{
  content:"";
  position:absolute;
  left: 6px;
  bottom: 6px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--ofr-white);
  box-shadow: 0 6px 10px rgba(var(--ofr-ocean-darkest-rgb), 0.18);
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 160ms ease, transform 160ms ease;
  pointer-events: none;
  z-index: 2;
}

.ofr-image-stack__item::after{
  content:"";
  position:absolute;
  left: 6px;
  bottom: 6px;
  width: 22px;
  height: 22px;

  background: rgba(var(--ofr-ocean-dark-rgb, 7,57,70), 1);

  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 5a1 1 0 0 1 2 0v6h6a1 1 0 1 1 0 2h-6v6a1 1 0 1 1-2 0v-6H5a1 1 0 1 1 0-2h6V5z'/%3E%3C/svg%3E") center/14px 14px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 5a1 1 0 0 1 2 0v6h6a1 1 0 1 1 0 2h-6v6a1 1 0 1 1-2 0v-6H5a1 1 0 1 1 0-2h6V5z'/%3E%3C/svg%3E") center/14px 14px no-repeat;

  opacity: 0;
  transform: translateY(5px);
  transition: opacity 160ms ease, transform 160ms ease;
  pointer-events: none;
  z-index: 3;
}

.ofr-image-stack__item:not(.is-active)::before,
.ofr-image-stack__item:not(.is-active)::after{
  opacity: 1;
  transform: translateY(0);
}

/* =====================================
   STACK hover UX (DESKTOP ONLY)
   - Prevent “sticky hover” on touch devices
===================================== */

@media (hover: hover) and (pointer: fine){

  /* Top card: no hover behaviour */
  .ofr-image-stack__item.is-active:hover,
  .ofr-image-stack__item.is-active:focus-visible,
  .ofr-image-stack__item.is-active:focus-within{
    transform:
      translate3d(var(--ofr-stack-x, 0px), var(--ofr-stack-y, 0px), 0)
      rotate(var(--ofr-stack-r, 0deg))
      scale(calc(var(--ofr-stack-s, 1) + var(--ofr-stack-pop)));
  }

  /* Lower/exposed cards pull DOWN */
  .ofr-image-stack__item:not(.is-active):hover,
  .ofr-image-stack__item:not(.is-active):focus-visible,
  .ofr-image-stack__item:not(.is-active):focus-within{
    transform:
      translate3d(
        var(--ofr-stack-x, 0px),
        calc(var(--ofr-stack-y, 0px) + 10px),
        0
      )
      rotate(var(--ofr-stack-r, 0deg))
      scale(calc(var(--ofr-stack-s, 1) + var(--ofr-stack-pop) + 0.01));
  }
}

/* Cursor intention */
.ofr-image-stack__item.is-active{ cursor: default; }
.ofr-image-stack__item:not(.is-active){ cursor: pointer; }


/* =====================================================
   STACK IMMUNITY LAYER
   Defends against global/mobile button styles (flex, padding, line-height)
   Scoped ONLY to the stack component.
===================================================== */

.ofr-image-stack > button.ofr-image-stack__item{
  /* neutralise theme button layouts */
  display: block !important;
  float: none !important;
  flex: none !important;
  align-items: initial !important;
  justify-content: initial !important;

  /* neutralise theme tap-target padding */
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  line-height: 0 !important;

  /* preserve your layout */
  width: 100% !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.ofr-image-stack > button.ofr-image-stack__item > .ofr-image-stack__media{
  display: block !important;
  width: 100% !important;
}

/* Default: let intrinsic image ratio define height (prevents collapse) */
.ofr-image-stack > button.ofr-image-stack__item img.ofr-image-stack__img{
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: initial !important;
}

/* Only “cover fill” when you explicitly use aspect-ratio frames */
.ofr-image-gallery.is-stack.is-aspect-all-1x1 .ofr-image-stack__media,
.ofr-image-gallery.is-stack.is-aspect-top-16x9-bottom-1x1 .ofr-image-stack__media{
  overflow: hidden;
}

.ofr-image-gallery.is-stack.is-aspect-all-1x1 .ofr-image-stack__img,
.ofr-image-gallery.is-stack.is-aspect-top-16x9-bottom-1x1 .ofr-image-stack__img{
  height: 100% !important;
  object-fit: cover !important;
}

/* =====================================================
   STACK WIDTH FIX (mobile)
   Prevent shrink-to-fit collapse when children are absolute
===================================================== */
@media (max-width: 768px){

  .ofr-image-gallery.is-stack{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .ofr-image-gallery.is-stack .ofr-image-stack{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}