/* หน้าผลงาน: หมวดละหนึ่งช่วง ตารางรูป 3:4 โชว์ 8 ช่องแรก ที่เหลือกดดูเพิ่ม · กดรูปเปิดภาพใหญ่ในหน้าต่างมืด (gallery.js) */

.wk{padding-block:60px}
.wk--tint{background:var(--sky-50)}
.wk-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:6px 20px;margin-bottom:24px}
.wk-head p{grid-column:1;color:var(--c-muted);max-width:38em}
.wk-n{grid-column:2;grid-row:1/3;align-self:end;padding:6px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);
  font-family:var(--f-head);font-weight:600;font-size:.95rem;color:var(--navy);white-space:nowrap}
.wk--tint .wk-n{background:var(--paper)}

.wk-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.wk-grid>li{position:relative;aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:var(--sky-100)}
.wk-grid.is-short>li:nth-child(n+9){display:none}
/* หมวดที่จำนวนลงตัว รูปแรกใหญ่ 2x2 โชว์ก่อน 9 ช่อง = เต็ม 3 แถว */
.wk-grid--lead>li:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.wk-grid--lead>li:first-child>.wk-item,.wk-grid--lead>li:first-child>video{position:absolute;inset:0;width:100%;height:100%}
.wk-grid--lead.is-short>li:nth-child(9){display:list-item}
.wk-tip{position:absolute;left:0;right:0;bottom:0;padding:30px 12px 10px;font-size:.88rem;font-weight:500;line-height:1.35;color:#fff;
  background:linear-gradient(to top,rgba(11,26,71,.88),rgba(11,26,71,0));transform:translateY(101%);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.wk-item::after{content:"+";position:absolute;top:10px;right:10px;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--navy);font-family:var(--f-head);font-weight:700;font-size:1.3rem;line-height:1;
  opacity:0;transform:scale(.7);transition:opacity .25s,transform .25s}
@media (hover:hover) and (pointer:fine){
  .wk-item:hover .wk-tip,.wk-item:focus-visible .wk-tip{transform:none}
  .wk-item:hover::after,.wk-item:focus-visible::after{opacity:1;transform:none}
}
.wk-item{display:block;height:100%}
.wk-item img,.wk-clip video{display:block;width:100%;height:100%;object-fit:cover}
.wk-item img{transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.wk-item:focus-visible{outline:3px solid var(--blue-600);outline-offset:-3px}
@media (hover:hover) and (pointer:fine){.wk-item:hover img{transform:scale(1.045)}}
.wk-badge{position:absolute;top:10px;left:10px;padding:2px 10px;border-radius:999px;background:var(--navy);color:#fff;
  font-family:var(--f-head);font-weight:600;font-size:.8rem}
.wk-cap{position:absolute;left:0;right:0;bottom:0;padding:34px 12px 10px;font-size:.9rem;font-weight:500;line-height:1.35;color:#fff;
  background:linear-gradient(to top,rgba(11,26,71,.85),rgba(11,26,71,0))}
.wk-more-row{display:flex;justify-content:center;margin-top:24px}

/* กดสลับหมวด (gallery.js ติดคลาส wk-filter): โชว์หมวดเดียว พื้นขาว รูปค่อย ๆ โผล่ตอนสลับ */
.wk-filter .wk{display:none;background:none}
.wk-filter .wk.is-on{display:block;animation:wkIn .4s ease}
.wk-filter .wk-n{background:var(--sky-50)}
@keyframes wkIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- หน้าต่างดูรูปใหญ่ ---------- */
.lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:transparent;color:#fff;overflow:hidden}
.lb::backdrop{background:rgba(5,12,34,.94)}
.lb-fig{margin:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:64px 96px 28px}
.lb-fig img{display:block;max-width:100%;max-height:calc(100vh - 150px);width:auto;height:auto;border-radius:10px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.7)}
.lb-fig figcaption{max-width:40em;text-align:center;color:#dbe6ff;font-size:1rem}
.lb-count{position:absolute;top:20px;left:22px;margin:0;font-family:var(--f-head);font-weight:600;color:#fff}
.lb-btn,.lb-close{position:absolute;display:grid;place-items:center;border-radius:50%;cursor:pointer;line-height:1;font-family:var(--f-head)}
.lb-btn{top:50%;transform:translateY(-50%);width:52px;height:52px;padding:0 0 4px;border:0;background:#fff;color:var(--navy);font-size:2.1rem;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.6)}
.lb-prev{left:22px}
.lb-next{right:22px}
.lb-close{top:12px;right:14px;width:48px;height:48px;padding:0 0 3px;border:1.5px solid rgba(255,255,255,.4);background:rgba(255,255,255,.1);
  color:#fff;font-size:1.9rem}
.lb-btn:focus-visible,.lb-close:focus-visible{outline:3px solid var(--sky-100);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .lb-btn:hover{background:var(--sky-100)}
  .lb-close:hover{background:#fff;color:var(--navy)}
}
html.lb-open{overflow:hidden}

@media (max-width:900px){
  /* แท็บเล็ต 3 คอลัมน์ โชว์ก่อน 9 ช่อง (3 แถวเต็ม) */
  .wk-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wk-grid.is-short>li:nth-child(9){display:list-item}
}
@media (max-width:560px){
  .wk{padding-block:44px}
  .wk-head{grid-template-columns:1fr}
  .wk-n{grid-column:1;grid-row:auto;justify-self:start;margin-top:6px}
  .wk-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .wk-grid.is-short>li:nth-child(9){display:none}
  .wk-grid--lead.is-short>li:nth-child(n+8){display:none}
  .wk-grid--lead>li:first-child{grid-row:auto;aspect-ratio:4/3}
  .wk-tip{display:none}
  .wk-more-row .btn{width:100%}
  /* มือถือ: ลูกศรลงไปอยู่ล่างจอ นิ้วโป้งเอื้อมถึง ปัดซ้ายขวาก็ได้ */
  .lb-fig{padding:60px 12px 96px}
  .lb-fig img{max-height:calc(100vh - 200px)}
  .lb-btn{top:auto;bottom:22px;transform:none}
  .lb-prev{left:calc(50% - 64px)}
  .lb-next{right:calc(50% - 64px)}
}