/* ===================================================== */
/* GALLERY HERO                                          */
/* Phần hero đầu trang Gallery.                          */
/* Bố cục desktop: chữ bên trái, ảnh lớn bên phải.       */
/* ===================================================== */

.gallery-hero {
  position: relative;
  min-height: 520px;
  display: grid;
  align-items: center;
}

/* Ảnh hero nằm bên phải trên desktop */
.gallery-hero__photo {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 64vw;
  border-radius: 0 0 0 80px;
  box-shadow: none;
}

/* Lớp phủ trên ảnh để chữ bên trái dễ đọc hơn */
.gallery-hero__photo::after {
  background:
    linear-gradient(
      90deg,
      rgba(249, 242, 232, 0.94),
      rgba(249, 242, 232, 0.22) 42%,
      rgba(33, 17, 7, 0.16)
    );
}

/* Khối nội dung chữ trong hero */
.gallery-hero__content {
  position: relative;
  z-index: 2;
  width: min(1280px, calc(100% - 72px));
  margin: 0 auto;
}


/* ===================================================== */
/* GALLERY TABS                                          */
/* Thanh filter danh mục ảnh.                            */
/* Dùng để lọc Food, Interior, Kitchen...                */
/* ===================================================== */

.gallery-tabs {
  position: relative;
  z-index: 3;
  width: min(990px, calc(100% - 72px));
  margin: -31px auto 24px;
  padding: 8px;
  border-radius: 999px;
  background: rgba(255, 250, 242, 0.94);
  box-shadow: var(--shadow-soft);
  overflow-x: auto;
}

/* Wrapper bên trong giúp các nút tab nằm cùng một hàng */
.gallery-tabs__inner {
  display: flex;
  min-width: 720px;
  justify-content: space-between;
  gap: 8px;
}


/* ===================================================== */
/* MASONRY GALLERY GRID                                  */
/* Lưới ảnh kiểu masonry bằng CSS Grid.                  */
/* Các tile có kích thước khác nhau để layout sinh động. */
/* ===================================================== */

.masonry {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 148px;
  gap: 10px;
}

/* Mỗi ảnh trong gallery */
.gallery-tile {
  position: relative;
  border: 0;
  border-radius: 10px;
  cursor: zoom-in;
  box-shadow: none;
  transition:
    transform 360ms ease,
    box-shadow 360ms ease;
}

/* Lớp phủ nhẹ phía dưới ảnh để ảnh có chiều sâu hơn */
.gallery-tile::after {
  background:
    linear-gradient(
      180deg,
      transparent 46%,
      rgba(33, 17, 7, 0.28)
    );
}

/* Hiệu ứng khi rê chuột vào ảnh */
.gallery-tile:hover {
  transform: scale(1.015);
  box-shadow: 0 18px 34px rgba(33, 17, 7, 0.18);
}

/* Class này được JavaScript dùng để ẩn ảnh khi filter */
.gallery-tile.is-filtered-out {
  display: none;
}

/* Các biến thể kích thước tile trong masonry grid */
.gallery-tile--wide {
  grid-column: span 5;
}

.gallery-tile--large {
  grid-column: span 3;
  grid-row: span 2;
}

.gallery-tile--medium {
  grid-column: span 4;
}

.gallery-tile--small {
  grid-column: span 3;
}

.gallery-tile--tall {
  grid-column: span 3;
  grid-row: span 2;
}


/* ===================================================== */
/* BEHIND THE SCENES                                     */
/* Section ảnh hậu trường / không khí nhà hàng.          */
/* ===================================================== */

.behind-scenes {
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  gap: 34px;
  align-items: center;
}

/* Dải ảnh nhỏ trong section Behind the Scenes */
.scene-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

/* Mỗi card ảnh nhỏ */
.scene-card {
  position: relative;
  min-height: 178px;
  border-radius: 12px;
  color: var(--color-white);
}

/* Lớp phủ tối phía dưới để chữ trên ảnh dễ đọc */
.scene-card::after {
  background:
    linear-gradient(
      180deg,
      transparent 30%,
      rgba(33, 17, 7, 0.76)
    );
}

/* Chữ caption nằm trên ảnh */
.scene-card span {
  position: absolute;
  z-index: 2;
  left: 18px;
  bottom: 16px;
  font-family: var(--font-display);
  font-size: 22px;
}


/* ===================================================== */
/* LIGHTBOX                                              */
/* Popup xem ảnh lớn khi khách click vào ảnh gallery.    */
/* JavaScript sẽ thêm class .is-open để mở popup.        */
/* ===================================================== */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 64px;
  gap: 16px;
  align-items: center;
  padding: 34px;
  background: rgba(33, 17, 7, 0.78);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}

/* Trạng thái đang mở của lightbox */
.lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Ảnh lớn trong lightbox */
.lightbox__image {
  width: min(980px, 100%);
  height: min(72vh, 720px);
  margin: 0 auto;
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
}

/* Nút đóng lightbox */
.lightbox__close {
  position: absolute;
  right: 26px;
  top: 22px;
}


/* ===================================================== */
/* TABLET RESPONSIVE                                     */
/* Tối ưu gallery cho màn hình nhỏ hơn 980px.            */
/* Hero chuyển từ layout ảnh bên phải sang ảnh bên dưới. */
/* ===================================================== */

@media (max-width: 980px) {
  .gallery-hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: auto;
    padding: 44px 0 0;
  }

  .gallery-hero__content {
    order: 1;
    width: min(100%, calc(100% - 34px));
  }

  .gallery-hero__photo {
    position: relative;
    order: 2;
    width: 100%;
    height: 360px;
    margin-top: 32px;
  }

  .gallery-tabs {
    width: min(100%, calc(100% - 34px));
  }

  .masonry {
    grid-template-columns: repeat(6, 1fr);
  }

  /* Trên tablet, các tile về kích thước đều hơn để tránh vỡ layout */
  .gallery-tile--wide,
  .gallery-tile--large,
  .gallery-tile--medium,
  .gallery-tile--small,
  .gallery-tile--tall {
    grid-column: span 3;
    grid-row: span 1;
  }

  .behind-scenes {
    grid-template-columns: 1fr;
  }
}


/* ===================================================== */
/* MOBILE RESPONSIVE                                     */
/* Tối ưu gallery cho điện thoại.                        */
/* Ảnh xếp một cột để dễ xem và không bị quá nhỏ.        */
/* ===================================================== */

@media (max-width: 640px) {
  .masonry,
  .scene-strip {
    grid-template-columns: 1fr;
    grid-auto-rows: 220px;
  }

  .gallery-tile--wide,
  .gallery-tile--large,
  .gallery-tile--medium,
  .gallery-tile--small,
  .gallery-tile--tall {
    grid-column: auto;
  }

  .lightbox {
    grid-template-columns: 42px 1fr 42px;
    padding: 18px;
  }
}