/* =============================================================================
   InstaLab — work.css
   SHARED case-study page styles. Layered on top of assets/styles.css.

   Aesthetic: clean Apple.com-style LIGHT design with a navy accent.
   White / #f5f5f7 surfaces · soft rounded cards · soft shadows · generous
   whitespace · big semibold type (SF Pro → Inter web fallback) · Apple eyebrow
   labels · navy pill buttons · no grain, no neon glow.

   Reuses all :root tokens from styles.css (now light/navy with the SAME names):
     --bg #fff · --bg-2/--panel-2 #f5f5f7 · --panel #fff · --ink #1d1d1f
     --muted #6e6e73 · --muted-2 #86868b · --hair/-2 (black alphas)
     --accent #1e3a6e (navy) · --accent-2 hover · --accent-ink #fff
     backward-compat aliases: --lime → navy, --lime-ink #fff,
       --lime-dim rgba(navy,.10), --lime-glow rgba(navy,.16)
     --font-display / -2 / -body / -mono · --radius 20 · --ease · --dur
   plus shared atoms: .wrap, .btn(+--lime/--ghost/--lg), .brand, .reveal,
   focus ring. (Those globals are restyled in parallel — we reference tokens
   by NAME and never hard-code dark values.)

   This file is the design system for EVERY portfolio case page (work/*.html):
     · case mini-nav (frosted on scroll)
     · case hero (Apple eyebrow · big title · summary · meta pills · big metrics)
     · prose column (readable, narrow)
     · SVG-diagram wrapper (clean schematic, white nodes + navy accents)
     · metric cards grid (soft shadow, gentle lift)
     · stack chips, grouped (light gray pills)
     · numbered steps ("how it works")
     · CTA band  ·  compact footer
   Mobile-first, 360 → 1440. Honors prefers-reduced-motion.

   Two local tokens, kept for self-containment if the global set lags behind:
     --font-case-display → big case titles (SF/Inter display stack)
     --case-wrap-prose   → readable prose measure
   ========================================================================== */

:root {
  /* Big case titles ride the Apple display stack (SF Pro Display → Inter Tight
     → Inter). Local alias so case titles stay correct even before styles.css
     redefines the global tokens. -apple-system / BlinkMacSystemFont UNQUOTED. */
  --font-case-display:
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter Tight",
    "Inter", "Segoe UI", system-ui, sans-serif;
  --case-wrap-prose: 68ch;

  /* Soft Apple card shadows (light) — referenced throughout. */
  --shadow-card:  0 4px 24px rgba(0, 0, 0, .06);
  --shadow-lift:  0 18px 48px rgba(0, 0, 0, .10);
}

/* ----------------------------------------------------------------------------
   1) Case mini-nav  (own class so it never collides with homepage .nav)
       Apple frosted bar: thin, translucent white, blur on scroll.
---------------------------------------------------------------------------- */
.cnav {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              backdrop-filter var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cnav.is-scrolled {
  background: rgba(255, 255, 255, .72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: var(--hair);
}
.cnav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  height: 52px;
}
/* "back" caret prefix on the wordmark */
.cnav .brand { gap: .5rem; }
.cnav__back {
  font-size: 1.05rem;
  line-height: 1;
  color: var(--accent);
  transform: translateY(-1px);
  transition: transform var(--dur) var(--ease);
}
.cnav .brand:hover .cnav__back { transform: translateX(-3px); }
.cnav__actions { display: flex; align-items: center; gap: .6rem; }
/* Telegram CTA label collapses to a short form on the tightest screens */
.cnav__cta-full { display: none; }
.cnav__cta-short { display: inline; }

/* Language toggle — light Apple pill (scoped to the case nav so it never
   fights the homepage .lang, which is owned by styles.css). */
.cnav .lang {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 500;
  padding: .5rem .75rem;
  min-height: 44px;
  border: 1px solid var(--hair);
  border-radius: 980px;
  color: var(--muted);
  background: var(--bg);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.cnav .lang:hover { border-color: var(--hair-2); color: var(--ink); }
.cnav .lang__opt { transition: color var(--dur) var(--ease); }
.cnav .lang__opt.is-active { color: var(--accent); font-weight: 600; }
.cnav .lang__sep { color: var(--muted-2); }

/* ----------------------------------------------------------------------------
   2) Case hero — airy, generous, Apple eyebrow → big semibold title
---------------------------------------------------------------------------- */
.case-hero {
  position: relative;
  padding-top: clamp(3rem, 7vw, 6rem);
  padding-bottom: clamp(2.6rem, 5vw, 4rem);
  border-bottom: 1px solid var(--hair);
  background: var(--bg);
}
.case-hero__inner { position: relative; }

/* Apple eyebrow label — small, semibold, navy, uppercase tracking. */
.case-hero__kicker {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.1rem;
}
.case-hero__title {
  font-family: var(--font-case-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 6vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -.025em;
  color: var(--ink);
  max-width: 20ch;
  text-wrap: balance;
}
.case-hero__sub {
  margin-top: 1.35rem;
  max-width: 56ch;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.5vw, 1.32rem);
  line-height: 1.55;
}

/* meta chip row — light Apple pills (key/value) */
.meta {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
}
.meta__chip {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  font-family: var(--font-body);
  font-size: .85rem;
  color: var(--muted);
  padding: .5rem .95rem;
  border: 1px solid transparent;
  border-radius: 980px;
  background: var(--bg-2);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.meta__chip:hover { background: #ececf0; }
.meta__key {
  color: var(--muted-2);
  letter-spacing: .03em;
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: 600;
}
.meta__val { color: var(--ink); font-weight: 600; }

/* big result metrics under the hero */
.results {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.4rem, 3vw, 2.4rem);
  margin-top: clamp(2.4rem, 4vw, 3.2rem);
  padding-top: clamp(2rem, 3.5vw, 2.6rem);
  border-top: 1px solid var(--hair);
}
.result {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.result__num {
  font-family: var(--font-case-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 5.2vw, 3.4rem);
  line-height: .98;
  letter-spacing: -.03em;
  color: var(--accent);
}
.result__label {
  font-family: var(--font-body);
  font-size: .92rem;
  color: var(--muted);
  line-height: 1.45;
  max-width: 22ch;
}

/* ----------------------------------------------------------------------------
   3) Section scaffolding for case pages
---------------------------------------------------------------------------- */
.case-section { padding-block: clamp(3.4rem, 7vw, 6.5rem); }
.case-section + .case-section { padding-top: 0; }

/* Alternating Apple light-gray section (set on a <section> as a modifier). */
.case-section--alt {
  background: var(--bg-2);
  padding-block: clamp(3.4rem, 7vw, 6.5rem);
}
.case-section--alt + .case-section { padding-top: clamp(3.4rem, 7vw, 6.5rem); }

.case-head { margin-bottom: clamp(2rem, 3.8vw, 3rem); max-width: 60ch; }
/* Apple eyebrow label */
.case-head__kicker {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .85rem;
}
.case-head__title {
  font-family: var(--font-case-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.06;
  letter-spacing: -.02em;
  color: var(--ink);
  text-wrap: balance;
}
.case-head__lead {
  margin-top: 1rem;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  line-height: 1.55;
  max-width: 58ch;
}

/* ----------------------------------------------------------------------------
   4) Prose column (readable, narrow) — for «Задача» etc.
---------------------------------------------------------------------------- */
.prose { max-width: var(--case-wrap-prose); }
.prose > * + * { margin-top: 1.2rem; }
.prose p {
  color: var(--muted);
  font-size: clamp(1.08rem, 1.5vw, 1.24rem);
  line-height: 1.7;
}
.prose strong { color: var(--ink); font-weight: 600; }
.prose em { color: var(--ink); font-style: normal; }
/* pull-style lead paragraph */
.prose .prose__lead {
  color: var(--ink);
  font-family: var(--font-case-display);
  font-weight: 600;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  line-height: 1.32;
  letter-spacing: -.015em;
}
/* optional inline accent term */
.prose mark {
  background: var(--lime-dim);
  color: var(--accent);
  padding: .05em .3em;
  border-radius: 5px;
  font-weight: 500;
}

/* ----------------------------------------------------------------------------
   5) Diagram wrapper (schematic SVG — clean white card, navy accents)
---------------------------------------------------------------------------- */
.diagram {
  position: relative;
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
  padding: clamp(1.4rem, 3vw, 2.6rem);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.diagram__svg {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}
.diagram__caption {
  position: relative;
  margin-top: 1.2rem;
  font-family: var(--font-body);
  font-size: .85rem;
  color: var(--muted-2);
  text-align: center;
  line-height: 1.5;
}

/* Shared SVG primitive classes — used inside .diagram__svg.
   Authoring an SVG with these classes keeps every case diagram consistent.
   LIGHT recolor: white / #f5f5f7 node fills, hairline strokes, soft shadow on
   nodes (via .dg-shadow filter in the markup), navy accent nodes (white text),
   mid-gray edges/arrows, NO neon glow. */
.dg-node          { fill: var(--panel); stroke: var(--hair-2); stroke-width: 1.25; }
.dg-node--soft    { fill: var(--bg-2);  stroke: var(--hair-2); stroke-width: 1.25; }
.dg-node--accent  { fill: var(--accent); stroke: var(--accent); stroke-width: 1.25; }
.dg-label         { fill: var(--ink); font-family: var(--font-display-2, var(--font-body)); font-weight: 600; }
.dg-sub           { fill: var(--muted); font-family: var(--font-body); }
.dg-label--accent { fill: var(--accent-ink); }
.dg-sub--accent   { fill: rgba(255, 255, 255, .82); }
.dg-edge          { stroke: var(--muted-2); stroke-width: 1.5; fill: none; }
.dg-edge--accent  { stroke: var(--accent); stroke-width: 1.75; fill: none; }
.dg-edge-label    { fill: var(--muted-2); font-family: var(--font-body); }
.dg-edge-label--accent { fill: var(--accent); font-weight: 600; }
.dg-arrow         { fill: var(--muted-2); }
.dg-arrow--accent { fill: var(--accent); }
.dg-dash          { stroke-dasharray: 4 5; }

/* ----------------------------------------------------------------------------
   6) Metric cards grid (results section) — soft Apple cards
---------------------------------------------------------------------------- */
.metrics {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.4rem);
}
.metric {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 2.8vw, 2.1rem);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.metric:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}
.metric__num {
  font-family: var(--font-case-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  line-height: .98;
  letter-spacing: -.03em;
  color: var(--accent);
}
.metric__label {
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink);
  margin-top: .65rem;
}
.metric__ctx {
  color: var(--muted);
  font-size: .98rem;
  line-height: 1.5;
  margin-top: .55rem;
}

/* ----------------------------------------------------------------------------
   7) Stack chips — grouped by area (Backend / Data / Infra …)
---------------------------------------------------------------------------- */
.stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.1rem, 2.4vw, 1.6rem);
}
.stack__group {
  padding: clamp(1.4rem, 2.6vw, 1.9rem);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.stack__group:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.stack__legend {
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.1rem;
}
.stack__chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.stack__chip {
  font-family: var(--font-mono);
  font-size: .85rem;
  color: var(--ink);
  padding: .5rem .95rem;
  border: 1px solid transparent;
  border-radius: 980px;
  background: var(--bg-2);
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.stack__chip:hover { background: var(--lime-dim); color: var(--accent); }

/* ----------------------------------------------------------------------------
   8) Numbered steps — "How it works"
---------------------------------------------------------------------------- */
.flow {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.4rem);
  counter-reset: flow;
}
.flow__step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem;
  align-items: start;
  padding: clamp(1.5rem, 2.6vw, 2rem);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.flow__step:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.flow__num {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--lime-dim);
  color: var(--accent);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
}
.flow__num::before {
  content: counter(flow, decimal-leading-zero);
  counter-increment: flow;
}
.flow__body { min-width: 0; }
.flow__title {
  font-family: var(--font-case-display);
  font-weight: 600;
  font-size: clamp(1.1rem, 1.8vw, 1.32rem);
  letter-spacing: -.01em;
  color: var(--ink);
  margin-bottom: .4rem;
}
.flow__desc { color: var(--muted); font-size: 1rem; line-height: 1.6; }

/* ----------------------------------------------------------------------------
   9) CTA band — light gray, calm, centered-ish
---------------------------------------------------------------------------- */
.cta-band {
  border-top: 1px solid var(--hair);
  background: var(--bg-2);
}
.cta-band__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.4rem, 3vw, 2rem);
  padding-block: clamp(3.4rem, 6vw, 5.5rem);
}
.cta-band__title {
  font-family: var(--font-case-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  line-height: 1.06;
  letter-spacing: -.025em;
  color: var(--ink);
  max-width: 18ch;
  text-wrap: balance;
}
.cta-band__sub {
  color: var(--muted);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.5;
  max-width: 52ch;
}
.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: .3rem;
}

/* ----------------------------------------------------------------------------
   10) Compact footer (Apple light footer)
---------------------------------------------------------------------------- */
.cfooter {
  border-top: 1px solid var(--hair);
  padding-top: clamp(2.6rem, 4vw, 3.4rem);
  padding-bottom: 2rem;
  background: var(--bg-2);
}
.cfooter__inner {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  padding-bottom: clamp(1.8rem, 3.5vw, 2.4rem);
  border-bottom: 1px solid var(--hair);
}
.cfooter__tag {
  margin-top: .9rem;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.5;
  max-width: 34ch;
}
.cfooter__links {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem 1.8rem;
  align-items: center;
}
.cfooter__links a {
  font-family: var(--font-body);
  font-size: .9rem;
  color: var(--muted);
  transition: color var(--dur) var(--ease);
}
.cfooter__links a:hover { color: var(--accent); }
.cfooter__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
}
.cfooter__copy {
  font-family: var(--font-body);
  font-size: .82rem;
  color: var(--muted-2);
}
.cfooter__top {
  font-family: var(--font-body);
  font-size: .85rem;
  color: var(--muted);
  transition: color var(--dur) var(--ease);
}
.cfooter__top:hover { color: var(--accent); }

/* ----------------------------------------------------------------------------
   11) Responsive — progressive enhancement upward
---------------------------------------------------------------------------- */

/* ≤ 420px : tighten the mini-nav so brand + lang + short Telegram CTA fit on
   one line without clipping at 360px. The lang pill and CTA stay ≥44px tall
   (touch target) — only their horizontal padding / the row gaps shrink. */
@media (max-width: 420px) {
  .cnav__inner   { gap: .55rem; }
  .cnav__actions { gap: .45rem; }
  .cnav .lang    { padding: .5rem .55rem; }
  .cnav .btn--lime {
    --btn-h: 44px;             /* keep the touch target while trimming width */
    padding: 0 .85rem;
    font-size: .9rem;
  }
}

/* ≥ 480px : show full Telegram CTA label */
@media (min-width: 480px) {
  .cnav__cta-full  { display: inline; }
  .cnav__cta-short { display: none; }
}

/* ≥ 560px : metric/stack grids go two-up; 4-up results */
@media (min-width: 560px) {
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .stack   { grid-template-columns: repeat(2, 1fr); }
  .results { grid-template-columns: repeat(4, 1fr); }
}

/* ≥ 760px : flow steps two-up, stack three-up, CTA band becomes a row */
@media (min-width: 760px) {
  .flow { grid-template-columns: repeat(2, 1fr); }
  .stack { grid-template-columns: repeat(3, 1fr); }
  .cta-band__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .cta-band__copy { max-width: 34rem; }
  .cta-band__actions { margin-top: 0; flex-shrink: 0; }
  .cfooter__inner {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
  .cfooter__tag { margin-top: 1rem; }
}

/* ≥ 1000px : richer metric grid */
@media (min-width: 1000px) {
  .metrics { grid-template-columns: repeat(4, 1fr); }
}

/* ----------------------------------------------------------------------------
   12) Reduced motion — neutralise hover lifts
---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .metric:hover,
  .flow__step:hover,
  .stack__group:hover { transform: none; }
  .cnav .brand:hover .cnav__back { transform: none; }
}

/* ----------------------------------------------------------------------------
   13) Print — clean, ink-friendly
---------------------------------------------------------------------------- */
@media print {
  .cnav, .cta-band { display: none !important; }
  .diagram, .metric, .flow__step, .stack__group { break-inside: avoid; box-shadow: none; }
}