/* ============ Creative Photography — Modern 2026 theme layer ============
   เลเยอร์ปรับโฉม UI/UX ยุคใหม่ ทับ styles.css + fx.css (additive, ถอดออกได้)
   โหลดหลังสุด: จัดการ typography, พื้นผิว, ชิป, แคปซูล nav, และ UX helpers */

/* ---------- foundations ---------- */
::selection{background:var(--red);color:#fff}
html{scrollbar-color:#3a3a3e var(--black)}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--black)}
::-webkit-scrollbar-thumb{background:#2c2c30;border-radius:8px;border:3px solid var(--black)}
::-webkit-scrollbar-thumb:hover{background:var(--red)}

/* anchor ไม่โดน nav บัง (UX จริง) */
section[id],header[id],footer[id]{scroll-margin-top:96px}

/* a11y: focus ชัดเจนเมื่อใช้คีย์บอร์ด */
a:focus-visible,button:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}

/* ---------- fluid display typography ---------- */
.hero h1{font-size:clamp(52px,8.2vw,124px);letter-spacing:-.01em}
.hero h1 .fx-ch{background:linear-gradient(180deg,#fff 52%,#9d9da3 130%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1 .fx-ch.red{background:linear-gradient(180deg,var(--red) 40%,#8f0d12 140%);-webkit-background-clip:text;background-clip:text;color:transparent}
.about h2{font-size:clamp(26px,3vw,38px)}
.adm h2{font-size:clamp(40px,5.6vw,72px);letter-spacing:-.015em}
.exh h2{font-size:clamp(38px,5.2vw,68px);letter-spacing:-.015em}
.sw h2{font-size:clamp(26px,3vw,40px)}
.stat .n{font-size:clamp(40px,4vw,58px);letter-spacing:-.02em}

/* ---------- section numbers (editorial 01–06) ---------- */
main,body{counter-reset:sec}
.section-pad .eyebrow::before{
  counter-increment:sec;content:"0" counter(sec);
  font-family:var(--f-mono);font-weight:700;font-size:11px;color:var(--red);
  margin-right:12px;padding-right:12px;border-right:1px solid currentColor;opacity:.9;
}

/* ---------- eyebrow → chip ---------- */
.eyebrow{
  display:inline-flex;align-items:center;
  padding:8px 16px;border-radius:999px;
  border:1px solid rgba(237,28,36,.35);
  background:rgba(237,28,36,.06);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}

/* ---------- nav: floating capsule เมื่อสกรอลล์ ---------- */
.nav{transition:background .35s,padding .35s,border-color .35s,top .35s,left .35s,right .35s,border-radius .35s,box-shadow .35s}
.nav.scrolled{
  top:12px;left:14px;right:14px;border-radius:20px;
  background:rgba(15,15,17,.72);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 50px -18px rgba(0,0,0,.75);
  backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);
}
.nav-links a.active{color:#fff}
.nav-links a.active::after{width:100%}
@media(max-width:1080px){
  .nav.menu-open,.nav.menu-open.scrolled{
    top:0;left:0;right:0;border-radius:0;box-shadow:none;border-color:transparent!important;
  }
}

/* ---------- soft-tech surfaces: มุมโค้ง + ขอบเรืองแสง ---------- */
.why-card,.ncard{border-radius:18px}
.why-card .ph,.ncard .nimg{border-radius:18px 18px 0 0}
.adm-card{border-radius:18px}
.adm-card.red{box-shadow:0 18px 46px -18px rgba(237,28,36,.55)}
.about-mid img,.about-right .studio,.adm-photo img{border-radius:18px}
.about-mid .redblock{border-radius:14px}
.laptop .screen{border-radius:18px 18px 0 0}
.exh-A svg polygon{filter:drop-shadow(0 0 40px rgba(237,28,36,.35))}
.fx-glare{border-radius:inherit}

/* รูป about: ขาวดำ → สีเมื่อ hover */
.about-mid img,.about-right .studio{transition:filter .6s ease}
.about-mid:hover img,.about-right .studio:hover{filter:none}

/* ---------- news card 2026 ---------- */
.ncard{border-color:rgba(255,255,255,.07)}
/* รูปข่าวเป็นสีตลอดเวลา (override ขาวดำ/hover-to-color ของดีไซน์เดิม) */
.ncard .nimg img,.ncard:hover .nimg img{filter:none!important}
.ncard .nimg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(11,11,12,.55));
  pointer-events:none;
}
.ncard .ncat{
  border-radius:999px;padding:7px 14px;
  background:rgba(237,28,36,.85);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 8px 22px -8px rgba(237,28,36,.7);
}
/* กันการ์ดข่าว "ยืด": จำกัดจำนวนบรรทัดหัวข้อ/คำบรรยายให้เท่ากัน
   (excerpt จาก Portfolio ยาวไม่เท่ากัน ทำให้การ์ดสูงต่างกันมาก) */
.ncard h3{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.84em;
}
.ncard p{
  flex:0 0 auto;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;
}
/* ดันปุ่ม "อ่านต่อ" ไปชิดล่างเสมอ โดยไม่ยืดเนื้อหา */
.ncard .nbody{gap:0}
.ncard .nmore{margin-top:auto;padding-top:16px}

/* ---------- Promo / Events banners ---------- */
.promo{background:var(--ink)}
.promo-head{margin-bottom:34px}
.promo-head h2{font-family:var(--f-thai-d);font-weight:600;font-size:clamp(26px,3vw,40px);color:#fff;margin-top:16px}
.promo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(460px,1fr));gap:20px}
.promo-card{
  position:relative;display:block;border-radius:20px;overflow:hidden;
  border:1px solid rgba(255,255,255,.08);text-decoration:none;color:#fff;background:#000;
  transition:transform .4s,box-shadow .4s;
}
.promo-card:hover{transform:translateY(-6px);box-shadow:0 26px 60px -22px rgba(0,0,0,.8),0 0 0 1px rgba(237,28,36,.4)}
.promo-img{width:100%;overflow:hidden;line-height:0}
.promo-img img{width:100%;height:auto;display:block;transition:transform .6s}
.promo-card:hover .promo-img img{transform:scale(1.04)}
.promo-cap{
  position:absolute;left:0;right:0;bottom:0;padding:24px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.85));
}
.promo-cap h3{font-family:var(--f-thai-d);font-weight:600;font-size:20px;line-height:1.35;text-shadow:0 2px 14px rgba(0,0,0,.7)}
.promo-go{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;color:#fff;white-space:nowrap;
  display:inline-flex;align-items:center;gap:8px;opacity:.9;transition:gap .25s,opacity .25s,color .25s;
}
.promo-card:hover .promo-go{gap:14px;color:#fff}
@media(max-width:640px){
  .promo-grid{grid-template-columns:1fr;gap:14px}
  .promo-cap{padding:16px}
  .promo-cap h3{font-size:16px}
  .promo-go span:not(.arw){display:none}
}

/* ---------- filter tabs → segmented chips ---------- */
.sw-tabs{gap:10px}
.sw-tabs button{
  padding:9px 18px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  color:var(--muted-d);background:transparent;
  transition:all .25s;
}
.sw-tabs button:hover{color:#fff;border-color:rgba(255,255,255,.4)}
.sw-tabs button.on{
  color:#fff;background:var(--red);border-color:var(--red);
  box-shadow:0 10px 26px -10px rgba(237,28,36,.7);
}
.sw-tabs button.on::after{display:none}

/* ---------- buttons: pill + glow ---------- */
.btn{border-radius:999px}
.btn-red{box-shadow:0 14px 36px -12px rgba(237,28,36,.65)}
.btn-red:hover{box-shadow:0 18px 46px -12px rgba(237,28,36,.85)}
.sw-view{border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:11px 20px;transition:all .25s}
.sw-view:hover{border-color:var(--red);background:rgba(237,28,36,.08)}

/* ---------- timeline: glass steps ---------- */
.tl-step{
  background:rgba(255,255,255,.55);
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;padding:22px 20px 20px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:transform .3s,box-shadow .3s;
}
.tl-step:hover{transform:translateY(-6px);box-shadow:0 22px 48px -20px rgba(0,0,0,.3)}
.timeline::before{top:48px}
.tl-step .dot{box-shadow:0 0 0 6px rgba(237,28,36,.06)}
.tl-step:hover .dot{box-shadow:0 0 0 8px rgba(237,28,36,.16),0 10px 26px -8px rgba(237,28,36,.6)}

/* ---------- hero spotlight (ตามเมาส์) ---------- */
.fx-spot{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .5s;
  background:radial-gradient(560px circle at var(--sx,60%) var(--sy,40%),rgba(255,255,255,.10),transparent 60%);
  mix-blend-mode:screen;
}
.hero:hover .fx-spot{opacity:1}
/* hero ไหลลงส่วนถัดไป */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:140px;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--black));
}

/* ---------- marquee: ตัวใหญ่ outline ---------- */
.fx-marquee{padding:26px 0;background:var(--black)}
.fx-marquee span{
  font-family:var(--f-disp);font-weight:800;font-size:30px;letter-spacing:.08em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.22);
}
.fx-marquee span b{color:var(--red);-webkit-text-stroke:0}

/* ---------- exhibition features ---------- */
.feat-item .fi{
  width:44px;height:44px;border-radius:14px;
  background:rgba(237,28,36,.08);border:1px solid rgba(237,28,36,.22);
  transition:all .3s;
}
.feat-item:hover .fi{background:var(--red);color:#fff;transform:translateY(-3px);box-shadow:0 12px 26px -10px rgba(237,28,36,.6)}

/* ---------- footer polish ---------- */
.foot-col a{transition:color .2s,padding-left .25s}
.foot-col a:hover{padding-left:8px;color:var(--red)!important}
.social a{border-radius:12px;transition:all .25s}
.social a:hover{background:var(--red);border-color:var(--red);transform:translateY(-4px);box-shadow:0 12px 26px -10px rgba(237,28,36,.6)}

/* ---------- back-to-top ---------- */
.fx-top{
  position:fixed;right:22px;bottom:22px;z-index:80;
  width:48px;height:48px;border-radius:50%;
  background:rgba(15,15,17,.8);border:1px solid rgba(237,28,36,.5);color:#fff;
  display:grid;place-items:center;cursor:pointer;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity .35s,transform .35s,background .25s,box-shadow .25s;
}
.fx-top.show{opacity:1;transform:none;pointer-events:auto}
.fx-top:hover{background:var(--red);box-shadow:0 14px 34px -10px rgba(237,28,36,.7)}

/* ---------- news grid บนมือถือ: แถวเลื่อนข้าง (UX นิ้วโป้ง) ---------- */
@media(max-width:640px){
  .news-grid{
    display:grid;grid-auto-flow:column;grid-auto-columns:82%;
    overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;padding-bottom:14px;
    scrollbar-width:none;
  }
  .news-grid::-webkit-scrollbar{display:none}
  .news-grid .ncard{scroll-snap-align:start}
  .fx-marquee span{font-size:20px}
  /* Timeline รับสมัคร: จอแคบ 3 คอลัมน์บีบจนการ์ดแตก → เรียงแนวตั้งแทน */
  .timeline{grid-template-columns:1fr;gap:14px}
  .timeline::before{display:none}   /* เส้นประแนวนอนไม่เหมาะกับแนวตั้ง */
  .tl-step{display:flex;flex-direction:column}
  .tl-step .dot{margin-bottom:14px}
  /* ปุ่มกลับขึ้นบน: ยกสูงพ้นปุ่ม SCROLL ของ Hero เพื่อไม่ให้ซ้อนทับ */
  .fx-top{right:16px;bottom:84px}
}

/* ---------- hero บนจอเล็ก/แคบ: กันหัวข้อล้นขอบจอด้านบน ----------
   จอ ≤768px หัวข้อ 2 บรรทัด + คำโปรย + ปุ่ม อาจสูงเกิน 100vh เมื่อ
   .hero ใช้ align-items:center (แบบเดิม) จะล้นเท่ากันทั้งบน-ล่าง
   ทำให้บรรทัดแรกโดนตัดขาดเหนือจอตั้งแต่โหลดหน้า (ยังไม่ได้เลื่อน)
   แก้โดยเปลี่ยนเป็นจัดชิดบน + เว้นระยะให้พ้นแถบเมนู แทน */
@media(max-width:768px){
  .hero{align-items:flex-start;padding-top:112px}
  .hero-inner{padding-bottom:64px}
  .hero h1{font-size:clamp(40px,13vw,64px)}
}
@media(max-width:400px){
  .hero{padding-top:100px}
  .hero h1{font-size:clamp(36px,12.5vw,52px)}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .fx-spot{display:none}
  .hero h1{color:#fff}
}