/* Страница /promo. Числа из макета: baqqybet-promo-campaign-new (1440) и
 * baqqybet-promo-campaign-mobile (390). Класс дельты M0 — состав тот же,
 * меняется только компоновка, поэтому мобильная ветка живёт в медиазапросах
 * рядом со своей секцией.
 *
 * Десктопный фрейм набран Archivo, мобильный — Inter; семейство переключается
 * в мобильном блоке.
 *
 * Значения, которых нет в tokens.css, стоят литералом с пометкой откуда.
 */

/* ── герой кампании (2:3645) ──────────────────────────────────────────── */
.promo-hero { padding-block: 80px; background: var(--color-bg); }   /* 2:3645 */
.promo-hero__row { display: flex; align-items: flex-start; gap: var(--space-32); }

.promo-hero__copy {
  flex: none; width: 520px; height: 480px;      /* 2:3646, высота FIXED */
  display: flex; flex-direction: column; gap: var(--space-24);
}
.promo-hero__eyebrow {
  font-family: var(--font-text);
  font-size: var(--fs-2xs); font-weight: 800; line-height: 12px; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.promo-hero__title {
  font-family: var(--font-text);
  font-size: 72px; font-weight: 900; line-height: 68px; letter-spacing: -2px;   /* 2:3649 */
  color: var(--color-text-strong);
}
.promo-hero__lead {
  font-family: var(--font-text);
  font-size: var(--fs-lg); font-weight: 400; line-height: 24px;
  color: var(--color-text);
}
.promo-hero__ctas { align-self: flex-start; display: flex; gap: var(--space-16); }   /* бокс по кнопке (HUG) */

/* Кнопка кампании (2:3652 / 2:3664): лайм, радиус 10, паддинг 12/24. */
.promo-btn {
  padding: var(--space-12) var(--space-24);
  border-radius: var(--radius-10);
  font-family: var(--font-text);
  font-size: var(--fs-body); font-weight: 800; line-height: 15.23px; letter-spacing: .04em;
}

.promo-hero__media {
  flex: 1; min-width: 0; height: 480px;
  border-radius: var(--radius-14); overflow: hidden;
}
.promo-hero__media picture, .promo-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* ── карточка кампании (2:3654 → 2:3656) ──────────────────────────────── */
.promo-offer { padding-block: var(--space-64); }
.promo-offer__row { display: flex; align-items: flex-start; gap: var(--space-32); }

.promo-card__media {
  flex: none; width: 760px; height: 360px;
  border-radius: var(--radius-14); overflow: hidden;
}
.promo-card__media picture, .promo-card__media img { width: 100%; height: 100%; object-fit: cover; }
/* Вторая кадрировка снимка — только мобильный фрейм (101:214). */
.promo-card__media--narrow { display: none; }

.promo-card__body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: var(--space-16);
  padding-block: var(--space-24);
  border-radius: var(--radius-14);
  box-shadow: inset 0 0 0 1px var(--color-border-light);   /* strokeAlign INSIDE */
}
.promo-card__label {
  align-self: flex-start;              /* в макете бокс по тексту (HUG) */
  font-family: var(--font-text);
  font-size: var(--fs-2xs); font-weight: 800; line-height: 12px; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-green);
}
/* Разделитель 2:3660 — лаймовая линия в 30 % непрозрачности. */
.promo-card__rule {
  height: 1px; margin: 0; border: 0;
  background: var(--color-accent);
  opacity: .3;
}
.promo-card__title {
  align-self: flex-start;              /* HUG */
  font-family: var(--font-text);
  font-size: 40px; font-weight: 900; line-height: 44px;   /* 2:3661 */
  color: var(--color-text-dark);
}
.promo-card__text {
  font-family: var(--font-text);
  font-size: var(--fs-md); line-height: 23px;
  color: var(--color-text-dark-muted);
}
.promo-card__note {
  align-self: flex-start;              /* HUG */
  font-family: var(--font-text);
  font-size: var(--fs-body); font-style: italic; line-height: 15.23px;
  color: var(--color-text-muted);
}
.promo-card__cta { align-self: flex-start; }

/* ── responsible wagering: общий компонент (includes/responsible-wagering.php)
   Здесь только страничные поправки геометрии — общий файл не правим.
   · В макете карточка шага — 800×136, а разделитель отдельная полоска 1px
     между карточками (16 + 1 + 16). Компонент рисует линию рамкой с
     паддингом, отчего бокс карточки на 17px выше макета.
   · У полосы поддержки обводка в макете INSIDE (strokeAlign), поэтому
     box-shadow, а не border: border поднимает габарит с 69 до 71. */
.rw__actions { gap: 33px; }
.rw__action  { position: relative; }
.rw__action + .rw__action { padding-top: 0; box-shadow: none; }
.rw__action + .rw__action::before {
  content: ""; position: absolute; left: 0; right: 0; top: -17px;
  height: 1px; background: var(--color-border-light);
}
.rw__support { min-height: 0; border: 0; box-shadow: inset 0 0 0 1px var(--color-border-light); }

/* Фокус на светлых секциях: лайм по белому не читается. */
.promo-offer :focus-visible, .rw :focus-visible { outline-color: var(--color-text-dark); }

/* ── планшет ──────────────────────────────────────────────────────────
   Порог 1359, а не 1199: десктопная шапка макета требует 1296px контента. */
@media (max-width: 1359px) {
  .promo-hero__title { font-size: var(--fs-d1); line-height: 62px; letter-spacing: -1.5px; }
  .promo-hero__copy { width: 420px; height: auto; }
  .promo-hero__media { height: 420px; }

  .promo-card__media { width: 46%; height: 300px; }
  .promo-card__title { font-size: var(--fs-h2); line-height: 36px; }

  .rw__grid { grid-template-columns: 1fr; }
}

/* ── мобильный фрейм макета, дельта M0 (101:180) ─────────────────────── */
@media (max-width: 767px) {

  /* Мобильный фрейм набран Inter. Заголовкам семейство задаётся явно:
     base.css ставит h1–h4 --font-display правилом на теге, и оно перебивает
     наследование от секции. */
  .promo-hero, .promo-offer { font-family: var(--font-ui); }
  .promo-hero__title, .promo-card__title { font-family: var(--font-ui); }
  .promo-hero__eyebrow, .promo-hero__lead, .promo-btn,
  .promo-card__label, .promo-card__text, .promo-card__note { font-family: var(--font-ui); }

  /* герой (101:205) */
  /* 101:205: нижний паддинг в макете срезан высотой фрейма — воздух снизу
     даёт уже светлая секция кампании своим верхним паддингом. */
  .promo-hero { padding-block: var(--space-40) 0; }
  .promo-hero__row { flex-direction: column; gap: var(--space-20); }
  .promo-hero__copy { width: auto; height: auto; gap: var(--space-16); }
  .promo-hero__eyebrow { align-self: flex-start; }   /* в мобильном фрейме бокс по тексту */
  /* В мобильном фрейме textCase не задан — текст и так набран капсом. */
  .promo-hero__eyebrow { line-height: 13.31px; letter-spacing: .14em; text-transform: none; }
  .promo-hero__title { font-size: 40px; line-height: 48px; letter-spacing: normal; }   /* 101:208 */
  .promo-hero__lead { font-size: var(--fs-body); line-height: 17px; }
  .promo-hero__ctas { align-self: stretch; display: block; }
  /* В мобильном фрейме кнопка растянута на всю ширину (101:210, 101:220). */
  .promo-btn { display: flex; width: 100%; padding: 14px var(--space-24); line-height: 17px; letter-spacing: normal; }
  .promo-card__cta { align-self: stretch; }
  .promo-hero__media { flex: none; width: 100%; height: 217px; }   /* 101:212 */

  /* карточка кампании (101:213) */
  .promo-offer { padding-block: var(--space-32) var(--space-40); }
  .promo-offer__row { flex-direction: column; gap: 0; }
  .promo-card__media--wide { display: none; }
  .promo-card__media--narrow { display: block; }
  .promo-card__media { width: 100%; height: 170px; }

  /* 101:215: паддинг только сверху — нижний в макете срезан высотой фрейма */
  .promo-card__body { gap: var(--space-12); padding-block: var(--space-24) 0; box-shadow: none; border-radius: 0; }
  .promo-card__rule { display: none; }            /* в мобильном фрейме линии нет */
  .promo-card__label { line-height: 13.31px; letter-spacing: .09em; text-transform: none; }
  .promo-card__title { font-size: var(--fs-h3); line-height: 34px; }
  .promo-card__text { font-size: var(--fs-body); line-height: 17px; }
  /* В мобильном фрейме подпись нарисована лаймом по бежевому — нечитаемо,
     поэтому цвет берётся десктопный. Отмечено в отчёте. */
  .promo-card__note { font-size: var(--fs-sm); line-height: 16px; color: var(--color-text-dark-muted); }

  /* responsible wagering (101:222): числа мобильного фрейма поверх компонента */
  .rw { padding-block: var(--space-40); }
  .rw__left { gap: var(--space-12); }
  .rw__title { font-size: var(--fs-h3); line-height: 31px; }
  .rw__lead  { font-size: var(--fs-body); line-height: 21px; }

  .rw__action { gap: var(--space-6); }
  .rw__num { font-size: var(--fs-h2); line-height: 39px; }
  .rw__action-title { font-size: var(--fs-lg); line-height: 19px; }
  .rw__action-text  { font-size: var(--fs-sm); line-height: 18px; }

  .rw__support { padding: var(--space-16); border-radius: var(--radius-12); }
  .rw__support-note { font-size: var(--fs-xs); line-height: 15px; }
}