/* Campaign — frame promotions-campaign[130:59] / campaign-mobile[130:221].
 * Wider gutters than the rest of the site (64px) and 6px photo corners.
 */

.camp-container {
  width: 100%; max-width: var(--container);
  margin-inline: auto; padding-inline: 64px;
}

/* ── hero (130:84) ────────────────────────────────────────────────────── */
.camp-hero { background: #f5f5f5; padding-block: var(--space-80); }
.camp-hero__inner { display: flex; gap: var(--space-32); align-items: center; }
.camp-hero__left { flex: 1 1 752px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-40); }
/* 130:91 «MORE ACTION.» 88/72 чёрным, 130:92 плашка 520×80 (радиус 4, паддинг 12/24)
   с «MORE MARKETS.» 56/56 белым. Две строки разного кегля, а не один заголовок. */
.camp-hero__title {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8);
  font-weight: 800; text-transform: uppercase;
}
.camp-hero__line { font-size: 88px; line-height: 79.2px; }
.camp-hero__mark {
  font-size: 56px; line-height: 56px;
  padding: var(--space-12) var(--space-24); border-radius: var(--radius-sm);
  background: var(--color-violet); color: #fff;
}
/* Кнопки этой страницы отличаются от общих .btn: 14/18 UPPERCASE, радиус 4.
   Герой [130:98] — 201×50, паддинг 16/32, лайм с обводкой 1.5px INSIDE;
   полоса sports [130:108] — 175×44, паддинг 14/24, чёрная;
   полоса racing [130:139] — 175×44, паддинг 14/24, лаймовая без обводки. */
.camp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8);
  padding: 14px var(--space-24); border-radius: var(--radius-sm);
  font-size: var(--fs-small); line-height: 18px; font-weight: 800;
  text-transform: uppercase; text-decoration: none; text-align: center;
}
.camp-btn--lime { background: var(--color-lime); color: var(--color-ink); }
.camp-btn--lime:hover { background: var(--color-lime-hover); }
.camp-btn--dark { background: var(--color-ink); color: #fff; }
.camp-btn--dark:hover { background: var(--color-violet); }
.camp-hero__ctas .camp-btn {
  padding: var(--space-16) var(--space-32);
  box-shadow: inset 0 0 0 1.5px var(--color-ink);
}

/* corner-plaque[130:101 / 130:124]: лайм 11/14, паддинг 8/16, радиус 2,
   в нижнем левом углу снимка с отступом 32 (в полосе sports — 24). */
.camp-plaque {
  position: absolute; left: var(--space-32); bottom: var(--space-32);
  padding: var(--space-8) var(--space-16); border-radius: var(--radius-xs);
  background: var(--color-lime); color: var(--color-ink);
  font-size: var(--fs-3xs); line-height: 14px; font-weight: 800; text-transform: uppercase;
}
.camp-band__photo .camp-plaque { left: var(--space-24); bottom: var(--space-24); padding: var(--space-8) 14px; }
.camp-hero__photo, .camp-band__photo { position: relative; }

.camp-hero__lead { font-size: var(--fs-body); line-height: 26px; max-width: 640px; }
/* 130:96 / 130:248: обычный регистр, не капс */
.camp-hero__terms { font-size: var(--fs-2xs); line-height: 18px; font-weight: 700; color: #5f6875; }
.camp-hero__photo { flex: 0 1 528px; min-width: 0; border-radius: var(--radius-md); overflow: hidden; }
.camp-hero__photo img { width: 100%; height: 540px; object-fit: cover; }

/* ── campaign bands (130:103, 130:126) ────────────────────────────────── */
.camp-band { padding-block: 96px; position: relative; overflow: hidden; }
.camp-band--dark { background: var(--color-ink); color: #fff; }
.camp-band__inner { display: flex; gap: var(--space-32); align-items: center; }
.camp-band__text { flex: 0 1 416px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-32); }
.camp-band__title {
  font-size: var(--fs-h3); line-height: 48px; font-weight: 800;
  text-transform: uppercase;
}
.camp-band__lead { font-size: var(--fs-small); line-height: 21px; }
/* 130:256 / 130:301: приписка про 18+ и условия — той же кеглей, что у лида, приглушена */
.camp-band__terms { font-size: var(--fs-xs); line-height: 18px; font-weight: 700; opacity: .7; }
.camp-band--dark .camp-band__terms { opacity: .75; }
/* Тёмная полоса: заголовок из двух строк разного кегля, вторая — на плашке */
.camp-band--dark .camp-band__title {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8);
}
.camp-band__line { font-size: 64px; line-height: 64px; }
.camp-band__mark {
  font-size: 40px; line-height: 50.4px;
  padding: var(--space-8) var(--space-16); border-radius: var(--radius-sm);
  background: var(--color-violet); color: #fff;
}
.camp-band--dark .section-head__kicker { color: var(--color-lime); }

/* the oversized word cropped by the band edge (130:127) */
.camp-band__ghost {
  position: absolute; top: var(--space-20); right: 64px;
  font-family: var(--font-display); font-weight: 400;
  font-size: 120px; line-height: 120px; text-transform: uppercase;
  color: #fff; opacity: .08; user-select: none; pointer-events: none;
}

.camp-strip {
  flex: 0 0 304px; display: flex; flex-direction: column; justify-content: space-between;
  gap: var(--space-16); min-height: 480px;
  padding: var(--space-32) var(--space-24);
  border-radius: var(--radius-md); background: var(--color-violet); color: #fff;
  text-align: center;
}
.camp-strip__item { font-size: var(--fs-lg); line-height: 23px; font-weight: 800; text-transform: uppercase; }
.camp-strip__label { font-size: var(--fs-micro); line-height: 13px; font-weight: 800; text-transform: uppercase; color: var(--color-lime); }

.camp-band__photo { flex: 0 1 528px; min-width: 0; border-radius: var(--radius-md); overflow: hidden; }
.camp-band__photo img { width: 100%; height: 480px; object-fit: cover; }

.camp-mosaic { flex: 0 1 528px; min-width: 0; display: flex; gap: var(--space-24); }
/* track-image[130:142] 324 и jockey-detail[130:143] 180 — снимки разной ширины, не поровну */
.camp-mosaic__photo { flex: 0 1 324px; min-width: 0; border-radius: var(--radius-md); overflow: hidden; }
.camp-mosaic__photo + .camp-mosaic__photo { flex: 0 1 180px; }
.camp-mosaic__photo img { width: 100%; height: 480px; object-fit: cover; }

/* racing-categories[130:144]: кремовая панель 304×480, радиус 6, паддинг 32,
   элементы прижаты к краям (space-between). Номер 32/40.32 над подписью 14/18. */
.camp-disciplines {
  flex: 0 0 304px; min-height: 480px;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--space-32); border-radius: var(--radius-md);
  background: #f3f0e4; color: var(--color-ink);
}
.camp-disciplines li {
  display: flex; flex-direction: column; gap: var(--space-8);
  font-size: var(--fs-small); line-height: 18px; font-weight: 800; text-transform: uppercase;
}
/* 01 лаймовый затемнён до #738c00 — на кремовом фоне светлый лайм нечитаем (так и в макете) */
.camp-disciplines__no { font-size: 32px; line-height: 40.32px; font-weight: 800; color: var(--color-violet); }
.camp-disciplines li:first-child .camp-disciplines__no { color: #738c00; }

@media (max-width: 1199px) {
  /* campaign-mobile utility-strip[133:417] is the 51 profile: pad 8, gap 6,
     warning 11/15.4, links 11/14 — the shared block is drawn for the 44 frames. */
  .u-strip { font-size: var(--fs-3xs); line-height: 15.4px; }
  .u-strip__inner { gap: var(--space-6); }
  /* четыре ссылки в одну строку, как в макете: при зазоре 12 они не помещаются
     в 343px и переносятся, из-за чего полоса становится 77 вместо 51 */
  .u-strip__links { font-size: var(--fs-3xs); line-height: 14px; gap: var(--space-8); }

  .camp-container { padding-inline: var(--container-pad-m); }

  /* Every column here carries a desktop flex-basis; in a column flex container
     that basis becomes a HEIGHT, which is what blew the mobile page up
     (photo 528 around a 280 image). Reset the lot first. */
  .camp-hero__left, .camp-hero__photo,
  .camp-band__text, .camp-strip, .camp-band__photo,
  .camp-mosaic, .camp-disciplines { flex: 0 0 auto; }

  .camp-hero__inner, .camp-band__inner { flex-direction: column; align-items: stretch; gap: var(--space-24); }

  /* hero-campaign-section[130:237]: pad 32/40, children 24 apart */
  .camp-hero { padding-block: var(--space-32) var(--space-40); }
  .camp-hero__left { gap: var(--space-24); }
  /* eyebrow[130:239]: 12/15.12, 6px dot, gap 6 */
  .eyebrow { font-size: var(--fs-2xs); line-height: 15.12px; gap: var(--space-6); }
  .eyebrow::before { width: 6px; height: 6px; }
  /* headlines[130:242]: «MORE ACTION.» 42/42 over plaque-heading[130:244]
     (32/32 on violet, 8/16 padding) — 6 apart, and 12 under the eyebrow */
  .camp-hero__title {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: var(--space-6); font-size: 42px; line-height: 42px;
    margin-top: calc(var(--space-12) - var(--space-24));
  }
  .camp-hero__line { font-size: 42px; line-height: 42px; }
  .camp-hero__mark {
    font-size: var(--fs-h5); line-height: 32px; padding: 8px 16px;
  }
  /* hero-desc-block[130:246]: lead 15/23 and terms 12/15.12, 16 apart */
  .camp-hero__lead { font-size: var(--fs-body-sm); line-height: 23px; }
  .camp-hero__terms {
    font-size: var(--fs-2xs); line-height: 15.12px;
    margin-top: calc(var(--space-16) - var(--space-24));
  }
  /* primary-cta[130:249] is 358x46 — full width */
  .camp-hero__ctas .camp-btn { padding: 14px var(--space-20); width: 100%; box-shadow: none; }
  /* hero-image-container[130:251] is 320 */
  .camp-hero__photo img { height: 320px; }

  /* sports-campaign[130:254] / racing-campaign[130:292]: pad 48, children 24 apart */
  .camp-band { padding-block: var(--space-48); }
  .camp-band__inner { position: relative; }
  .camp-band__text { gap: var(--space-24); }
  .camp-band__title { font-size: 36px; line-height: 39.6px; }
  .camp-band__lead { font-size: var(--fs-body-sm); line-height: 23px; }
  /* explore-sports-btn[130:257] / explore-racing-btn[130:302] are 358x46 */
  .camp-band__text .camp-btn { padding: 14px var(--space-20); width: 100%; }
  /* racing-headlines[130:297]: «RACING.» 36/39.6 over plaque-sub[130:299] (46) */
  .camp-band--dark .camp-band__title {
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6);
    margin-top: calc(var(--space-12) - var(--space-24));
  }
  .camp-band__line { font-size: 36px; line-height: 39.6px; }
  .camp-band--dark .camp-band__mark { font-size: var(--fs-h6); line-height: 30px; padding: 8px 16px; }
  /* the mockup drops the oversized ghost word on mobile */
  .camp-band__ghost { display: none; }

  /* sports-categories[130:259]: six 46-high rows, no padding, hairline between */
  .camp-strip { min-height: 0; padding: 0; gap: 0; text-align: left; }
  .camp-strip__item {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 46px; padding: 14px var(--space-20);
    font-size: var(--fs-body-sm); line-height: 18px;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .24);
  }
  .camp-strip__item:last-of-type { box-shadow: none; }
  /* corner-plaque[130:290] — the mobile frame moves this label onto the photo */
  .camp-strip__label {
    position: absolute; left: var(--space-32); bottom: var(--space-16);
    padding: 6px 12px; border-radius: var(--radius-sm);
    background: var(--color-lime); color: var(--color-ink);
    font-size: var(--fs-micro); line-height: 13px;
  }
  /* sports-photo[130:289] 240; racing-images[130:304] two 180s 12 apart */
  .camp-band__photo img { height: 240px; }
  .camp-mosaic { flex-direction: column; gap: var(--space-12); }
  .camp-mosaic__photo img { height: 180px; }
  /* racing-categories[130:307]: sand block, pad 16, three 54-high rows */
  .camp-disciplines {
    gap: 0; padding: var(--space-16);
    background: var(--color-sand); color: var(--color-ink); border-radius: var(--radius-md);
  }
  .camp-disciplines li { min-height: 54px; padding-block: var(--space-12); gap: var(--space-16); }
  .camp-disciplines__no { color: var(--color-violet); }
}