/* departments.css — กลุ่มบริหาร 4 ฝ่าย — "Modern: floating cards + gradients".
   Shared chrome in site.css.  Palette: --accent #FFCE1B, --primary #1f1f1f. */

.container { max-width:1080px; }

/* ── overview: floating department cards ── */
.dept-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1.6rem; }
.dept-card { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; text-decoration:none; color:var(--text);
  background:#fff; border-radius:22px; padding:2.4rem 1.4rem 1.5rem; box-shadow:0 12px 30px rgba(0,0,0,.09);
  transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s; overflow:hidden; }
.dept-card::before { content:""; position:absolute; inset:0 0 auto 0; height:90px; background:linear-gradient(135deg,#1f1f1f,#444444); opacity:.96; }
.dept-card-badge { position:relative; width:84px; height:84px; border-radius:50%; display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:linear-gradient(160deg,#fff3b0,#ffd95b); box-shadow:0 8px 20px rgba(0,0,0,.28); border:4px solid #fff; }
.dept-card-badge span { font-size:2.3rem; }
.dept-card-badge img { width:100%; height:100%; object-fit:cover; }
.dept-card strong { display:block; color:var(--primary); font-size:1.08rem; margin-top:1rem; }
.dept-card small { color:#777; font-size:.84rem; line-height:1.65; margin-top:.45rem; flex:1; }
.dept-card-cta { display:inline-block; margin-top:1.1rem; padding:.45rem 1.1rem; border-radius:30px; font-size:.8rem; font-weight:700;
  color:var(--primary); background:linear-gradient(135deg,#ffe375,#ffce1b); box-shadow:0 4px 12px rgba(255,206,27,.4); transition:.2s; }
.dept-card:hover { transform:translateY(-8px); box-shadow:0 26px 48px rgba(0,0,0,.2); }
.dept-card:hover .dept-card-cta { transform:translateY(-1px); box-shadow:0 7px 16px rgba(255,206,27,.55); }

.dept-empty { color:#aaa; padding:1.2rem 0; text-align:center; }

/* ── single department: header (clean but with character — yellow/black, no purple) ── */
.dept-block { background:#fff; border-radius:18px; box-shadow:0 10px 30px rgba(0,0,0,.09); overflow:hidden; margin-bottom:2rem; border:1px solid #eee; }
.dept-head { position:relative; display:flex; align-items:center; gap:1.4rem; padding:1.9rem 2rem 1.7rem 2.3rem;
  background:linear-gradient(135deg,#fffdf4 0%,#fff2c4 100%); border-bottom:1px solid #f0e8c8; }
.dept-head::before { content:""; position:absolute; left:0; top:0; bottom:0; width:7px; background:linear-gradient(180deg,#ffe066,#ffb300); }
.dept-head::after { content:""; position:absolute; top:-30%; right:-4%; width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,206,27,.35), transparent 70%); pointer-events:none; }
.dept-badge { position:relative; width:76px; height:76px; border-radius:20px; flex-shrink:0; display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:linear-gradient(160deg,#2b2b2b,#454545); box-shadow:0 8px 20px rgba(0,0,0,.28); border:2px solid #fff; }
.dept-badge .dept-emoji { font-size:2.2rem; }
.dept-badge img { width:100%; height:100%; object-fit:cover; }
.dept-head-text { position:relative; }
.dept-head-text h3 { font-size:1.6rem; color:var(--primary); font-weight:700; line-height:1.2; }
.dept-head-text p { font-size:.94rem; color:#6f6a57; line-height:1.6; margin-top:.4rem; max-width:72ch; }
.dept-stats { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.8rem; }
.dstat { font-size:.76rem; font-weight:700; color:var(--accent); background:#1f1f1f; padding:.22rem .85rem; border-radius:30px; box-shadow:0 4px 10px rgba(0,0,0,.18); }

.dept-topics { display:flex; flex-direction:column; gap:1.4rem; padding:1.6rem 2rem; }
.dept-item { background:#fff; border:1px solid #f0edf4; border-radius:16px; padding:1.2rem 1.3rem; box-shadow:0 6px 18px rgba(0,0,0,.07); transition:box-shadow .25s; }
.dept-item:hover { box-shadow:0 14px 30px rgba(0,0,0,.13); }
.dept-item-title { font-size:1.08rem; color:var(--primary); font-weight:700; margin-bottom:.7rem; padding-left:.7rem; border-left:4px solid var(--accent); }
.dept-item-desc { font-size:.9rem; line-height:1.7; color:#666; margin:-.3rem 0 .8rem; }
.dept-item-text { font-size:.92rem; line-height:1.85; color:#444; }
.dept-item-text p { margin-bottom:.7rem; }
.dept-item-img { max-width:100%; border-radius:14px; display:block; box-shadow:0 8px 22px rgba(0,0,0,.12); }
.dept-file-btn { display:inline-flex; align-items:center; gap:.4rem; background:linear-gradient(135deg,#ffe375,#ffce1b); color:#3a2f00; font-weight:700; text-decoration:none; padding:.6rem 1.2rem; border-radius:30px; font-size:.88rem; box-shadow:0 5px 14px rgba(255,206,27,.4); margin:.25rem .5rem .25rem 0; }
.dept-file-btn:hover { transform:translateY(-1px); }
.dept-pdf { width:100%; height:520px; border:1px solid #ece9f1; border-radius:14px; margin-top:.7rem; display:block; }
.dept-video { position:relative; padding-top:56.25%; border-radius:14px; overflow:hidden; box-shadow:0 8px 22px rgba(0,0,0,.18); margin:.3rem 0 .8rem; }
.dept-video-file { margin:.3rem 0 .8rem; }
.dept-video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.dept-video-file { width:100%; border-radius:14px; display:block; background:#000; }

/* ── topic images (1 หัวข้อ มี 1 รูป หรือหลายรูป) ── */
.dept-topic-imgs { margin-top:.2rem; }
/* many images in one topic → wrap and CENTER them */
.dept-topic-imgs.multi { display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; }
.dept-gallery-item { position:relative; display:block; border-radius:14px; overflow:hidden; cursor:zoom-in; background:#f3f1f6;
  box-shadow:0 8px 22px rgba(0,0,0,.12); transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s; }
.dept-gallery-item img { width:100%; height:auto; display:block; transition:transform .4s ease; }
.dept-topic-imgs:not(.multi) .dept-gallery-item { max-width:560px; margin:0 auto; }
.dept-topic-imgs.multi .dept-gallery-item { width:200px; aspect-ratio:3/4; }
.dept-topic-imgs.multi .dept-gallery-item img { height:100%; object-fit:cover; }

/* many files (pdf / video / link) in one topic → centered */
.dept-files-wrap { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.6rem; }
.dept-files-wrap .dept-pdf,
.dept-files-wrap .dept-video,
.dept-files-wrap .dept-video-file { flex:1 1 100%; }
.dept-gallery-item:hover { transform:translateY(-4px); box-shadow:0 16px 30px rgba(0,0,0,.2); }
.dept-gallery-item::after { content:"🔍"; position:absolute; top:10px; right:10px; width:32px; height:32px; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.6); color:#fff; border-radius:50%; font-size:.9rem; opacity:0; transition:opacity .25s; }
.dept-gallery-item:hover::after { opacity:1; }

/* ── gallery lightbox ── */
.dept-lb { position:fixed; inset:0; z-index:100001; display:none; align-items:center; justify-content:center; gap:.5rem; padding:2rem; background:rgba(10,10,12,.93); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); }
.dept-lb.open { display:flex; }
.dept-lb-fig { margin:0; max-width:90vw; max-height:88vh; display:flex; flex-direction:column; align-items:center; gap:.7rem; }
.dept-lb-fig img { max-width:90vw; max-height:80vh; object-fit:contain; border-radius:12px; box-shadow:0 16px 50px rgba(0,0,0,.6); }
.dept-lb-fig figcaption { color:#fff; font-size:.9rem; text-align:center; max-width:80vw; }
.dept-lb-fig figcaption #dlbCap { display:block; font-size:1.15rem; font-weight:700; color:var(--accent); }
.dept-lb-fig figcaption #dlbDesc { display:block; font-size:.92rem; line-height:1.65; color:rgba(255,255,255,.85); margin-top:.35rem; white-space:pre-line; }
.dept-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; }
.dept-lb-close:hover { background:var(--accent); color:#1f1f1f; }
.dept-lb-nav { width:54px; height:54px; border-radius:50%; border:2px solid rgba(255,255,255,.4); background:rgba(255,255,255,.08); color:#fff; font-size:2rem; line-height:1; cursor:pointer; flex-shrink:0; transition:.2s; }
.dept-lb-nav:hover { background:var(--accent); color:#1f1f1f; border-color:var(--accent); }
.dept-lb-count { position:absolute; bottom:1.3rem; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.75); font-size:.85rem; font-variant-numeric:tabular-nums; }

@media (max-width:600px) {
  .dept-head { flex-direction:column; text-align:center; padding:1.6rem 1.3rem; }
  .dept-stats { justify-content:center; }
  .dept-topics { padding:1.3rem; }
  .dept-topic-imgs.multi { gap:.8rem; }
  .dept-topic-imgs.multi .dept-gallery-item { width:140px; }
  .dept-pdf { height:360px; }
  .dept-lb { padding:1rem; }
  .dept-lb-nav { width:42px; height:42px; font-size:1.5rem; }
}