/* ============================================
   GALLERY.CSS
   Desktop : mosaic grid (giữ nguyên)
   Mobile  : 1 hàng marquee chạy ngang vô tận
             Cột giữa (gallery-card-m) cao hơn
   ============================================ */

/* === Desktop: hover scale nhẹ === */
.gallery-img {
  transition: transform 0.55s cubic-bezier(0.32, 0, 0.26, 1);
}

@media (pointer: fine) {
  .gallery-img:hover {
    transform: scale(1.03);
  }
}

/* =====================================================================
   MOBILE — 1 hàng marquee ngang
   ===================================================================== */

/* Clip overflow ngang, align items bottom để cột cao/thấp đứng chung đáy */
.gallery-marquee-clip {
  overflow: hidden;
  width: 100%;
}

/* Track: 2 bộ ảnh đặt ngang nhau, animate translate-X */
.gallery-marquee-track {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  /* đứng chung đáy — như Topicals */
  width: max-content;
  animation: marquee-left 20s linear infinite;
}

/* Mỗi bộ ảnh */
.gallery-marquee-set {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

/* ─── Card nhỏ (cột 1 và 3) ─── */
.gallery-card-s {
  flex-shrink: 0;
  width: 42vw;
  overflow: hidden;
}

.gallery-card-s img {
  width: 100%;
  height: 56vw;
  /* Chiều cao thấp hơn */
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ─── Card cao (cột giữa) ─── */
.gallery-card-m {
  flex-shrink: 0;
  width: 42vw;
  overflow: hidden;
}

.gallery-card-m img {
  width: 100%;
  height: 72vw;
  /* Cao hơn 2 card bên = chiều sâu như Topicals */
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ─── Animation sang trái ─── */
@keyframes marquee-left {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }

  /* -50% vì có 2 bộ clone giống nhau */
}

/* Dừng khi user prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .gallery-marquee-track {
    animation: none;
    overflow-x: auto;
  }
}

/* =====================================================================
   DESKTOP — Kích thước của marquee card (Mobile First)
   ===================================================================== */
@media (min-width: 768px) {
  .gallery-card-s {
    width: 22vw;
    max-width: 320px;
  }

  .gallery-card-s img {
    height: 28vw;
    max-height: 420px;
  }

  .gallery-card-m {
    width: 22vw;
    max-width: 320px;
  }

  .gallery-card-m img {
    height: 36vw;
    max-height: 540px;
  }
}