/* =========================================================
   Mizunara Studio Design System
   Components
   gallery.css
   Version 1.1

   Consolidated Stability Version
========================================================= */


/* =========================================================
   GALLERY BASE
========================================================= */

.ms-gallery {
  position: relative;

  width: 100%;
}


.ms-gallery-header {
  max-width: 720px;

  margin:
    0
    auto
    var(--ms-space-2xl);

  text-align: center;
}


/* =========================================================
   GRID
========================================================= */

.ms-gallery-grid {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(260px, 1fr)
    );

  gap: 1.5rem;

  width: 100%;

  margin-top: 3rem;
}


.ms-gallery-item {
  position: relative;

  overflow: hidden;

  border: none;

  border-radius: 22px;

  padding: 0;

  background: transparent;

  box-shadow:
    var(--ms-shadow-sm);

  cursor: zoom-in;

  -webkit-user-select: none;
  user-select: none;

  transition:
    transform 350ms ease,
    box-shadow 350ms ease;
}


.ms-gallery-item img,
.ms-gallery-item video {
  display: block;

  width: 100%;

  height: 100%;

  min-height: 260px;

  aspect-ratio: 1;

  object-fit: cover;

  -webkit-user-drag: none;

  pointer-events: none;

  transition:
    transform 450ms ease;
}


.ms-gallery-item:hover {
  transform:
    translateY(-6px);
}


.ms-gallery-item:hover img,
.ms-gallery-item:hover video {
  transform:
    scale(1.08);
}


/* =========================================================
   GRID OVERLAY
========================================================= */

.ms-gallery-item::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      transparent 50%,
      rgba(0, 0, 0, 0.18)
    );

  opacity: 0;

  pointer-events: none;

  transition:
    opacity 350ms ease;
}


.ms-gallery-item:hover::after {
  opacity: 1;
}


.ms-gallery-overlay {
  position: absolute;

  inset: 0;

  display: flex;

  align-items: flex-end;

  padding:
    var(--ms-space-lg);

  background:
    linear-gradient(
      180deg,
      transparent 35%,
      rgba(0, 0, 0, 0.45)
    );

  opacity: 0;

  pointer-events: none;

  transition:
    opacity
    var(--ms-transition-normal);
}


.ms-gallery-item:hover
.ms-gallery-overlay {
  opacity: 1;
}


.ms-gallery-caption {
  color: #ffffff;
}


.ms-gallery-caption-title {
  font-family:
    var(--ms-font-title);

  font-size:
    1.5rem;

  line-height:
    var(--ms-line-tight);
}


.ms-gallery-caption-text {
  margin-top:
    var(--ms-space-xs);

  color:
    rgba(
      255,
      255,
      255,
      0.78
    );

  font-size:
    var(--ms-text-sm);
}


/* =========================================================
   FEATURED
========================================================= */

.ms-gallery-featured {
  grid-column:
    span 2;

  grid-row:
    span 2;
}


.ms-gallery-featured img,
.ms-gallery-featured video {
  min-height:
    540px;
}


/* =========================================================
   MASONRY
========================================================= */

.ms-gallery-masonry {
  columns:
    3 260px;

  column-gap:
    var(--ms-space-md);
}


.ms-gallery-masonry
.ms-gallery-item {
  margin-bottom:
    var(--ms-space-md);

  break-inside:
    avoid;
}


/* =========================================================
   VARIANTS
========================================================= */

.ms-gallery-glass
.ms-gallery-item {
  background:
    rgba(
      255,
      255,
      255,
      0.5
    );

  border:
    var(--ms-border-soft);

  /*
    Light Glass.
    No backdrop-filter repetido.
  */

  backdrop-filter:
    none;

  -webkit-backdrop-filter:
    none;
}


.ms-gallery-luxury
.ms-gallery-item {
  border:
    var(--ms-border-gold);

  box-shadow:
    var(--ms-shadow-gold);
}


.ms-gallery-minimal
.ms-gallery-item {
  border:
    none;

  background:
    transparent;

  box-shadow:
    none;
}


.ms-gallery-dark
.ms-gallery-item {
  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.12
    );

  background:
    rgba(
      17,
      17,
      17,
      0.78
    );
}


/* =========================================================
   PHOTO CARD
========================================================= */

.ms-photo-card {
  position: relative;

  overflow: hidden;

  border-radius:
    var(--ms-radius-lg);

  box-shadow:
    var(--ms-shadow-md);
}


.ms-photo-card img {
  width: 100%;

  height: 100%;

  object-fit: cover;
}


.ms-photo-card::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      transparent 45%,
      rgba(0, 0, 0, 0.32)
    );

  opacity: 0;

  pointer-events: none;

  transition:
    opacity
    var(--ms-transition-normal);
}


.ms-photo-card:hover::after {
  opacity: 1;
}


/* =========================================================
   ZOOM ICON
========================================================= */

.ms-lightbox-trigger {
  cursor:
    zoom-in;
}


.ms-gallery-zoom-icon {
  position: absolute;

  top:
    var(--ms-space-md);

  right:
    var(--ms-space-md);

  z-index: 3;

  display: grid;

  place-items: center;

  width: 42px;

  height: 42px;

  border-radius:
    var(--ms-radius-full);

  color:
    var(--ms-color-primary);

  background:
    rgba(
      255,
      255,
      255,
      0.78
    );

  opacity: 0;

  transform:
    translateY(-8px);

  pointer-events:
    none;

  transition:
    opacity
      var(--ms-transition-normal),
    transform
      var(--ms-transition-normal);
}


.ms-gallery-item:hover
.ms-gallery-zoom-icon {
  opacity: 1;

  transform:
    translateY(0);
}


/* =========================================================
   CAROUSEL
========================================================= */

.ms-gallery-carousel {
  position: relative;

  width: 100%;

  margin-top:
    3rem;

  overflow: hidden;
}


/* =========================================================
   CAROUSEL VIEWPORT

   Modelo táctil único:

   pan-y permite desplazamiento vertical de la página,
   dejando el gesto horizontal disponible para Gallery.
========================================================= */

.ms-gallery-viewport {
  position: relative;

  width: 100%;

  overflow: hidden;

  padding-block:
    2.5rem;

  touch-action:
    pan-y;

  -webkit-user-select:
    none;

  user-select:
    none;

  cursor:
    default;
}


/* =========================================================
   TRACK
========================================================= */

.ms-gallery-track {
  display: flex;

  align-items: center;

  gap:
    clamp(
      1rem,
      2.5vw,
      2rem
    );

  width:
    max-content;

  transform:
    translate3d(
      0,
      0,
      0
    );

  transition:
    transform
      900ms
      cubic-bezier(
        0.22,
        0.61,
        0.36,
        1
      );
}


.ms-gallery-track.without-transition {
  transition:
    none;
}


/*
  Compatibilidad con versiones anteriores
  del Carousel que todavía puedan utilizar
  esta clase.
*/

.ms-gallery-track.is-dragging {
  transition:
    none;
}


/* =========================================================
   CAROUSEL SLIDE
========================================================= */

.ms-gallery-slide {
  position: relative;

  z-index: 1;

  flex:
    0 0
    clamp(
      260px,
      52vw,
      580px
    );

  overflow:
    hidden;

  border:
    0;

  border-radius:
    clamp(
      1.25rem,
      3vw,
      2rem
    );

  padding:
    0;

  background:
    linear-gradient(
      145deg,
      rgba(
        255,
        255,
        255,
        0.32
      ),
      rgba(
        240,
        228,
        214,
        0.28
      )
    );

  box-shadow:
    0 18px 44px
    rgba(
      45,
      36,
      29,
      0.12
    );

  opacity:
    0.42;

  transform:
    scale(0.88);

  filter:
    saturate(0.72)
    brightness(0.88);

  /*
    IMPORTANTE:

    No usamos manipulation aquí.
    Debe respetar el pan-y del viewport.
  */

  touch-action:
    pan-y;

  cursor:
    zoom-in;

  -webkit-user-select:
    none;

  user-select:
    none;

  transition:
    opacity
      700ms ease,
    transform
      900ms
      cubic-bezier(
        0.22,
        0.61,
        0.36,
        1
      ),
    filter
      700ms ease,
    box-shadow
      700ms ease;
}


/* =========================================================
   CAROUSEL IMAGE
========================================================= */

.ms-gallery-slide img {
  display: block;

  width:
    100%;

  height:
    100%;

  aspect-ratio:
    4 / 5;

  object-fit:
    cover;

  object-position:
    center;

  opacity:
    0;

  transform:
    scale(1.02);

  /*
    El botón .ms-gallery-slide recibe el click.
    La imagen nunca interfiere.
  */

  pointer-events:
    none;

  -webkit-user-select:
    none;

  user-select:
    none;

  -webkit-user-drag:
    none;

  -webkit-touch-callout:
    none;

  backface-visibility:
    hidden;

  -webkit-backface-visibility:
    hidden;

  transition:
    opacity
      320ms ease,
    transform
      1s
      cubic-bezier(
        0.22,
        0.61,
        0.36,
        1
      );
}


/* =========================================================
   IMAGE LOADING
========================================================= */

.ms-gallery-slide
img.is-loaded {
  opacity: 1;
}


.ms-gallery-slide
img.has-load-error {
  opacity: 0;
}


/* =========================================================
   ACTIVE SLIDE
========================================================= */

.ms-gallery-slide.is-active {
  z-index: 3;

  opacity:
    1;

  transform:
    scale(1);

  filter:
    none;

  box-shadow:
    0 32px 82px
    rgba(
      45,
      36,
      29,
      0.23
    );
}


.ms-gallery-slide.is-active img {
  transform:
    scale(1);
}


.ms-gallery-slide.is-before,
.ms-gallery-slide.is-after {
  z-index:
    2;
}


@media (hover: hover) {
  .ms-gallery-slide:hover img {
    transform:
      scale(1.045);
  }
}


/* =========================================================
   ACTIVE OVERLAY
========================================================= */

.ms-gallery-slide::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      transparent 60%,
      rgba(
        24,
        17,
        12,
        0.15
      )
    );

  opacity: 0;

  pointer-events:
    none;

  transition:
    opacity
    400ms ease;
}


.ms-gallery-slide.is-active::after {
  opacity: 1;
}


/* =========================================================
   CAROUSEL CONTROLS
========================================================= */

.ms-gallery-controls {
  display: flex;

  justify-content: center;

  gap:
    1rem;

  margin-top:
    1rem;
}


.ms-gallery-controls button {
  display: grid;

  place-items: center;

  width:
    48px;

  height:
    48px;

  padding:
    0;

  border:
    1px solid
    rgba(
      200,
      164,
      107,
      0.24
    );

  border-radius:
    50%;

  color:
    var(--ms-color-text);

  background:
    rgba(
      255,
      255,
      255,
      0.62
    );

  box-shadow:
    0 12px 30px
      rgba(
        45,
        36,
        29,
        0.08
      ),
    inset 0 1px 0
      rgba(
        255,
        255,
        255,
        0.66
      );

  /*
    Light Glass.
    Evitamos backdrop-filter en controles repetidos.
  */

  backdrop-filter:
    none;

  -webkit-backdrop-filter:
    none;

  cursor:
    pointer;

  -webkit-appearance:
    none;

  appearance:
    none;

  -webkit-tap-highlight-color:
    transparent;

  touch-action:
    manipulation;

  transition:
    transform
      260ms ease,
    background-color
      260ms ease,
    box-shadow
      260ms ease;
}


.ms-gallery-controls button:hover {
  transform:
    translateY(-3px);

  background:
    rgba(
      255,
      255,
      255,
      0.82
    );

  box-shadow:
    0 16px 38px
    rgba(
      45,
      36,
      29,
      0.14
    );
}


/* =========================================================
   CONTROL SVG
========================================================= */

.ms-gallery-prev svg,
.ms-gallery-next svg {
  display:
    block;

  width:
    17px;

  height:
    17px;

  flex:
    0 0 17px;

  pointer-events:
    none;
}


/* =========================================================
   COUNTER
========================================================= */

.ms-gallery-counter {
  margin-top:
    1.4rem;

  color:
    var(--ms-color-muted);

  font-size:
    0.88rem;

  letter-spacing:
    0.12em;

  text-align:
    center;
}


/* =========================================================
   LIGHTBOX
========================================================= */

.ms-lightbox {
  position:
    fixed;

  inset:
    0;

  z-index:
    9999;

  display:
    flex;

  justify-content:
    center;

  align-items:
    center;

  padding:
    12px;

  background:
    rgba(
      0,
      0,
      0,
      0.9
    );

  /*
    El Lightbox bloquea scroll del body,
    por lo que este blur no participa
    en el scroll normal de la invitación.
  */

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

  -webkit-user-select:
    none;

  user-select:
    none;

  -webkit-touch-callout:
    none;

  overscroll-behavior:
    contain;

  /*
    El Lightbox completo pertenece a nuestra
    navegación táctil. No delegamos el gesto
    horizontal al navegador.
  */

  touch-action:
    none;

  transition:
    opacity 350ms ease,
    visibility 350ms ease;
}


.ms-lightbox.is-open {
  opacity:
    1;

  visibility:
    visible;

  pointer-events:
    auto;
}


/* =========================================================
   LIGHTBOX CONTENT

   Una sola definición.
   Imagen + caption forman parte del mismo layout.
========================================================= */

.ms-lightbox-content {
  position:
    relative;

  z-index:
    1;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  align-items:
    center;

  gap:
    0.85rem;

  width:
    min(
      92vw,
      1200px
    );

  max-height:
    calc(
      100dvh -
      24px
    );

  margin:
    0;

  padding:
    0;

  touch-action:
    none;

  -webkit-user-select:
    none;

  user-select:
    none;
}


/* =========================================================
   LIGHTBOX IMAGE
========================================================= */

.ms-lightbox-image {
  display:
    block;

  width:
    auto;

  height:
    auto;

  max-width:
    100%;

  max-height:
    calc(
      100dvh -
      130px
    );

  object-fit:
    contain;

  border-radius:
    22px;

  box-shadow:
    0 25px 80px
    rgba(
      0,
      0,
      0,
      0.45
    );

  /*
    Los touch listeners viven en el contenedor /
    overlay. La imagen no debe crear drag,
    selección ni callout.
  */

  pointer-events:
    none;

  -webkit-user-drag:
    none;

  -webkit-user-select:
    none;

  user-select:
    none;

  -webkit-touch-callout:
    none;

  touch-action:
    none;

  animation:
    msLightboxIn
    350ms ease;
}


/* =========================================================
   LIGHTBOX CAPTION
========================================================= */

.ms-lightbox-caption {
  position:
    static;

  width:
    100%;

  min-height:
    1.4em;

  margin:
    0;

  padding:
    0
    1rem;

  color:
    rgba(
      255,
      255,
      255,
      0.88
    );

  font-size:
    0.95rem;

  line-height:
    1.45;

  text-align:
    center;

  opacity:
    1;

  pointer-events:
    none;

  -webkit-user-select:
    none;

  user-select:
    none;
}


.ms-lightbox-caption[hidden] {
  display:
    none;
}


/* =========================================================
   LIGHTBOX BUTTONS
========================================================= */

.ms-lightbox-prev,
.ms-lightbox-next,
.ms-lightbox-close {
  position:
    absolute;

  z-index:
    5;

  display:
    flex;

  justify-content:
    center;

  align-items:
    center;

  width:
    56px;

  height:
    56px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.12
    );

  border-radius:
    50%;

  color:
    #ffffff;

  background:
    rgba(
      255,
      255,
      255,
      0.16
    );

  box-shadow:
    0 10px 28px
    rgba(
      0,
      0,
      0,
      0.18
    );

  backdrop-filter:
    none;

  -webkit-backdrop-filter:
    none;

  font-size:
    1.5rem;

  cursor:
    pointer;

  touch-action:
    manipulation;

  -webkit-user-select:
    none;

  user-select:
    none;

  -webkit-tap-highlight-color:
    transparent;

  transition:
    transform
      250ms ease,
    background-color
      250ms ease;
}


.ms-lightbox-prev:hover,
.ms-lightbox-next:hover,
.ms-lightbox-close:hover {
  transform:
    scale(1.08);

  background:
    rgba(
      255,
      255,
      255,
      0.26
    );
}


.ms-lightbox-prev {
  left:
    40px;
}


.ms-lightbox-next {
  right:
    40px;
}


.ms-lightbox-close {
  top:
    40px;

  right:
    40px;

  font-size:
    2rem;
}


/* =========================================================
   BODY LOCK
========================================================= */

body.ms-lightbox-open {
  overflow:
    hidden;

  overscroll-behavior:
    none;
}


/* =========================================================
   FOCUS
========================================================= */

.ms-gallery-controls
button:focus-visible,
.ms-gallery-slide:focus-visible,
.ms-gallery-item:focus-visible,
.ms-lightbox-prev:focus-visible,
.ms-lightbox-next:focus-visible,
.ms-lightbox-close:focus-visible {
  outline:
    2px solid
    var(--ms-color-primary);

  outline-offset:
    3px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .ms-gallery-featured {
    grid-column:
      span 2;
  }


  .ms-gallery-featured img,
  .ms-gallery-featured video {
    min-height:
      420px;
  }


  .ms-gallery-slide {
    flex-basis:
      clamp(
        250px,
        68vw,
        510px
      );
  }

}


/* =========================================================
   LIGHTBOX TABLET
========================================================= */

@media (max-width: 768px) {

  .ms-lightbox-prev {
    left:
      15px;
  }


  .ms-lightbox-next {
    right:
      15px;
  }


  .ms-lightbox-close {
    top:
      15px;

    right:
      15px;
  }


  .ms-lightbox-prev,
  .ms-lightbox-next,
  .ms-lightbox-close {
    width:
      46px;

    height:
      46px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .ms-gallery-grid {
    grid-template-columns:
      1fr;
  }


  .ms-gallery-featured {
    grid-column:
      auto;

    grid-row:
      auto;
  }


  .ms-gallery-featured img,
  .ms-gallery-featured video,
  .ms-gallery-item img,
  .ms-gallery-item video {
    min-height:
      260px;
  }


  .ms-gallery-overlay {
    opacity:
      1;

    padding:
      var(--ms-space-md);
  }


  .ms-gallery-zoom-icon {
    opacity:
      1;

    transform:
      none;
  }


  .ms-gallery-viewport {
    padding-block:
      1.8rem;
  }


  .ms-gallery-track {
    gap:
      1rem;
  }


  .ms-gallery-slide {
    flex-basis:
      82vw;

    border-radius:
      1.4rem;
  }


  .ms-lightbox-content {
    width:
      94vw;

    max-height:
      calc(
        100dvh -
        18px
      );
  }


  .ms-lightbox-image {
    max-height:
      calc(
        100dvh -
        115px
      );
  }


  .ms-lightbox-caption {
    padding:
      0
      3.5rem;

    font-size:
      0.88rem;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

  .ms-gallery-slide {
    flex-basis:
      86vw;
  }

}


/* =========================================================
   LIGHTBOX ANIMATION
========================================================= */

@keyframes msLightboxIn {

  from {
    opacity:
      0;

    transform:
      scale(0.94);
  }


  to {
    opacity:
      1;

    transform:
      scale(1);
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (
  prefers-reduced-motion:
  reduce
) {

  .ms-gallery-track,
  .ms-gallery-slide,
  .ms-gallery-slide img,
  .ms-gallery-item,
  .ms-gallery-item img,
  .ms-lightbox-image {
    animation:
      none !important;

    transition:
      none !important;
  }

}