/* ScrizzleNews — собственная дизайн-система.
   Заменила Bootstrap 5.3 + FontAwesome (330 КБ с чужих CDN) на ~20 КБ своего CSS.
   Шрифт Golos Text хостится локально: латиница + кириллица, 60 КБ на всё семейство.

   Токены заданы в :root для светлой темы и переопределяются в двух местах —
   по системной настройке и по явному выбору пользователя. Ни один цвет
   не объявлен только внутри media-блока, иначе тема ломается при «авто». */

/* ─────────────── Шрифт ─────────────── */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/golos-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/golos-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ─────────────── Токены: светлая тема ─────────────── */
:root {
  --surface-0: #FFFFFF;
  --surface-1: #F5F7FA;
  --surface-2: #E9EDF3;
  --border:        #DCE2EA;
  --border-strong: #C3CCD8;

  --fg:        #131820;
  --fg-muted:  #56616F;
  --fg-subtle: #78838F;

  --accent:        #0F4C92;
  --accent-hover:  #0B3C75;
  --accent-fg:     #FFFFFF;
  --accent-subtle: #E7EFF9;

  --focus: #2C7BE5;
  --shadow-1: 0 1px 2px rgba(19, 24, 32, .05);
  --shadow-2: 0 2px 4px rgba(19, 24, 32, .06), 0 12px 28px rgba(19, 24, 32, .07);

  /* Плашки категорий. Прежний набор был из flat-UI 2013 года, и четыре цвета
     из шести проваливали WCAG (спорт давал контраст 1.66:1 при норме 4.5).
     Здесь тональные пары: фон + текст, каждая проверена. */
  --cat-business-bg:      #E8EDF5;  --cat-business-fg:      #1F3A5F;
  --cat-technology-bg:    #E3F0FC;  --cat-technology-fg:    #0F5199;
  --cat-science-bg:       #E2F4EC;  --cat-science-fg:       #0E5C3C;
  --cat-health-bg:        #FDE9E7;  --cat-health-fg:        #9B1D14;
  --cat-entertainment-bg: #F2E9FA;  --cat-entertainment-fg: #5B3184;
  --cat-sports-bg:        #FBF0D0;  --cat-sports-fg:        #63490A;

  --r-sm: 5px;  --r-md: 9px;  --r-lg: 14px;  --r-pill: 999px;
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px;

  --fs-xs: .8125rem; --fs-sm: .875rem; --fs-base: 1rem;  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem; --fs-2xl: 1.75rem; --fs-3xl: 2.25rem; --fs-4xl: 2.875rem;

  --w-content: 1200px;
  --w-prose: 68ch;
  --dur: 180ms;
  --ease: cubic-bezier(.2, .6, .3, 1);

  color-scheme: light;
}

/* Тёмная тема по системной настройке — но явный светлый выбор её перебивает */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-0: #171A20;
    --surface-1: #101318;
    --surface-2: #212630;
    --border:        #2C333F;
    --border-strong: #3C4553;

    --fg:        #E7EBF1;
    --fg-muted:  #A2ACBA;
    --fg-subtle: #7B8593;

    --accent:        #6FA6E8;
    --accent-hover:  #8FBCF0;
    --accent-fg:     #0B1220;
    --accent-subtle: #172741;

    --focus: #6FA6E8;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-2: 0 2px 4px rgba(0, 0, 0, .4), 0 12px 28px rgba(0, 0, 0, .35);

    --cat-business-bg:      #1B2B40;  --cat-business-fg:      #9DBBE0;
    --cat-technology-bg:    #102C45;  --cat-technology-fg:    #7FC0F5;
    --cat-science-bg:       #0F2C22;  --cat-science-fg:       #7FD9AE;
    --cat-health-bg:        #3A1815;  --cat-health-fg:        #FFA79D;
    --cat-entertainment-bg: #241733;  --cat-entertainment-fg: #C9A3F0;
    --cat-sports-bg:        #2E2408;  --cat-sports-fg:        #EBC55C;

    color-scheme: dark;
  }
}

/* Явный выбор пользователя — побеждает системную настройку в обе стороны */
:root[data-theme="dark"] {
  --surface-0: #171A20;
  --surface-1: #101318;
  --surface-2: #212630;
  --border:        #2C333F;
  --border-strong: #3C4553;

  --fg:        #E7EBF1;
  --fg-muted:  #A2ACBA;
  --fg-subtle: #7B8593;

  --accent:        #6FA6E8;
  --accent-hover:  #8FBCF0;
  --accent-fg:     #0B1220;
  --accent-subtle: #172741;

  --focus: #6FA6E8;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, .4), 0 12px 28px rgba(0, 0, 0, .35);

  --cat-business-bg:      #1B2B40;  --cat-business-fg:      #9DBBE0;
  --cat-technology-bg:    #102C45;  --cat-technology-fg:    #7FC0F5;
  --cat-science-bg:       #0F2C22;  --cat-science-fg:       #7FD9AE;
  --cat-health-bg:        #3A1815;  --cat-health-fg:        #FFA79D;
  --cat-entertainment-bg: #241733;  --cat-entertainment-fg: #C9A3F0;
  --cat-sports-bg:        #2E2408;  --cat-sports-fg:        #EBC55C;

  color-scheme: dark;
}

/* ─────────────── Основа ─────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface-1);
  color: var(--fg);
  font-family: 'Golos Text', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
img { background: var(--surface-2); }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.2;
  letter-spacing: -.015em;
  text-wrap: balance;
  font-weight: 800;
}

.container {
  width: 100%;
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2;
        stroke-linecap: round; stroke-linejoin: round; display: inline-block;
        vertical-align: -.125em; }

/* ─────────────── Шапка ─────────────── */
.site-header {
  background: var(--surface-0);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
}

.site-header__inner {
  display: flex; align-items: center; gap: var(--sp-4);
  min-height: 60px;
}

.brand { display: flex; align-items: center; flex: 0 0 auto; }
.brand img { height: 30px; width: auto; }

.nav { display: flex; align-items: center; gap: var(--sp-1); flex: 1 1 auto; }

.nav__link {
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav__link:hover { color: var(--fg); background: var(--surface-2); text-decoration: none; }
.nav__link[aria-current] { color: var(--accent); background: var(--accent-subtle); font-weight: 600; }

.header-tools { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; }

.search-form { display: flex; }
.search-form input {
  font: inherit; font-size: var(--fs-sm);
  padding: var(--sp-2) var(--sp-3);
  min-width: 190px;
  color: var(--fg);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  transition: border-color var(--dur) var(--ease);
}
.search-form input::placeholder { color: var(--fg-subtle); }
.search-form input:focus { border-color: var(--accent); outline: none; }

.lang-switch { display: flex; align-items: center; gap: 2px;
               background: var(--surface-2); border-radius: var(--r-pill); padding: 3px; }
.lang-switch a {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .03em;
  color: var(--fg-muted); padding: 4px 10px; border-radius: var(--r-pill);
}
.lang-switch a:hover { color: var(--fg); text-decoration: none; }
.lang-switch a[aria-current] { background: var(--surface-0); color: var(--fg); box-shadow: var(--shadow-1); }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; padding: 0;
  font-size: 17px; color: var(--fg-muted);
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--r-pill); cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.icon-btn:hover { color: var(--fg); background: var(--surface-2); }

.burger { display: none; }

/* иконка темы: показываем ту, в которую переключимся */
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; }
}

/* ─────────────── Полосы и заголовки разделов ─────────────── */
.page-head { padding: var(--sp-6) 0 var(--sp-5); }
.page-head h1 { font-size: var(--fs-3xl); }
.page-head .lede { margin: var(--sp-2) 0 0; color: var(--fg-muted); font-size: var(--fs-lg); max-width: 60ch; }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-4); margin: var(--sp-7) 0 var(--sp-4);
  padding-bottom: var(--sp-3); border-bottom: 2px solid var(--fg);
}
.section-head h2 { font-size: var(--fs-xl); }

/* ─────────────── Сетка карточек ─────────────── */
.grid { display: grid; gap: var(--sp-5); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

/* ─────────────── Карточка ─────────────── */
.card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); border-color: var(--border-strong); }
.card:has(a:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

.card__media { aspect-ratio: 16 / 9; background: var(--surface-2); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover;
                   transition: transform 400ms var(--ease); }
.card:hover .card__media img { transform: scale(1.03); }

.card__body { display: flex; flex-direction: column; gap: var(--sp-2);
              padding: var(--sp-4); flex: 1 1 auto; }

.card__title { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.01em; }
.card__title a { color: var(--fg); }
.card__title a:hover { color: var(--accent); text-decoration: none; }
/* Клик по всей площади карточки. Раньше кликабельна была только кнопка
   «Read More», и в дереве доступности на страницу приходилось девять ссылок
   с этим бессмысленным анкором. */
.card__title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }

.card__summary { color: var(--fg-muted); font-size: var(--fs-sm); margin: 0;
                 display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
                 overflow: hidden; }

.card__meta { margin-top: auto; padding-top: var(--sp-2);
              color: var(--fg-subtle); font-size: var(--fs-xs);
              display: flex; align-items: center; gap: var(--sp-2); }

/* плашка категории лежит поверх оверлея, поэтому остаётся отдельной ссылкой */
.badge {
  position: relative; z-index: 2; align-self: flex-start;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .01em;
  padding: 3px 10px; border-radius: var(--r-pill);
  border: 1px solid transparent;
}
.badge:hover { text-decoration: none; filter: brightness(.96); }
.badge--business      { background: var(--cat-business-bg);      color: var(--cat-business-fg); }
.badge--technology    { background: var(--cat-technology-bg);    color: var(--cat-technology-fg); }
.badge--science       { background: var(--cat-science-bg);       color: var(--cat-science-fg); }
.badge--health        { background: var(--cat-health-bg);        color: var(--cat-health-fg); }
.badge--entertainment { background: var(--cat-entertainment-bg); color: var(--cat-entertainment-fg); }
.badge--sports        { background: var(--cat-sports-bg);        color: var(--cat-sports-fg); }

/* ведущий материал на главной */
.card--lead { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .card--lead { flex-direction: row; }
  .card--lead .card__media { aspect-ratio: auto; flex: 0 0 55%; }
  .card--lead .card__body { justify-content: center; padding: var(--sp-6); gap: var(--sp-3); }
  .card--lead .card__title { font-size: var(--fs-2xl); }
  .card--lead .card__summary { font-size: var(--fs-base); -webkit-line-clamp: 4; }
}

/* ─────────────── Кнопки ─────────────── */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font: inherit; font-size: var(--fs-sm); font-weight: 600;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill); border: 1px solid var(--border);
  background: var(--surface-0); color: var(--fg);
  cursor: pointer; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { background: var(--surface-2); text-decoration: none; border-color: var(--border-strong); }
.btn--accent { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.btn--accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-fg); }

/* ─────────────── Пагинация ─────────────── */
.pagination { display: flex; flex-wrap: wrap; justify-content: center;
              gap: var(--sp-2); list-style: none; padding: 0; margin: var(--sp-7) 0 0; }
.pagination a, .pagination span {
  display: inline-grid; place-items: center; min-width: 38px; height: 38px;
  padding: 0 var(--sp-3); font-size: var(--fs-sm); font-weight: 500;
  color: var(--fg-muted); background: var(--surface-0);
  border: 1px solid var(--border); border-radius: var(--r-sm);
}
.pagination a:hover { color: var(--fg); background: var(--surface-2); text-decoration: none; }
.pagination .is-active span { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.pagination .is-disabled span { opacity: .45; }

/* ─────────────── Статья ─────────────── */
.article-wrap { display: grid; justify-items: center; padding-block: var(--sp-6) var(--sp-8); }
.article {
  width: 100%; max-width: 760px;
  background: var(--surface-0);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-6);
}
@media (max-width: 640px) { .article { padding: var(--sp-4); border-radius: 0; border-inline: none; } }

.article__head { display: flex; flex-direction: column; gap: var(--sp-3); }
.article__title { font-size: var(--fs-3xl); }
.article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4);
                 color: var(--fg-subtle); font-size: var(--fs-sm); }
.article__figure { margin: var(--sp-5) 0; }
.article__figure img { width: 100%; border-radius: var(--r-md); }

.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
               font-size: var(--fs-xs); color: var(--fg-subtle); margin-bottom: var(--sp-4); }
.breadcrumbs a { color: var(--fg-muted); }
.breadcrumbs .sep { color: var(--border-strong); }

/* тело статьи */
.prose { font-size: var(--fs-lg); line-height: 1.75; color: var(--fg); max-width: var(--w-prose); }
.prose > *:first-child { margin-top: 0; }
.prose p { margin: 0 0 1.15em; }
.prose h2 { font-size: var(--fs-2xl); margin: 1.9em 0 .6em; font-weight: 800; }
.prose h3 { font-size: var(--fs-xl); margin: 1.6em 0 .5em; font-weight: 700; }
.prose ul, .prose ol { margin: 0 0 1.15em; padding-left: 1.4em; }
.prose li { margin-bottom: .45em; }
.prose strong, .prose b { font-weight: 700; }
/* У Golos Text нет курсива — синтетический наклон на кириллице выглядит плохо.
   Акцент отдаём весом, цитату — линейкой и кеглем. */
.prose em, .prose i { font-style: normal; font-weight: 600; }
.prose blockquote {
  margin: 1.5em 0; padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
  border-left: 3px solid var(--accent);
  color: var(--fg-muted); font-size: var(--fs-xl); line-height: 1.5;
}
.prose a { text-decoration: underline; text-underline-offset: 2px; }
.prose img { border-radius: var(--r-md); margin: 1.5em 0; }
/* Ведущий h1 внутри контента дублировал заголовок страницы */
.prose h1:first-of-type { display: none; }

.article__foot { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--border);
                 display: flex; flex-direction: column; gap: var(--sp-4); }
.source-link { font-size: var(--fs-sm); color: var(--fg-muted); }

.share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.share__label { font-size: var(--fs-sm); font-weight: 600; color: var(--fg-muted); margin-right: var(--sp-1); }
.share a, .share button {
  display: inline-grid; place-items: center; width: 36px; height: 36px;
  font-size: 17px; color: var(--fg-muted); background: var(--surface-1);
  border: 1px solid var(--border); border-radius: var(--r-pill);
  cursor: pointer; transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.share a:hover, .share button:hover { color: var(--accent); background: var(--accent-subtle); text-decoration: none; }

.related { margin-top: var(--sp-7); }
.related h2 { font-size: var(--fs-xl); margin-bottom: var(--sp-4); }

/* ─────────────── Подвал ─────────────── */
.site-footer {
  margin-top: var(--sp-8);
  background: var(--surface-0);
  border-top: 1px solid var(--border);
  padding-block: var(--sp-6);
  color: var(--fg-muted); font-size: var(--fs-sm);
}
.site-footer__inner { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between; align-items: center; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.site-footer a { color: var(--fg-muted); }
.site-footer a:hover { color: var(--fg); }

/* ─────────────── Пустое состояние и ошибки ─────────────── */
.notice { text-align: center; padding: var(--sp-8) var(--sp-4); }
.notice h1 { font-size: var(--fs-4xl); margin-bottom: var(--sp-3); }
.notice p { color: var(--fg-muted); font-size: var(--fs-lg); margin: 0 auto var(--sp-5); max-width: 46ch; }

/* ─────────────── Адаптив ─────────────── */
@media (max-width: 1000px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .burger { display: inline-grid; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface-0); border-bottom: 1px solid var(--border);
    padding: var(--sp-2); box-shadow: var(--shadow-2);
  }
  .nav.is-open { display: flex; }
  .nav__link { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-base); }
  .site-header__inner { position: relative; }
  .search-form { display: none; }
  .header-tools { margin-left: auto; }
}

@media (max-width: 700px) {
  .grid--3, .grid--2 { grid-template-columns: 1fr; gap: var(--sp-3); }

  /* Плотность: раньше одна карточка занимала весь экран целиком и за прокрутку
     был виден ровно один заголовок. Теперь горизонтальная раскладка — 3 на экран. */
  .card:not(.card--lead) { flex-direction: row; align-items: stretch; }
  .card:not(.card--lead) .card__media { flex: 0 0 116px; aspect-ratio: 1; }
  .card:not(.card--lead) .card__body { padding: var(--sp-3); gap: var(--sp-1); }
  .card:not(.card--lead) .card__title { font-size: var(--fs-base); }
  .card:not(.card--lead) .card__summary { display: none; }

  .card--lead { flex-direction: column; }
  .card--lead .card__media { aspect-ratio: 16 / 9; }

  .page-head { padding: var(--sp-5) 0 var(--sp-4); }
  .page-head h1 { font-size: var(--fs-2xl); }
  .article__title { font-size: var(--fs-2xl); }
  .prose { font-size: var(--fs-base); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .card:hover { transform: none; }
  .card:hover .card__media img { transform: none; }
}

/* Логотип встроен инлайном, поэтому красится токенами темы */
.brand__logo { height: 30px; width: auto; color: var(--fg); display: block; }

/* На узком экране заголовок компактной карточки растягивался на 5 строк
   и съедал выигрыш в плотности */
@media (max-width: 700px) {
  .card:not(.card--lead) .card__title {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; line-height: 1.3;
  }
  .card:not(.card--lead) .card__media { flex: 0 0 104px; }
}