/* facilities.css — อาคารสถานที่ — cinematic image slider (adapted from preview.html),
   one self-contained slider per gallery section. Brand accent: --accent #FFCE1B. */

.fac-container { max-width:1180px; }
.fac-section-title { font-size:1.4rem; color:var(--primary); font-weight:700; margin:.4rem 0 1.1rem; padding-left:.8rem; border-left:5px solid var(--accent); }
.fac-section-title:not(:first-child) { margin-top:3rem; }

/* ── slider shell ── */
.fc-slider {
  --mx:0; --my:0;
  position:relative;
  width:100%;
  height:min(640px, 78vh);
  border-radius:30px;
  overflow:hidden;
  background:#020617;
  margin:0 auto 2.5rem;
  perspective:1200px;
  box-shadow:0 40px 90px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.1);
  color:#fff;
  transform-style:preserve-3d;
  transition:transform .25s ease;
  -webkit-user-select:none; user-select:none;
}
/* no dark wash — show the real photo colours; text legibility comes from
   the per-letter drop-shadow on .fc-content instead */
.fc-slider::after {    /* inner hairline frame */
  content:""; position:absolute; inset:16px; z-index:8; pointer-events:none;
  border-radius:22px; border:1px solid rgba(255,255,255,.16);
}

/* glow that follows the cursor inside the slider */
.fc-glow { position:absolute; z-index:1; width:300px; height:300px; border-radius:50%; pointer-events:none; opacity:.4; filter:blur(20px);
  transform:translate(-50%,-50%); left:50%; top:40%;
  background:radial-gradient(circle, rgba(255,206,27,.55), transparent 65%); transition:opacity .3s; }

/* ── slides ── */
.fc-slide { position:absolute; inset:0; opacity:0; pointer-events:none;
  transform:scale(1.08) translateX(10%) rotateY(-12deg);
  transition:opacity .9s ease, transform 1.2s cubic-bezier(.2,.9,.2,1); }
.fc-slide.active { opacity:1; pointer-events:auto; transform:scale(1) translateX(0) rotateY(0); z-index:3; }
.fc-slide.prev { transform:scale(1.04) translateX(-8%) rotateY(10deg); }
.fc-img { width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in;
  transform:translate(calc(var(--mx) * -22px), calc(var(--my) * -16px)) scale(1.12);
  transition:transform 1.2s ease; }
.fc-slide.active .fc-img { animation:fcZoom 7s ease forwards; }
@keyframes fcZoom {
  from { transform:translate(calc(var(--mx) * -22px), calc(var(--my) * -16px)) scale(1.2); }
  to   { transform:translate(calc(var(--mx) * -22px), calc(var(--my) * -16px)) scale(1.07); }
}

/* ── slide content (legible over real photo via strong drop-shadow) ── */
.fc-content { position:absolute; left:clamp(26px,6vw,72px); bottom:clamp(104px,17vh,140px); width:min(560px,80%); z-index:10; pointer-events:none; }
.fc-badge { display:inline-block; padding:8px 16px; border-radius:999px; background:rgba(0,0,0,.45); border:1px solid rgba(255,206,27,.7);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  color:var(--accent); font-size:.82rem; font-weight:700; letter-spacing:1px; margin-bottom:16px; opacity:0; transform:translateY(22px);
  text-shadow:0 2px 8px rgba(0,0,0,.9); }
.fc-h1 { font-size:clamp(2.1rem,5.5vw,4rem); line-height:1; font-weight:700; margin-bottom:14px;
  text-shadow:0 3px 14px rgba(0,0,0,.95), 0 1px 3px rgba(0,0,0,.9); opacity:0; transform:translateY(40px); }
.fc-name { font-size:clamp(1rem,2vw,1.3rem); font-weight:700; color:var(--accent); margin-bottom:10px;
  text-shadow:0 2px 10px rgba(0,0,0,.95), 0 1px 2px rgba(0,0,0,.9); opacity:0; transform:translateY(42px); }
.fc-p { font-size:clamp(.92rem,1.5vw,1.05rem); line-height:1.8; color:#fff; max-width:520px; white-space:pre-line;
  text-shadow:0 2px 10px rgba(0,0,0,.95), 0 1px 2px rgba(0,0,0,.9); opacity:0; transform:translateY(44px); }
.fc-slide.active .fc-badge { animation:fcUp .7s ease forwards .15s; }
.fc-slide.active .fc-h1   { animation:fcUp .8s ease forwards .28s; }
.fc-slide.active .fc-name { animation:fcUp .85s ease forwards .4s; }
.fc-slide.active .fc-p    { animation:fcUp .9s ease forwards .5s; }
@keyframes fcUp { to { opacity:1; transform:translateY(0); } }

/* big outline number top-right */
.fc-num { position:absolute; right:clamp(26px,6vw,70px); top:clamp(24px,5vw,60px); z-index:10;
  font-size:clamp(3rem,8vw,7rem); font-weight:800; line-height:1; color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.4); opacity:0; transform:translateY(-22px); }
.fc-slide.active .fc-num { animation:fcNum .8s ease forwards .35s; }
@keyframes fcNum { to { opacity:1; transform:translateY(0); } }

/* glass counter (top-right corner) */
.fc-glass { position:absolute; right:clamp(24px,5vw,64px); top:clamp(24px,5vw,60px); z-index:18; display:flex; align-items:center; gap:10px;
  padding:10px 15px; border-radius:999px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); color:rgba(255,255,255,.85); font-size:.8rem; font-variant-numeric:tabular-nums; }
.fc-pulse { width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 rgba(255,206,27,.6); animation:fcPulse 1.6s infinite; }
@keyframes fcPulse { 70% { box-shadow:0 0 0 12px transparent; } 100% { box-shadow:0 0 0 0 transparent; } }

/* thumbnails */
.fc-thumbs { position:absolute; left:clamp(26px,6vw,72px); bottom:34px; display:flex; gap:11px; z-index:20; max-width:calc(100% - 200px); overflow-x:auto; padding-bottom:6px; scrollbar-width:none; }
.fc-thumbs::-webkit-scrollbar { display:none; }
.fc-thumb { width:76px; height:50px; min-width:76px; border:none; border-radius:14px; overflow:hidden; cursor:pointer; position:relative; background:#111827; opacity:.55; transition:.35s ease; }
.fc-thumb img { width:100%; height:100%; object-fit:cover; }
.fc-thumb span { position:absolute; left:7px; bottom:5px; font-size:10px; color:#fff; font-weight:700; text-shadow:0 2px 8px #000; }
.fc-thumb.active { opacity:1; transform:translateY(-9px); box-shadow:0 16px 32px rgba(0,0,0,.45), 0 0 0 3px var(--accent); }

/* prev / next */
.fc-controls { position:absolute; right:clamp(26px,5vw,64px); bottom:40px; display:flex; gap:13px; z-index:20; }
.fc-nav { width:54px; height:54px; border:1px solid rgba(255,255,255,.18); border-radius:50%; color:#fff; font-size:26px; line-height:1; cursor:pointer;
  background:rgba(255,255,255,.12); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); transition:.35s ease; }
.fc-nav:hover { background:var(--accent); color:#111827; transform:translateY(-5px) scale(1.05); box-shadow:0 16px 40px rgba(255,206,27,.45); }

/* progress bar */
.fc-progress-wrap { position:absolute; left:0; right:0; bottom:0; height:5px; z-index:30; background:rgba(255,255,255,.12); }
.fc-progress { height:100%; width:0; background:var(--accent); box-shadow:0 0 20px var(--accent); }
.fc-progress.run { animation:fcLoad 6000ms linear forwards; }
@keyframes fcLoad { from { width:0; } to { width:100%; } }

/* ── full-image lightbox (real colours + caption) ── */
.fac-lb { position:fixed; inset:0; z-index:100001; display:none; align-items:center; justify-content:center; padding:2rem;
  background:rgba(8,8,12,.94); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.fac-lb.open { display:flex; }
.fac-lb-fig { margin:0; display:flex; flex-direction:column; align-items:center; gap:1rem; max-width:94vw; max-height:92vh; }
.fac-lb-fig img { max-width:94vw; max-height:78vh; object-fit:contain; border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.7); }
.fac-lb-fig figcaption { text-align:center; max-width:760px; color:#fff; }
.fac-lb-fig figcaption #facLbTitle { display:block; font-size:1.25rem; font-weight:700; color:var(--accent); }
.fac-lb-fig figcaption #facLbDesc { display:block; font-size:.95rem; line-height:1.7; color:rgba(255,255,255,.85); margin-top:.4rem; white-space:pre-line; }
.fac-lb-close { position:absolute; top:1.2rem; right:1.4rem; width:46px; height:46px; border-radius:50%; border:none; background:rgba(255,255,255,.16); color:#fff; font-size:1.3rem; cursor:pointer; transition:.2s; }
.fac-lb-close:hover { background:var(--accent); color:#111; }

@media (max-width:760px) {
  .fc-slider { height:560px; border-radius:22px; }
  .fc-content { bottom:140px; width:84%; }
  .fc-thumbs { max-width:calc(100% - 56px); }
  .fc-controls { bottom:86px; right:24px; }
  .fc-nav { width:46px; height:46px; font-size:22px; }
  .fc-glass { display:none; }
}