/* ============================================================================
 * skin.css - ПРОЕКТНЫЙ СЛОЙ casinosss.com «signal» (13.09.2026).
 * Поверх signal-light из skins.css. Планка вертикали (бриф §4): тёмная полоса
 * шапки и героя, светлое тело с белыми карточками, один сильный акцент, крупный
 * display-шрифт, одна иллюстрация серии на каждом хабе, логотип казино на плашке.
 * Цвета - только токены скина; новых hex здесь два: чернила героя и их глубже.
 * ========================================================================== */

:root {
  --ink:      #0b1f3a;   /* чернила: шапка, герой, подвал */
  --ink-2:    #071427;   /* глубже: подвал, низ градиента */
  --ink-line: rgba(255,255,255,.12);
  --on-ink:      #ffffff;
  --on-ink-dim:  rgba(255,255,255,.78);
  --on-ink-mute: rgba(255,255,255,.62);
  --lime:  #c6f135;
  --elec:  #4f8cff;
}

/* ---------------------------------------------------------------- шапка ---- */
.site-header { background: var(--ink); border-bottom: 1px solid var(--ink-line); backdrop-filter: none; }
.site-header .nav-desktop > a, .site-header .nav-desktop__group > a { color: var(--on-ink-dim); }
.site-header .nav-desktop > a:hover, .site-header .nav-desktop__group > a:hover,
.site-header .nav-desktop > a[aria-current="page"], .site-header .nav-desktop__group.is-branch > a { color: var(--on-ink); }
.site-header .nav-desktop__more { color: var(--on-ink-mute); }
.site-header .nav-desktop__more:hover, .site-header .nav-desktop__group:hover .nav-desktop__more,
.site-header .nav-desktop__group.is-branch .nav-desktop__more { color: var(--lime); }
.site-header__logo-img--light { display: none; }
.site-header__logo-img--dark { display: inline-block; }
.site-header .nav-toggle { color: var(--on-ink); }
.site-header .nav-toggle__box span { background: var(--on-ink); }
.nav-sub { min-width: 260px; }
@media (min-width: 1024px) { .nav-sub { min-width: 420px; padding: var(--s-3); } .nav-sub__list { column-gap: var(--s-3); } }
.nav-desktop .nav-sub__list a { white-space: nowrap; line-height: 1.25; padding-block: var(--s-2); }

/* -------------------------------------------------- тёмная полоса героя ---- */
.hero-band {
  position: relative; color: var(--on-ink);
  background: linear-gradient(180deg, var(--ink) 0%, #0f2a4a 100%);
  padding-block: var(--s-6) var(--s-6);
  overflow: hidden;
}
.hero-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 55% at 85% 0%, rgba(79,140,255,.28), transparent 70%),
    radial-gradient(40% 40% at 0% 100%, rgba(198,241,53,.16), transparent 70%);
}
.hero-band > .container { position: relative; }
.hero-band__grid { display: grid; gap: var(--s-5); align-items: center; }
.hero-band .eyebrow { color: var(--lime); }
.hero-band h1 { color: var(--on-ink); font-size: clamp(1.9rem, 6.4vw, 3.1rem); line-height: 1.05; letter-spacing: -.01em; margin: var(--s-2) 0 var(--s-3); }
.hero-band .lede, .hero-band__lede { color: var(--on-ink-dim); font-size: calc(var(--t-body) * 1.08); max-width: 40rem; margin-bottom: var(--s-4); }
.hero-band .byline, .hero-band .byline a { color: var(--on-ink-mute); }
.hero-band__stats { list-style: none; padding: 0; margin: 0 0 var(--s-4); display: flex; flex-wrap: wrap; gap: var(--s-2); }
.hero-band__stats li {
  background: rgba(255,255,255,.08); border: 1px solid var(--ink-line); color: var(--on-ink);
  border-radius: var(--r-pill); padding: var(--s-2) var(--s-4); font-size: var(--t-small); font-weight: var(--fw-semi);
}
.hero-band__stats strong { color: var(--lime); font-family: var(--font-display); font-weight: 700; margin-right: .35em; }
.hero-band__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hero-band .btn--outline, .section--ink .btn--outline { color: var(--on-ink); border-color: rgba(255,255,255,.35); }
.hero-band .btn--outline:hover, .section--ink .btn--outline:hover { background: rgba(255,255,255,.08); color: var(--on-ink); }
.hero-band__art { margin: 0; position: relative; }
.hero-band__art img {
  display: block; width: 100%; height: auto; border-radius: var(--r-xl);
  box-shadow: 0 30px 70px -24px rgba(0,0,0,.7), 0 0 0 1px var(--ink-line);
}
.hero-band .toc { background: rgba(255,255,255,.06); border-color: var(--ink-line); }
.hero-band .toc__head, .hero-band .toc a { color: var(--on-ink-dim); }
.hero-band .toc a:hover { color: var(--on-ink); }
@media (min-width: 900px) {
  .hero-band__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-7); }
  .hero-band--wide .hero-band__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
}

/* --------------------------------------- иллюстрация серии на странице ---- */
.page-art { margin: 0; }
.page-art img { display: block; width: 100%; height: auto; border-radius: var(--r-xl); box-shadow: var(--shadow-card); }
.page-art--inline { max-width: 560px; }
.page-art figcaption { font-size: var(--t-small); color: var(--text-mute); margin-top: var(--s-2); }

/* ------------------------------------------------- логотип на плашке ---- */
.logo-plate { object-fit: contain; padding: var(--s-2) var(--s-3) !important; border-radius: var(--r-md) !important; }
.logo-plate--dark  { background: var(--ink) !important; }
.logo-plate--light { background: #ffffff !important; box-shadow: inset 0 0 0 1px var(--rule); }
.casino-card__logo, .bonus-card__logo, .pointer__logo, .cmp-list__logo { width: 112px; }
.c-hero__img { width: 200px; }

/* ----------------------------------------------------- карточки, полосы ---- */
.section--ink { background: var(--ink); color: var(--on-ink); }
.section--ink h2, .section--ink h3 { color: var(--on-ink); }
.section--ink p { color: var(--on-ink-dim); }
.section--ink .eyebrow { color: var(--lime); }
.section--ink a:not(.btn) { color: var(--on-ink); }
.section__head { display: grid; gap: var(--s-2); margin-bottom: var(--s-5); max-width: 52rem; }
.section__head p { color: var(--text-dim); margin: 0; }
.section__head .eyebrow { color: var(--brand); }
.card-row { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px)  { .card-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .card-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card-row .card { background: var(--surface); border: var(--hairline); border-radius: var(--r-lg); padding: var(--s-4); box-shadow: var(--shadow-card); }
.card-row .card h3 { margin: 0 0 var(--s-2); font-size: 1.1rem; }
.card-row .card p { margin: 0; color: var(--text-dim); font-size: var(--t-small); }

/* карточка-плитка раздела с иллюстрацией (главная, хабы) */
.tile-grid { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px)  { .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tile-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tile-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tile { display: grid; grid-template-rows: auto 1fr; background: var(--surface); border: var(--hairline); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-card); text-decoration: none; color: inherit; transition: transform .18s ease, box-shadow .18s ease; }
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); text-decoration: none; }
.tile__art { aspect-ratio: 16 / 9; background: var(--ink); overflow: hidden; }
.tile__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile__body { padding: var(--s-4); display: grid; gap: var(--s-1); align-content: start; }
.tile__body h3 { margin: 0; font-size: 1.05rem; }
.tile__body p { margin: 0; color: var(--text-dim); font-size: var(--t-small); }
.tile__kicker { font-size: var(--t-tiny); text-transform: uppercase; letter-spacing: .08em; color: var(--brand); font-weight: var(--fw-semi); }

/* ------------------------------------------------------------- подвал ---- */
.site-footer { background: var(--ink-2); color: var(--on-ink-dim); border-top: 0; }
.site-footer .site-footer__tagline { color: var(--on-ink-dim); }
.site-footer .site-footer__title, .site-footer .site-footer__col h4 { color: var(--on-ink-mute); }
.site-footer .site-footer__col a { color: var(--on-ink-dim); }
.site-footer .site-footer__col a:hover { color: var(--on-ink); }
.site-footer .site-footer__bottom { border-top: 1px solid var(--ink-line); color: var(--on-ink-mute); }
.site-footer .site-footer__bottom a { color: var(--on-ink-dim); }
.site-footer .site-footer__legal { color: var(--on-ink-mute); }
.site-footer .site-footer__age { border-color: var(--on-ink-mute); color: var(--on-ink); }
.site-footer__logo-img--light { display: none; }
.site-footer__logo-img--dark { display: inline-block; }

.section__more { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-5) 0 0; }
.tile__art .page-art, .tile__art figure { margin: 0; }
.tile__art picture, .tile__art img { border-radius: 0; box-shadow: none; }
.section--ink .cmp { color: var(--text); }
.section--ink .casino-grid { margin-top: var(--s-5); }
.section--ink .page-art { margin-bottom: var(--s-4); }
.hero-band h1 { font-size: clamp(1.8rem, 4.6vw, 2.75rem); }

/* крошки на чернилах: между тёмной шапкой и тёмным героем светлая полоса рвала страницу */
.breadcrumbs { background: var(--ink); padding-block: var(--s-3); box-shadow: 0 0 0 100vmax var(--ink); clip-path: inset(0 -100vmax); }
.breadcrumbs__item a, .breadcrumbs__item { color: var(--on-ink-mute); }
.breadcrumbs__item[aria-current], .breadcrumbs__item:last-child { color: var(--on-ink-dim); }
.breadcrumbs__item + .breadcrumbs__item::before { color: var(--on-ink-mute); }
.hero-band { padding-top: var(--s-5); }
.hero-band--solo .lede { max-width: 44rem; }
.hero-band .c-hero, .hero-band .slot-cover { margin-top: var(--s-5); }
.toc__list { padding-left: 0; list-style: none; counter-reset: toc; }
.toc__list li { counter-increment: toc; display: flex; gap: var(--s-2); align-items: baseline; }
.toc__list li::before { content: counter(toc); flex: 0 0 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-size: var(--t-tiny); font-weight: var(--fw-semi); display: inline-flex; align-items: center; justify-content: center; }
.hero-band .toc__list li::before { background: rgba(255,255,255,.12); color: var(--lime); }