/* Sports page — frame sports[1:348] / sports-mobile[64:4].
 * Only the featured-competition block is specific to this page; the hero, the
 * board and the slip come from components.css.
 */

/* featured competition (sports[8:76]) */
.featured__row { display: flex; gap: var(--space-24); align-items: stretch; }

/* featured-left[8:78] — лаймовая колонка без радиуса: в макете «радиус НЕТ → 0» */
.featured__rail {
  flex: 0 0 160px; display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--space-24); background: var(--color-lime);
}
.featured__rail-num { font-size: var(--fs-h4); line-height: 50.4px; font-weight: 800; }
.featured__rail-label {
  font-size: var(--fs-2xs); line-height: 15px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.72px;   /* 0.06em из [1:525] */
}

.featured__body { flex: 1 1 624px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-24); }
/* кикер этой секции мельче общего [8:80]: 11/14 с трекингом 0.12em */
.featured .section-head__kicker { font-size: var(--fs-3xs); line-height: 14px; letter-spacing: 1.32px; }
.featured__sport {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--fs-watermark); line-height: 86.4px; text-transform: uppercase;
}
.featured__note { font-size: var(--fs-body-sm); line-height: 19px; font-weight: 700; opacity: .7; }
.featured__athletes { display: flex; flex-direction: column; gap: var(--space-4); }
.featured__athlete {
  font-family: var(--font-display); font-weight: 400;
  font-size: 36px; line-height: 54px; text-transform: uppercase;   /* [8:84] 36/54.19 */
}
.featured__vs { font-size: var(--fs-small); line-height: 18px; font-weight: 800; text-transform: uppercase; }
/* time-and-tag: на 1440 это два узла колонки featured-middle с общим шагом 24 */
.featured__meta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-24); }
.featured__time { font-size: var(--fs-small); line-height: 18px; font-weight: 700; }
.featured__badge {
  align-self: flex-start; padding: 8px 16px; border-radius: var(--radius-md); color: var(--color-lime);
  line-height: 14px; letter-spacing: 0.88px;   /* [8:86] 11/14, 0.08em */
}

.featured__photo {
  flex: 0 1 528px; min-width: 0; position: relative;
  border-radius: var(--radius-sm); overflow: hidden;
}
.featured__photo img { width: 100%; height: 520px; object-fit: cover; border-radius: var(--radius-sm); }
/* the violet block the mockup lays over the bottom-right corner (sports[8:88]).
   В макете блок 220×160 лежит внутри featured-right @348,280 при маске фрейма:
   справа он обрезан (видно 180), а снизу поднят на 80. */
.featured__photo::after {
  content: ""; position: absolute; right: -40px; bottom: 80px; width: 220px; height: 160px;
  background: var(--color-violet); border-radius: var(--radius-sm);
}

@media (max-width: 1199px) {
  .featured__row { flex-direction: column; gap: var(--space-16); }
  .featured__rail { flex: 1 1 auto; flex-direction: row; align-items: center; justify-content: space-between; padding: var(--space-16); }
  .featured__rail-num { font-size: var(--fs-h6); line-height: 35px; }
  .featured__body { flex: 1 1 auto; gap: var(--space-16); }
  .featured__sport { font-size: 56px; line-height: 56px; }
  .featured__athlete { font-size: var(--fs-lead); line-height: 34px; }
  .featured__photo { flex: 1 1 auto; width: 100%; }
  .featured__photo img { height: 240px; }
  .featured__photo::after { width: 120px; height: 80px; }
}

/* sports-mobile[64:21]: the hero stacks its plaques and the photo is 320 high,
   unlike the home frame where they sit in a row above a 240 photo. */
@media (max-width: 1199px) {
  /* hero[64:21]: pad 32/48, every child 24 apart */
  .hero { padding-block: var(--space-32) var(--space-48); }
  .hero__inner, .hero__left, .hero__right { gap: var(--space-24); }
  /* headline-stack[64:25]: «BET ON THE» + «SPORTS» are two 38/38 nodes 8 apart
     and one span here, so the run carries the 8 itself (38+4 per line); then
     gap 8 down to purple-highlight-container[64:28] (46 high). */
  .hero__title { gap: var(--space-8); }
  .hero__line { line-height: 42px; }
  /* purple-block[64:29] stays 46: 38/38 text with 4/10 padding */
  .hero__line--2 .hero__mark { line-height: 38px; }
  /* cta-primary[64:32] is 358x46 with 14/18 text */
  .hero__ctas .btn--primary { padding-block: 14px; }
  .hero__photo img { height: 320px; }
  /* info-modules[64:35]: plaques 65 high — pad 14, gap 6, 12/15.12 + 13/16.38 */
  .plaques { flex-direction: column; gap: var(--space-12); }
  .plaque { padding: 14px; gap: var(--space-6); }
  .plaque__label { font-size: var(--fs-2xs); line-height: 15.12px; }
  .plaque__text { font-size: var(--fs-xs); line-height: 16.38px; }

  /* featured-competition[64:154]: pad 40/48, groups 24 apart, photo 340.
     The mockup groups the body into title-stack / athletes / time-and-tag with
     4 inside and 24 between; the markup is one flat column, so the inner gap is
     4 and the 24 lives on the one boundary that needs it. */
  .featured { padding-block: var(--space-40) var(--space-48); }
  .featured__row { gap: var(--space-24); }
  /* featured-lime-header[64:155] is a 30-high strip: pad 8/12, r2, and one line
     «03 / FEATURED COMPETITION» 11/14 flush left — not the two-ended rail of
     the desktop frame. Разметка остаётся из двух узлов, разделитель рисуется. */
  .featured__rail { padding: 8px 12px; justify-content: flex-start; border-radius: 2px; }
  .featured__rail-num { font-size: var(--fs-3xs); line-height: 14px; letter-spacing: 0.44px; }
  .featured__rail-num::after { content: " / "; white-space: pre; }
  .featured__rail-label { font-size: var(--fs-3xs); line-height: 14px; letter-spacing: 0.44px; }
  .featured__body { gap: var(--space-4); }
  /* [64:158] 10/13, трекинг 0.04em, прозрачность 0.6 */
  .featured .section-head__kicker {
    font-size: var(--fs-micro); line-height: 13px; letter-spacing: 0.8px; opacity: .6;
  }
  /* [64:159] на 390 заголовок набран Plus Jakarta Sans ExtraBold, а не Anton */
  .featured__sport { font-family: var(--font-body); font-weight: 800; font-size: 36px; line-height: 45.36px; }
  .featured__note { font-size: var(--fs-xs); line-height: 16.38px; }
  .featured__athletes { margin-top: var(--space-20); }
  /* [64:162]/[64:164] — тоже Plus Jakarta Sans ExtraBold 22/28 */
  .featured__athlete { font-family: var(--font-body); font-weight: 800; font-size: var(--fs-title); line-height: 28px; }
  .featured__vs { font-size: var(--fs-2xs); line-height: 15.12px; }
  /* time-and-tag[64:165]: строка с зазором 12, а не колонка */
  .featured__meta { flex-direction: row; align-items: center; gap: var(--space-12); margin-top: var(--space-20); }
  .featured__time { font-size: var(--fs-xs); line-height: 16.38px; }
  /* upcoming-plaque[64:167] is 25 high: 10/13 with 6/12 padding, r4 */
  .featured__badge {
    padding: 6px 12px; border-radius: var(--radius-sm);
    font-size: var(--fs-micro); line-height: 13px; letter-spacing: 0.4px;
  }
  .featured__photo img { height: 340px; }
  /* photo-composition[64:169] holds the photo alone on mobile */
  .featured__photo::after { display: none; }

  /* responsible-gambling[70:1516]/[71:1585]: this frame draws the band at 716 —
     pad 40, header 90 (11/14 + 32/32 + a 32 mark, 6 apart), cards 166 high and
     12 apart. The shared block carries the 837 profile of the other frames. */
  .rg-band { padding-block: var(--space-40); }
  .rg-band__inner { gap: var(--space-24); }
  .rg-band__intro { gap: var(--space-6); max-width: none; }
  .rg-band .eyebrow { font-size: var(--fs-3xs); line-height: 14px; letter-spacing: 0.44px; }
  .rg-band__title { font-size: var(--fs-h5); line-height: 32px; gap: var(--space-6); }
  .rg-band__mark { font-size: var(--fs-lead); line-height: 24px; padding: 4px 8px; }
  .rg-cards { gap: var(--space-12); }
  .rg-card { padding: var(--space-16); gap: var(--space-12); }
  .rg-card__num { font-size: var(--fs-title); line-height: 28px; }
  .rg-card__title { font-size: var(--fs-body-sm); line-height: 19px; }
  .rg-card__text { font-size: var(--fs-xs); line-height: 18px; }
  .rg-card__link { font-size: var(--fs-2xs); line-height: 15px; }

  /* footer 934 — these two frames are in the minority group (the shared block
     follows the 1035 majority): pad 40 and the copyright above the payments. */
  .site-footer { padding-block: var(--space-40); }
  .footer-brand { gap: var(--space-10); }
  .footer-divider--mobile { display: none; }
  .footer-bottom { order: 1; }
  .footer-pay { order: 2; }
}

/* sports-mobile[64:122] draws the slip at 414 — 20 padding and 16 gaps, not the
   16/14 of the home frame the shared component follows. */
@media (max-width: 1199px) {
  .slip { padding: var(--space-20); gap: var(--space-16); }
}