/* Каркас страницы: контейнер, верхний RG-бар, шапка, подвал, общие полосы.
 * Числа — из макета (fig-spec/gen), не из головы.
 * Десктопный фрейм 1440 с паддингом 48 → контент 1344.
 * Мобильный фрейм 390 с паддингом 16 → контент 358.
 */

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

/* Секция макета — во всю ширину, контент внутри ограничен контейнером. */
.section { padding-block: var(--section-pad-y); }
.section--light { background: var(--color-bg-light); color: var(--color-text-dark); }
.section--dark { background: var(--color-bg); }

/* ── верхний бар ответственной игры ───────────────────────────────────── */
/* Регуляторная полоса. На десктопе одна строка, на мобильном три ряда. */
.rg-bar {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 40px;
  padding-inline: var(--container-pad);
  background: var(--color-bg);
  box-shadow: inset 0 -1px 0 var(--color-border);   /* strokeAlign INSIDE, bottom */
}
/* Пилюли не сжимаются: содержимое в них — цельные подписи, и при сжатии текст
   переносится и вылезает за скруглённую плашку. В мобильном фрейме у них своя
   раскладка (делятся поровну), поэтому правило только для широких экранов. */
.rg-bar { flex-wrap: wrap; row-gap: var(--space-8); }
@media (min-width: 768px) {
  .rg-bar .pill { flex: none; white-space: nowrap; }
}
.rg-bar__left  { display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap; }
/* Высоты пилюль в макете заданы жёстко (FIXED), из паддингов они не выводятся. */
.rg-bar__right .pill { height: 28px; }
.pill--age { height: 22px; }
.rg-bar__right { display: flex; align-items: center; gap: var(--space-16); }

.rg-bar__think { font-size: var(--fs-sm); line-height: 16px; color: var(--color-text-muted); }
.rg-bar__lose  { font-size: var(--fs-sm); line-height: 16px; color: var(--color-text); }
.rg-bar__sm    { display: none; }   /* «Gambling Help» — короткая мобильная подпись */

/* ── шапка ────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--color-bg);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 88px;
  /* gap в макете нет: раскладку держит space-between. Добавленный gap 24
     давал +72px к 1296px содержимого и распирал шапку на 1440. */
  gap: 0;
}

.logo {
  font-family: var(--font-ui);
  font-size: var(--fs-h4); font-weight: 900; line-height: 29.05px;
  letter-spacing: -.5px;
  color: var(--color-text-strong);
  text-decoration: none;
  white-space: nowrap;
}

/* В макете между логотипом и меню 16px. Space-between распределяет остаток, а
   его почти нет: наши строки шире макетных на 19px, и подписи слипались. */
/* Без min-width: 0 — иначе меню сжимается уже своего содержимого, и купон
   выходит за его границу, наезжая на подпись справа. */
.nav { margin-inline: var(--space-16); }
.nav__list { display: flex; align-items: center; gap: 28px; }
/* Пункты выравниваются по высоте: у купона своя высота, и без этого его строка
   считается вторым рядом меню — свип адаптива отмечал это как «сироту». */
.nav__list > li { display: flex; align-items: center; min-height: 40px; }
.nav__link {
  font-size: var(--fs-md); font-weight: 600; line-height: 18.15px; letter-spacing: .45px;  /* 0.03em из макета */
  color: var(--color-text); text-decoration: none;
  white-space: nowrap;         /* «How It Works» в макете в одну строку */
  transition: color var(--dur-fast) var(--ease);
}
.nav__link:hover { color: var(--color-text-strong); }
.nav__link.is-current { color: var(--color-text-strong); }

/* «18+ Australians only» в шапке — из макета, отдельно от бара выше. */
.site-header__age {
  font-size: var(--fs-2xs); font-weight: 900; line-height: 13.31px;
  color: var(--color-text);
  white-space: nowrap;
  /* В макете между «18+ Australians only» и кнопками 16px. Свободного места на
     распределение почти нет, поэтому зазор задан явно — иначе подписи слипаются. */
  margin-right: var(--space-16);
}

.site-header__actions { display: flex; align-items: center; gap: var(--space-12); }
.site-header__user { font-size: var(--fs-body); line-height: 17px; color: var(--color-text); }

.burger { display: none; }

/* ── RG-полоса с BetStop ──────────────────────────────────────────────── */
/* Стоит на всех 15 страницах макета перед платёжными методами. */
.rg-strip {
  padding-block: var(--space-64);
  background: var(--color-panel);
  box-shadow: inset 0 0 0 1px var(--color-border);   /* strokeAlign INSIDE */
}
.rg-strip__inner  { display: flex; flex-direction: column; gap: var(--space-24); }
.rg-strip__notice { display: flex; flex-direction: column; gap: var(--space-10); }
.rg-strip__head {
  font-family: var(--font-ui);
  font-size: var(--fs-d2); font-weight: 900; line-height: 55px;
  color: var(--color-text-strong);
}
.rg-strip__line { font-size: var(--fs-body); line-height: 17px; color: var(--color-text); }
.rg-strip__line--strong { font-weight: 700; }
.rg-strip__line a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.rg-strip__line a:hover { color: var(--color-accent); }

.rg-strip__rule { height: 1px; background: var(--color-border); border: 0; margin: 0; }

.rg-strip__betstop {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-24);
}
.rg-strip__betstop-text { display: flex; flex-direction: column; gap: var(--space-8); }
.rg-strip__betstop-title { font-size: var(--fs-body); font-weight: 600; line-height: 17px; color: var(--color-text-strong); }
.rg-strip__betstop-note  { font-size: var(--fs-sm); line-height: 16px; color: var(--color-text-muted); }

/* ── платёжные методы ─────────────────────────────────────────────────── */
/* Паддинг у этой полосы свой (40, не 48 контейнера) — так в макете. */
.payments { background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-border); }
.payments__inner {
  display: flex; flex-direction: column; gap: var(--space-24);
  max-width: var(--container); margin-inline: auto;
  padding: var(--space-40);
}
.payments__title {
  font-family: var(--font-ui);
  font-size: var(--fs-2xs); font-weight: 800; line-height: 13.31px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--color-text-muted);
}
.payments__row { display: flex; align-items: center; gap: var(--space-16); min-height: 40px; }
.payments__row img { width: 300px; height: 40px; object-fit: contain; object-position: left center; }
.payments__note {
  display: flex; align-items: center; gap: var(--space-12);
  font-size: var(--fs-sm); line-height: 16px; color: var(--color-text-muted);
}
.payments__badge {
  flex: none;
  padding: var(--space-6) var(--space-10);
  background: var(--color-accent); color: var(--color-on-accent);
  border-radius: var(--radius-pill);
  font-size: var(--fs-2xs); font-weight: 900; line-height: 13.31px;
}

/* ── подвал ───────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--color-footer);
  padding-block: var(--space-64);
}
.site-footer__inner { display: flex; flex-direction: column; gap: var(--space-48); }

.site-footer__top { display: flex; flex-direction: column; gap: var(--space-32); }
.site-footer__wordmark {
  font-family: var(--font-ui);
  font-size: var(--fs-hero); font-weight: 900; line-height: 116.18px;
  letter-spacing: -2px;
  color: var(--color-text-strong);
}

.site-footer__cols {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-48);
}
.site-footer__col { display: flex; flex-direction: column; gap: var(--space-12); }
/* PRODUCT нарисована только в мобильном подвале — на десктопе её нет. */
.site-footer__col--mobile { display: none; }
.site-footer__title {
  font-family: var(--font-ui);
  font-size: var(--fs-xs); font-weight: 900; line-height: 15px;
  text-transform: uppercase;
  color: var(--color-accent);
}
.site-footer__list { display: flex; flex-direction: column; gap: var(--space-12); }
.site-footer__list a {
  font-size: var(--fs-sm); line-height: 16px;
  color: var(--color-text); text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.site-footer__list a:hover { color: var(--color-accent); }

.site-footer__rule { height: 1px; background: var(--color-border); border: 0; margin: 0; }

.site-footer__legal { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-48); }
.site-footer__legal p { font-size: var(--fs-sm); line-height: 16px; color: var(--color-text-muted); }
.site-footer__details { display: flex; flex-direction: column; gap: var(--space-8); }
.site-footer__details li { font-size: var(--fs-sm); line-height: 16px; color: var(--color-text); }

/* Низ подвала: копирайт и — по решению проекта — регуляторное «18+». */
.site-footer__bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-16);
}
.site-footer__copy { font-size: var(--fs-xs); line-height: 15px; color: var(--color-text-muted); }
.site-footer__age {
  font-family: var(--font-ui);
  font-size: var(--fs-body); font-weight: 900; line-height: 17px;
  color: var(--color-text-strong);
  white-space: nowrap;
}

/* ── наверх ───────────────────────────────────────────────────────────── */
.to-top {
  position: fixed; right: var(--space-24); bottom: var(--space-24); z-index: var(--z-header);
  width: 44px; height: 44px; border: 1px solid var(--color-border); border-radius: 50%;
  background: var(--color-panel); color: var(--color-accent); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.to-top:hover { background: var(--color-panel-deep); transform: translateY(-2px); }
.to-top::before { content: "↑"; }

/* ── планшет ──────────────────────────────────────────────────────────
   Порог 1359, а не 1199: десктопная шапка макета требует 1296px контента
   плюс паддинги, и на 1280 она уже распирает документ. */
/* Подпись «18+ Australians only» в шапке помещается ровно в макетные 1440
   содержимого. В окне 1440 полоса прокрутки съедает 15px, и подпись наезжает на
   купон, поэтому порог взят с запасом: то же самое написано строкой выше, в
   верхнем баре, так что потери информации нет. */
/* Порог 1419, а не 1359: полное меню с купоном требует 1413px содержимого,
   и на 1360–1400 оно выталкивало документ за экран. */
@media (max-width: 1419px) {
  /* Пункты меню уезжают в бургер, но купон остаётся в шапке: он лежит внутри
     .nav последним пунктом, и `.nav { display: none }` уносил его вместе с
     меню — на всех ширинах 768–1419 (типовые ноутбуки 1280 и 1366) корзина из
     шапки просто исчезала. */
  .nav { display: block; }
  .nav__list > li:not(:last-child) { display: none; }
  .site-header__age { display: none; }
  .burger { display: inline-flex; align-items: center; justify-content: center; }
  .site-footer__legal { grid-template-columns: repeat(2, 1fr); gap: var(--space-32); }
}

/* ── мобильная раскладка макета (фрейм 390) ───────────────────────────── */
@media (max-width: 767px) {
  .container { padding-inline: var(--container-pad-mobile); }
  /* Вертикальный ритм мобильного фрейма — 40, а не 48: без этого каждая секция
     смещала всё, что ниже, на 8px, и сверка копила сдвиг до сотен пикселей. */
  .section { padding-block: var(--section-pad-y-mobile); }

  .rg-bar {
    /* nowrap обязателен: направление здесь вертикальное, и перенос уводил бы
       ряды во вторую колонку вправо, растягивая документ. */
    flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: var(--space-8);
    height: 99px;                      /* высота бара в мобильном фрейме задана жёстко */
    padding: var(--space-12) var(--container-pad-mobile);
  }
  /* В мобильном фрейме бар — три ряда: бейдж и «Think about…», затем строка
     «What are you prepared to lose today?», затем две пилюли. DOM один и тот же,
     ряд создаётся переносом. */
  .rg-bar__left { flex-wrap: wrap; justify-content: space-between; gap: var(--space-8); }
  /* Строка «What are you prepared to lose today?» занимает всю ширину и
     центрируется — в мобильном фрейме это отдельный ряд, а не часть первого. */
  .rg-bar__lose { flex: 1 0 100%; font-size: var(--fs-xs); line-height: 15px; text-align: center; }
  .rg-bar__think { flex: none; }
  .rg-bar__right { gap: var(--space-8); }
  /* В макете обе пилюли по 175px, но содержимое туда не влезает: эталонный
     рендер переносит «Gambling Help» на вторую строку и выпускает текст за
     пределы пилюли высотой 26px. Поэтому ширина здесь по содержимому — ряд всё
     равно занимает почти всю строку (356 из 358), а подписи остаются целыми.
     Ниже 390 блок max-width:389px пускает пилюли в два ряда. */
  .rg-bar__right > * { flex: 1 1 auto; min-width: 0; }
  .rg-bar__right .pill { height: 26px; padding: var(--space-6) var(--space-10); gap: var(--space-4); }
  /* Бейдж 18+ в мобильном фрейме шире и площе десктопного. */
  .pill--age { flex: none; width: 148px; height: 18px; padding: var(--space-2) var(--space-8); justify-content: center; }
  .pill--age > span { white-space: nowrap; }
  /* В мобильном фрейме подписи пилюль 11px (77:13, 77:16), а не 12px десктопа. */
  .rg-bar__right .pill > span { font-size: 11px; line-height: 13px; white-space: nowrap; }
  /* Номер не сжимается: подпись рядом с ним при нехватке места переносится
     (правило ниже 390), а цифры разрывать нельзя. */
  .rg-bar__right .pill > .pill__mono { flex: none; }
  /* Приглушённая подпись занимает остаток пилюли — так она в макете. */
  .rg-bar__right .pill > span.pill__muted { flex: 1; }
  .rg-bar__full { display: none; }
  .rg-bar__sm   { display: inline; }

  .site-header__inner { min-height: 64px; height: 64px; gap: var(--space-12); }
  .nav__list > li { min-height: 32px; }
  .logo { font-size: var(--fs-h5); line-height: 24.2px; }
  /* Мобильный фрейм (77:18) ставит подпись сразу за логотипом, а купон и бургер
     собирает в группу справа: логотип 116 · «18+» 93 · купон 67 · бургер 34.
     DOM-порядок десктопный (логотип, меню, подпись, кнопки), поэтому здесь он
     переставляется через order. Без этого строка требовала 433px и уезжала за
     экран на всех телефонах, включая саму ширину макета 390. */
  .site-header__age {
    display: block; order: 1;
    font-size: 9px; line-height: 11px;      /* 93x11 в макете, а не 11px десктопа */
    color: var(--color-text-strong);
    margin-right: 0;
  }
  .nav { order: 2; margin-inline: 0; }
  .site-header__actions { order: 3; }

  /* В мобильном фрейме шапка — логотип, «18+», купон и бургер. Кнопки входа
     живут в меню; показанные разом с бургером, они распирают документ. */
  .site-header__actions .btn,
  .site-header__user { display: none; }
  .nav__list { gap: var(--space-12); }
  .nav { display: block; }
  .nav__list > li:not(:last-child) { display: none; }   /* остаётся только купон */
  /* Размеры мобильного купона живут в components.css: он подключается позже,
     и отсюда их было не перебить. Здесь остаётся только скрытие подписи. */
  .bet-slip span:not(.bet-slip__count) { display: none; }

  .rg-strip { padding-block: var(--space-40); }
  .rg-strip__inner { gap: var(--space-20); }
  .rg-strip__head { font-size: var(--fs-h2); line-height: 34px; }
  .rg-strip__line { font-size: var(--fs-sm); line-height: 18px; }
  /* На мобильном макет красит эту строку в акцент — не наследование, а решение дизайнера. */
  .rg-strip__line--strong { line-height: 16px; color: var(--color-accent); }
  .rg-strip__betstop { flex-direction: column; align-items: flex-start; gap: var(--space-12); }
  .rg-strip__betstop-text { gap: var(--space-4); }
  .rg-strip__betstop-title { font-size: var(--fs-sm); font-weight: 400; line-height: 16px; }
  .rg-strip__betstop-note  { font-size: var(--fs-xs); line-height: 17px; }

  .payments__inner { gap: var(--space-16); padding: var(--space-24); }
  .payments__row img { width: 100%; max-width: 342px; }
  .payments__note { flex-direction: column; align-items: flex-start; gap: var(--space-8); font-size: var(--fs-xs); line-height: 17px; }
  .payments__badge { padding: var(--space-4) var(--space-8); border-radius: var(--radius-sm); font-size: var(--fs-2xs); line-height: 12.1px; } /* макет 10px → 11px, решение F3 */

  .site-footer { padding-block: var(--space-48); }
  .site-footer__inner { gap: var(--space-32); }
  .site-footer__wordmark { font-size: var(--fs-d3); line-height: 58px; letter-spacing: -1.5px; }
  /* В мобильном фрейме колонки заполняются сверху вниз: PRODUCT+HELP слева,
     RESPONSIBLE+LEGAL справа. При обычном порядке строк высота блока другая. */
  .site-footer__cols {
    grid-template-columns: repeat(2, 1fr); gap: var(--space-16);
    grid-template-rows: repeat(2, auto); grid-auto-flow: column;
    align-items: start;              /* группы не растягиваются по высоте ряда */
  }
  .site-footer__col--mobile { display: flex; }
  .site-footer__col { gap: var(--space-10); }
  .site-footer__list { gap: var(--space-10); }
  .site-footer__legal { grid-template-columns: 1fr; gap: var(--space-16); }
  .site-footer__legal p { font-size: var(--fs-xs); line-height: 18px; }
  .site-footer__details { gap: var(--space-6); }
  .site-footer__details li { font-size: var(--fs-xs); line-height: 15px; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--space-8); }
  .site-footer__copy { font-size: var(--fs-2xs); line-height: 13px; }
}

/* Ниже мобильного фрейма макета (390) — только то, что иначе не помещается. */
@media (max-width: 389px) {
  .site-header__age { display: none; }
  .pill--age { width: auto; flex: 1 1 auto; }
  .pill--age > span { white-space: normal; }
  .rg-bar__think { flex: 1 1 100%; }
  /* Высота бара из макета снимается: ниже 390 ряды переносятся, и жёсткие 99px
     обрезали бы содержимое. */
  .rg-bar { height: auto; }
  /* Две пилюли рядом требуют 182px каждая, а на 320 на них приходится по 140 —
     номер телефона вылезал за плашку. Ниже 390 они идут в столбик: там на
     каждую вся ширина, и ни подпись, ни цифры не переносятся. */
  .rg-bar__right { flex-wrap: wrap; }
  .rg-bar__right > * { flex: 1 1 100%; }
}