/* ==========================================================================
   MWI Animated Album  --  portfolio child pages only (50-55)
   Recreates the 21st.dev "animated testimonials" stacked-photo deck.
   Isolated file: every selector is namespaced under .mwi-album, so it can
   never touch the header, hero, or any other existing component.
   The photos/text themselves stay ordinary Elementor widgets.
   ========================================================================== */

.mwi-album{
  --mwi-al-ease: cubic-bezier(.42,0,.58,1); /* framer easeInOut */
  --mwi-al-dur: .4s;
}

/* ---- layout: photos left, copy right; single column on mobile ---- */
.mwi-album .mwi-album-stage{
  position: relative;
  /* own stacking context: no card can ever paint over the fixed header */
  z-index: 0;
  isolation: isolate;
  width: 100%;
  /* capped height: tall enough to feel editorial, never page-dominating */
  height: clamp(360px, 40vw, 500px);
}

/* every photo widget becomes a stacked card */
.mwi-album .mwi-album-photo{
  position: absolute;
  /* horizontal inset leaves room for the rotated back cards to peek
     out at the edges without ever escaping the stage */
  inset: 0 42px;
  transform-origin: bottom center;
  opacity: 0;
  will-change: transform, opacity;
  transition:
    opacity var(--mwi-al-dur) var(--mwi-al-ease),
    transform var(--mwi-al-dur) var(--mwi-al-ease);
}
.mwi-album .mwi-album-photo .elementor-widget-container,
.mwi-album .mwi-album-photo figure,
.mwi-album .mwi-album-photo a{
  height: 100%;
  margin: 0;
}
.mwi-album .mwi-album-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 24px;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  box-shadow: 0 24px 60px -28px rgba(36,26,18,.55);
}

/* the active card sits in front, upright and full opacity */
.mwi-album .mwi-album-photo.is-active{ opacity: 1; }

/* one-shot lift of the incoming card (framer-motion y:[0,-80,0]) */
@keyframes mwiAlbumLift{
  0%   { transform: translateY(0)     scale(1) rotate(0deg); }
  50%  { transform: translateY(-80px) scale(1) rotate(0deg); }
  100% { transform: translateY(0)     scale(1) rotate(0deg); }
}
.mwi-album .mwi-album-photo.is-active.is-entering{
  animation: mwiAlbumLift var(--mwi-al-dur) var(--mwi-al-ease);
}

/* ---- copy column ---- */
.mwi-album .mwi-album-copy{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* per-word blur-in for the story line */
.mwi-album .mwi-word{
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(5px);
  transition: opacity .2s var(--mwi-al-ease),
              filter .2s var(--mwi-al-ease),
              transform .2s var(--mwi-al-ease);
}
.mwi-album .mwi-word.is-in{
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* ---- prev / next buttons ---- */
.mwi-album .mwi-album-nav{ display: flex; }
.mwi-album .mwi-album-btn{ cursor: pointer; }
.mwi-album .mwi-album-btn .elementor-icon{
  transition: transform .3s var(--mwi-al-ease);
}
.mwi-album .mwi-album-prev:hover .elementor-icon{ transform: rotate(12deg); }
.mwi-album .mwi-album-next:hover .elementor-icon{ transform: rotate(-12deg); }

/* counter */
.mwi-album .mwi-album-count{
  font-variant-numeric: tabular-nums;
  letter-spacing: .12em;
}

/* ---- mobile ---- */
@media (max-width: 767px){
  /* buttons sit directly beneath the photo on mobile only:
     the copy column follows the stage, so pulling the nav to the front
     of that column places it right under the image. */
  .mwi-album .mwi-album-copy .mwi-album-nav{
    order: -1;
    justify-content: center;
    margin-bottom: 4px;
  }
  .mwi-album .mwi-album-stage{ height: clamp(320px, 92vw, 430px); }
  .mwi-album .mwi-album-photo{ inset: 0 26px; }
  .mwi-album .mwi-album-photo img{ border-radius: 18px; }
  @keyframes mwiAlbumLift{
    0%   { transform: translateY(0)     scale(1) rotate(0deg); }
    50%  { transform: translateY(-40px) scale(1) rotate(0deg); }
    100% { transform: translateY(0)     scale(1) rotate(0deg); }
  }
}

/* ---- accessibility: no motion ---- */
@media (prefers-reduced-motion: reduce){
  .mwi-album .mwi-album-photo{ transition: opacity .01ms !important; }
  .mwi-album .mwi-album-photo.is-active.is-entering{ animation: none !important; }
  .mwi-album .mwi-word{
    opacity: 1 !important; filter: none !important;
    transform: none !important; transition: none !important;
  }
}

/* ---- inside the Elementor editor, show the deck flat so it stays editable --- */
body.mwi-editor-ctx .mwi-album .mwi-album-stage{
  height: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
body.mwi-editor-ctx .mwi-album .mwi-album-photo{
  position: relative;
  inset: auto !important;
  opacity: 1;
  transform: none !important;
  width: 110px;
  animation: none !important;
}
body.mwi-editor-ctx .mwi-album .mwi-word{
  opacity: 1; filter: none; transform: none;
}


/* ==========================================================================
   Media-library source: the stage now holds ONE Elementor Basic Gallery
   widget. Neutralise the WP gallery grid and turn each .gallery-item into
   the same stacked card the JS drives.
   ========================================================================== */
/* the gallery WIDGET wrapper must fill the stage, otherwise its
   absolutely-positioned children collapse to zero height */
.mwi-album .mwi-album-stage > .elementor-widget-image-gallery,
.mwi-album .mwi-album-stage .mwi-album-gallery{
  position: absolute;
  inset: 0;
}
.mwi-album .mwi-album-stage .elementor-widget-container{ height: 100%; }

.mwi-album .mwi-album-stage .elementor-image-gallery,
.mwi-album .mwi-album-stage .gallery{
  position: absolute;
  inset: 0;
  margin: 0 !important;
  display: block;
}
.mwi-album .mwi-album-stage .gallery-item{
  position: absolute;
  inset: 0 42px;
  width: auto !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  transform-origin: bottom center;
  opacity: 0;
  will-change: transform, opacity;
  transition:
    opacity var(--mwi-al-dur) var(--mwi-al-ease),
    transform var(--mwi-al-dur) var(--mwi-al-ease);
}
.mwi-album .mwi-album-stage .gallery-item.is-active{ opacity: 1; }
.mwi-album .mwi-album-stage .gallery-item.is-active.is-entering{
  animation: mwiAlbumLift var(--mwi-al-dur) var(--mwi-al-ease);
}
.mwi-album .mwi-album-stage .gallery-icon,
.mwi-album .mwi-album-stage .gallery-item > div{
  height: 100%; margin: 0 !important; padding: 0 !important;
}
.mwi-album .mwi-album-stage .gallery-item img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  border-radius: 24px; display: block;
  border: none !important;
  user-select: none; -webkit-user-drag: none;
  box-shadow: 0 24px 60px -28px rgba(36,26,18,.55);
}
.mwi-album .mwi-album-stage .gallery-caption{ display: none !important; }

@media (max-width: 767px){
  .mwi-album .mwi-album-stage .gallery-item{ inset: 0 26px; }
  .mwi-album .mwi-album-stage .gallery-item img{ border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce){
  .mwi-album .mwi-album-stage .gallery-item{ transition: opacity .01ms !important; }
  .mwi-album .mwi-album-stage .gallery-item.is-active.is-entering{ animation: none !important; }
}
/* editor: lay the gallery out flat so images stay easy to swap */
body.mwi-editor-ctx .mwi-album .mwi-album-stage .elementor-image-gallery,
body.mwi-editor-ctx .mwi-album .mwi-album-stage .gallery{ position: relative; inset: auto; }
body.mwi-editor-ctx .mwi-album .mwi-album-stage .gallery-item{
  position: relative; inset: auto !important; opacity: 1;
  transform: none !important; width: 110px !important;
  display: inline-block; animation: none !important;
}

body.mwi-editor-ctx .mwi-album .mwi-album-stage > .elementor-widget-image-gallery,
body.mwi-editor-ctx .mwi-album .mwi-album-stage .mwi-album-gallery{ position: relative; inset: auto; }