/* ═══════════════════════════════════════════════════════
   Кейс Robodialog — маленький: акцент, три композиции.
   Скелет и механика — из ../shared.
   ═══════════════════════════════════════════════════════ */

/* ─── Акцент ──────────────────────────────────────── */
:root[data-case="robodialog"] {
  --accent: #e07a1f;                  /* фирменный оранжевый, притушен для светлого фона */
  --glow:   244, 161, 38;
  --glow-a: .24;
}
@media (prefers-color-scheme: dark) {
  :root[data-case="robodialog"]:not([data-theme="light"]) {
    --accent: #f4a126;
    --glow:   244, 161, 38;
    --glow-a: .17;
  }
}
:root[data-case="robodialog"][data-theme="dark"] {
  --accent: #f4a126;
  --glow:   244, 161, 38;
  --glow-a: .17;
}

/* Логотип-слово: вектор уже оранжевый — по теме не инвертируем.
   Контейнер нарочно выше самого знака (598/190 против 598/143): запас по
   вертикали нужен, чтобы при повороте буквы не упирались в край кадра. */
[data-case="robodialog"] .obj { aspect-ratio: 598 / 190; }
[data-case="robodialog"] .obj__fallback { filter: none; object-fit: contain; }
@media (min-width: 48rem) {
  [data-case="robodialog"] .hero__object {
    /* .obj в общих стилях задаёт position: relative и перебивает абсолют
       из правила героя — возвращаем абсолют, иначе top не работает */
    position: absolute;
    left: 22%; top: 65%; width: 60vw; max-width: 40rem;
  }
}

/* ─── Декор ───────────────────────────────────────── */
.dec {
  position: absolute;
  pointer-events: none;
  z-index: 4;
  transform: translate3d(var(--mx, 0px), calc(var(--my, 0px) + var(--py, 0px)), 0);
  transition: transform .12s linear;
}
@media (max-width: 48rem) { .dec { display: none; } }

.sec-pal, .sec-cards, .sec-wave, .compo { position: relative; }

/* ─── Композиции ──────────────────────────────────── */

/* А · Палитра: три пары в ряд со сдвигом по вертикали, как на референсе */
.compo--pal { display: grid; gap: 2rem; justify-items: center; }
@media (min-width: 48rem) {
  .compo--pal { grid-template-columns: repeat(3, 1fr); gap: 0; align-items: start; }
  .compo__i--p1 { width: 68%; justify-self: start; margin-left: 6%; }
  .compo__i--p2 { width: 78%; justify-self: center; margin-top: -6%; }
  .compo__i--p3 { width: 62%; justify-self: end;  margin-top: 6%; margin-right: 4%; }
}

/* Б · Карточки: робот слева, «Informing» по центру, «Dialogue» крупнее и правее */
.compo--cards { display: grid; gap: 2rem; justify-items: center; }
@media (min-width: 48rem) {
  .compo--cards { grid-template-columns: 1fr 1.25fr; gap: 0 3rem; align-items: start; padding: 2% 0 4%; }
  .compo__i--inform { width: 62%; justify-self: end;  margin-top: 4%; }
  .compo__i--dialog { width: 78%; justify-self: start; z-index: 3; }
  .dec--robot { width: 13%; left: 2%; top: 22%; }
}

/* В · Волна и крупный логотип: волна слева, логотип справа снизу */
.compo--wave { display: grid; gap: 2rem; justify-items: center; }
@media (min-width: 48rem) {
  .compo--wave { padding-bottom: 6%; }
  .compo__i--wave { width: 84%; justify-self: start; margin-left: -4%; }
  .dec--logo { width: 34%; right: 2%; bottom: 0; }
}