/* ═══════════════════════════════════════════════════════
   Кейс Lemon — только своё: акцент бренда и три композиции.
   Всё остальное берётся из ../shared/styles.css, поэтому
   правки скелета автоматически приезжают в оба кейса.
   ═══════════════════════════════════════════════════════ */

/* ─── Акцент ──────────────────────────────────────── */
/* Фон и типографика общие для сайта, жёлтым помечено только
   то, что принадлежит кейсу: свечение курсора, цифры шагов,
   заливка кнопки и 3D-знак (палитра matcap задана в разметке). */

:root[data-case="lemon"] {
  --accent: #b98400;                 /* на светлом фоне чистый #FFD500 не читается */
  --glow:   255, 213, 0;
  --glow-a: .22;
}
@media (prefers-color-scheme: dark) {
  :root[data-case="lemon"]:not([data-theme="light"]) {
    --accent: #ffd500;
    --glow:   255, 213, 0;
    --glow-a: .16;                   /* жёлтое свечение ярче голубого — приглушаем */
  }
}
:root[data-case="lemon"][data-theme="dark"] {
  --accent: #ffd500;
  --glow:   255, 213, 0;
  --glow-a: .16;
}

[data-case="lemon"] .company__link:hover,
[data-case="lemon"] .stage__n { color: var(--accent); }
[data-case="lemon"] .btn--fill { background: var(--accent); color: #12141a; border-color: transparent; }

/* Знак-лимон чуть выше своей ширины — пропорции из присланного вектора */
[data-case="lemon"] .obj { aspect-ratio: 127 / 140; }
@media (min-width: 48rem) {
  [data-case="lemon"] .hero__object { left: 29%; top: 70%; width: 30vw; max-width: 19rem; }
}

/* ─── Медиа ───────────────────────────────────────── */

/* полоса шага заявки — узкая, ей не нужна вся ширина колонки */
.shot--strip { max-width: 60rem; margin-inline: auto; }
.shot--scheme, .shot--steps { max-width: 70rem; margin-inline: auto; }
.shot--scheme + .shot--steps { margin-top: 2.4rem; }

/* А · Чат + погашение + иллюстрация.
   На скриншоте: слева высокий чат, справа сверху модалка,
   под ней — иллюстрация, сдвинутая к правому краю. */
.compo--chat { display: grid; gap: 2rem; }
@media (min-width: 48rem) {
  .compo--chat {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem 3rem;
    align-items: start;
  }
  .compo__i--chat   { width: 74%; margin-left: auto; grid-row: span 2; align-self: center; }
  .compo__i--repay  { width: 82%; margin-top: -1.5rem; }
  .compo__i--blobby { width: 68%; margin-left: 14%; margin-top: -2rem; z-index: 2; }
}

/* Б · Бренд: креатив, фото и чек.
   Креатив вертикальный — держит левую колонку, фото уходит
   вправо вверх, чек наезжает на него снизу. */
.compo--brand { display: grid; gap: 2rem; }
@media (min-width: 48rem) {
  .compo--brand { grid-template-columns: 1fr 1.25fr; gap: 2rem 3rem; align-items: start; padding-bottom: 4%; }
  .compo__i--promo   { grid-row: span 2; width: 84%; margin-top: 2rem; }
  .compo__i--lemons  { grid-column: 2; width: 100%; }
  .compo__i--receipt { grid-column: 2; width: 62%; margin-left: auto; margin-top: -8%; z-index: 3; }
}