/* ==========================================================================
   Olkor News — стили прототипа
   Секции соответствуют будущим файлам темы: assets/css/*.css
   Современный CSS: кастомные свойства, логические свойства, aspect-ratio,
   :where() для нулевой специфичности, диапазонный синтаксис медиазапросов,
   вложенность только для состояний — имена классов остаются целиком,
   чтобы их можно было найти поиском.
   ========================================================================== */

/* --------------------------------------------------------------- tokens.css
   Значения сняты с макета «Olkor newS» (фреймы 4:4, 10:237). У сайта два слоя
   цвета: светлый контент (--bg/--text/--text-dim) и тёмная «броня» шапки и
   подвала (--surface-dark/--text-invert) — она не зависит от темы контента,
   поэтому у неё свои токены, а не общий --bg/--text на весь документ.
   -------------------------------------------------------------------------- */
:root {
  --bg: #FFFFFF;
  --text: #000000;
  --text-dim: #4D4D4D;
  --text-invert: #FFFFFF;
  --accent: #01D9FF;
  --muted: #828282;
  --media: #686880;
  --surface-dark: #000000;
  --footer-text: var(--muted);
  --hairline: rgb(130 130 130 / 30%);

  --radius: 8px;
  --container: 1124px;
  --container-article: 1125px;
  --container-video: 894px;
  --pad-inline: 24px;
  --gap: 28px;
  --header-block: 69px;

  --fs-nav: 24px;
  --fs-section: 24px;
  --fs-card: 18px;
  --fs-title: 40px;
  --fs-body: 16px;
  --fs-date: 12px;
  --fs-footer: 16px;

  --ease: 0.18s ease;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-footer: "Host Grotesk", "Inter", system-ui, Arial, sans-serif;

  color-scheme: light;
}

/* ----------------------------------------------------------------- base.css */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  min-block-size: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Админбар не в потоке (position: fixed) и накрывает верх страницы, но
   сдвигает контент вниз своей высотой — а body всё ещё ровно 100dvh, из-за
   чего низ страницы (включая подвал) на коротких страницах (поиск без
   результатов, 404) уезжал за экран, и нужно было домотать вручную.
   Прошлая правка проверяла класс html.wp-toolbar — такого класса тема не
   получает, поэтому правило никогда не срабатывало. Ядро WP само публикует
   переменную --wp-admin--admin-bar--height на html (32px, 46px на ширинах
   ≤782px — значение меняет само ядро), просто вычитаем её; когда админбара
   нет, переменной тоже нет и var() уходит в фолбэк 0px. */
body { min-block-size: calc(100dvh - var(--wp-admin--admin-bar--height, 0px)); }

/* .site-main — тема, [data-app] — прототип: один и тот же <main> между
   шапкой и подвалом. flex: 1 растягивает его на всё свободное место, и
   подвал не поднимается выше низа вьюпорта на короткой странице (пустая
   лента, 404, поиск без результатов и т.п.) — независимо от объёма контента. */
.site-main,
[data-app] {
  flex: 1 0 auto;
}

:where(img, svg, iframe) { display: block; max-inline-size: 100%; }
:where(a) { color: inherit; text-decoration: none; }
:where(h1, h2, h3, p, figure) { margin: 0; }
:where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.container {
  inline-size: 100%;
  max-inline-size: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-inline);
}
.container--article { max-inline-size: calc(var(--container-article) + var(--pad-inline) * 2); }
.container--video   { max-inline-size: calc(var(--container-video)   + var(--pad-inline) * 2); }

/* ------------------------------------------------------- header.php (шапка)
   Состояния из макета: обычное (7:4), hover и активный раздел (7:19),
   раскрытое поле поиска (8:32).
   -------------------------------------------------------------------------- */
/* Три колонки: логотип — меню — действия. Меню центрируется сеткой, а не
   абсолютным позиционированием, поэтому при добавлении разделов оно не
   наезжает на логотип и поиск, а честно раздвигает соседей. */
.site-header {
  position: relative;
  background: var(--surface-dark);
  color: var(--text-invert);
}

/* .container центрирует и ограничивает ширину контента (как на странице
   поиска), а сама шапка/подвал остаются на всю ширину вьюпорта — фон не
   обрезается краями контентной колонки. */
.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  min-block-size: var(--header-block);
  padding-block: 20px;
}

.site-header__logo {
  /* grid-column задан явно: без него .nav с display:none на мобильном
     выпадает из авторазмещения грида и .site-header__actions съезжает
     в её колонку вместо крайней правой — поиск и бургер прилипали
     к центру вместо правого края. */
  /* z-index выше .nav (z-index: 30) — иначе раскрытый оверлей
     перекрывает и логотип, и бургер/крестик закрытия: все они —
     дети одного .site-header__inner. */
  z-index: 40;
  grid-column: 1;
  justify-self: start;
  font-size: var(--fs-nav);
  line-height: 29px;
  letter-spacing: 0.01em;
}

.nav {
  grid-column: 2;
  justify-self: center;
  display: flex;
  gap: clamp(24px, 3.4vw, 48px);
}

.site-header__actions {
  z-index: 40;
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav__link {
  color: var(--muted);
  font-size: var(--fs-nav);
  line-height: 29px;
  padding-block-end: 2px;
  border-block-end: 2px solid transparent;
  transition: color var(--ease), border-color var(--ease);

  /* .nav__link--active — реальный класс из header.php; [aria-current="page"]
     оставлен на случай, если разметка когда-нибудь переедет на него. */
  &:hover,
  &[aria-current="page"],
  &.nav__link--active { color: var(--text-invert); border-block-end-color: var(--accent); }
}

/* иконка слева, поле раскрывается вправо — как в состоянии 8:32.
   Селектор сужен до .site-header .search: голый .search совпадал с
   body.search, который WP сам добавляет на странице поиска (is_search()),
   и растягивал align-items: center на body, ломая раскладку шапки/подвала. */
.site-header .search {
  display: flex;
  align-items: center;
  gap: 12px;
}

.search__toggle {
  flex: none;
  inline-size: 24px;
  block-size: 26px;
  display: grid;
  place-items: center;

  & svg { inline-size: 22px; block-size: 22px; stroke: currentColor; }
}

.search__field {
  inline-size: 0;
  opacity: 0;
  pointer-events: none;
  border-block-end: 2px solid var(--accent);
  transition: inline-size 0.28s ease, opacity var(--ease);

  .site-header .search.is-open & { inline-size: 226px; opacity: 1; pointer-events: auto; }
}

.search__input {
  inline-size: 100%;
  background: none;
  border: 0;
  color: currentColor;
  font-size: var(--fs-nav);
  line-height: 29px;
  padding-block: 0 2px;

  &::placeholder { color: var(--muted); }
  &:focus { outline: none; }
}

.burger {
  display: none;
  inline-size: 26px;
  block-size: 26px;

  & span {
    display: block;
    block-size: 2px;
    background: currentColor;
    margin-block: 5px;
    transition: translate var(--ease), rotate var(--ease), opacity var(--ease);
  }

  /* открытое состояние читаем из aria-expanded, которое уже проставляет
     main.js — отдельный класс на кнопке не нужен */
  &[aria-expanded="true"] span:nth-child(1) { translate: 0 7px; rotate: 45deg; }
  &[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  &[aria-expanded="true"] span:nth-child(3) { translate: 0 -7px; rotate: -45deg; }
}

/* ---------------------------------------------- template-parts/date.php */
.date {
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-date);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;

  & svg { flex: none; inline-size: 20px; block-size: 20px; stroke: currentColor; }
}

/* ----------------------------------------- template-parts/card-hero.php
   Промо 548×340. Градиентный слой обязателен: без него белый заголовок
   пропадёт на светлой фотографии.
   -------------------------------------------------------------------------- */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  margin-block-start: 24px;
}

.hero-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 548 / 340;
  border: 1px solid transparent;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--media);
  color: var(--text-invert);
  transition: border-color var(--ease);

  &:hover { border-color: var(--accent); }
  &:has(.card__link:focus-visible) { border-color: var(--accent); }
}

.hero-card__img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.hero-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 78%) 0%, rgb(0 0 0 / 30%) 32%, transparent 62%);
}

.hero-card__type {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  font-size: var(--fs-card);
  font-weight: 500;
  line-height: 1.4;
}

.hero-card__body {
  /* не position:absolute/relative — иначе .card__link::after (inset:0)
     считает ближайшим позиционированным родителем этот блок, а не всю
     .hero-card, и кликается только подпись, а не вся карточка.
     Позиция внизу теперь держится на .hero-card { justify-content: flex-end }.
     z-index здесь работает без position (спецкейс флекс-айтемов) и не
     трогает поиск containing block для ::after — иначе title/date красились
     бы под .hero-card__img/.hero-card__scrim (они position:absolute и без
     этого стека рисовались бы поверх, как и случилось при первой правке). */
  z-index: 1;
  padding-inline: 8px;
  padding-block-end: 8px;
}

.hero-card__title {
  font-size: var(--fs-card);
  font-weight: 500;
  line-height: 1.4;
  margin-block-end: 8px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* ---------------------------------------------- template-parts/card.php
   Карточка 260×232, превью 260×144, рамка акцентом на hover.
   -------------------------------------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}

.card {
  position: relative;
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: border-color var(--ease);

  &:hover { border-color: var(--accent); }
  &:has(.card__link:focus-visible) { border-color: var(--accent); }
}

.card__media {
  aspect-ratio: 260 / 144;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--media);

  & img { inline-size: 100%; block-size: 100%; object-fit: cover; }
}

.card__body { padding: 8px 3px 6px; }

.card__title {
  font-size: var(--fs-card);
  font-weight: 500;
  line-height: 1.4;
  margin-block-end: 6px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* ссылка одна и названа заголовком, но кликается вся карточка */
.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* -------------------------------------- template-parts/section-row.php */
.section { margin-block-start: 40px; }

.section__title {
  font-size: var(--fs-section);
  font-weight: 400;
  line-height: 29px;
  text-align: center;
  margin-block-end: 40px;
}

/* --------------------------------- template-parts/layout-article.php
   Рубрика, картинка 1125×340, заголовок, дата, текст в колонке 739.
   -------------------------------------------------------------------------- */
.article {
  padding-block-start: 40px;

  /* Разделитель акцентом между материалами — тот же приём, что и в ленте
     видео (.video-item + .video-item), для единообразия между News и
     Interview/Demonstrate. В макете (10:237) между статьями пустой отступ
     без линии — добавлено по аналогии с уже принятым паттерном (PLAN.md §1). */
  & + & { margin-block-start: 110px; border-block-start: 2px solid var(--accent); }
}

.article__eyebrow {
  font-size: var(--fs-card);
  font-weight: 500;
  line-height: 1.4;
  margin-block-end: 40px;
}

.article__media {
  aspect-ratio: 1125 / 340;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--media);
  margin-block-end: 21px;

  & img { inline-size: 100%; block-size: 100%; object-fit: cover; }
}

.article__title {
  font-size: var(--fs-title);
  font-weight: 500;
  line-height: 1.25;
  margin-block-end: 18px;
  text-wrap: balance;
}

.article__date { margin-block-end: 24px; }

/* Текст и рекламный столбец. Ширина текста 739 — из макета; остаток
   ширины 1125 как раз вмещает стандартный блок 300×600. */
.article__content {
  display: grid;
  grid-template-columns: minmax(0, 739px) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.article__aside {
  position: sticky;
  inset-block-start: 24px;
}

/* Стили пишем под реальную выдачу WordPress — блоки редактора, подписи,
   выравнивания. Именно здесь обычные прототипы разъезжаются при переносе. */
.article__body {
  max-inline-size: 739px;

  & > * + * { margin-block-start: 1em; }
  & h2 { font-size: 24px; font-weight: 500; line-height: 1.3; margin-block-start: 1.6em; }
  & h3 { font-size: 20px; font-weight: 500; line-height: 1.35; margin-block-start: 1.4em; }
  & a { border-block-end: 1px solid var(--accent); }
  & :where(ul, ol) { padding-inline-start: 22px; }
  & blockquote {
    margin-block: 1.4em;
    padding-inline-start: 18px;
    border-inline-start: 2px solid var(--accent);
    color: var(--text-dim);
  }
  & :where(figure, .wp-block-image) { margin-block: 1.6em; }
  & :where(figure, .wp-block-image) img { border-radius: var(--radius); }
  & :where(figcaption, .wp-element-caption) { margin-block-start: 8px; font-size: 14px; color: var(--muted); }
  & .alignwide { max-inline-size: var(--container-article); }
}

/* ----------------------------------- template-parts/layout-video.php
   Превью 894×404, кнопка play 160, разделитель акцентом между записями.
   -------------------------------------------------------------------------- */
.video-item {
  padding-block-start: 40px;

  & + & { margin-block-start: 40px; border-block-start: 2px solid var(--accent); }
}

.video-item__date { margin-block-end: 16px; }

.video {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 894 / 404;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--media);

  & iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }
}

.video__poster {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.video-item__title {
  font-size: var(--fs-title);
  font-weight: 500;
  line-height: 1.25;
  margin-block: 24px 12px;
  text-wrap: balance;
}

.video-item__lead { color: var(--text-dim); }

/* ------------------------------------------ template-parts/ad-slot.php
   Слот резервирует высоту до загрузки объявления — иначе лента дёргается
   и падает CLS. Метку «Advertisement» требуют правила AdSense.
   -------------------------------------------------------------------------- */
.ad { margin-block: 48px; }
.article__aside .ad { margin-block: 0; }

/* --------------------------------------------- assets/js/main.js infinite-scroll
   Метка для IntersectionObserver на странице material. Высоты 1px хватает —
   срабатывает заранее по rootMargin в JS, элемент убирается вместе с
   обработчиком, когда материалы раздела закончились. */
.infinite-sentinel { block-size: 1px; }

.ad__label {
  display: block;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-block-end: 8px;
}

.ad__slot {
  min-block-size: 280px;
  display: grid;
  place-items: center;
  padding: 16px;
  text-align: center;
  border: 1px dashed var(--hairline);
  border-radius: var(--radius);
}

.ad__hint {
  color: var(--muted);
  font-size: 13px;
  max-inline-size: 44ch;
  line-height: 1.5;
}

/* Столбец справа от текста: стандартный half-page 300×600 */
.ad--rail .ad__slot {
  inline-size: 300px;
  min-block-size: 600px;
  margin-inline: auto;
}

/* --------------------------------------------------------- «Показать ещё» */
.more {
  display: flex;
  justify-content: center;
  margin-block-start: 48px;
}

.more__btn {
  font-size: var(--fs-card);
  line-height: 1.4;
  padding: 10px 28px;
  border: 1px solid var(--muted);
  border-radius: var(--radius);
  transition: border-color var(--ease), color var(--ease);

  &:hover { border-color: var(--accent); color: var(--accent); }
  &:disabled { opacity: 0.4; cursor: default; }
}

/* ----------------------------------------------- search.php / 404.php */
.page-head { padding-block-start: 40px; }

.page-head__title {
  font-size: var(--fs-title);
  font-weight: 500;
  line-height: 1.25;
  margin-block-end: 8px;
}

.page-head__meta {
  color: var(--muted);
  margin-block-end: 40px;
}

.empty {
  padding-block: 80px;
  text-align: center;
  color: var(--muted);

  & p { margin-inline: auto; max-inline-size: 52ch; }
}

/* Страница 404 (WP: body.error404; прототип: [data-app][data-screen="404"]) —
   контент центрируется по высоте доступной части вьюпорта, а не только
   по горизонтали, как обычный .empty (например, "ничего не найдено» в поиске). */
.error404 .site-main,
[data-app][data-screen="404"] {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.empty__title {
  font-size: var(--fs-title);
  font-weight: 500;
  line-height: 1.25;
  color: var(--text);
  margin-block-end: 12px;
}

.empty__link {
  display: inline-block;
  margin-block-start: 24px;
  border-block-end: 1px solid var(--accent);
}

/* ---------------------------------------------------------- footer.php */
.site-footer {
  margin-block-start: 60px;
  background: var(--surface-dark);
  border-block-start: 1px solid var(--hairline);
  color: var(--footer-text);
}

.site-footer__inner {
  padding-block: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-footer);
  font-size: var(--fs-footer);
  line-height: 0.95;
}

.site-footer__credit {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  & i { inline-size: 17px; block-size: 17px; border-radius: 4px; background: currentColor; }
}

/* ------------------------------------------------------- responsive.css */
@media (width <= 1199px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

@media (width <= 991px) {
  :root { --fs-title: 32px; }

  /* поля справа больше нет — реклама уезжает под текст и перестаёт липнуть */
  .article__content { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .article__aside { position: static; }
  .ad--rail .ad__slot { inline-size: auto; min-block-size: 280px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .hero { grid-template-columns: 1fr; }
  .article + .article { margin-block-start: 72px; }
}

@media (width <= 767px) {
  :root {
    --fs-title: 26px;
    --fs-nav: 20px;
    --fs-card: 16px;
    --gap: 20px;
  }

  .nav {
    /* .site-header__inner — грид, и даже с position:fixed браузер продолжает
       использовать grid-column/justify-self из десктопной колонки для
       расчёта области выравнивания — без сброса меню сжималось до ширины
       средней колонки грида вместо полного экрана. */
    grid-column: 1 / -1;
    justify-self: stretch;
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    z-index: 30;
    display: none;
    background: var(--surface-dark);
    color: var(--text-invert);

    &.is-open { display: flex; }
  }

  .nav__link {
    font-size: 28px;
    padding-block: 0;
    border-block-end: none;

    &:hover,
    &[aria-current="page"],
    &.nav__link--active { border-block-end: 2px solid var(--accent); }
  }

  .burger { display: block; }

  /* пока раскрыт оверлей, страница под ним не скроллится */
  html.nav-open { overflow: hidden; }
  .site-header .search.is-open .search__field { inline-size: min(46vw, 220px); }

  .cards { grid-template-columns: 1fr; }

  .ad__slot { min-block-size: 250px; }

  .site-footer__inner {
    flex-direction: column;
    align-items: start;
    gap: 10px;
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* --------------------------------- только прототип, в тему не переезжает */
.demobar {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 8px var(--pad-inline);
  background: #1C1C1C;
  border-block-end: 1px solid #2E2E2E;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);

  & strong { color: var(--accent); font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; }
  & button {
    padding: 3px 9px;
    border: 1px solid #3A3A3A;
    border-radius: 4px;
    font-size: 12px;

    &:hover { border-color: var(--accent); color: var(--text-invert); }
    &.is-active { border-color: var(--accent); color: var(--accent); }
  }
  & .note { margin-inline-start: auto; font-size: 11px; opacity: 0.75; }
}