/* ═══════════════════════════════════════════════════════
   Кейс МИФ — своё: тёплый оранжевый акцент и три композиции.
   Скелет и механика — из ../shared.
   ═══════════════════════════════════════════════════════ */

/* ─── Акцент ──────────────────────────────────────── */
:root[data-case="mif"] {
  --accent: #d1541f;                  /* оранжевый издательства, притушен для светлого фона */
  --glow:   246, 110, 49;
  --glow-a: .22;
}
@media (prefers-color-scheme: dark) {
  :root[data-case="mif"]:not([data-theme="light"]) {
    --accent: #f6844f;
    --glow:   246, 110, 49;
    --glow-a: .16;
  }
}
:root[data-case="mif"][data-theme="dark"] {
  --accent: #f6844f;
  --glow:   246, 110, 49;
  --glow-a: .16;
}

[data-case="mif"] .company__link:hover { color: var(--accent); }

/* Знак «МИ∞» — широкая строка. Контейнер нарочно выше знака:
   запас, чтобы буквы не упирались в край кадра при повороте.
   `.obj` в общих стилях задаёт position: relative и перебивает
   абсолют из правила героя — возвращаем абсолют явно. */
[data-case="mif"] .obj { aspect-ratio: 124 / 42; }
@media (min-width: 48rem) {
  [data-case="mif"] .hero__object {
    position: absolute;
    left: 24%; top: 64%; width: 46vw; max-width: 30rem;
  }
}

/* ─── Медиа ───────────────────────────────────────── */
.shot--strip { max-width: 70rem; margin-inline: auto; }
.shot--total { max-width: 24rem; margin-inline: auto; }
.sec-cards, .sec-trust, .sec-total, .compo { position: relative; }

/* А · Мобильная версия и две карточки книг.
   Телефон держит левую колонку, карточки уходят вправо лесенкой. */
.compo--cards { display: grid; gap: 2rem; justify-items: center; }
@media (min-width: 48rem) {
  .compo--cards { grid-template-columns: 1fr 1fr 1fr; gap: 0 2rem; align-items: start; padding-bottom: 4%; }
  .compo__i--mobile    { width: 84%; justify-self: start; }
  .compo__i--happiness { width: 92%; margin-top: 14%; }
  .compo__i--great     { width: 82%; justify-self: end; margin-top: 30%; }
}

/* Б · Доверие: оценки слева, отзыв справа, фрагмент под ними внахлёст */
.compo--trust { display: grid; gap: 2rem; }
@media (min-width: 48rem) {
  .compo--trust { grid-template-columns: 1fr 1.2fr; gap: 1.5rem 3rem; align-items: start; padding-bottom: 2%; }
  .compo__i--rating  { width: 92%; }
  .compo__i--review  { width: 100%; margin-top: 6%; }
  .compo__i--excerpt { grid-column: 1 / span 2; width: 74%; justify-self: end; margin-top: -4%; z-index: 2; }
}