/* ==========================================================================
   CASE STUDY EXPLORER — homepage "Featured Case Studies" section.
   Split layout: one large device-mockup case study + a vertical project nav
   that swaps the featured panel's content on click. Loaded on index.html only.
========================================================================== */

.case-explorer{ padding-bottom:90px; }
.case-explorer-stack{ margin-top:56px; }
.case-carousel-header{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:0; margin-bottom:26px;
}
.case-carousel-label{ font-size:15px; font-weight:500; color:var(--text); }
.case-carousel-wrap{ overflow:hidden; cursor:grab; padding:14px 0 24px; margin-bottom:32px; touch-action:pan-y; }
.case-carousel-wrap.dragging{ cursor:grabbing; }

/* ---------- FEATURED PANEL ---------- */
.case-featured{
  position:relative;
  border-radius:28px;
  padding:40px;
  background:rgba(255,255,255,0.72);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.6);
  box-shadow:0 40px 90px -40px rgba(9,29,57,0.35);
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:48px;
  align-items:center;
}
@media (max-width:1000px){
  .case-featured{ grid-template-columns:1fr; }
}
.case-featured::before{
  content:'';
  position:absolute; inset:0; border-radius:28px; padding:1px;
  background:linear-gradient(135deg, rgba(0,91,252,0.5), rgba(9,29,57,0.15) 60%, transparent);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}
@media (max-width:640px){ .case-featured{ padding:26px; } }
@media (max-width:480px){
  .case-featured{ padding:20px 16px; border-radius:20px; }
}

/* device mockups */
.case-featured-visual{
  position:relative;
  height:300px;
  margin-bottom:0;
}
@media (max-width:1000px){ .case-featured-visual{ margin-bottom:36px; } }
.device-mock{
  position:absolute;
  border-radius:16px 16px 6px 6px;
  background:#0B1220;
  box-shadow:0 30px 60px -24px rgba(9,29,57,0.5);
  overflow:hidden;
}
.device-laptop{
  width:92%; aspect-ratio:16/10;
  top:0; left:0;
  padding:10px 10px 20px;
}
.device-laptop::after{
  content:'';
  position:absolute; left:50%; bottom:8px; transform:translateX(-50%);
  width:34px; height:3px; border-radius:2px; background:rgba(255,255,255,0.2);
}
.device-mobile{
  width:96px; aspect-ratio:9/18.5;
  right:2%; bottom:-26px;
  border-radius:20px;
  padding:8px 6px;
  border:3px solid #0B1220;
  z-index:2;
}
.device-screen{
  width:100%; height:100%;
  border-radius:6px;
  background-size:cover; background-position:center;
  transition:opacity .3s ease;
}
.device-mobile .device-screen{ border-radius:14px; }
@media (max-width:640px){
  .case-featured-visual{ height:220px; }
  .device-mobile{ width:74px; }
}
@media (max-width:480px){
  .case-featured-visual{ height:180px; margin-bottom:24px; }
  .device-mobile{ width:62px; bottom:-16px; }
}

/* body copy */
.industry-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  padding:6px 14px; border-radius:999px;
  background:rgba(0,91,252,0.08); color:var(--accent1);
}
.case-featured-body h3{ font-size:clamp(24px,2.8vw,32px); font-weight:500; margin-top:16px; }
.case-featured-body > p{ margin-top:14px; color:var(--text-muted); font-size:15.5px; line-height:1.7; max-width:620px; }

.case-meta-row{ display:flex; gap:40px; margin-top:26px; }
@media (max-width:640px){
  .case-meta-row{ gap:20px 28px; flex-wrap:wrap; margin-top:20px; }
}
.case-meta-row .label{ display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); margin-bottom:4px; }
.case-meta-row > div span:last-child{ font-size:14px; font-weight:500; color:var(--text); }
.case-meta-row > div{ display:flex; flex-direction:column; }

.case-tech-badges{ display:flex; flex-wrap:wrap; gap:9px; margin-top:22px; }
.tech-badge{
  font-size:12px; font-weight:500; padding:7px 13px; border-radius:999px;
  background:var(--bg-secondary); border:1px solid var(--border); color:var(--text-muted);
  transition:transform .3s ease, box-shadow .3s ease, color .3s ease, border-color .3s ease;
}
.tech-badge:hover{ transform:translateY(-3px); color:var(--accent1); border-color:rgba(0,91,252,0.3); box-shadow:0 10px 22px -12px rgba(0,91,252,0.4); }

.case-results-row{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  margin-top:30px; padding-top:26px; border-top:1px solid var(--border);
}
@media (max-width:540px){
  .case-results-row{ grid-template-columns:1fr 1fr; gap:16px 12px; }
}
@media (max-width:380px){
  .case-results-row{ grid-template-columns:1fr; }
}
.case-result{ text-align:left; }
.case-result h4{ font-size:clamp(22px,2.6vw,30px); font-weight:600; color:var(--accent1); }
.case-result span{ display:block; margin-top:4px; font-size:12.5px; color:var(--text-muted); line-height:1.4; }

.case-quote{
  margin-top:28px; padding:20px 24px;
  border-left:2px solid var(--accent1);
  background:var(--bg-secondary);
  border-radius:0 14px 14px 0;
}
.case-quote p{ font-size:15px; font-style:italic; color:var(--text); line-height:1.6; margin:0; }
.case-quote span{ display:block; margin-top:10px; font-size:12.5px; color:var(--text-muted); }

.case-featured-body .btn{ margin-top:32px; }

/* ---------- PROJECT CAROUSEL (horizontal, draggable) ---------- */
.case-nav{ display:flex; gap:16px; width:max-content; will-change:transform; }
.case-nav-item{
  position:relative;
  display:flex; flex-direction:column; gap:0;
  width:220px; flex-shrink:0; text-align:left;
  padding:14px; border-radius:18px;
  border:1px solid var(--border);
  background:var(--bg);
  transition:background .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
  user-select:none;
}
.case-nav-item:hover{ transform:translateY(-4px); box-shadow:0 20px 40px -24px rgba(9,29,57,0.22); }
.case-nav-thumb{
  width:100%; aspect-ratio:4/3; border-radius:12px; overflow:hidden;
  background:var(--bg-secondary); margin-bottom:14px;
}
.case-nav-thumb img{ width:100%; height:100%; object-fit:cover; pointer-events:none; }
.case-nav-icon{
  flex-shrink:0; width:38px; height:38px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-secondary); color:var(--accent1);
  transition:background .3s ease, color .3s ease, transform .3s ease;
}
.case-nav-icon svg{ width:18px; height:18px; }
.case-nav-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.case-nav-text strong{ font-size:11px; letter-spacing:0.07em; text-transform:uppercase; color:var(--accent1); }
.case-nav-text span{ font-size:14px; font-weight:500; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.case-nav-year{ margin-left:auto; flex-shrink:0; font-family:'Courier New', monospace; font-size:11.5px; color:var(--text-muted); }
.case-nav-item-row{ display:flex; align-items:center; gap:4px; margin-top:8px; }

.case-nav-item.active{
  background:var(--bg);
  border-color:rgba(0,91,252,0.3);
  box-shadow:0 20px 40px -24px rgba(9,29,57,0.28);
}
.case-nav-item.active .case-nav-text strong{ color:var(--accent1); }
.case-nav-item.active .case-nav-thumb{ box-shadow:0 0 0 2px var(--accent1); }

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  .case-featured, .case-nav-item{ transition:none; }
}