/* =========================================================
   MIRACLE LIQUORS – GALLERY v2.0
   ========================================================= */

.ml-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ml-grid-gap-md);
  min-width: 0;
}

.ml-gallery__item {
  position: relative;
  overflow: hidden;
  min-width: 0;
  margin: 0;
  border-radius: var(--ml-radius-media);
  background: var(--ml-color-surface-muted);
}

.ml-gallery__image {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: var(--ml-gallery-ratio, var(--ml-ratio-landscape));
  object-fit: cover;
  object-position: var(--ml-gallery-image-position, center);
  transition: transform var(--ml-duration-slow) var(--ml-ease-standard);
}

.ml-gallery__caption {
  position: absolute;
  right: var(--ml-space-012);
  bottom: var(--ml-space-012);
  left: var(--ml-space-012);
  margin: 0;
  padding: var(--ml-space-008) var(--ml-space-012);
  border-radius: var(--ml-radius-subtle);
  background: rgba(24,49,41,.72);
  color: var(--ml-color-text-inverse);
  font-family: var(--ml-font-ui);
  font-size: var(--ml-text-caption);
  line-height: var(--ml-leading-ui);
}

.ml-gallery--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ml-gallery--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ml-gallery--compact { gap: var(--ml-space-012); }

.ml-gallery--editorial {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: var(--ml-space-016);
}
.ml-gallery--editorial .ml-gallery__item { grid-column: span 4; }
.ml-gallery--editorial .ml-gallery__item--wide { grid-column: span 8; }
.ml-gallery--editorial .ml-gallery__item--tall { grid-row: span 2; }
.ml-gallery--editorial .ml-gallery__item--feature {
  grid-column: span 8;
  grid-row: span 2;
}
.ml-gallery--editorial .ml-gallery__item--tall .ml-gallery__image,
.ml-gallery--editorial .ml-gallery__item--feature .ml-gallery__image {
  min-height: 100%;
  aspect-ratio: auto;
}

.ml-gallery--featured {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, .75fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
.ml-gallery--featured .ml-gallery__item:first-child {
  grid-row: 1 / span 2;
}
.ml-gallery--featured .ml-gallery__item:first-child .ml-gallery__image {
  min-height: 100%;
  aspect-ratio: auto;
}

.ml-gallery--split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ml-gallery--split .ml-gallery__image {
  aspect-ratio: var(--ml-ratio-portrait);
}

.ml-gallery--strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  grid-template-columns: none;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  padding-bottom: var(--ml-space-008);
}
.ml-gallery--strip .ml-gallery__item { scroll-snap-align: start; }

.ml-gallery--rounded .ml-gallery__item { border-radius: var(--ml-radius-panel); }
.ml-gallery--flush { gap: 0; }
.ml-gallery--flush .ml-gallery__item { border-radius: 0; }
.ml-gallery--dark .ml-gallery__item { background: rgba(255,255,255,.06); }

.ml-gallery__link {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.ml-gallery__link:focus-visible {
  outline: var(--ml-border-width-medium) solid var(--ml-color-accent);
  outline-offset: var(--ml-space-004);
}

@media (hover:hover) and (pointer:fine) {
  .ml-gallery__link:hover .ml-gallery__image {
    transform: scale(1.025);
  }
}

@media (max-width: 980px) {
  .ml-gallery,
  .ml-gallery--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ml-gallery--editorial {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ml-gallery--editorial .ml-gallery__item,
  .ml-gallery--editorial .ml-gallery__item--wide,
  .ml-gallery--editorial .ml-gallery__item--feature {
    grid-column: auto;
  }
}

@media (max-width: 680px) {
  .ml-gallery,
  .ml-gallery--2,
  .ml-gallery--4,
  .ml-gallery--split,
  .ml-gallery--featured,
  .ml-gallery--editorial {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .ml-gallery--featured .ml-gallery__item:first-child {
    grid-row: auto;
  }

  .ml-gallery__image,
  .ml-gallery--split .ml-gallery__image,
  .ml-gallery--featured .ml-gallery__item:first-child .ml-gallery__image {
    min-height: 0;
    aspect-ratio: var(--ml-ratio-landscape);
  }

  .ml-gallery--strip {
    grid-auto-columns: 82%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ml-gallery__image { transition: none; }
  .ml-gallery__link:hover .ml-gallery__image { transform: none; }
}