/* ============================================================
   PHOTO GALLERY — sections/gallery.css
   Bento-grid showcase of iconic Hội An imagery
   ============================================================ */

.gallery {
  background: #1d3433;
  padding-block: var(--section-py);
  position: relative;
  overflow: hidden;
}

/* Decorative corners */
.gallery::before,
.gallery::after {
  content: '';
  position: absolute;
  border-radius: var(--r-full);
  pointer-events: none;
}
.gallery::before {
  width: 320px; height: 320px;
  background: rgba(245,197,24,.04);
  top: -80px; left: -80px;
}
.gallery::after {
  width: 240px; height: 240px;
  background: rgba(212,154,50,.05);
  bottom: -60px; right: -60px;
}

/* ---- Header ---- */
.gallery__header {
  text-align: center;
  margin-bottom: var(--sp-10);
}
.gallery__header .section-label { color: var(--clr-hoian-yellow); }

.gallery__header .section-title {
  font-family: 'Nomiyola', 'Normiyola', 'Normiyola VIP', var(--ff-display);
  font-size: clamp(3rem, 6vw, 5rem);
  letter-spacing: 0.035em;
  line-height: 0.95;
}

/* ---- Bento Grid ---- */
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 280px 270px;
  gap: 12px;
}

/* Cell 1 — tall left (Chùa Cầu) */
.gallery-item:nth-child(1) {
  grid-column: 1 / 5;
  grid-row: 1 / 3;
}
/* Cell 2 — top center (Rừng Dừa) */
.gallery-item:nth-child(2) {
  grid-column: 5 / 9;
  grid-row: 1 / 2;
}
/* Cell 3 — top right (Phố Cổ lanterns) */
.gallery-item:nth-child(3) {
  grid-column: 9 / 13;
  grid-row: 1 / 2;
}
/* Cell 4 — bottom center-left (Chèo thúng) */
.gallery-item:nth-child(4) {
  grid-column: 5 / 8;
  grid-row: 2 / 3;
}
/* Cell 5 — bottom center-right (Làng gốm) */
.gallery-item:nth-child(5) {
  grid-column: 8 / 10;
  grid-row: 2 / 3;
}
/* Cell 6 — bottom right (Đèn lồng đêm) */
.gallery-item:nth-child(6) {
  grid-column: 10 / 13;
  grid-row: 2 / 3;
}

/* =======================
   Gallery Item
   ======================= */
.gallery-item {
  position: relative;
  border-radius: 0;
  clip-path: polygon(
    16px 0,
    calc(100% - 16px) 0,
    100% 16px,
    100% calc(100% - 16px),
    calc(100% - 16px) 100%,
    16px 100%,
    0 calc(100% - 16px),
    0 16px
  );
  background: transparent;
  overflow: hidden;
  cursor: pointer;
}
.gallery-item::before {
  display: none;
}

.gallery-item__image {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  clip-path: polygon(
    16px 0,
    calc(100% - 16px) 0,
    100% 16px,
    100% calc(100% - 16px),
    calc(100% - 16px) 100%,
    16px 100%,
    0 calc(100% - 16px),
    0 16px
  );
}
.gallery-item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.65s cubic-bezier(.25,.46,.45,.94);
}
.gallery-item:hover .gallery-item__image img {
  transform: scale(1.08);
}

/* Gradient overlay */
.gallery-item__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  clip-path: polygon(
    16px 0,
    calc(100% - 16px) 0,
    100% 16px,
    100% calc(100% - 16px),
    calc(100% - 16px) 100%,
    16px 100%,
    0 calc(100% - 16px),
    0 16px
  );
  background: linear-gradient(
    to top,
    rgba(10,10,20,.80) 0%,
    rgba(10,10,20,.05) 50%,
    transparent 100%
  );
  opacity: 0.6;
  transition: opacity 0.35s ease;
}
.gallery-item:hover .gallery-item__overlay {
  opacity: 1;
}

/* Info block */
.gallery-item__info {
  position: absolute;
  z-index: 3;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 18px 20px;
  transform: translateY(8px);
  opacity: 0.85;
  transition: var(--t-base);
}
.gallery-item:hover .gallery-item__info {
  transform: translateY(0);
  opacity: 1;
}

.gallery-item__vi {
  font-family: var(--ff-script);
  font-size: var(--fs-18);
  color: rgba(255,255,255,.75);
  line-height: 1;
  margin-bottom: 3px;
  display: block;
}
.gallery-item__title {
  font-family: var(--ff-serif);
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  color: var(--clr-white);
  line-height: var(--lh-snug);
}

/* Icon tag */
.gallery-item__tag {
  position: absolute;
  z-index: 3;
  top: 14px;
  right: 14px;
  background: rgba(0,0,0,.48);
  backdrop-filter: blur(8px);
  color: var(--clr-white);
  font-size: var(--fs-16);
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  transition: var(--t-base);
}
.gallery-item:hover .gallery-item__tag {
  background: var(--clr-primary);
}

/* ---- Footer note ---- */
.gallery__footer {
  text-align: center;
  margin-top: var(--sp-8);
  font-size: var(--fs-13);
  color: rgba(255,255,255,.45);
  letter-spacing: 0.03em;
}
.gallery__footer a {
  color: var(--clr-hoian-yellow);
  font-weight: var(--fw-semibold);
  border-bottom: 1px solid rgba(245,197,24,.35);
  padding-bottom: 1px;
  transition: var(--t-fast);
}
.gallery__footer a:hover {
  color: var(--clr-hoian-amber);
  border-color: var(--clr-hoian-amber);
}