/* ============================================================
   site.css — оформление страницы: герой, секции, подвал.
   Сайт: assuas.ch. Префикс: as-

   Продолжение палитры и геометрии css/rating.css: золото, белый,
   графитовый, швейцарская сдержанность. Задача файла — чтобы блок
   рейтинга перестал быть единственным современным местом страницы.

   Файл НЕ входит в сборку темы (assets/opt/app.css).
   Подключается ПОСЛЕ инлайнового <style> в <head> — иначе часть правил
   таблиц не перебьётся. Кэш-бастер обязателен: Cloudflare отдаёт css
   с годовым immutable-заголовком.

   Правила темы объявлены позже и с !important, поэтому здесь
   специфичность через body и точечные !important.
   ============================================================ */

:root {
  --as-gold:      #c0912a;
  --as-gold-lite: #e8c65f;
  --as-gold-soft: rgba(192, 145, 42, .10);
  --as-ink:       #14161a;
  --as-body:      #3d4450;
  --as-muted:     #7a8290;
  --as-line:      #e6e2d6;
  --as-line-soft: #f0ede3;
  --as-surface:   #ffffff;
  --as-tint:      #fbf9f3;
}

/* ============================================================
   1. Первый экран
   ============================================================ */

/* было 100px сверху и вертикальное центрирование флексом —
   отсюда и пустота: заголовок начинался на 268-й точке */
body .banner-style-one-area {
  padding-top: 34px !important;
  padding-bottom: 0 !important;
}

body .banner-style-one-heading.as-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  height: auto;
  min-height: 0;
}

body .as-hero .as-hero-main {
  flex: 1 1 auto;
  min-width: 0;
}

body .as-hero-eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 11px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #4a3708;
  background: var(--as-gold-soft);
  border: 1px solid rgba(192, 145, 42, .34);
  border-radius: 999px;
}

body .as-hero h1 {
  margin: 0;
  font-size: clamp(30px, 3.9vw, 52px);
  line-height: 1.07;
  font-weight: 800;
  letter-spacing: -.015em;
  text-transform: none;
  color: var(--as-ink);
  text-shadow: none;
}

body .as-hero h1 span {
  color: var(--as-gold);
  text-shadow: none;
}

body .as-hero .as-hero-lead {
  margin: 16px 0 0;
  max-width: 64ch;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--as-body);
}

/* кубик: было 512px с поворотом, бок о бок с заголовком он и создавал
   ощущение пустого экрана */
body .as-hero .as-hero-art {
  flex: 0 0 auto;
  width: 112px;
  height: auto;
  align-self: flex-start;
  margin-top: 4px;
}

body .as-hero .as-hero-art img {
  width: 112px !important;
  max-width: 112px !important;
  height: auto;
  display: block;
}

/* ============================================================
   2. Заголовок блока рейтинга
   ============================================================ */

/* В инлайновом CSS темы этот блок — карточка с градиентной полосой
   золото → #2323ff и синими пилюлями. Синий здесь чужой. */
body .rating-head {
  margin: 26px 0 6px !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
}

body .rating-head::before { display: none !important; content: none !important; }

body .rating-head__eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--as-gold);
}

body .rating-head .rating-title {
  margin: 0 !important;
  font-size: clamp(23px, 2.3vw, 32px) !important;
  line-height: 1.2 !important;
  font-weight: 800;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--as-ink) !important;
}

body .rating-head__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start !important;
  gap: 8px 18px;
  margin: 12px 0 0 !important;
  padding: 0 !important;
  list-style: none;
}

body .rating-head__facts li {
  position: relative;
  display: inline-flex !important;
  padding: 0 0 0 17px !important;
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--as-muted) !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  list-style: none;
}

body .rating-head__facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--as-gold);
  opacity: .75;
}

body .rating-head__facts li b { color: var(--as-ink); font-weight: 800; }

/* ============================================================
   3. Текстовые секции
   ============================================================ */

body .smooth-scroll-container > .default-padding {
  padding-top: 62px !important;
  padding-bottom: 62px !important;
}

body .smooth-scroll-container > .default-padding.section-after-table {
  padding-top: 8px !important;
}

/* чередование фонов было сбито — несколько серых подряд читаются
   как одна бесконечная простыня */
body .smooth-scroll-container > .default-padding.bg-gray { background: var(--as-surface) !important; }

body .smooth-scroll-container > .default-padding:nth-of-type(even) {
  background: var(--as-tint) !important;
}

/* заголовки: капслок на 40 пикселях кричит, а сам текст написан
   нормальным предложением — возвращаем ему регистр */
body .default-padding h2 {
  margin: 0 0 16px !important;
  font-size: clamp(24px, 2.3vw, 33px) !important;
  line-height: 1.18 !important;
  font-weight: 800 !important;
  letter-spacing: -.012em;
  text-transform: none !important;
  color: var(--as-ink) !important;
}

body .default-padding h2::before {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-bottom: 16px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--as-gold), var(--as-gold-lite));
}

body .default-padding h3 {
  margin: 26px 0 10px !important;
  font-size: 19px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  text-transform: none !important;
  color: var(--as-ink) !important;
}

body .default-padding p {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.66;
  color: var(--as-body);
}

body .default-padding p:last-child { margin-bottom: 0; }

body .default-padding a:not(.btn):not(.rg-source-card) {
  color: var(--as-gold);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

body .default-padding a:not(.btn):not(.rg-source-card):hover { color: #9a731f; }

/* списки: маркер темы — жирная точка браузера, слишком грубо рядом с плитками */
body .default-padding ul:not(.rg-list):not(.rating-head__facts) {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

body .default-padding ul:not(.rg-list):not(.rating-head__facts) > li {
  position: relative;
  margin: 0 0 9px;
  padding-left: 24px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--as-body);
  list-style: none !important;
}

body .default-padding ul:not(.rg-list):not(.rating-head__facts) > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 10px;
  width: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--as-gold);
}

body .default-padding ol { padding-left: 20px; }
body .default-padding ol > li {
  margin: 0 0 9px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--as-body);
}
body .default-padding ol > li::marker { color: var(--as-gold); font-weight: 700; }

/* ============================================================
   4. Таблицы в секциях
   ============================================================ */
/* Инлайновый <style> в <head> даёт им 2px золотую рамку и тяжёлую тень.
   Рядом с карточками рейтинга это выглядит из другой эпохи. */

body .table-casino:not(.table-main) {
  border: 1px solid var(--as-line) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 10px rgba(20, 22, 26, .05) !important;
  background: var(--as-surface) !important;
  margin-top: 18px !important;
  margin-bottom: 26px !important;
}

body .table-casino:not(.table-main) td {
  padding: 14px 18px !important;
  font-size: 15px;
  line-height: 1.55;
  color: var(--as-body);
  border: 0 !important;
  border-bottom: 1px solid var(--as-line-soft) !important;
  vertical-align: top !important;
}

body .table-casino:not(.table-main) tr:last-child td { border-bottom: 0 !important; }

body .table-casino:not(.table-main) tr:nth-child(even) td { background: transparent !important; }

body .table-casino:not(.table-main) tr:hover td { background: var(--as-tint) !important; }

/* первая колонка — это подпись строки, а не такой же текст */
body .table-casino:not(.table-main) td:first-child {
  width: 210px;
  font-weight: 700;
  color: var(--as-ink);
}

body .table-casino:not(.table-main) td:first-child:not(:last-child) {
  border-right: 1px solid var(--as-line-soft) !important;
}

body .table-casino:not(.table-main) strong { color: var(--as-ink); }

body .badge-small {
  background: var(--as-gold-soft) !important;
  color: #4a3708 !important;
  border: 1px solid rgba(192, 145, 42, .34);
  border-radius: 999px !important;
  padding: 2px 9px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

@media (max-width: 768px) {
  body .table-casino:not(.table-main) { border-radius: 12px !important; }
  body .table-casino:not(.table-main) tr {
    border-bottom: 1px solid var(--as-line) !important;
    margin-bottom: 0 !important;
  }
  body .table-casino:not(.table-main) tr:last-child { border-bottom: 0 !important; }
  body .table-casino:not(.table-main) td {
    padding: 11px 14px !important;
    border-bottom: 0 !important;
    border-right: 0 !important;
  }
  body .table-casino:not(.table-main) td:first-child {
    width: auto;
    padding-bottom: 2px !important;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--as-muted);
    border-right: 0 !important;
  }
}

/* ============================================================
   5. Блок ответственной игры
   ============================================================ */

body .rg-eyebrow { color: var(--as-gold) !important; }

/* тема ставит list-style: square на сам li, поэтому рядом с красным плюсом
   вылезал ещё и серый квадратик браузера */
body .rg-list li {
  border-bottom: 1px solid var(--as-line-soft) !important;
  list-style: none !important;
}

body .rg-source-card {
  border: 1px solid var(--as-line) !important;
  background: var(--as-surface) !important;
  box-shadow: 0 2px 10px rgba(20, 22, 26, .05);
}

body .rg-source-card:hover {
  border-color: rgba(192, 145, 42, .55) !important;
  box-shadow: 0 12px 28px rgba(20, 22, 26, .12) !important;
}

body .rg-source-arrow { color: var(--as-gold) !important; }

/* ============================================================
   6. Блок авторов
   ============================================================ */

body .author-premium {
  background: var(--as-tint) !important;
  border: 1px solid var(--as-line);
  border-radius: 16px !important;
  padding: 22px 24px !important;
  box-shadow: 0 2px 10px rgba(20, 22, 26, .05) !important;
}

body .author-premium::before { display: none !important; }

body .author-premium-inner { gap: 22px !important; }

body .author-person { gap: 14px !important; min-width: 220px !important; }

body .author-person img {
  width: 62px !important;
  height: 62px !important;
  border: 2px solid var(--as-surface) !important;
  box-shadow: 0 4px 14px rgba(20, 22, 26, .14) !important;
}

body .author-name { font-size: 15px !important; color: var(--as-ink) !important; }

body .author-role {
  font-size: 11px !important;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--as-muted) !important;
}

body .author-separator { background: linear-gradient(90deg, var(--as-line), transparent) !important; }

body .author-date { font-size: 13px !important; color: var(--as-muted) !important; }

/* ============================================================
   7. Подвал
   ============================================================ */

body footer {
  margin-top: 0;
  padding: 30px 16px 34px !important;
  background: var(--as-ink);
  color: rgba(255, 255, 255, .62);
  text-align: center;
}

body footer p,
body footer div,
body footer span {
  font-size: 13.5px;
  line-height: 1.75;
  color: rgba(255, 255, 255, .62);
}

body footer a {
  color: #fff !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(232, 198, 95, .45);
  padding-bottom: 1px;
  transition: color .18s ease, border-color .18s ease;
}

body footer a:hover {
  color: var(--as-gold-lite) !important;
  border-bottom-color: var(--as-gold-lite);
}

/* ============================================================
   8. Мобильные
   ============================================================ */

@media (max-width: 991px) {
  body .as-hero .as-hero-art { width: 84px; }
  body .as-hero .as-hero-art img { width: 84px !important; max-width: 84px !important; }
}

@media (max-width: 767px) {
  body .banner-style-one-area { padding-top: 22px !important; }

  body .banner-style-one-heading.as-hero { gap: 16px; }

  body .as-hero .as-hero-art { width: 64px; margin-top: 2px; }
  body .as-hero .as-hero-art img { width: 64px !important; max-width: 64px !important; }

  body .as-hero .as-hero-lead { font-size: 15.5px; margin-top: 13px; }

  /* ---- первый экран на мобильной сведён к H1, лиду и строке фактов ----
     Надзаголовки и H2 съедали экран до первой карточки. */

  body .as-hero-eyebrow,
  body .rating-head__eyebrow { display: none !important; }

  /* H2 — не декор, а заголовок раздела: убираем его с глаз, но оставляем
     в структуре документа и в дереве доступности. Если нужно вырезать
     совсем — заменить этот блок на display: none. */
  body .rating-head .rating-title {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0 !important;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  body .rating-head { margin: 16px 0 2px !important; }
  body .rating-head__facts { margin-top: 0 !important; }

  body .smooth-scroll-container > .default-padding {
    padding-top: 42px !important;
    padding-bottom: 42px !important;
  }

  body .default-padding h2::before { width: 36px; margin-bottom: 13px; }

  body .default-padding p,
  body .default-padding ul:not(.rg-list):not(.rating-head__facts) > li,
  body .default-padding ol > li { font-size: 15.5px; }

  body .author-premium { padding: 18px 16px !important; }
  body .author-person { min-width: 0 !important; }
}

@media (max-width: 480px) {
  /* при такой ширине кубик рядом с заголовком только отнимает строки */
  body .as-hero .as-hero-art { display: none; }
}
