/* ============================================
   Питомцы — база: шрифты, токены, reset
   Токены = дизайн-токены из Figma
   ============================================ */

/* ---------- Шрифты (self-hosted, вариативные) ----------
   WOFF2 с сабсетом «латиница + кириллица» (собраны утилитой pyftsubset).
   Оси wght/wdth сохранены — font-stretch ниже работает именно за счёт оси wdth.
   Исходные TTF лежат в fonts/src/ и в раздачу не идут: из них пересобирается
   сабсет, если понадобятся новые символы. */

@font-face {
  font-family: "Noto Serif Display";
  src: url("../fonts/NotoSerifDisplay-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Serif Display";
  src: url("../fonts/NotoSerifDisplay-Italic-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Noto Serif";
  src: url("../fonts/NotoSerif-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Italic-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Variable.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* Курсивное начертание — стиль «Meta text XS» из UI-кита (плашка ERID,
   дисклеймер подписки). Без него браузер синтезировал наклон из прямого
   начертания: буквы просто заваливались, вместо настоящих курсивных форм. */
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Italic-Variable.woff2") format("woff2");
  font-weight: 100 800;
  font-style: italic;
  font-display: swap;
}

/* ---------- Токены ---------- */

:root {
  /* Цвета (Figma tokens) */
  --c-black: #1a0c04;        /* Color/Black — основной текст */
  --c-cream: #efede8;        /* Color/Cream — фон сайта */
  --c-dark-brown: #401706;   /* Color/Dark brown */
  --c-gray: #7a6e65;         /* Color/Gray — мета-текст */
  --c-light-gray: #d6d6d6;   /* Color/Light gray */
  --c-light-white: #eaeaea;  /* Color/Light white — в макете фигурирует в состояниях кнопок */
  --c-yellow: #e8a020;       /* Color/Yellow — спецпроекты/партнёрка */
  --c-terracotta: #c37044;   /* Терракота (брендбук) */
  --c-terracotta-dark: #a95635; /* Color/Terracota dark */
  --c-dark-blue: #0a1628;    /* Color/Dark blue */
  --c-dark-gray: #222222;    /* Color/Dark gray — тёмные секции */
  --c-lavender: #d6bded;     /* Лавандовый (брендбук) */
  --c-white: #ffffff;
  --c-disabled-bg: #909090;   /* UI-kit: State=Disabled, фон */
  --c-disabled-text: #a6a6a6; /* UI-kit: State=Disabled, текст */

  /* Шрифты */
  --font-serif: "Noto Serif Display", Georgia, serif;      /* крупные заголовки (hero) */
  --font-serif-text: "Noto Serif", Georgia, serif;         /* заголовки карточек */
  --font-sans: "Montserrat", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Courier New", monospace;

  /* Сетка */
  --pad: 40px; /* боковые поля страницы */
}

/* Мобильный макет (Home Page Mobile 375×10907) даёт контент 327 при экране 375,
   то есть поле ровно 24. Отдельной ступени под 560 нет: 24 — то же значение,
   что и на планшете, поэтому ритм полей монотонный 40 → 24. */
@media (max-width: 768px) {
  :root { --pad: 24px; }
}

/* Шире 1920 контент не растёт: поля съедают излишек, контент капится на
   макетных 1840 по центру, а фоны секций остаются во всю ширину. Без капа
   карточки на 2K+ (и при отдалении масштаба) раздувались (баг-лист 12.08). */
@media (min-width: 1921px) {
  :root { --pad: calc((100vw - 1840px) / 2); }
}

/* ---------- Reset ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  background: var(--c-cream);
  color: var(--c-black);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.4;
  min-width: 320px;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
}

ul,
ol {
  list-style: none;
}

/* ---------- Контейнер ---------- */

.container {
  margin-inline: auto;
  max-width: calc(1840px + var(--pad) * 2);
  padding-inline: var(--pad);
  width: 100%;
}

/* Узкий («журнальный») контейнер. В макете две ширины контента: полноэкранные
   секции идут по 1840, а читаемые — по 1334 (поле 293 при рабочем поле 1920).
   Ниже 1414px ведёт себя как обычный контейнер: остаётся только --pad. */
.container--narrow {
  max-width: calc(1334px + var(--pad) * 2);
}

/* ---------- Баннеры (ротатор) ---------- */

/* Обёртки ротатора прозрачны для раскладки: баннер остаётся прямым
   потомком слота (flex/grid родителя), JS оставляет один вариант. */
.banner-rotator,
.banner-item {
  display: contents;
}

/* ---------- Утилиты ---------- */

/* Скрыть визуально, оставить для скринридеров */
.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* ---------- Общие элементы ---------- */

/* Бейдж рубрики: "#ЗДОРОВЬЕ" — JetBrains Mono Medium 16 / ls 4% / uppercase */
.badge {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: normal;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge--blur {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Бейдж-хештег ведёт на ленту своей рубрики (pitomcy_badge). Вид не меняем —
   цвет наследуется от места, где бейдж лежит; добавляем только отклик на
   курсор. Селекторы по тегу: неинтерактивные бейджи остаются span. */
/* :where() обнуляет вес списка, поэтому правило весит ровно как тег `a` —
   сильнее базовой ссылки (идёт позже), но слабее любого класса бейджа.
   Без этого селектор с атрибутом (0,1,1) перебивал .feed-card__badge (0,1,0)
   и его кремовый цвет: хештеги на фото становились тёмными. */
a:where(.badge, [class*="__badge"], [class*="__tag"]) {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

a:where(.badge, [class*="__badge"], [class*="__tag"]):hover {
  opacity: 0.7;
}

/* Текст-кнопка «читать материал» и т.п. — JetBrains Mono Medium / uppercase */
.text-btn {
  align-items: center;
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: normal;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Hover по UI-киту «All button set»: подчёркивание, цвет не меняется. */
.text-btn:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Запущенный видео-фасад: остаётся только iframe — обложка, play и подписи
   скрываются, иначе их z-index держит их поверх плеера. */
[data-video-url].is-playing > :not(iframe) {
  display: none;
}

/* Плеер занимает весь фасад: без правила iframe остаётся в браузерных
   дефолтных 300×150 (ловилось на лендинге спецпроекта, баг-лист 12.08). */
[data-video-url].is-playing > iframe {
  border: 0;
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

/* Заголовок секции (Figma «Heading 2»): JetBrains Mono Medium 30 / ls 4% / uppercase */
.section-title {
  color: var(--c-terracotta-dark);
  font-family: var(--font-mono);
  font-size: clamp(20px, 1.6vw, 30px);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: normal;
  text-transform: uppercase;
}

.section-title--cream {
  color: var(--c-cream);
}

/* Primary-кнопка (Figma «Primary Button set»): терракота, 53px, JetBrains Mono 16 */
.btn {
  align-items: center;
  background: var(--c-terracotta-dark);
  color: var(--c-cream);
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  gap: 8px;
  height: 53px;
  justify-content: center;
  letter-spacing: 0.04em;
  line-height: normal;
  padding: 16px 32px;
  text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}

/* Состояния — строго по UI-kit «Primary Button set» (7555:3174):
   hover терракота СВЕТЛЕЕТ (#a95635 → #c37044), а не темнеет. */
.btn:hover {
  background: var(--c-terracotta);
}

.btn:disabled,
.btn[disabled],
.btn[aria-disabled="true"] {
  background: var(--c-disabled-bg);
  color: var(--c-disabled-text);
  cursor: not-allowed;
  pointer-events: none;
}

.btn img {
  height: 24px;
  width: 24px;
}

/* Прозрачная кнопка с рамкой (для тёмных секций) */
.btn--ghost {
  background: transparent;
  border: 1px solid rgba(239, 237, 232, 0.1);
}

/* Hover по актуальному киту (7555:3174): ghost-кнопка инвертируется в кремовую
   заливку с тёмным текстом («ВСЕ БЛОГИ»), а не просто подсвечивает фон. */
.btn--ghost:hover {
  background: var(--c-cream);
  border-color: var(--c-cream);
  color: var(--c-dark-gray);
}

/* Ghost-кнопка на ховере заливается кремом — светлая иконка на ней исчезла бы.
   Зеркало правила для .btn--cream ниже: там иконка красится в белый, здесь в тёмный. */
.btn--ghost:hover img {
  filter: brightness(0);
}

/* Инвертированная кнопка (для терракотовых секций) */
.btn--cream {
  background: var(--c-cream);
  color: var(--c-terracotta-dark);
}

/* UI-kit: на hover кремовая кнопка ИНВЕРТИРУЕТСЯ — фон терракота, текст кремовый */
.btn--cream:hover {
  background: var(--c-terracotta-dark);
  color: var(--c-cream);
}

/* При инверсии терракотовая стрелка/галочка-картинка сливалась бы с фоном —
   в ките hover-иконка светлая. Фильтр красит любую иконку в белый. */
.btn--cream:hover img {
  filter: brightness(0) invert(1);
}

/* ---------- Хлебные крошки (общий компонент) ----------
   Типографика едина для статьи, лент и лендинга спецпроекта; страницы
   переопределяют только цвета и отступы. Раньше база жила в article-hero.css,
   и на страницах без него крошки падали в дефолтный Montserrat. */

.breadcrumbs {
  align-items: center;
  color: var(--c-light-gray);
  display: flex;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  gap: 8px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.breadcrumbs a {
  transition: color 0.2s ease;
}

.breadcrumbs a:hover {
  color: var(--c-gray);
}

.breadcrumbs__current {
  color: var(--c-gray);
}

/* Заголовки карточек — блочные полосы на всю ширину карточки: пустая зона
   правее текста перехватывала клик у оверлея-ссылки (баг-лист 12.08).
   Полоса сквозная для кликов, ссылка в заголовке остаётся кликабельной. */
.fresh-card__title,
.best-card__title,
.story-card__title,
.special__title,
.tv__feature-title,
.tv-card__title,
.article-card__title,
.story-tile__title {
  pointer-events: none;
}

.fresh-card__title a,
.best-card__title a,
.story-card__title a,
.special__title a,
.tv__feature-title a,
.tv-card__title a,
.article-card__title a,
.story-tile__title a {
  pointer-events: auto;
}

@media (max-width: 768px) {
  .breadcrumbs {
    font-size: 13px;
  }

  /* На страницах материалов (статья, история, ТВ, лендинг СП) крошки в
     мобилке скрыты — дублировали заголовок (баг-лист 12.08). На лентах
     крошки остаются. */
  .article .breadcrumbs,
  .sp-landing .breadcrumbs {
    display: none;
  }
}

/* ---------- Картинка/код в баннерном месте (общий компонент) ----------
   Макет встаёт в размер места: сайдбары трёх высот, вертикальное и широкое
   места отдают ширину, высота следует за пропорцией макета. */

.banner-media__label {
  align-items: center;
  color: var(--c-gray);
  display: flex;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 14px;
  font-style: italic;
  gap: 8px;
  margin-bottom: 8px;
}

.banner-media__label span + span::before {
  background: var(--c-gray);
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: 2px;
  margin-right: 8px;
  vertical-align: middle;
  width: 2px;
}

.banner-media a {
  display: block;
}

.banner-media__image {
  display: block;
  height: auto;
  width: 100%;
}

/* Пометка «Реклама · ERID:…» по макету 7992:2704: JetBrains Mono Italic 12,
   на светлом фоне — серый мета-цвет, на фото — полупрозрачный светлый. */
.native-mark {
  color: var(--c-gray);
  font-family: var(--font-mono);
  font-size: 12px;
  font-style: italic;
  margin: 0 0 24px;
  opacity: 0.9;
}

.native-mark--hero,
.native-mark--photo {
  color: rgba(214, 214, 214, 0.5);
  margin: 16px 0 0;
}

/* На карточках-превью плашка стоит в мете, без нижнего поля. */
.native-mark--card {
  display: block;
  margin: 8px 0 0;
}