/* ============================================================
   DREAMZONE — STUDENT WORKS GALLERY
   All classes prefixed .sw- so nothing collides with home.css
   or the existing .gallery-* collage on this page.
   ============================================================ */

.sw-section{
  padding:80px 0;
  background:#fff;
  /* Skip rendering work for offscreen content -> faster paint */
  content-visibility:auto;
  contain-intrinsic-size:1200px;
}

.sw-inner{max-width:1240px;margin:0 auto;padding:0 24px;}

/* ---------- Header ---------- */
.sw-head{text-align:center;margin-bottom:36px;}
.sw-eyebrow{
  color:#c8174a;font-size:12px;font-weight:800;
  letter-spacing:2.4px;text-transform:uppercase;
}
.sw-head h2{
  font-family:'Outfit',system-ui,sans-serif;
  font-size:clamp(28px,4vw,40px);font-weight:800;
  color:#12121c;margin-top:10px;letter-spacing:-.5px;
}
.sw-head p{color:#8b8b98;margin-top:10px;font-size:15px;line-height:1.6;}

/* ---------- Filters ---------- */
.sw-filters{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  margin:0 0 34px;padding:0;list-style:none;
}
.sw-filter{
  border:1px solid #e8e8ef;background:#fff;color:#6b6b7b;
  padding:9px 18px;border-radius:999px;
  font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.sw-filter:hover{border-color:#d8d8e2;color:#12121c;}
.sw-filter[aria-pressed="true"]{
  background:#12121c;border-color:#12121c;color:#fff;
}
.sw-filter:focus-visible{outline:2px solid #c8174a;outline-offset:2px;}

/* ---------- Grid ---------- */
.sw-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:14px;
  margin:0;padding:0;list-style:none;
}

.sw-item{margin:0;}

.sw-card{
  display:block;position:relative;width:100%;
  padding:0;border:0;background:#f2f2f6;
  border-radius:14px;overflow:hidden;cursor:zoom-in;
  aspect-ratio:1/1;                   /* fixed box => zero CLS */
  transition:transform .35s cubic-bezier(.2,.7,.3,1),
             box-shadow .35s cubic-bezier(.2,.7,.3,1);
}
.sw-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(18,18,28,.16);
}
.sw-card:focus-visible{outline:2px solid #c8174a;outline-offset:3px;}

.sw-card img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
  background:#f2f2f6;
}
.sw-card:hover img{transform:scale(1.05);}

.sw-cap{
  position:absolute;inset:auto 0 0 0;
  padding:34px 16px 14px;text-align:left;
  background:linear-gradient(to top,rgba(10,10,18,.86),rgba(10,10,18,0));
  color:#fff;opacity:0;transform:translateY(8px);
  transition:opacity .3s ease,transform .3s ease;
  pointer-events:none;
}
.sw-card:hover .sw-cap,
.sw-card:focus-visible .sw-cap{opacity:1;transform:translateY(0);}
.sw-cap b{display:block;font-size:14px;font-weight:700;line-height:1.3;}
.sw-cap span{display:block;font-size:12px;opacity:.78;margin-top:3px;}

.sw-badge{
  position:absolute;top:12px;left:12px;
  background:rgba(255,255,255,.94);color:#12121c;
  font-size:10.5px;font-weight:800;letter-spacing:.4px;
  padding:5px 10px;border-radius:999px;
  backdrop-filter:blur(6px);
}

/* ---------- Footer / states ---------- */
.sw-foot{text-align:center;margin-top:34px;min-height:44px;}
.sw-more{
  background:#12121c;color:#fff;border:0;
  padding:13px 30px;border-radius:999px;
  font-size:14px;font-weight:800;font-family:inherit;cursor:pointer;
  transition:background .2s ease,transform .2s ease;
}
.sw-more:hover{background:#c8174a;transform:translateY(-2px);}
.sw-more:disabled{opacity:.55;cursor:default;transform:none;}
.sw-note{color:#a5a5b4;font-size:13px;}

.sw-skel{
  aspect-ratio:1/1;border-radius:14px;
  background:linear-gradient(100deg,#f0f0f4 30%,#e6e6ee 50%,#f0f0f4 70%);
  background-size:220% 100%;
  animation:sw-shimmer 1.3s linear infinite;
}
@keyframes sw-shimmer{to{background-position:-220% 0;}}

/* ---------- Lightbox ---------- */
.sw-lb{
  position:fixed;inset:0;z-index:11000;
  display:none;align-items:center;justify-content:center;
  padding:24px;background:rgba(8,8,14,.94);
}
.sw-lb.is-open{display:flex;}
.sw-lb-box{
  position:relative;max-width:min(1100px,92vw);max-height:88vh;
  animation:sw-in .28s cubic-bezier(.2,.7,.3,1);
}
@keyframes sw-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
.sw-lb-box img{
  max-width:100%;max-height:78vh;display:block;
  border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.sw-lb-meta{color:#fff;text-align:center;margin-top:14px;}
.sw-lb-meta b{display:block;font-size:16px;font-weight:700;}
.sw-lb-meta span{font-size:13px;opacity:.7;}

.sw-lb-btn{
  position:absolute;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);
  color:#fff;width:44px;height:44px;border-radius:50%;
  font-size:22px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease;
}
.sw-lb-btn:hover{background:rgba(255,255,255,.24);}
.sw-lb-close{top:-56px;right:0;}
.sw-lb-prev{left:-62px;top:50%;transform:translateY(-50%);}
.sw-lb-next{right:-62px;top:50%;transform:translateY(-50%);}

@media (max-width:900px){
  .sw-lb-prev{left:6px;} .sw-lb-next{right:6px;}
  .sw-lb-close{top:-52px;right:6px;}
  .sw-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;}
  .sw-section{padding:56px 0;}
}

@media (prefers-reduced-motion:reduce){
  .sw-card,.sw-card img,.sw-cap,.sw-more{transition:none;}
  .sw-lb-box{animation:none;}
  .sw-skel{animation:none;}
}