/* =========================================================
   portfolio.css — เฉพาะหน้ารีวิว & ผลงาน
   ========================================================= */

/* ---------- Filters ---------- */
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 40px; }
.filter {
  min-height: 44px; padding: 8px 22px; white-space: nowrap; border: 1px solid #3a3730; border-radius: 40px;
  font-size: .9rem; color: var(--c-text); transition: all .25s;
}
.filter:hover { border-color: var(--c-gold); color: var(--c-gold-light); }
.filter.is-active { background: var(--c-gold); border-color: var(--c-gold); color: var(--c-black); font-weight: 500; }

/* ---------- Gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.gallery-item { margin: 0; animation: fadeIn .5s var(--ease); }
.gallery-item[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0; transform: scale(.97); } }
.gallery-link { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; background: var(--c-charcoal); }
.gallery-link img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.gallery-link figcaption {
  position: absolute; inset: auto 0 0; padding: 40px 16px 14px;
  background: linear-gradient(transparent, rgba(0,0,0,.85));
  display: grid; gap: 2px; line-height: 1.3;
  opacity: 0; transform: translateY(10px); transition: all .35s var(--ease);
}
.gallery-cat { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-gold); }
.gallery-title { color: var(--c-white); font-size: .95rem; }
.gallery-link:hover img { transform: scale(1.06); }
.gallery-link:hover figcaption, .gallery-link:focus-visible figcaption { opacity: 1; transform: none; }
.gallery-empty { text-align: center; color: var(--c-muted); padding: 40px 0; }

/* ---------- Reviews slider ---------- */
.slider { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.slider-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 3); gap: 24px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 8px 4px 16px;
}
.slider-track::-webkit-scrollbar { display: none; }
.slider-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--c-black); transition: background .25s; }
.slider-btn:hover { background: rgba(0,0,0,.08); }
.slider-btn .icon { width: 28px; height: 28px; }

.review-card {
  scroll-snap-align: start;
  position: relative; padding: 28px 26px;
  background: var(--c-white);
  border: 2px solid var(--c-black);
  box-shadow: 6px 6px 0 var(--c-gold);
}
.review-card header { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.review-card h3 { margin: 0; font-size: 1rem; }
.review-card small { color: #8a857a; }
.avatar {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--c-black); color: var(--c-gold); font-weight: 600;
}
.review-card .stars { margin-bottom: 10px; }
.review-card p { font-size: .92rem; line-height: 1.65; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  display: grid; grid-template-columns: 60px 1fr 60px; align-items: center;
  background: rgba(5,5,5,.94); padding: 20px;
}
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; display: grid; justify-items: center; gap: 12px; }
.lightbox img { max-height: 82vh; width: auto; border: 1px solid var(--c-line); }
.lightbox figcaption { color: var(--c-text); }
.lightbox button { display: grid; place-items: center; width: 48px; height: 48px; color: var(--c-white); }
.lightbox button:hover { color: var(--c-gold); }
.lightbox .icon { width: 34px; height: 34px; }
.lb-close { position: absolute; top: 16px; right: 16px; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .slider-track { grid-auto-columns: calc((100% - 24px) / 2); }
}
/* มือถือ: แกลเลอรี 2 คอลัมน์ (รูปผลงานยังเห็นรายละเอียด และไม่ต้องเลื่อนยาวเกินไป)
   ปุ่มกรองเป็นแถบเลื่อนแนวนอน ไม่กินพื้นที่หลายแถว */
@media (max-width: 767px) {
  .filters {
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none;
    margin: 0 calc(var(--gutter) * -1) 28px; padding: 2px var(--gutter);
    scroll-snap-type: x proximity;
    -webkit-mask: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - 28px), transparent);
            mask: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - 28px), transparent);
  }
  .filters::-webkit-scrollbar { display: none; }
  .filter { flex: none; scroll-snap-align: start; padding-inline: 18px; }
  .gallery { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .gallery-link figcaption { opacity: 1; transform: none; padding: 28px 10px 10px; } /* จอสัมผัสไม่มี hover: แสดงชื่อเสมอ */
  .gallery-title { font-size: .85rem; }
  .slider { grid-template-columns: 1fr; }
  .slider-btn { display: none; }
  .slider-track { grid-auto-columns: 86%; gap: 16px; }
  .review-card { padding: 22px 20px; }
  /* Lightbox: รูปเต็มความกว้าง ปุ่มก่อนหน้า/ถัดไปอยู่ด้านล่าง */
  .lightbox { grid-template-columns: 1fr; padding: 64px 8px 88px; }
  .lightbox img { max-height: calc(100vh - 170px); max-height: calc(100dvh - 170px); }
  .lb-prev, .lb-next { position: absolute; bottom: 20px; width: 52px !important; height: 52px !important; border: 1px solid var(--c-line); border-radius: 50%; background: rgba(10,10,10,.8); }
  .lb-prev { left: calc(50% - 64px); }
  .lb-next { right: calc(50% - 64px); }
  .lb-close { top: 8px; right: 8px; }
}