/* Case-study page layout — built on the Classical design-system tokens
   from styles.css. Ports the fixed inline-style layout from the original
   design-canvas template into real classes. */

:root{
  --cs-slide-basis: 78%;
}
@media (max-width: 560px){
  :root{ --cs-slide-basis: 90%; }
}

.cs-page{ max-width:1040px; margin:0 auto; padding:0 var(--space-4) var(--space-8); }

/* header */
.cs-header{
  display:flex; flex-wrap:wrap; gap:var(--space-6); align-items:flex-end;
  justify-content:space-between; padding:var(--space-6) 0;
}
.cs-header-main{ flex:1 1 380px; min-width:0; }
.cs-kicker{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--color-accent-700); font-variant-numeric:tabular-nums;
  margin-bottom:var(--space-3);
}
.cs-title{ font-size:clamp(38px,5.4vw,60px); font-weight:400; letter-spacing:-.02em; margin:0; }
.cs-subtitle{
  font-family:var(--font-heading); font-size:clamp(19px,2.4vw,24px);
  line-height:1.35; margin:var(--space-3) 0 0; color:var(--color-neutral-700); max-width:30ch;
}
.cs-header-actions{ display:flex; gap:var(--space-2); flex-wrap:wrap; }

/* hero */
.cs-hero{ position:relative; width:100%; aspect-ratio:16/7; background:var(--color-surface); overflow:hidden; }
.cs-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cs-hero-caption{ font-size:11px; margin-top:var(--space-2); color:var(--color-neutral-600); }

/* summary + facts */
.cs-summary-grid{
  display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:var(--space-8); align-items:start;
}
@media (max-width:720px){ .cs-summary-grid, .cs-tech-grid{ grid-template-columns:1fr; } }

.cs-section-label{ color:var(--color-accent-700); margin-bottom:var(--space-3); }

.cs-outcomes{
  display:flex; gap:var(--space-8); flex-wrap:wrap; margin-top:var(--space-6);
  padding-top:var(--space-4); border-top:1px solid var(--color-divider);
}
.cs-outcome-value{
  font-family:var(--font-heading); font-size:34px; line-height:1;
  font-variant-numeric:tabular-nums; font-weight:400;
}
.cs-outcome-label{ font-size:12px; margin-top:6px; color:var(--color-neutral-700); }

.cs-team-list{ display:flex; flex-direction:column; gap:var(--space-3); }
.cs-team-item{ display:flex; align-items:center; gap:var(--space-3); }
.cs-team-avatar{
  width:38px; height:38px; flex:none; border-radius:50%; object-fit:cover;
  background:var(--color-surface); border:1px solid var(--color-divider);
}
.cs-team-name{ font-family:var(--font-heading); font-size:15px; }
.cs-team-role{ font-size:12px; color:var(--color-neutral-600); }

/* selected screens carousel */
.cs-screens-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--space-4); flex-wrap:wrap; margin-bottom:var(--space-4);
}
.cs-carousel{ overflow:hidden; }
.cs-carousel-track{
  display:flex; gap:var(--space-4);
  transition:transform 520ms cubic-bezier(.22,.61,.36,1);
}
.cs-slide{ flex:0 0 var(--cs-slide-basis); margin:0; }
.cs-slide-media{
  position:relative; width:100%; aspect-ratio:16/10; overflow:hidden; background:var(--color-surface);
}
.cs-slide-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

.cs-carousel-controls{
  display:flex; align-items:center; gap:var(--space-4); margin-top:var(--space-4);
  padding-top:var(--space-3); border-top:1px solid var(--color-divider);
}
.cs-carousel-nav{ display:flex; gap:var(--space-2); }
.cs-carousel-dots{ display:flex; gap:var(--space-2); align-items:center; margin-right:auto; }
.cs-dot{
  width:26px; height:2px; padding:0; border:0; cursor:pointer;
  background:var(--color-neutral-400); transition:background 240ms;
}
.cs-dot.is-active{ background:var(--color-accent); }
.cs-carousel-counter{
  font-family:var(--font-heading); font-size:13px; font-variant-numeric:tabular-nums;
  color:var(--color-neutral-700);
}

/* tech + quote */
.cs-tech-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);
  gap:var(--space-8); align-items:start;
}
.cs-tech-tags{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
.cs-quote-col{ border-left:1px solid var(--color-accent); padding-left:var(--space-6); }
[dir="rtl"] .cs-quote-col{ border-left:0; border-right:1px solid var(--color-accent); padding-left:0; padding-right:var(--space-6); }
.cs-quote-text{
  margin:0; font-family:var(--font-heading); font-size:clamp(20px,2.4vw,26px);
  line-height:1.4; font-style:italic;
}
.cs-quote-author{ font-size:13px; margin-top:var(--space-4); color:var(--color-text); }
.cs-quote-author b{ font-family:var(--font-heading); font-size:15px; font-weight:var(--font-heading-weight); }

/* placeholder used when an image slot is empty */
.cs-placeholder{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  text-align:center; font-size:12px; color:var(--color-neutral-500);
  background:var(--color-surface); padding:var(--space-3);
}

.cs-404{ padding:var(--space-8) 0; text-align:center; }
.cs-404 h1{ font-size:32px; font-weight:400; }