/* =========================================================
   Экран «активация» (docs/16-design-spec.md, 3.1)
   Подключается в public/index.html ПОСЛЕ assets/styles.css.
   Здесь только то, чего нет в дизайн-системе: ритм экрана,
   фото-фон промо-карточки, жёлтая плашка над заголовком,
   кадр руки во всю ширину фрейма и подвал.
   Общие компоненты (.mrc-promo-card, .mrc-step-card, .btn-*,
   .mrc-field-dark…) живут в assets/styles.css — не дублируем.
   ========================================================= */

/* ---------- Ритм экрана ----------
   Вертикальный ритм макета 8/16/24/32/40 (docs/16, 1.3). */
.mrc-activate { padding-top: var(--sp-6); }
.mrc-activate > * + * { margin-top: var(--sp-8); }
/* Кадр руки в макете примыкает к промо-карточке заметно ближе */
.mrc-activate > .mrc-hand-photo { margin-top: var(--sp-5); }

.mrc-section-head { margin: 0 0 var(--sp-4); }
.mrc-section-lead { margin: var(--sp-2) 0 var(--sp-4); }

/* ---------- Промо-карточка «ПРОКАЧАЙ СВОЮ ЭНЕРГИЮ» ----------
   Фон собирается из отдельных ассетов: золотой дым + две банки справа.
   Готового фото без текста в макете нет — вырезанное целиком promo-cans.webp
   несёт в себе заголовок и абзац, и поверх живого текста он двоится. */
.mrc-promo-card.is-activate {
  position: relative;
  padding: var(--sp-6) var(--sp-5);
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.62) 46%, rgba(0, 0, 0, 0.18) 100%),
    url("/assets/img/smoke-gold.webp");
  background-position: center;
  background-size: cover;
  overflow: hidden;
}

/* Банки — отдельными слоями поверх дыма, но под текстом карточки. */
.mrc-promo-card.is-activate::before,
.mrc-promo-card.is-activate::after {
  content: "";
  position: absolute;
  bottom: 0;
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: contain;
  pointer-events: none;
  z-index: 0;
}

.mrc-promo-card.is-activate::before {
  right: 24%;
  width: 42%;
  height: 62%;
  background-image: url("/assets/img/can-black.webp");
}

.mrc-promo-card.is-activate::after {
  right: -4%;
  width: 46%;
  height: 68%;
  background-image: url("/assets/img/can-silver.webp");
}

/* Текст и форма — над банками. */
.mrc-promo-card.is-activate > * { position: relative; z-index: 1; }

/* Жёлтая сплошная пилюля 315×34 над заголовком. В макете она без текста
   (docs/16, 3.1), но по этому же id assets/index.js подписывает активный
   сезон — плашка работает носителем подписи, а не пустой полосой. */
.mrc-promo-plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  max-width: 315px;
  min-height: 34px;
  padding: 0 var(--sp-3);
  margin-bottom: var(--sp-4);
  background: var(--c-yellow);
  color: var(--c-ink);
  border-radius: var(--r-pill);
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--fs-cap);
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}
.mrc-promo-plate svg { flex: 0 0 auto; }

/* Заголовок 40/40: «ПРОКАЧАЙ» белым, «СВОЮ ЭНЕРГИЮ» жёлтым */
.mrc-promo-heading { margin: 0 0 var(--sp-3); }

.mrc-promo-lead {
  max-width: 17rem;
  margin: 0 0 var(--sp-6);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}

/* Поле + кнопка: зазор 16, обе во всю ширину карточки */
.mrc-promo-form {
  display: grid;
  gap: var(--sp-4);
}

/* ---------- Кадр руки с банкой (docs/16, 3.1, п. 3) ----------
   Во всю ширину фрейма без боковых полей, высота ≈300, обрез по краям. */
.mrc-hand-photo {
  overflow: hidden;
  background: var(--c-bg);
}
.mrc-hand-photo img {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: center;
}

/* ---------- Подвал ---------- */
.mrc-footer {
  padding-bottom: var(--sp-6);
  text-align: center;
}
.mrc-footer-logo {
  height: 26px;
  width: auto;
  margin-bottom: var(--sp-3);
}
/* Список юридических ссылок наполняет api.js и прячет пустой через
   [hidden] — поэтому display задаём только у видимого контейнера. */
.mrc-footer-legal:not([hidden]),
.mrc-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
}
.mrc-footer-link {
  color: var(--c-text-muted);
  font-family: var(--ff-body);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  text-decoration: none;
}
.mrc-footer-link:hover { color: var(--c-yellow); }
.mrc-footer-copy {
  margin: var(--sp-3) 0 0;
  font-family: var(--ff-body);
  font-size: var(--fs-cap);
  line-height: var(--lh-cap);
  color: var(--c-placeholder);
}

/* ---------- Сообщения формы активации ----------
   id-шники сохранены за index.js: #indexCodeError, #indexCodeSuccess. */
.mrc-form-success { margin: var(--sp-4) 0 0; }
.mrc-form-success a { color: var(--c-yellow); }

.mrc-form-error {
  margin: var(--sp-3) 0 0;
  font-family: var(--ff-body);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-weight: 500;
  color: var(--c-error);
}