/* =============================================================
   Case — Design System (Alloca)
   Dedicated overrides to match Figma frame 75:180 exactly.
   Scoped under .case-ds so it reliably beats the shared dark
   .case-* rules in styles.css. Theme stays DARK with
   alternating bands and the neon-green #52FF00 accent.
   ============================================================= */

/* -------------------------------------------------------------
   HEADER override — the shared .site-header defaults to the LIGHT
   theme background (var(--bg) ≈ #fbfbfb), which renders as a light
   grey bar on this dark page. Re-scope it to the Figma Design-System
   header frame (node 75:423): dark fill #1c1f26 + #363b45 hairline.
   Logo / nav / button colours already read correctly over dark.
   ------------------------------------------------------------- */
body.case-ds .site-header {
  background: #1c1f26;
  border-bottom: 1px solid #363b45;
}
/* brand wordmark + nav stay light over the dark header */
body.case-ds .site-header .brand { color: #fbfbfb; }
body.case-ds .site-header .nav-links > a,
body.case-ds .site-header .nav-item > a { color: #fbfbfb; }
/* burger: dark-translucent button + white lines so it reads on the dark header */
body.case-ds .site-header .burger { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); }
body.case-ds .site-header .burger span { background: #fbfbfb; }

.case-ds {
  /* Figma palette */
  --ds-base: #1c2124;       /* hero / type / outcome band */
  --ds-band: #14161c;       /* tokens / components band */
  --ds-strip: #101316;      /* statstrip full-bleed band */
  --ds-green: #52ff00;      /* accent */
  --ds-on-green: #14161c;   /* text on green */
  --ds-border: #2a2e37;     /* hairline borders */
  --ds-text: #eef0f3;       /* primary text */
  --ds-muted: #9aa0a8;      /* muted text */
  --ds-disc: #16181f;       /* disclaimer surface */
  --ds-cta: #293033;        /* outlined Figma button fill */

  background: var(--ds-base);
  color: var(--ds-text);
}

/* The page paints its own bands edge-to-edge */
.case-ds .case-page { background: var(--ds-base); }

/* -------------------------------------------------------------
   Section banding (full-bleed)
   ------------------------------------------------------------- */
.case-ds .ds-band { background: var(--ds-base); }
.case-ds .ds-band--alt { background: var(--ds-band); }
.case-ds .ds-band--strip { background: var(--ds-strip); }

/* Kill the shared faint top divider on case sections */
.case-ds .case-section { border-top: none; }

/* Consistent vertical rhythm: Figma uses 72px top/bottom on bands */
.case-ds .case-section { padding-block: 72px; }
.case-ds .case-hero { padding-block: 72px; }

/* =============================================================
   HERO  (node 75:576)
   ============================================================= */
.case-ds .case-hero { position: relative; overflow: hidden; }

/* soft green/teal radial glows behind the hero */
.case-ds .case-hero::before,
.case-ds .case-hero::after {
  content: "";
  position: absolute;
  width: 466px; height: 466px;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}
.case-ds .case-hero::before {
  left: -156px; top: -161px;
  background: radial-gradient(circle, rgba(82,255,0,.22), rgba(82,255,0,0) 70%);
}
.case-ds .case-hero::after {
  right: -130px; bottom: -120px;
  background: radial-gradient(circle, rgba(46,91,255,.18), rgba(46,91,255,0) 70%);
}
.case-ds .case-hero > .container { position: relative; z-index: 1; }

.case-ds .case-hero-grid { gap: 40px; align-items: center; }

/* left column ordering matches Figma: chips → sub → h1 */
.case-ds .hero-main { display: flex; flex-direction: column; gap: 34px; align-items: flex-start; }
.case-ds .hero-main .case-sub { order: 3; margin: 0; max-width: none; }
.case-ds .hero-main h1 { order: 2; margin: 0; }
.case-ds .hero-main .chips { order: 1; }

.case-ds .case-hero h1 {
  font-family: "Onest", sans-serif;
  font-weight: 800;
  font-size: clamp(38px, 5.2vw, 58px);
  line-height: 1.04;
  letter-spacing: -.02em;
  color: var(--ds-text);
  max-width: 16ch;
}
.case-ds .case-hero .case-sub {
  font-family: "Onest", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ds-muted);
  max-width: 62ch;
}

/* Hero chips → neutral pills (no blue) */
.case-ds .chips { gap: 8px; }
.case-ds .chips .chip {
  background: var(--ds-base);
  border: 1px solid var(--ds-border);
  color: var(--ds-text);
  border-radius: 999px;
  padding: 7px 13px;
  font-family: "Onest", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
}
/* neutralise the blue modifier entirely */
.case-ds .chip--blue {
  background: var(--ds-base);
  border-color: var(--ds-border);
  color: var(--ds-text);
}

/* logo block — no card chrome, just the artwork like Figma */
.case-ds .case-logo-wrap {
  width: 421px;
  max-width: 40vw;
  background: transparent;
  border-radius: 0;
  aspect-ratio: auto;
  height: 242px;
}
.case-ds .case-logo-wrap .blob { display: none; }
.case-ds .case-logo-wrap img { width: 100%; height: 100%; object-fit: contain; }

/* -------------------------------------------------------------
   "Открыть макет в Figma" button — dark fill, green outline
   ------------------------------------------------------------- */
.case-ds .btn--figma {
  background: var(--ds-cta);
  border: 1px solid var(--ds-green);
  color: var(--ds-text);
  border-radius: 999px;
  padding: 14px 24px;
  font-family: "Onest", sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  gap: 8px;
}
.case-ds .btn--figma:hover { background: #2f3a3d; }
/* Colored Figma-logo icon inside the "Открыть макет в Figma" buttons */
.case-ds .btn--figma .fig-logo {
  display: inline-block;
  vertical-align: middle;
  width: 18px; height: 18px;
  flex: 0 0 auto;
  margin-right: 8px;
}
.case-ds .hero-cta { margin-top: 0; }

/* -------------------------------------------------------------
   Meta row (node 75:214)
   ------------------------------------------------------------- */
.case-ds .case-meta {
  gap: 48px;
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}
.case-ds .case-meta .mi { flex: 1 1 0; max-width: none; }
.case-ds .case-meta .mi .k {
  font-family: "Onest", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--ds-muted);
  margin-bottom: 5px;
}
.case-ds .case-meta .mi .v {
  font-family: "Onest", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ds-text);
}

/* The hero meta/result get their own spacing rows */
.case-ds .hero-rows { display: flex; flex-direction: column; gap: 0; }
.case-ds .hero-cta + .container,
.case-ds .case-hero .container + .container { margin-top: 24px; }

/* -------------------------------------------------------------
   Result chips (node 75:224)
   ------------------------------------------------------------- */
.case-ds .result-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.case-ds .result-chips .rchip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 7px 13px;
  font-family: "Onest", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
}
.case-ds .result-chips .rchip--green {
  background: var(--ds-green);
  color: var(--ds-on-green);
}
.case-ds .result-chips .rchip--neutral {
  background: var(--ds-base);
  border: 1px solid var(--ds-border);
  color: var(--ds-text);
}

/* =============================================================
   STAT STRIP  (node 75:229) — full-bleed #101316
   ============================================================= */
.case-ds .statstrip-band {
  background: var(--ds-strip);
  padding-block: 44px;
}
.case-ds .statstrip {
  display: flex;
  gap: 24px;
  border: none;
}
.case-ds .statstrip .stat {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  border-right: none;
}
.case-ds .statstrip .stat .num,
.case-ds .statstrip .stat .num.green {
  font-family: "Onest", sans-serif;
  font-weight: 800;
  font-size: clamp(40px, 4.4vw, 52px);
  line-height: 1;
  letter-spacing: 0;
  color: var(--ds-green);
}
.case-ds .statstrip .stat .lab {
  font-family: "Onest", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  color: var(--ds-text);
  margin: 0;
}
.case-ds .statstrip .stat .hint {
  font-family: "Onest", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.2;
  color: var(--ds-muted);
  margin: 0;
}

/* =============================================================
   SECTION HEADERS (kicker) — green numbered pill
   ============================================================= */
.case-ds .kicker {
  gap: 10px;
  font-family: "Onest", sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--ds-muted);
  margin-bottom: 18px;
}
.case-ds .kicker .n {
  width: auto; height: auto;
  border-radius: 999px;
  background: var(--ds-green);
  color: var(--ds-on-green);
  font-family: "Onest", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  padding: 7px 13px;
}
.case-ds .case-section h2 {
  font-family: "Onest", sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.06;
  letter-spacing: -.4px;
  color: var(--ds-text);
  max-width: none;
}
.case-ds .case-section .sec-text {
  font-family: "Onest", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ds-muted);
  max-width: none;
  margin-top: 14px;
}

/* =============================================================
   01 — COLOR TOKENS (node 75:253)
   ============================================================= */
.case-ds .swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
  margin-top: 14px;
}
.case-ds .swatch {
  width: 176px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.case-ds .swatch .chip-color {
  height: 60px;
  border-radius: 10px;
  border: 1px solid var(--ds-border);
}
.case-ds .swatch .name {
  font-family: "Onest", sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  color: var(--ds-text);
  margin: 0;
}
.case-ds .swatch .hex {
  font-family: "Onest", sans-serif;   /* Onest, not monospace */
  font-weight: 400;
  font-size: 11px;
  line-height: 1;
  color: var(--ds-muted);
  margin: 0;
}

/* =============================================================
   02 — TYPOGRAPHY (node 75:336) — flat rows w/ top dividers
   ============================================================= */
.case-ds .type-samples {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 10px;
}
.case-ds .type-sample {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 18px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.case-ds .type-sample + .type-sample { border-top: 1px solid var(--ds-border); }
.case-ds .type-sample .sample { color: var(--ds-text); flex: 1 1 0; min-width: 0; }
.case-ds .type-sample .ts-meta {
  font-family: "Onest", sans-serif;   /* Onest Medium, not monospace */
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  color: var(--ds-muted);
  white-space: nowrap;
}
.case-ds .ts-h1 {
  font-family: "IF Kica", "Onest", serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  letter-spacing: 0;
}
.case-ds .ts-h2 {
  font-family: "Montserrat", "Onest", sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.16;
}
.case-ds .ts-body {
  font-family: "Roboto", "Onest", sans-serif;
  font-weight: 400;
  font-size: 16px;
}
.case-ds .ts-label {
  font-family: "Roboto", "Onest", sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ds-text);
}

/* =============================================================
   03 — COMPONENTS (node 75:357) — pill chips + image
   ============================================================= */
.case-ds .inventory {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.case-ds .inventory .chip {
  background: var(--ds-base);
  border: 1px solid var(--ds-border);
  color: var(--ds-text);
  border-radius: 999px;
  padding: 8px 14px;
  font-family: "Onest", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
}
.case-ds .visual {
  margin-top: 18px;
  border: 1px solid var(--ds-border);
  border-radius: 16px;
  background: #0f1217;
  overflow: hidden;
}
.case-ds .visual-cap {
  font-family: "Onest", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ds-muted);
  margin-top: 18px;
}

/* =============================================================
   04 — PRINCIPLES (node 75:398) — bulleted list w/ green dots
   ============================================================= */
.case-ds .ds-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 6px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.case-ds .ds-list li {
  position: relative;
  padding-left: 19px;
  font-family: "Onest", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ds-text);
}
.case-ds .ds-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ds-green);
}

/* Disclaimer surface (node 75:415) */
.case-ds .disclaimer {
  background: var(--ds-disc);
  border: 1px solid var(--ds-border);
  border-radius: 12px;
  padding: 16px 18px;
  font-family: "Onest", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ds-muted);
  margin-top: 18px;
}

/* =============================================================
   END CTA (node 75:417) — Figma button left, actions right
   ============================================================= */
.case-ds .case-end .h2 { margin-bottom: 0; }
.case-ds .case-end-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}
.case-ds .case-end-actions .end-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Solid green "Связаться" */
.case-ds .case-end-actions .btn--solid {
  background: var(--ds-green);
  color: var(--ds-on-green);
  border: 1px solid var(--ds-green);
  border-radius: 999px;
  padding: 14px 24px;
  font-family: "Onest", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
}
.case-ds .case-end-actions .btn--solid:hover { opacity: .92; }

/* Neutral outline "Все кейсы" */
.case-ds .case-end-actions .btn--outline {
  background: transparent;
  border: 1px solid var(--ds-border);
  color: var(--ds-text);
  border-radius: 999px;
  padding: 14px 24px;
  font-family: "Onest", sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
}
.case-ds .case-end-actions .btn--outline:hover {
  background: rgba(255,255,255,.05);
  color: var(--ds-text);
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 1024px) {
  .case-ds .swatch { width: calc((100% - 4 * 16px) / 5); min-width: 140px; }
}
@media (max-width: 860px) {
  .case-ds .case-hero-grid { grid-template-columns: 1fr; }
  .case-ds .case-logo-wrap { width: 100%; max-width: 320px; order: -1; height: auto; }
  .case-ds .case-meta { gap: 28px; }
  .case-ds .case-meta .mi { flex: 1 1 45%; }
  .case-ds .statstrip { flex-wrap: wrap; }
  .case-ds .statstrip .stat { flex: 1 1 40%; }
  .case-ds .swatch { width: calc((100% - 16px) / 2); min-width: 0; }
  .case-ds .type-sample { flex-wrap: wrap; gap: 8px; }
  .case-ds .type-sample .ts-meta { flex-basis: 100%; }
  .case-ds .case-end-actions { flex-direction: column; align-items: stretch; }
  .case-ds .case-end-actions .end-right { width: 100%; }
}

/* -------------------------------------------------------------
   TABLET — 768px and below
   Keep the 2-up swatch grid + 2x2 stat strip, and make every
   fixed-width native graphic / panel fit the column.
   ------------------------------------------------------------- */
@media (max-width: 768px) {
  /* never let a wide child push the page past the viewport */
  .case-ds .case-page,
  .case-ds .case-section .container,
  .case-ds .case-hero .container { max-width: 100%; }

  /* component matrix image + any fixed-px graphic scale to fit */
  .case-ds .visual { width: 100%; }
  .case-ds .visual img { width: 100%; height: auto; max-width: 100%; display: block; }

  /* stat strip: tidy 2 x 2 grid on tablet */
  .case-ds .statstrip { flex-wrap: wrap; gap: 20px 24px; }
  .case-ds .statstrip .stat { flex: 1 1 calc((100% - 24px) / 2); min-width: 0; }

  /* long hex / token names never spill the swatch column */
  .case-ds .swatch .name,
  .case-ds .swatch .hex { overflow-wrap: anywhere; word-break: break-word; }

  /* typography meta may wrap instead of forcing a wide nowrap row */
  .case-ds .type-sample .ts-meta { white-space: normal; }

  /* trim oversized hero glows so they don't bloat layout box */
  .case-ds .case-hero::before,
  .case-ds .case-hero::after { width: 320px; height: 320px; }
}

/* -------------------------------------------------------------
   PHONE — 480px and below (covers the 390px target)
   ------------------------------------------------------------- */
@media (max-width: 480px) {
  /* hard guarantee: no horizontal overflow on this page */
  .case-ds .case-page { overflow-x: clip; }

  /* swatch grid stays a tidy 2-column grid (matches Figma intent) */
  .case-ds .swatches { gap: 0 12px; }
  .case-ds .swatch { width: calc((100% - 12px) / 2); margin-bottom: 14px; }

  /* stat strip stacks to a single readable column */
  .case-ds .statstrip { gap: 22px; }
  .case-ds .statstrip .stat { flex: 1 1 100%; }
  .case-ds .statstrip .stat .num,
  .case-ds .statstrip .stat .num.green { font-size: 40px; }

  /* hero / section headings: wrap long tokens, slightly tighter */
  .case-ds .case-hero h1 { font-size: clamp(30px, 9vw, 38px); max-width: none; overflow-wrap: anywhere; }
  .case-ds .case-section h2 { overflow-wrap: anywhere; }

  /* display type sample can be large — keep it inside the column */
  .case-ds .ts-h1 { font-size: clamp(30px, 9vw, 40px); }
  .case-ds .type-sample .sample { overflow-wrap: anywhere; }

  /* inventory / hero chips: comfortable wrapping, smaller gaps */
  .case-ds .chips { flex-wrap: wrap; }
  .case-ds .inventory { gap: 8px; }

  /* CTA buttons go full-width and centre for easy tapping */
  .case-ds .hero-cta,
  .case-ds .case-end-actions,
  .case-ds .case-end-actions .end-right { width: 100%; }
  .case-ds .btn--figma,
  .case-ds .case-end-actions .btn--solid,
  .case-ds .case-end-actions .btn--outline {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* stack the meta items one per row for full-width readability */
  .case-ds .case-meta { flex-direction: column; gap: 20px; }
  .case-ds .case-meta .mi { flex: 1 1 100%; }
}