/* ════════════════════════════════════════════════════════════════════
   blog-fluid.css — «РЕЗИНОВАЯ» (zoom) система масштабирования
   Загружается ПОСЛЕ styles.css и blog.css, переопределяет размеры.
   Подключается ТОЛЬКО на страницах статей (.p-wrap) — журнал и лендинг
   не затрагиваются.
   ────────────────────────────────────────────────────────────────────
   ЦЕЛЬ: при сужении окна вся страница «отъезжает» как единое целое —
   шрифт, паддинги, КОЛОНКИ и поля по краям уменьшаются ОДНОВРЕМЕННО и
   В ОДНОЙ ПРОПОРЦИИ. Композиция и переносы строк остаются те же.

   ОДНА РУЧКА:
   1. Корневой font-size (html) пропорционален ширине окна (чистый vw):
      16px достигается на 1520px → 16/1520 = 1.0526vw. clamp держит
      потолок 16px (≥1520px всё замирает) и пол 10px (≤950px не мельчает).
   2. Контейнер и поля — в rem (90rem = 1440px при корне 16). Ширина
      колонки масштабируется тем же коэффициентом, что и шрифт →
      соотношение «ширина / кегль» постоянно → переносы не меняются.
   3. ВСЕ размеры внутри — в rem. Одна ручка двигает весь макет.

   В px НАМЕРЕННО оставлены: border/outline (хайрлайны), box-shadow,
   пороги @media (это ширины окна, а не размеры элементов).
   Мельче/крупнее весь макет — правится ТОЛЬКО строка html{font-size}.
   ════════════════════════════════════════════════════════════════════ */

html{
  /* чистый vw → истинный зум. Потолок 17px достигается на ~1360px
     (17/1360 = 1.25vw): на типовых десктопах полный размер, не мельчит.
     Не мельче 11px. Крупнее/мельче весь макет — меняется ТОЛЬКО эта строка. */
  font-size: clamp(11px, 1.25vw, 17px);
}
body{ font-size: var(--fs-md); }

/* ── Токены → rem (база 16px) ──────────────────────────────────────── */
:root{
  /* типографика */
  --fs-2xs: 0.6875rem;   /* 11 */
  --fs-xs:  0.875rem;    /* 14 */
  --fs-sm:  0.9375rem;   /* 15 */
  --fs-md:  1.0625rem;   /* 17 */
  --fs-lg:  1.25rem;     /* 20 */
  --fs-xl:  1.5rem;      /* 24 */
  --fs-2xl: 1.875rem;    /* 30 */
  --fs-3xl: 2.375rem;    /* 38 */

  /* радиусы (pill оставляем абсолютным) */
  --r-sm: 0.625rem;      /* 10 */
  --r-md: 1rem;          /* 16 */
  --r-lg: 1.5rem;        /* 24 */
  --r-xl: 2rem;          /* 32 */

  /* раскладка — В REM, поэтому колонка и поля масштабируются вместе со шрифтом.
     90rem = 1440px (макет статьи), поля по 2.5rem = 40px при корне 16px. */
  --gutter: 2.5rem;
  --container: min(90rem, calc(100vw - 2 * var(--gutter)));
}

/* ════════════════════════════════════════════════════════════════════
   САЙТ-КАРКАС (header / footer) — ключевые размеры в rem, чтобы шапка
   зумилась вместе со страницей.
   ════════════════════════════════════════════════════════════════════ */
.u-header__inner{ height: 4.5rem; }            /* 72 */
.u-nav{ gap: 2rem; font-size: 0.9375rem; }
.u-btn{ font-size: 0.9375rem; padding: 0.625rem 1.125rem; }
.u-btn--lg{ font-size: var(--fs-md); padding: 0.875rem 1.5rem; }
.u-logo__img{ height: 1.375rem; }              /* 22 — лого тоже зумится */

/* ════════════════════════════════════════════════════════════════════
   СТАТЬЯ — все размеры в rem (масштабируются от корня)
   ════════════════════════════════════════════════════════════════════ */
.p-wrap{ padding-top: 3rem; max-width: none; }

.p-breadcrumb{ gap: 0.75rem; margin-bottom: 1.875rem; }

.p-masthead{ column-gap: 4.5rem; row-gap: 1.75rem; }
.p-masthead__preview{ margin: 1.5rem 0 0; padding-top: 1.375rem; line-height: 1.62; }
.p-masthead__media{ min-height: 26.25rem; }    /* 420 */
.p-head__cat{ gap: 0.75rem; margin-bottom: 1.5rem; }
.p-head__cat::after{ width: 2rem; }
.p-masthead__text h1{ font-size: 3.5rem; }      /* 56 */
.p-lede{ font-size: var(--fs-lg); margin: 1.25rem 0 0; }

.p-byline{ gap: 1rem 1.5rem; margin: 2rem 0 0; padding-top: 1.25rem; }
.p-author{ gap: 0.875rem; }
.p-author__av{ width: 2.875rem; height: 2.875rem; font-size: var(--fs-lg); }
.p-meta-facts{ gap: 1rem; }
.p-share{ gap: 0.625rem; }
.p-share a{ width: 2.375rem; height: 2.375rem; }
.p-share a svg{ width: 1rem; height: 1rem; }

/* layout: TOC + проза */
.p-layout{ grid-template-columns: minmax(0, 11.875rem) minmax(0, 1fr); column-gap: 4rem; margin-top: 2.25rem; }
.p-toc{ top: 6rem; gap: 0.25rem; }
.p-toc__lbl{ padding-bottom: 0.875rem; margin-bottom: 0.375rem; }
.p-toc a{ gap: 0.75rem; padding: 0.5625rem 0; padding-left: 0.875rem; margin-left: -1rem; font-size: var(--fs-sm); }

/* проза */
.p-body{ max-width: 92ch; }
.p-body > p, .p-body > ul, .p-body > ol{ font-size: var(--fs-md); line-height: 1.72; margin: 0 0 1.5rem; }
.p-body h2{ font-size: 2.375rem; margin: 3.25rem 0 1.125rem; scroll-margin-top: 6rem; }
.p-body h2 .h2num{ margin-bottom: 0.75rem; }
.p-body h3{ font-size: var(--fs-xl); margin: 2rem 0 0.75rem; }
.p-body ul li, .p-body ol li{ padding-left: 1.875rem; margin-bottom: 0.75rem; }
.p-body ul li::before{ left: 0.375rem; top: 0.75rem; width: 0.4375rem; height: 0.4375rem; }

/* pull-quote */
.p-pull{ margin: 2.5rem 0; padding: 0.5rem 0 0.5rem 2rem; }
.p-pull p{ font-size: 2.125rem; }               /* 34 */

/* note */
.p-note{ grid-template-columns: 2.125rem 1fr; column-gap: 1rem; margin: 2rem 0; padding: 1.25rem 1.5rem; }
.p-note__mark{ width: 2.125rem; height: 2.125rem; font-size: 1.1875rem; }
.p-note p{ font-size: var(--fs-sm); }

/* мини-тест */
.p-quiz{ margin: 2.25rem 0; }
.p-quiz__head{ padding: 1.875rem 2rem 1.25rem; }
.p-quiz__kicker{ gap: 0.625rem; margin-bottom: 0.75rem; }
.p-quiz__kicker::before{ width: 1.625rem; }
.p-body .p-quiz__head h3{ font-size: 2rem; }    /* 32 */
.p-quiz__list{ padding: 0.875rem 1.375rem !important; }
.p-quiz__q{ gap: 1rem; padding: 1.0625rem 0.625rem; font-size: var(--fs-md); }
.p-quiz__q .qz-box{ width: 1.75rem; height: 1.75rem; border-radius: 0.5rem; }
.p-quiz__q .qz-box svg{ width: 0.9375rem; height: 0.9375rem; }
.p-quiz__foot{ gap: 1.75rem; padding: 1.5rem 2rem; }
.p-quiz__score{ gap: 0.25rem; }
.p-quiz__score b{ font-size: 2.875rem; }        /* 46 */
.p-quiz__verdict{ font-size: var(--fs-md); }

/* таблица */
.p-tablewrap{ margin: 2.25rem 0; }
.p-table{ min-width: 35rem; }                   /* 560 — порог гор. скролла */
.p-table thead th{ padding: 1rem 1.375rem; }
.p-table tbody td{ padding: 1rem 1.375rem; }

/* карточки видов */
.p-types{ gap: 1rem; margin: 2.25rem 0; }
.p-type{ padding: 1.5rem 1.625rem; }
.p-type__name{ font-size: var(--fs-xl); margin: 0 0 0.75rem; }
.p-type__tag{ margin-bottom: 1rem; padding: 0.3125rem 0.6875rem; }

/* отзывы-чипы */
.p-quotes{ margin: 1.875rem 0; padding: 1.875rem; }
.p-quotes__lbl{ margin: 0 0 1rem; }
.p-quotes__chips{ gap: 0.625rem; }
.p-quotes__chips span{ font-size: var(--fs-lg); padding: 0.5rem 1rem; }

/* CTA 149₽ */
.p-cta{ margin: 3rem 0; gap: 1.75rem; padding: 2.25rem; }
.p-cta__eyebrow{ margin-bottom: 0.75rem; }
.p-cta h3{ font-size: 2rem; margin: 0 0 0.625rem; }  /* 32 */
.p-cta p{ font-size: var(--fs-sm); }
.p-cta__action{ gap: 0.625rem; }
.p-cta__price{ font-size: var(--fs-2xl); }

/* конец статьи */
.p-end{ margin-top: 3.5rem; padding-top: 1.75rem; gap: 1.5rem; }
.p-end__tags{ gap: 0.625rem; }
.p-tag{ padding: 0.4375rem 0.875rem; }

/* «Читать дальше» */
.p-related{ margin-top: 6.875rem; }
.p-related__head{ gap: 1rem; margin-bottom: 2.5rem; padding-bottom: 1.25rem; }
.p-related__head h2{ font-size: 2.75rem; }      /* 44 */
.j-grid{ gap: 3rem 2.5rem; }
.j-card__media{ margin-bottom: 1.25rem; }
.j-card__cat{ margin-bottom: 0.75rem; }
.j-card__title{ font-size: var(--fs-xl); margin: 0 0 0.875rem; }
.j-card__meta{ padding-top: 0.875rem; gap: 0.875rem; }

/* ════════════════════════════════════════════════════════════════════
   ПЛАНШЕТ / МОБАЙЛ — ниже зоны зума корень возвращаем к комфортной базе,
   дальше раскладку ПЕРЕСТРАИВАЕМ брейкпоинтами (структура, не размеры).
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 940px){
  .p-layout{ grid-template-columns: 1fr; }
  .p-toc{ position: static; flex-direction: row; flex-wrap: wrap; gap: 0.5rem 1.125rem; margin-bottom: 2.5rem; }
  .p-toc a{ border-left: 0; padding-left: 0; margin-left: 0; }
}
@media (max-width: 900px){ .j-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 820px){
  .p-masthead{ grid-template-columns: 1fr; }
  .p-masthead__media{ min-height: 0; aspect-ratio: 16/9; }
}
@media (max-width: 600px){
  .p-cta{ grid-template-columns: 1fr; }
  .p-cta__action{ align-items: flex-start; }
}
@media (max-width: 560px){
  .j-grid{ grid-template-columns: 1fr; }
  .p-types{ grid-template-columns: 1fr; }
}

/* Мобайл: возвращаем корень к нормальному кеглю (иначе rem-токены
   унаследуют минимум). blog.css @680 дальше правит частности. */
@media (max-width: 680px){
  html{ font-size: 100%; }
  :root{ --container: 100vw; --gutter: 1.25rem; }
}