/* ==========================================================================
   MEDIA BOX — СТРАНИЦА «ОРГАНИЧЕСКИЙ АРБИТРАЖ» (p-arbitrage.css)
   --------------------------------------------------------------------------
   Подключается на arbitrage.html ПОСЛЕ pages.css и screens.css
   и ПЕРЕД future.css.
   Общие блоки (.page-hero, .arb-visual, .define, .flow, .wall, .compare,
   .features, .faq, .plan__list, .cta, .card, .chip) описаны в base.css
   и pages.css — здесь только то, что нужно этой странице дополнительно.

   Содержание:
     1. Определение: пояснение про «бесплатный» (.arb-define__note)
     2. Стена из 5 телефонов — один Media Box (.arb-wall)
     3. Формула «частота + масштаб + тестирование + автоматизация» (.arb-formula)
     4. Organic Traffic Funnel, кратко (.arb-funnel)
     5. Площадки (.arb-plats, .arb-plat)
     6. Два варианта входа (.arb-path)
     7. Reduced motion

   Правила (как во всём проекте):
     • непрерывно анимируются только transform и opacity;
     • hover — только внутри @media (hover: hover) and (pointer: fine);
     • брейкпоинты: телефон < 640px, планшет 640–1023px, ПК ≥ 1024px;
     • цвета — только переменные из base.css.
   ========================================================================== */


/* ==========================================================================
   1. ОПРЕДЕЛЕНИЕ: ПОЯСНЕНИЕ ПРО «БЕСПЛАТНЫЙ»
   ========================================================================== */

.arb-define__note {
  margin-top: clamp(18px, 2.4vw, 26px);
  padding-top: clamp(16px, 2vw, 22px);
  max-width: 52ch;
  border-top: 1px solid var(--border);
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--text-muted);
}


/* ==========================================================================
   2. СТЕНА ИЗ 5 ТЕЛЕФОНОВ (один Media Box)
   Базовая стена .wall из pages.css рассчитана на 10 ячеек в два ряда.
   Здесь ячеек пять (базовый комплект), поэтому телефоны крупнее,
   а снизу больше места под подпись.
   ========================================================================== */

.arb-wall .wall__grid {
  gap: 4cqw 2.5cqw;
  padding: 4cqw 1cqw 22cqw;
}

.arb-wall .wall__cell .mphone {
  --pw: 17cqw;
  --ph: calc(17cqw * 2.06);
}

/* Шахматный сдвиг: чётные телефоны ниже */
.arb-wall .wall__cell:nth-child(even) {
  transform: translateY(10cqw);
}

/* Индикатор — у правого верхнего угла более крупного телефона */
.arb-wall .wall__led {
  right: calc(50% - 9.5cqw);
}

/* Телефон: подпись может уйти в две строки — больше места снизу */
@media (max-width: 639.98px) {
  .arb-wall .wall__grid {
    padding-bottom: 27cqw;
  }
}


/* ==========================================================================
   3. ФОРМУЛА ПОДХОДА
   ПК — четыре карточки в строку, «+» между ними.
   Телефон и планшет — столбиком, «+» между карточками сверху.
   ========================================================================== */

.arb-formula-wrap {
  margin-top: clamp(32px, 4.4vw, 56px);
}

.arb-formula__label {
  margin-bottom: 18px;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .16em;
  text-align: center;
  text-transform: uppercase;
  color: var(--text-muted);
}

.arb-formula {
  --gap: 36px;

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap);
}

.arb-formula__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  text-align: center;
}

.arb-formula__name {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.arb-formula__text {
  font-size: .875rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Знак «+» между слагаемыми */
.arb-formula__item + .arb-formula__item::before {
  content: '+';
  position: absolute;
  left: 50%;
  top: calc(var(--gap) / -2);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 50%;
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text-on-accent);
  background: var(--accent-grad);
}

@media (min-width: 1024px) {
  .arb-formula {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .arb-formula__item + .arb-formula__item::before {
    left: calc(var(--gap) / -2);
    top: 50%;
  }
}


/* ==========================================================================
   4. ORGANIC TRAFFIC FUNNEL (кратко)
   Слева — текст и ссылка на «Ведение проекта», справа — цепочка из трёх
   шагов. Линия между шагами видна только в промежутках.
   ========================================================================== */

.arb-funnel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding: clamp(24px, 4vw, 48px);
  border-radius: var(--radius-xl);
}

@media (min-width: 1024px) {
  .arb-funnel {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  }
}

.arb-funnel__text > h2 {
  margin-top: 14px;
}

.arb-funnel__lead {
  margin-top: 16px;
  max-width: 60ch;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-muted);
}

.arb-funnel__more {
  margin-top: 24px;
}

.arb-funnel__chain {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Вертикальная линия через центры номеров (отступ 15px + половина номера 22px) */
.arb-funnel__chain::before {
  content: '';
  position: absolute;
  left: 37px;
  top: 30px;
  bottom: 30px;
  width: 2px;
  margin-left: -1px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), var(--accent-3));
  opacity: .45;
}

.arb-funnel__step {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px 14px 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.arb-funnel__num {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text-on-accent);
  background: var(--accent-grad);
}

.arb-funnel__num .icon {
  width: 20px;
  height: 20px;
}

/* Последний шаг (заявка) — зелёный, с мягкой «волной» */
.arb-funnel__step--goal {
  border-color: var(--accent-3);
}

.arb-funnel__step--goal .arb-funnel__num {
  background: var(--accent-3);
}

.arb-funnel__step--goal .arb-funnel__num::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--accent-3);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  animation: arb-goal-wave 2.8s var(--ease-out) infinite both;
}

@keyframes arb-goal-wave {
  0%   { opacity: .7; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.5); }
}

.arb-funnel__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.arb-funnel__name {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
}

.arb-funnel__hint {
  font-size: .875rem;
  line-height: 1.45;
  color: var(--text-muted);
}


/* ==========================================================================
   5. ПЛОЩАДКИ
   Пять карточек (Instagram, TikTok, YouTube; Facebook и Threads —
   «в разработке», решение владельца 04.10.2026).
   Телефон — строки (значок, название, статус); планшет — 3 колонки;
   ПК — все пять в строку. «В разработке» — пунктирная рамка, без цвета.
   ========================================================================== */

.arb-plats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

@media (min-width: 640px) {
  .arb-plats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (min-width: 1024px) {
  .arb-plats {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.arb-plat {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

@media (min-width: 640px) {
  .arb-plat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
  }
}

.arb-plat__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface-2);
}

.arb-plat__icon .icon {
  width: 22px;
  height: 22px;
}

.arb-plat--ig .arb-plat__icon { color: var(--ig); }
.arb-plat--tt .arb-plat__icon { color: var(--tt); }
.arb-plat--yt .arb-plat__icon { color: var(--yt); }

.arb-plat__name {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
}

/* Статус: «Работает» — зелёная точка, «В разработке» — серая */
.arb-plat__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--accent-3);
}

.arb-plat__status::before {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.arb-plat--soon {
  border-style: dashed;
  background: transparent;
}

.arb-plat--soon .arb-plat__icon {
  color: var(--text-muted);
  background: transparent;
}

.arb-plat--soon .arb-plat__name,
.arb-plat--soon .arb-plat__status {
  color: var(--text-muted);
}

.arb-plats__note {
  margin-top: clamp(18px, 2.4vw, 24px);
  max-width: 76ch;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--text-muted);
}


/* ==========================================================================
   6. ДВА ВАРИАНТА ВХОДА
   Список с галочками — .plan__list из pages.css.
   ========================================================================== */

.arb-path {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.arb-path > * {
  margin: 0;
}

.arb-path .card__icon {
  align-self: flex-start;
}

.arb-path__title {
  font-size: 1.375rem;
  line-height: 1.3;
}

.arb-path__text {
  margin-top: -6px;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Кнопка — внизу карточки, в обеих карточках на одной высоте */
.arb-path .btn {
  margin-top: auto;
}


/* ==========================================================================
   7. REDUCED MOTION — декоративное движение выключено
   (визуал в шапке, стена и схема — в pages.css, раздел v2.6 и 7)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .arb-funnel__step--goal .arb-funnel__num::after {
    animation: none !important;
    display: none;
  }
}