/* ==========================================================================
   EK Studio — Educational Koncepts case study (page-specific)
   Extends styles.css (shared tokens, header, footer, buttons, final CTA, seal).
   Editorial, factual, calm — one approved screenshot, no invented visuals.
   ========================================================================== */

/* ---------- 1. OVERVIEW / HERO ---------- */
.cs-hero{padding-block:clamp(40px,6vw,76px) clamp(36px,5vw,56px)}
.cs-breadcrumb{color:var(--signal);text-decoration:none}
.cs-breadcrumb:hover{text-decoration:underline;text-underline-offset:3px}
.cs-hero h1{margin:14px 0 24px;max-width:16ch}
.cs-metabar{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0 0 28px;
  border-top:1px solid var(--divider);border-bottom:1px solid var(--divider);
}
.cs-metabar div{min-width:0;padding:18px clamp(16px,2vw,26px) 18px 0;border-left:1px solid var(--divider)}
.cs-metabar div:first-child{border-left:0;padding-left:0}
.cs-metabar dt{font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--signal);margin-bottom:8px}
.cs-metabar dd{margin:0;font-size:.98rem;line-height:1.4;color:var(--body)}
.cs-overview{font-size:1.18rem;line-height:1.6;color:var(--body);max-width:66ch}

.cs-figure{margin:clamp(30px,4vw,48px) 0 0}
.cs-frame{
  background:var(--surface);border:1px solid var(--divider-strong);border-radius:12px;
  padding:clamp(10px,1.4vw,16px);box-shadow:var(--shadow-md);overflow:hidden;
}
.cs-frame img{display:block;width:100%;height:auto;border-radius:6px}
.cs-figure figcaption{margin-top:16px;display:flex;justify-content:flex-end}

/* ---------- SHARED 2-COLUMN EDITORIAL BLOCK ---------- */
.cs-2col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(24px,4vw,64px);align-items:start}
.cs-block-head{min-width:0}
.cs-block-head h2{
  font-family:var(--serif);font-weight:400;line-height:1.06;letter-spacing:-.018em;
  font-size:clamp(1.6rem,2.6vw,2.2rem);color:var(--espresso);margin:14px 0 0;
}
.cs-block-body{min-width:0}
.cs-block-body p{font-size:1.08rem;line-height:1.65;color:var(--body);max-width:64ch}
.cs-block-body p + p{margin-top:16px}
.cs-lead-in{font-weight:600;color:var(--body)}
.cs-list{margin:14px 0 0;display:flex;flex-direction:column;gap:12px;max-width:64ch}
.cs-list li{position:relative;padding-left:22px;font-size:1.05rem;line-height:1.55;color:var(--body)}
.cs-list li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:1.5px;background:var(--burgundy)}
.cs-visual-ref{margin-top:20px}

/* ---------- 4. STRATEGIC DIRECTION (Reveal / Rebuild / Sustain) ---------- */
.cs-framework{
  margin-top:clamp(32px,4vw,48px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--divider-strong);
}
.cs-fw{min-width:0;padding:30px clamp(20px,2vw,30px) 32px 0;border-left:1px solid var(--divider)}
.cs-fw:first-child{border-left:0}
.cs-fw-num{font-family:var(--mono);font-size:.85rem;font-weight:600;letter-spacing:.14em;color:var(--signal);margin:0 0 16px}
.cs-fw-title{font-family:var(--serif);font-weight:400;font-size:1.6rem;letter-spacing:-.01em;color:var(--espresso);margin:0 0 12px}
.cs-fw-copy{font-size:1rem;line-height:1.55;color:var(--body)}

/* ---------- 6 & 9. SCOPE / PROJECT DETAILS DEFINITION LISTS ---------- */
.cs-scope-list{margin-top:clamp(28px,3vw,40px);border-top:1px solid var(--divider-strong)}
.cs-scope-list > div{
  display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:16px clamp(24px,4vw,56px);
  padding:18px 0;border-bottom:1px solid var(--divider);align-items:baseline;
}
.cs-scope-list dt{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-strong)}
.cs-scope-list dd{margin:0;font-size:1.06rem;line-height:1.5;color:var(--body)}
.cs-status{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.8rem;
  font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--burgundy);
}
.cs-status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--signal)}

/* ---------- 8. RESULT (burgundy band) ---------- */
.cs-result{
  position:relative;overflow:hidden;background:var(--burgundy);color:var(--cream);
  padding-block:clamp(56px,7vw,96px);border-top:1px solid var(--divider);
}
.cs-result::before{
  content:"";position:absolute;inset:0;opacity:.6;pointer-events:none;
  background-image:
    linear-gradient(rgba(243,234,219,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(243,234,219,.07) 1px,transparent 1px);
  background-size:48px 48px;
}
.cs-result-inner{position:relative;max-width:820px}
.cs-result .eyebrow{color:var(--cream)}
.cs-result .eyebrow::before{background:var(--signal-soft)}
.cs-result h2{font-family:var(--serif);font-weight:400;color:var(--cream);font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.08;letter-spacing:-.02em;margin:0 0 18px}
.cs-result-copy{font-size:1.18rem;line-height:1.65;color:var(--cream-soft);max-width:62ch}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:820px){
  .cs-metabar{grid-template-columns:1fr}
  .cs-metabar div{border-left:0;border-top:1px solid var(--divider);padding:16px 0}
  .cs-metabar div:first-child{border-top:0}
  .cs-2col{grid-template-columns:1fr;gap:14px}
  .cs-framework{grid-template-columns:1fr;border-top:0}
  .cs-fw{border-left:0;border-top:1px solid var(--divider);padding:24px 0}
  .cs-fw:first-child{border-top:0}
}
@media (max-width:560px){
  .cs-scope-list > div{grid-template-columns:1fr;gap:6px;padding:16px 0}
  .cs-figure figcaption{justify-content:flex-start}
}

/* Long descriptive links must wrap on narrow screens (override shared nowrap) */
.cs-figure figcaption .text-link,
.cs-visual-ref .text-link,
.cs-scope-list dd .text-link{display:inline;white-space:normal}
.cs-figure figcaption .text-link .ar,
.cs-visual-ref .text-link .ar,
.cs-scope-list dd .text-link .ar{margin-left:4px}