/*
Theme Name: МАГНАТ
Theme URI: https://xn--59-6kcao6cj5b.xn--p1ai/blog/
Description: Блог о рынке недвижимости в оформлении сайта магнат59.рф. Токены, шрифты, шапка и подвал берутся из styles.css основного сайта — здесь только то, чего на лендинге нет.
Author: МАГНАТ 59
Version: 1.1
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: magnat
*/

/* Цвета, шрифты, сетка, шапка, подвал, кнопки, обе темы оформления
   приходят из styles.css основного сайта. Ниже — только лента статей
   и разворот текста: этих сущностей на лендинге нет.
   Всё выражено через те же токены, поэтому день и ночь работают сами.

   Ритм разворота держится на четырёх интервалах, а не на одном:
   92px разводят разделы, 48px — подразделы, 22px — абзацы,
   10px — строки внутри списка. Контраст между ними и есть то,
   что превращает простыню в документ, который приятно читать. */

:root {
  --bl-gap-section: clamp(56px, 5.6vw, 92px);   /* перед H2 */
  --bl-gap-sub: 48px;                           /* перед H3 */
  --bl-gap-para: 22px;                          /* между абзацами */
  --bl-gap-plate: 28px;                         /* после иллюстрации и таблицы */
  --bl-measure: 760px;                          /* мера строки ≈72 знака */
}

/* Выделение текста — фирменное. Браузерный синий выдаёт страницу,
   которую собрали, а не сделали. */
::selection {
  background: rgba(232, 163, 61, 0.3);
  color: var(--ink);
}

/* ---------- общая обёртка ---------- */

.bl-head {
  margin-bottom: 8px;   /* дальше отступ даёт padding первой карточки */
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.bl-head p {
  margin-top: 12px;
  color: var(--ink-2);
  font-size: var(--fs-3);
  max-width: 46em;
}

/* ---------- список статей ---------- */

.bl-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  /* верхней рамки нет намеренно: её роль уже играет линия под заголовком */
}

.bl-card {
  border-bottom: 1px solid var(--line);
}

.bl-card > a {
  display: grid;
  gap: 8px;
  padding: 28px 0;
  text-decoration: none;
  color: inherit;
}

.bl-card h2 {
  font-size: var(--fs-3);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.bl-card p {
  color: var(--ink-2);
  max-width: 60em;
}

.bl-meta {
  font-size: var(--fs-small);
  color: var(--ink-2);
  letter-spacing: 0.02em;
}

@media (hover: hover) and (pointer: fine) {
  .bl-card > a:hover h2 { color: var(--amber-ink); }
}

.bl-card > a:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 4px;
  border-radius: var(--radius);
}

/* ---------- карточка статьи с картинкой ---------- */

.bl-card__text { display: grid; gap: 8px; }

.bl-card__pic img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

/* На узком экране картинка сверху, на широком — слева от текста */
@media (min-width: 700px) {
  .bl-card--pic > a {
    grid-template-columns: 300px 1fr;
    gap: 24px;
    align-items: start;
  }
}

/* ============================================================
   РАЗВОРОТ СТАТЬИ
   ============================================================ */

.bl-shell { max-width: 1120px; }

/* Разворот статьи шире ленты и совпадает по краям с шапкой сайта:
   рядом с текстом стоит колонка оглавления, и её ширину надо где-то взять */
.bl-article .bl-shell { max-width: var(--container); }

/* ---------- индикатор прочитанного ---------- */

/* Единственная анимация разворота. У статьи на восемнадцать минут
   читателю важно видеть, что он движется: полоска ложится ровно
   на нижнюю линию шапки и продолжает её фирменным янтарём. */
.bl-progress {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  height: 2px;
  z-index: 40;
  pointer-events: none;
}

.bl-progress__bar {
  display: block;
  height: 100%;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left center;
}

/* ---------- шапка статьи ---------- */

.bl-post__title {
  max-width: 18em;
  font-size: var(--fs-1);
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}

/* Подпись автора: кто это написал и сколько времени займёт чтение.
   Обе строки — обещание читателю, поэтому стоят до первой картинки. */
.bl-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-top: 24px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-2);
}

.bl-byline__who,
.bl-byline__when {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.bl-byline__name {
  color: var(--ink);
  font-weight: 600;
}

.bl-byline__when { margin-left: auto; }

.bl-byline__read::before,
.bl-byline__role::before {
  content: "·";
  margin-right: 10px;
  color: var(--ink-2);
}

@media (max-width: 559px) {
  .bl-byline { gap: 10px 0; }
  .bl-byline__who { flex-direction: column; gap: 2px; }
  .bl-byline__role::before { content: none; }
  .bl-byline__when { margin-left: 0; }
}

.bl-post__cover {
  margin: 32px 0 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  overflow: hidden;
}

.bl-post__cover img { display: block; width: 100%; height: auto; }

/* ---------- сетка «текст + оглавление» ---------- */

.bl-layout { margin-top: 40px; }

/* ---------- оглавление ---------- */

/* На узком экране это карта статьи перед чтением, на широком —
   липкая колонка, которая показывает, где ты сейчас. Разметка одна. */
.bl-toc {
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.bl-toc__title {
  margin: 0;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.bl-toc__list {
  counter-reset: bl-toc;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--line);
}

.bl-toc__list a {
  position: relative;
  display: block;
  padding: 7px 0 7px 18px;
  color: var(--ink-2);
  font-size: var(--fs-small);
  line-height: 1.4;
  text-decoration: none;
  transition: color 180ms var(--ease-out);
}

/* Отметка текущего раздела — тот же приём, что у пунктов меню сайта:
   короткий янтарный отрезок поверх волосяной направляющей. */
.bl-toc__list a::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--amber);
  opacity: 0;
  transition: opacity 180ms var(--ease-out);
}

.bl-toc__list a.is-current {
  color: var(--ink);
  font-weight: 500;
}

.bl-toc__list a.is-current::before { opacity: 1; }

@media (hover: hover) and (pointer: fine) {
  .bl-toc__list a:hover { color: var(--ink); }
}

.bl-toc__list a:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: -2px;
  border-radius: 2px;
}

@media (min-width: 1200px) {
  .bl-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 232px;
    gap: 0 56px;
  }

  /* align-self: start обязателен — иначе колонка растянется на всю
     высоту строки и липкому элементу будет некуда ехать */
  .bl-toc {
    grid-column: 2;
    align-self: start;
    position: sticky;
    top: calc(var(--header-h) + 28px);
    max-height: calc(100vh - var(--header-h) - 56px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0;
    border: 0;
    background: none;
  }

  .bl-body { grid-column: 1; grid-row: 1; }
}

/* ---------- текст статьи ---------- */

.bl-body { max-width: none; }

.bl-body > * + * { margin-top: var(--bl-gap-para); }

.bl-body > p,
.bl-body > h2,
.bl-body > h3,
.bl-body > ul,
.bl-body > ol,
.bl-body > blockquote,
.bl-body > .bl-summary,
.bl-body > .bl-offer { max-width: var(--bl-measure); }

.bl-body p,
.bl-body li {
  font-size: var(--fs-3);
  line-height: 1.65;
  color: var(--ink-2);
}

.bl-body strong { color: var(--ink); font-weight: 600; }

/* Заголовок раздела отбивается волосяной линией и большим воздухом
   сверху — так работает разворот отчёта, а не лента постов.
   Сверху воздуха вчетверо больше, чем снизу: заголовок принадлежит
   тексту под собой, а не над. */
.bl-body h2 {
  margin-top: var(--bl-gap-section);
  padding-top: clamp(22px, 2.2vw, 30px);
  border-top: 1px solid var(--line);
  font-size: var(--fs-2);
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.bl-body h3 {
  margin-top: var(--bl-gap-sub);
  font-size: var(--fs-3);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
  scroll-margin-top: calc(var(--header-h) + 24px);
}

/* Первый заголовок не отбивается: над ним и так обложка */
.bl-body > :first-child { margin-top: 0; }

.bl-body a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--line);
  transition: text-decoration-color 180ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .bl-body a:hover { text-decoration-color: var(--amber-ink); }
}

.bl-body a:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- списки ---------- */

/* Маркер — волосяное тире того же семейства, что все линии разворота.
   Круглая точка браузера здесь чужая. */
.bl-body ul {
  padding-left: 0;
  list-style: none;
}

.bl-body ul > li {
  position: relative;
  padding-left: 26px;
}

.bl-body ul > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.78em;
  width: 10px;
  height: 1px;
  background: var(--ink-2);
}

.bl-body ol {
  counter-reset: bl-num;
  padding-left: 0;
  list-style: none;
}

.bl-body ol > li {
  position: relative;
  padding-left: 34px;
  counter-increment: bl-num;
}

.bl-body ol > li::before {
  content: counter(bl-num) ".";
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  text-align: right;
  color: var(--ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.bl-body li + li { margin-top: 10px; }

/* ---------- цитата ---------- */

/* Тем же приёмом, что «почему цена ниже» на сайте:
   вертикальная янтарная линия вместо кавычек и фона */
.bl-body blockquote {
  margin: 36px 0 0;
  padding: 2px 0 2px 22px;
  border-left: 2px solid var(--amber);
}

.bl-body blockquote p { color: var(--ink); }

.bl-body hr {
  border: 0;
  border-top: 1px solid var(--line);
}

/* ---------- выжимка в начале ---------- */

/* Первое, что видит читатель после обложки: ответ на вопрос заголовка.
   Кто получил ответ и остался — останется до конца. */
.bl-summary {
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-2);
}

.bl-summary h2 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: var(--fs-3);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
}

.bl-summary p {
  margin-top: 10px;
  color: var(--ink);
}

/* ---------- иллюстрации ---------- */

/* Картинка оформлена как вкладка в отчёте: рамка, подпись на
   тонированной полосе внизу. Подпись закрывает иллюстрацию —
   и страница не выглядит закончившейся там, где кончилось фото.
   Поэтому же снизу воздуха вдвое меньше, чем сверху: следующий
   абзац успевает попасть в экран вместе с картинкой. */
.bl-fig {
  margin: 56px 0 var(--bl-gap-plate);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
}

.bl-fig img,
.bl-body img {
  display: block;
  width: 100%;
  height: auto;
}

.bl-fig img { border: 0; border-radius: 0; }

.bl-fig figcaption {
  margin: 0;
  padding: 13px 18px;
  max-width: none;
  border-top: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--ink-2);
  font-size: var(--fs-small);
  line-height: 1.5;
}

/* ---------- таблицы ---------- */

/* Обведённая панель, внутри — только горизонтальные волосяные линии.
   Полная сетка из клеток спорит с воздухом остального разворота,
   а данные читаются построчно. */
.bl-table {
  margin: 40px 0 var(--bl-gap-plate);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow-x: auto;                     /* прокрутка без скрипта */
  overscroll-behavior-x: contain;
}

/* Со скриптом прокрутку берёт на себя вложенный слой: рамка остаётся
   неподвижной, подсказка под таблицей не уезжает вместе с ней */
.bl-table.has-scroller {
  overflow: hidden;
}

.bl-table.has-scroller .bl-table__scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.bl-body table {
  width: 100%;
  min-width: 34em;
  border-collapse: separate;   /* collapse ломает и радиус, и липкий столбец */
  border-spacing: 0;
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
}

.bl-body th,
.bl-body td {
  padding: 13px 16px;
  border: 0;
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}

.bl-body thead th {
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.bl-body tbody tr + tr > * { border-top: 1px solid var(--line); }

/* Первая ячейка строки — её подпись, а не данные */
.bl-body tbody td:first-child {
  color: var(--ink);
  font-weight: 500;
}

/* Числа не переносим: «34 400 ₽» разорванным пополам нечитаемо */
.bl-body td.is-num { white-space: nowrap; }

@media (hover: hover) and (pointer: fine) {
  .bl-body tbody tr:hover > * { background: rgba(29, 35, 56, 0.025); }
  :root[data-theme="night"] .bl-body tbody tr:hover > * { background: rgba(38, 46, 74, 0.5); }
}

/* На телефоне таблица уезжает вбок, и подпись строки должна остаться
   на месте — иначе непонятно, к чему относится число */
@media (max-width: 719px) {
  .bl-body th:first-child,
  .bl-body td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--surface);
    border-right: 1px solid var(--line);
  }

  .bl-body thead th:first-child { background: var(--paper-2); }
}

/* Подсказка появляется только если таблица правда не помещается */
.bl-table__hint {
  display: none;
  margin: 0;
  padding: 11px 16px;
  border-top: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--ink-2);
  font-size: var(--fs-small);
}

.bl-table.is-scrollable .bl-table__hint { display: block; }

/* ---------- вопросы и ответы ---------- */

/* Десять вопросов подряд открытым текстом — стена. Складываем их
   в тот же реестр-аккордеон, что на сайте: .faq приходит из styles.css */
.bl-faq { margin-top: 24px; }

.bl-body .bl-faq summary {
  font-size: var(--fs-3);
  color: var(--ink);
}

.bl-body .bl-faq details p {
  margin: 0;
  max-width: 62ch;
}

.bl-body .bl-faq details p + p { margin-top: 12px; }

/* ---------- предложение внутри статьи ---------- */

.bl-offer {
  margin-top: var(--bl-gap-section);
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-2);
}

.bl-offer h3 {
  margin: 0;
  font-size: var(--fs-3);
  font-weight: 600;
  color: var(--ink);
}

.bl-offer p { margin-top: 12px; }

.bl-offer p:last-child {
  font-size: var(--fs-small);
  color: var(--ink-2);
}

/* ---------- источники ---------- */

/* Приложение к статье, а не её раздел: мельче, тише, плотнее */
.bl-refs { margin-top: 16px; }

.bl-body .bl-refs li {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-2);
}

.bl-body .bl-refs li + li { margin-top: 8px; }

.bl-body .bl-refs a { color: var(--ink-2); }

/* Дисклеймер в самом конце */
.bl-body > p:last-child em {
  display: block;
  font-size: var(--fs-small);
  font-style: normal;
  line-height: 1.55;
  color: var(--ink-2);
}

/* ---------- призыв после статьи ---------- */

.bl-cta {
  margin-top: 64px;
  padding: 28px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-2);
}

.bl-cta h2 {
  font-size: var(--fs-3);
  font-weight: 600;
}

.bl-cta p {
  margin-top: 8px;
  color: var(--ink-2);
  max-width: 40em;
}

.bl-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

/* На широком экране это закрывающая полоса: значок, текст и кнопки
   в один ряд. Колонка в 760px оставляла бы справа пустоту на треть экрана. */
@media (min-width: 900px) {
  .bl-cta {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 26px 32px;
  }

  .bl-cta .b-ico { flex: none; margin: 0; }
  .bl-cta__text { flex: 1 1 auto; }
  /* только внутри полосы: на странице 404 тот же ряд кнопок стоит сам по себе */
  .bl-cta .bl-cta__actions { flex: none; margin-top: 0; }
}

/* На сайте btn--ghost живёт на тёмной нижней полосе и потому светлый.
   В блоге такая же кнопка стоит на светлом фоне — там ей нужны
   свои цвета, иначе она сливается с подложкой. */
.bl-cta__actions .btn--ghost {
  border-color: var(--line);
  color: var(--ink);
}

@media (hover: hover) and (pointer: fine) {
  .bl-cta__actions .btn--ghost:hover { border-color: var(--ink-2); }
}

/* ---------- листалка и пустая лента ---------- */

.bl-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 40px;
}

.bl-nav a {
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  font-size: var(--fs-small);
}

@media (hover: hover) and (pointer: fine) {
  .bl-nav a:hover { border-color: var(--ink-2); }
}

.bl-empty {
  padding: 48px 0;
  color: var(--ink-2);
  font-size: var(--fs-3);
}

@media (min-width: 640px) {
  .bl-cta { padding: 32px; }
  .bl-summary,
  .bl-offer { padding: 30px 34px; }
}

.bl-head .section__title { margin-bottom: 0; }

/* ---------- полоса-шапка ленты ---------- */

/* Голый заголовок над списком выглядел пусто. Даём ленте собственную
   обложку в ритме сайта: тонированная полоса и тот же чертёж генплана,
   что на первом экране. В ночной теме тонировка темнеет сама. */
.bl-top {
  position: relative;
  overflow: hidden;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  padding-block: 52px 56px;
}

.bl-top::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;      /* на телефоне чертёж почти не виден, но весит 70 КБ */
  opacity: 0.22;
  background: url("https://xn--59-6kcao6cj5b.xn--p1ai/picsandvideo/district-plan.svg")
              right -280px top -40px / 1500px auto no-repeat;
  -webkit-mask-image: linear-gradient(100deg, transparent 25%, #000 70%);
  mask-image: linear-gradient(100deg, transparent 25%, #000 70%);
}

@media (min-width: 1024px) {
  .bl-top::before { display: block; }
}

.bl-top .container { position: relative; }

.bl-top h1 {
  font-size: var(--fs-1);
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.bl-top p {
  margin-top: 14px;
  max-width: 40em;
  font-size: var(--fs-3);
  color: var(--ink-2);
}

:root[data-theme="night"] .bl-top::before { opacity: 0.5; }

.bl-list--top { border-top: 1px solid var(--line); }

/* Под полосой-шапкой стандартный отступ секции избыточен */
.bl-top + .section { padding-top: 40px; }

/* На сайте штрих иконки прорисовывается, когда секция въезжает в кадр.
   В блоге системы появления нет, и значок остался бы пустой рамкой. */
.js .b-ico svg :is(path, rect, circle) {
  stroke-dashoffset: 0;
  transition: none;
}

/* Значки берём из набора сайта (.b-ico), но в блоге они мельче:
   здесь это акцент у одного блока, а не сетка преимуществ */
.bl-cta .b-ico,
.bl-head .b-ico { width: 44px; height: 44px; margin-bottom: 14px; }
.bl-cta .b-ico svg,
.bl-head .b-ico svg { width: 26px; height: 26px; }

@media (prefers-reduced-motion: reduce) {
  .bl-progress__bar,
  .bl-toc__list a,
  .bl-toc__list a::before,
  .bl-body a { transition: none; }
}