/* ==========================================================================
   NAGA Concept — project-modal.css
   Modal chi tiết dự án + thư viện ảnh.

   Tách khỏi projects.css vì TRANG CHỦ cũng nạp file này: khối "Dự án nổi bật"
   dùng chung đúng modal đó. Để CSS nằm trong projects.css thì modal ở trang chủ
   sẽ không có style — đúng loại lỗi chỉ lộ ra khi bấm vào thẻ.

   Đi kèm assets/js/project-modal.js.
   ========================================================================== */

/* --- Modal chi tiết dự án ----------------------------------------------- */
.modal-box{
  width:min(860px,92vw);
  max-height:88vh;
  overflow:auto;
}
.modal-close{
  width:42px;
  height:42px;
  background:var(--paper);
}
/* --- Gallery trong modal ------------------------------------------------- */
.gallery{
  position:relative;
  border-bottom:1px solid var(--line);
}
.gallery-viewport{
  display:flex;
  overflow-x:auto;
  overflow-y:hidden;
  /* scroll-snap lo phần vuốt trên điện thoại — không cần JS bắt sự kiện touch */
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.gallery-viewport::-webkit-scrollbar{display:none}
.gallery-viewport:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:-2px;
}
.gallery-slide{
  position:relative;
  flex:0 0 100%;
  height:340px;
  margin:0;
  scroll-snap-align:start;
  background:
    linear-gradient(28deg, transparent 49.8%, rgba(0,0,0,.22) 50%, transparent 50.2%),
    linear-gradient(-28deg, transparent 49.8%, rgba(0,0,0,.16) 50%, transparent 50.2%),
    var(--paper-2);
}
/* KHÔNG lật scaleX các slide chẵn: thủ thuật đó chỉ để bốn khung gradient
   placeholder trông khác nhau. Với ảnh thật nó soi gương bản vẽ, và biến
   left:16px của caption thành bên phải — đè lên bộ đếm ảnh. */
.gallery-image{
  position:absolute;
  left:13%;
  right:13%;
  top:24%;
  height:42%;
  border:1px solid rgba(0,0,0,.7);
  background:
    linear-gradient(90deg, transparent 24%, rgba(0,0,0,.16) 25%, transparent 25.4%, transparent 49%, rgba(0,0,0,.16) 50%, transparent 50.4%, transparent 74%, rgba(0,0,0,.16) 75%, transparent 75.4%);
}
.gallery-slide figcaption{
  position:absolute;
  left:16px;
  bottom:16px;
  padding:7px 10px;
  background:var(--paper);
  border:1px solid var(--line);
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:10px;
  font-weight:700;
}

.gallery-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:42px;
  height:42px;
  min-height:0;
  padding:0;
  background:var(--paper);
  z-index:2;
}
.gallery-prev{left:14px}
.gallery-next{right:14px}
.gallery-nav[disabled]{
  opacity:.3;
  pointer-events:none;
}
.gallery-counter{
  position:absolute;
  right:14px;
  bottom:14px;
  padding:7px 10px;
  background:var(--paper);
  border:1px solid var(--line);
  font-size:10px;
  letter-spacing:.1em;
  font-weight:800;
  z-index:2;
}

.gallery-thumbs{
  display:flex;
  gap:8px;
  padding:12px 14px;
  overflow-x:auto;
  border-bottom:1px solid var(--line);
  scrollbar-width:none;
}
.gallery-thumbs::-webkit-scrollbar{display:none}
.gallery-thumb{
  flex:0 0 74px;
  height:52px;
  min-height:0;
  padding:0;
  border:1px solid var(--line);
  background:
    linear-gradient(28deg, transparent 49.4%, rgba(0,0,0,.22) 50%, transparent 50.6%),
    var(--paper-2);
  opacity:.5;
  transition:opacity .18s;
}
.gallery-thumb:hover{
  opacity:.85;
  background:
    linear-gradient(28deg, transparent 49.4%, rgba(0,0,0,.22) 50%, transparent 50.6%),
    var(--paper-2);
}
.gallery-thumb[aria-selected="true"]{
  opacity:1;
  outline:2px solid var(--ink);
  outline-offset:-3px;
}

.modal-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.modal-content{padding:34px}
.modal-content h2{
  margin:0 0 16px;
  font-size:48px;
  line-height:1;
  letter-spacing:-.06em;
}
.modal-content p{
  line-height:1.65;
  max-width:760px;
  color:#333;
}
.detail-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);
  margin:24px 0;
}
.detail-grid div{
  padding:14px;
  border-right:1px solid var(--line);
  min-height:86px;
}
.detail-grid div:last-child{border-right:0}
.detail-grid strong{
  display:block;
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:8px;
}

/* --- Responsive --------------------------------------------------------- */
@media(max-width:680px){
  .detail-grid{grid-template-columns:1fr 1fr}
  .detail-grid div:nth-child(2){border-right:0}
  .detail-grid div{border-bottom:1px solid var(--line)}
  .detail-grid div:nth-child(3),.detail-grid div:nth-child(4){border-bottom:0}
  .modal-content{padding-left:22px;padding-right:22px}
  .gallery-slide{height:250px}
}