/* ============================================================
   Музыкальная студия «Соло» — co-branding layer for case-solo.html
   ============================================================
   Keeps the Entropia chassis (light linen base, terracotta accent)
   and adds the studio's own voice: sky blue from the logo, warm
   grey-brown as the second tone, Tenor Sans for the display lines.
   Brand source: studio_solo/08_Бренд (logos, palette, fonts).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap');

:root {
  --so-blue-700: #2B6F93;
  --so-blue-600: #3C91BD;
  --so-blue-400: #7DB6D6;
  --so-blue-100: #E3F0F7;
  --so-taupe-600: #8B6E62;
  --so-taupe-400: #B49C91;
  --so-cream: #F4F1EC;
  /* the bird's gradient — violet through coral */
  --so-wing: linear-gradient(90deg, #5653A3 0%, #89407A 30%, #BF4B5A 62%, #DE653F 100%);
  --so-font-display: 'Tenor Sans', 'Inter Tight', system-ui, sans-serif;
}

.so-display { font-family: var(--so-font-display); font-weight: 400; letter-spacing: -0.01em; }
.so-accent { color: var(--so-blue-600); }
.so-wing-text {
  background: var(--so-wing);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================================================
   HERO head row — title left, the studio bird right
   ============================================================ */
.so-hero-headrow {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) auto;
  align-items: center;
  gap: clamp(24px, 4vw, 72px);
  margin-top: 36px;
}
.so-hero-bird { display: flex; justify-content: flex-end; }
.so-hero-bird img { width: clamp(200px, 24vw, 340px); height: auto; }
@media (max-width: 1080px) {
  .so-hero-headrow { grid-template-columns: 1fr; gap: 28px; }
  .so-hero-bird { justify-content: flex-start; }
  .so-hero-bird img { width: clamp(160px, 40vw, 240px); }
}

/* ============================================================
   CLIENT MARK — framed block in the context section
   ============================================================ */
.so-client-mark {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 24px;
  border: 1.5px solid var(--so-blue-600);
  background: rgba(60, 145, 189, 0.07);
  border-radius: var(--r-sm);
}
.so-client-id {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.26em;
  color: var(--so-blue-700);
  text-transform: uppercase;
}
.so-client-id .dash { width: 1px; height: 14px; background: rgba(60, 145, 189, 0.45); }
.so-client-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.so-client-row img { width: 76px; height: auto; flex: none; }
.so-client-text { font-size: 14px; font-weight: 500; line-height: 1.45; max-width: 360px; }

/* ============================================================
   PROCESS LANE — the "as it was" sequence
   ============================================================ */
.so-lane {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border: var(--hairline);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.so-lane-step {
  position: relative;
  padding: var(--s-5);
  border-right: var(--hairline);
  min-height: 156px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.so-lane-step:last-child { border-right: none; }
.so-lane-id {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--so-taupe-600);
}
.so-lane-step h4 { font-family: var(--so-font-display); font-weight: 400; font-size: 17px; }
.so-lane-step p { font-size: 12.5px; line-height: 1.5; }
.so-lane-step.is-bottleneck { box-shadow: inset 3px 0 0 var(--so-blue-600); }
.so-lane-step.is-bottleneck .so-lane-id { color: var(--so-blue-700); }
@media (max-width: 860px) {
  .so-lane { grid-auto-flow: row; grid-auto-columns: auto; }
  .so-lane-step { border-right: none; border-bottom: var(--hairline); min-height: 0; }
  .so-lane-step:last-child { border-bottom: none; }
}

/* ============================================================
   BOTTLENECK GRID — "узкое место → решение"
   ============================================================ */
.so-bottlenecks {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: var(--hairline);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.so-bn-head, .so-bn-row {
  display: grid;
  grid-template-columns: 48px 1.1fr 1.4fr;
  gap: var(--s-5);
  padding: var(--s-4) var(--s-5);
  align-items: start;
  background: var(--color-bg);
}
.so-bn-head {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.so-bn-num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; color: var(--so-blue-700); }
.so-bn-pain { font-weight: 500; line-height: 1.45; font-size: 14px; }
.so-bn-fix { font-size: 13.5px; line-height: 1.5; }
.so-bn-fix b { font-weight: 600; }
@media (max-width: 720px) {
  .so-bn-head { display: none; }
  .so-bn-row { grid-template-columns: 1fr; gap: 8px; }
}

/* ============================================================
   MODULE — narrative column + real screen
   ============================================================ */
.so-two {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: var(--s-9);
  align-items: center;
}
.so-two.is-flip > :first-child { order: 2; }
@media (max-width: 980px) {
  .so-two { grid-template-columns: 1fr; gap: var(--s-7); }
  .so-two.is-flip > :first-child { order: 0; }
}

.so-shot { margin: 0; }
.so-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-sm);
  border: var(--hairline);
  box-shadow: 0 18px 48px -24px rgba(59, 33, 24, 0.35);
}
.so-shot figcaption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--so-taupe-600);
}
.so-shot figcaption .demo { color: var(--so-blue-700); }

.so-shot-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 640px) { .so-shot-pair { grid-template-columns: 1fr; } }

/* ============================================================
   TILES & CAPTION
   ============================================================ */
.so-tiles {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: var(--hairline);
}
.so-tiles.is-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .so-tiles.is-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .so-tiles.is-4 { grid-template-columns: 1fr; } }
.so-tiles .tile-6 { background: var(--color-bg); }

.so-cap {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--so-taupe-600);
  margin-top: var(--s-3);
}
.so-cap .bar { color: var(--so-blue-600); }

/* ============================================================
   SWITCH-OVER TIMELINE — дорога к 31 октября
   ============================================================ */
.so-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 2px solid var(--so-blue-400);
}
.so-tl-step { position: relative; padding: var(--s-5) var(--s-5) 0 0; }
.so-tl-step::before {
  content: "";
  position: absolute;
  top: -7px; left: 0;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--so-cream);
  border: 2px solid var(--so-blue-600);
}
.so-tl-step.is-final::before { background: var(--so-blue-600); }
.so-tl-date { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; color: var(--so-blue-700); }
.so-tl-step h4 { font-family: var(--so-font-display); font-weight: 400; font-size: 18px; margin-top: 10px; }
.so-tl-step p { font-size: 13px; line-height: 1.5; margin-top: 6px; }
@media (max-width: 860px) {
  .so-timeline { grid-template-columns: 1fr; border-top: none; border-left: 2px solid var(--so-blue-400); }
  .so-tl-step { padding: 0 0 var(--s-5) var(--s-5); }
  .so-tl-step::before { top: 2px; left: -7px; }
}

/* ============================================================
   FOOTER CO-SIGN — Entropia × «Соло»
   ============================================================ */
.so-cosign {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.so-cosign .x { opacity: 0.45; }
.so-cosign .so-cosign-mark { display: inline-flex; align-items: center; gap: 8px; font-family: var(--so-font-display); letter-spacing: 0.02em; text-transform: none; font-size: 15px; }
.so-cosign img { width: 26px; height: auto; }

/* ── VIDEO — sky-blue beam, let the poster read through ───── */
.theme-so .video-beam .video-beam-surface video { opacity: 1; }
.theme-so .video-beam-overlay {
  background: radial-gradient(ellipse 82% 62% at 50% 50%, rgba(20, 16, 14, 0.25) 0%, rgba(20, 16, 14, 0.85) 82%);
}
.theme-so .video-beam-scanlines { opacity: 0.3; }

/* ── HERO STATS — the compact hero hides them by default; show them here */
.theme-so .hero.hero-compact .hero-stats { display: grid; }
@media (max-width: 720px) {
  .theme-so .hero.hero-compact .hero-stats { grid-template-columns: repeat(2, 1fr); }
}