/* cn3-plus / foundation: общие переменные, типографика, адаптивность */

:root {
  /* ===== Переменные, которые ждут шаблоны, но тема их нигде не задавала =====
     Без них в тёмной теме карточки были прозрачными, а рамки белыми. Значения следуют теме:
     lightColor, mainColor, hoverColor уже переключаются между светлой и тёмной. */
  --headColor: var(--mainColor);
  --textColor: var(--mainColor);
  --bgColor: var(--lightColor);
  --bgLight: var(--greyBg);
  --accentColor: var(--hoverColor);
  --accent-color: var(--hoverColor);
  --darkCard: #23232e;
  --darkBorder: #3a3a4a;
  --darkText: #e8e8f0;
  --darkBg: #191925;

  /* подписи мелким шрифтом: серый темы в тёмном режиме слишком тусклый */
  --cn3Muted: var(--greyColor);
  /* приглушённый акцент вместо ярких цветов */
  --cn3Accent: #8c4a3c;

  /* ===== Типографика: единый стандарт =====
     Интерфейс и текст: Commissioner (в теме загружены только начертания 400, 500, 600).
     Шрифт заголовков по умолчанию тот же. Чтобы вернуть шрифт с засечками, достаточно заменить
     значение --headFont на var(--serifFont). */
  --serifFont: Georgia, 'PT Serif', 'Times New Roman', serif;
  --monoFont: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --headFont: var(--primeFont);

  /* шкала размеров */
  --fs-xs: .75rem;      /* метки, теги, подписи */
  --fs-sm: .85rem;      /* дата, мета-строка */
  --fs-md: 1rem;        /* основной текст */
  --fs-lg: 1.15rem;     /* заголовок карточки */
  --fs-xl: 1.4rem;      /* подзаголовок */
  --fs-2xl: 1.8rem;     /* заголовок раздела */
  --fs-3xl: clamp(1.8rem, 4vw, 3rem);       /* заголовок страницы */
  --fs-display: clamp(2.2rem, 5vw, 3.8rem); /* крупный заголовок */

  /* межстрочные интервалы */
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-base: 1.6;
  --lh-read: 1.7;
}

:root[data-theme="dark"] {
  --cn3Muted: #a6abc8;
  --cn3Accent: #b8685a;
}

/* кнопки и поля форм по умолчанию не наследуют шрифт */
button, input, select, textarea { font-family: inherit; }

/* ===== Широкие экраны: ноутбуки 1600+, Full HD, 2K/4K, ультраширокие ===== */
@media (min-width: 1600px) {
  :root { --width: 1320px; }
}
@media (min-width: 1920px) {
  :root { --width: 1560px; }
  .blog-grid,
  .home-category__list,
  .feat-posts__list,
  .random-list,
  .re-grid { grid-template-columns: repeat(4, 1fr); }
  .container--single { max-width: 860px; } /* текст статьи остаётся читаемым */
}
@media (min-width: 2560px) {
  html { font-size: 22px; }
  :root { --width: 1900px; }
  .site-wrapper { max-width: 2560px; }
  .container--single { max-width: 960px; }
}

/* ===== Планшеты в альбомной ориентации: не сжимаем контент до 800px ===== */
@media (min-width: 901px) and (max-width: 1100px) {
  .container { max-width: 980px; }
}

/* ===== Телефоны: вырез камеры ===== */
@media (max-width: 1100px) {
  @supports (padding: max(0px)) {
    .container {
      padding-left: max(2rem, env(safe-area-inset-left));
      padding-right: max(2rem, env(safe-area-inset-right));
    }
  }
}

/* ===== Сенсорные экраны: без hover-подпрыгиваний карточек ===== */
@media (hover: none) {
  .re-card:hover,
  .cn3-card:hover { transform: none; }
}

/* ===== Для тех, кто отключил анимации в системе ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* заголовок раздела: главная, витрины, блоки вовлечения */
.cn3x-section-title {
  margin: 0 0 1.2rem;
  font-family: var(--headFont, var(--primeFont));
  font-size: var(--fs-2xl, 1.8rem);
  font-weight: var(--bold, 600);
  line-height: var(--lh-snug, 1.3);
  letter-spacing: -.01em;
}