/* Компоненты страниц: блоки середины и бокового каталога. Основа — телефон, отличия компьютера —
   в responsive.css. Вид меняется переменными с :root (газета) и .is-journal (обычный вид). */

/* ---------- content-body: HTML из редактора — стилизуется тегами внутри блока ----------
   Свой шрифт и отступ абзацев место может задать переменными --content-font и
   --content-paragraph-gap прямо на этом элементе. */
.content-body { font: var(--content-font, var(--prose)); }
.content-body p { margin: 0 0 var(--content-paragraph-gap, 1em); }
.content-body p:last-child { margin-bottom: 0; }
.content-body b, .content-body strong { font-weight: 700; }
.content-body blockquote { margin: 0 0 1em; padding-left: 1em; font-style: italic; color: var(--muted); }
/* что ещё умеет редактор: списки, подзаголовки, линия */
.content-body ul, .content-body ol { margin: 0 0 1em; padding-left: 1.4em; }
.content-body ul { list-style: disc; }
.content-body ol { list-style: decimal; }
.content-body li { margin-bottom: .3em; }
.content-body h2, .content-body h3, .content-body h4 { margin: 1.4em 0 .5em; font-family: var(--font-display); font-weight: 700; line-height: 1.2; }
.content-body h2 { font-size: 1.4em; }
.content-body h3 { font-size: 1.2em; }
.content-body h4 { font-size: 1.05em; }
.content-body hr { margin: 1.5em 0; border: 0; border-top: 1px solid var(--rule); }
/* буквица у первого абзаца (в газете; в обычном виде переменные её выключают). Шаблон ставит модификатор,
   только если текст начинается с буквы: у тире или кавычки буквица выйдет огромным знаком */
.content-body--dropcap > p:first-child::first-letter { float: var(--dropcap-float); margin: var(--dropcap-margin); font: var(--dropcap-font); font-stretch: 75%; color: var(--dropcap-color); }
/* стихотворение: строфы — абзацы, строки — через <br>, как текст приходит из базы */
.content-body--poem { --content-font: 400 21px/1.65 var(--font-text); --content-paragraph-gap: 1.3em; }

/* ---------- quote-block: «Афоризм дня» — один на день, кнопка показывает следующую ----------
   Обычный вид — крупный текст во всю колонку; модификатор --boxed — плашка акцентного цвета
   в боковой колонке газеты. Разница — переменными на блоке, элементы их наследуют. */
.quote-block {
  --quote-gap: 18px;
  --quote-pad: 0;
  --quote-bg: none;
  --quote-color: inherit;
  --quote-max-width: 900px;
  --quote-label-font: var(--label);
  --quote-label-spacing: var(--label-spacing);
  --quote-label-transform: var(--label-transform);
  --quote-label-color: var(--accent);
  --quote-text-font: 400 clamp(30px, 3.6vw, 44px)/1.2 var(--font-text);
  --quote-text-stretch: 100%;
  --quote-text-wrap: pretty;
  --quote-footer-color: var(--muted);
  --quote-next-font: 700 17px var(--font-ui);
  --quote-next-spacing: 0;
  --quote-next-transform: none;
  --quote-next-height: var(--tap);
  --quote-next-pad: 0;
  --quote-next-border: 0;
  --quote-next-color: var(--accent);
  --quote-next-decoration: underline;
  --quote-focus-color: var(--accent);

  display: flex; flex-direction: column; gap: var(--quote-gap); max-width: var(--quote-max-width); padding: var(--quote-pad); background: var(--quote-bg); color: var(--quote-color);
}
.quote-block--boxed {
  --quote-gap: 16px;
  --quote-pad: 24px;
  --quote-bg: var(--accent);
  --quote-color: var(--on-accent);
  --quote-max-width: none;
  --quote-label-font: 700 14px var(--font-narrow);
  --quote-label-spacing: .14em;
  --quote-label-transform: uppercase;
  --quote-label-color: inherit;
  --quote-text-font: italic 700 32px/1.15 var(--font-display);
  --quote-text-stretch: 80%;
  --quote-text-wrap: wrap;
  --quote-footer-color: inherit;
  --quote-next-font: 700 var(--font-size-small) var(--font-narrow);
  --quote-next-spacing: .1em;
  --quote-next-transform: uppercase;
  --quote-next-height: 40px;
  --quote-next-pad: 0 14px;
  --quote-next-border: 1.5px solid currentColor;
  --quote-next-color: inherit;
  --quote-next-decoration: none;
  --quote-focus-color: var(--on-accent); /* рамка фокуса на плашке акцентного цвета — светлая */
}
.quote-block__label { font: var(--quote-label-font); letter-spacing: var(--quote-label-spacing); text-transform: var(--quote-label-transform); color: var(--quote-label-color); }
.quote-block__text { font: var(--quote-text-font); font-stretch: var(--quote-text-stretch); text-wrap: var(--quote-text-wrap); }
.quote-block__footer { display: flex; align-items: center; gap: 24px; font-size: 17px; color: var(--quote-footer-color); }
.quote-block__next:focus-visible { outline-color: var(--quote-focus-color); }
.quote-block__next { min-height: var(--quote-next-height); padding: var(--quote-next-pad); background: none; border: var(--quote-next-border); color: var(--quote-next-color); font: var(--quote-next-font); letter-spacing: var(--quote-next-spacing); text-transform: var(--quote-next-transform); text-decoration: var(--quote-next-decoration); text-underline-offset: 4px; }

/* ---------- lead-story: разворот газеты на главной — отрывок произведения с буквицей ---------- */
.lead-story { display: flex; flex-direction: column; gap: 14px; }
.lead-story__rubric { display: flex; align-items: center; gap: 4px; }
.lead-story__title { font: 800 clamp(36px, 5.6vw, 68px)/1 var(--font-display); font-stretch: 75%; text-wrap: balance; overflow-wrap: break-word; }
.lead-story__title-link { color: var(--ink); text-decoration: none; }
.lead-story__meta { font-size: var(--font-size-small); color: var(--muted); }
/* отрывок — HTML из редактора (content-body): шрифт и отступы задаём его переменными */
.lead-story__text { --content-font: 400 18px/1.6 var(--font-text); --content-paragraph-gap: 12px; column-width: 300px; column-gap: 32px; }
.lead-story__more { align-self: flex-start; font: 700 17px var(--font-narrow); letter-spacing: .08em; text-transform: uppercase; }

/* ---------- publication-list / publication-card: новое на главной ----------
   В газете — сетка карточек с рубрикой, в обычном виде — строки с датой слева. */
.publication-list { display: grid; grid-template-columns: var(--pub-cols); column-gap: 20px; }
.publication-card { display: flex; flex-direction: var(--card-dir); flex-wrap: wrap; align-items: baseline; gap: var(--card-gap); padding: var(--card-pad); color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
.publication-card:hover { color: var(--ink); background: var(--surface); }
/* лишние карточки — только в обычном виде: в газете сетка 3×2 */
.publication-card--extra { display: var(--journal-flex); }
.publication-card__date { display: var(--journal-block); flex: 0 0 150px; font: 400 14px var(--font-label); color: var(--muted); }
.publication-card__body { flex: 1 1 var(--card-body-basis); display: flex; flex-direction: column; gap: 6px; }
.publication-card__rubric { display: var(--paper-block); font: 700 13px var(--font-narrow); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.publication-card__title { font: var(--card-title); font-stretch: var(--card-title-stretch); color: var(--card-title-color); overflow-wrap: break-word; }
.publication-card__meta { font-size: var(--font-size-small); color: var(--muted); }
.publication-card__meta-category { display: var(--journal-inline); }
.publication-card__meta-date { display: var(--paper-inline); }

/* ---------- publication-rows / publication-row: публикации раздела, поиска, «Смотри также» ---------- */
.publication-rows { display: flex; flex-direction: column; }
.publication-row { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.publication-row:hover { background: var(--surface); color: var(--ink); }
.publication-row__title { font: var(--card-title); font-stretch: var(--card-title-stretch); color: var(--card-title-color); overflow-wrap: break-word; }
.publication-row__title--small { font-size: 20px; }
.publication-row__meta { font-size: var(--font-size-small); color: var(--muted); }

/* ---------- news-list / news-card ---------- */
.news-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 28px; }
.news-list--wide { grid-template-columns: minmax(0, 1fr); gap: 0; }
.news-card { display: flex; flex-direction: column; gap: 8px; }
.news-card--row { flex-direction: row; flex-wrap: wrap; gap: 16px 24px; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.news-card__image { flex: 0 0 160px; }
.news-card__body { flex: 1 1 320px; display: flex; flex-direction: column; gap: 8px; }
.news-card__date { font: var(--label); letter-spacing: 0; text-transform: none; color: var(--muted); }
.news-card__title { font: 700 20px/1.3 var(--font-text); }
.news-card__link { text-decoration: none; }
.news-card__text { font: 400 16px/1.5 var(--font-text); color: var(--muted); }

/* ---------- catalog-list: разделы «Моё творчество» с меткой и числом публикаций ---------- */
.catalog-list { display: flex; flex-direction: column; }
.catalog-list__item { display: flex; align-items: baseline; gap: 8px; padding: var(--list-pad); color: var(--ink); text-decoration: none; border-bottom: var(--list-border); font: var(--list-font); }
.catalog-list__item:hover { color: var(--accent); }
.catalog-list__name { flex: 1; min-width: 0; }
.catalog-list__count { font: var(--count-font); color: var(--count-color); }
/* заголовок группы — когда групп разделов больше одной (сейчас группа одна, заголовка нет) */
.catalog-list__group { padding: 14px 0 4px; font: var(--label); letter-spacing: var(--label-spacing); text-transform: var(--label-transform); color: var(--muted); }

/* ---------- sidebar-catalog: боковой каталог; на телефоне — раскрывающаяся кнопка внизу страницы ---------- */
.sidebar-catalog { display: flex; flex-direction: column; gap: 14px; }
.sidebar-catalog__heading { display: none; }
.sidebar-catalog__toggle { display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 0 16px; background: none; border: 2px solid var(--rule-strong); border-radius: var(--radius); color: var(--ink); font: 700 18px var(--font-text); }
.sidebar-catalog__hint { font: 400 14px var(--font-label); color: var(--muted); }
.sidebar-catalog__panel { display: none; flex-direction: column; gap: 14px; }
.sidebar-catalog__panel.is-open { display: flex; }
.sidebar-catalog__more { align-self: flex-end; font-size: var(--font-size-small); color: var(--muted); text-decoration: none; }
.sidebar-catalog__more:hover { color: var(--accent); }

/* ---------- listing-summary: итог над списком (каталог, раздел, поиск) ---------- */
.listing-summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 32px; padding: var(--section-pad); border-top: var(--section-border-top); border-bottom: var(--section-border-bottom); }
.listing-summary__count { font: var(--label); letter-spacing: var(--label-spacing); text-transform: var(--label-transform); color: var(--ink); }
.listing-summary__note { font: italic 16px var(--font-text); color: var(--muted); }

/* ---------- catalog-index / catalog-row: страница каталога — оглавление с точками до числа ---------- */
.catalog-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); column-gap: 56px; }
/* заголовок группы — когда групп разделов больше одной (сейчас группа одна, заголовка нет); во всю ширину сетки */
.catalog-index__group { grid-column: 1 / -1; padding: 24px 0 6px; font: var(--label); letter-spacing: var(--label-spacing); text-transform: var(--label-transform); color: var(--muted); }
.catalog-row { display: flex; align-items: baseline; gap: 10px; padding: var(--row-pad); border-bottom: var(--row-border); color: var(--ink); text-decoration: none; }
.catalog-row:hover { background: var(--surface); color: var(--ink); }
.catalog-row__name { font: var(--row-name); color: var(--row-name-color); }
.catalog-row__leader { display: var(--paper-block); flex: 1; min-width: 16px; border-bottom: 2px dotted var(--leader); transform: translateY(-5px); }
.catalog-row__spacer { display: var(--journal-block); flex: 1; }
.catalog-row__count { font: var(--row-count); font-stretch: 75%; color: var(--muted); }

/* ---------- pagination ---------- */
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding-top: 8px; }
.pagination__link { display: flex; align-items: center; justify-content: center; min-width: var(--tap); min-height: var(--tap); padding: 0 14px; border: 1px solid var(--rule); border-radius: var(--radius); color: var(--ink); text-decoration: none; font-size: 17px; }
.pagination__link:hover { border-color: var(--accent); color: var(--accent); }
.pagination__link--current { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pagination__link--disabled { color: var(--muted); opacity: .6; pointer-events: none; }
.pagination__gap { display: flex; align-items: center; padding: 0 6px; color: var(--muted); }

/* ---------- article: страница чтения — публикация, новость, страница ---------- */
.article__head { display: flex; flex-direction: column; gap: 14px; padding-bottom: 18px; border-bottom: var(--section-border-top); }
.article__rubric { display: flex; align-items: center; gap: 4px; }
.article__meta { font-size: 16px; color: var(--muted); }
/* заметка — HTML из редактора (content-body): шрифт — его переменной */
.article__note { --content-font: italic 17px/1.5 var(--font-text); padding: var(--note-pad); background: var(--note-bg); border-top: var(--note-border); border-bottom: var(--note-border); border-radius: var(--note-radius); color: var(--muted); }

/* ---------- files: файлы для скачивания ---------- */
.files { display: flex; flex-direction: column; gap: 10px; }
.files__title { font: var(--section-title); font-size: 18px; letter-spacing: var(--section-title-spacing); text-transform: var(--section-title-transform); }
.files__item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font: 400 18px var(--font-text); }
.files__meta { font: 400 13px var(--font-mono); color: var(--muted); }

/* ---------- share-buttons: «Поделиться» ---------- */
.share-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; min-height: var(--tap); font-size: 16px; }
.share-buttons__label { color: var(--muted); }
.share-buttons__link { padding: 6px 4px; }

/* ---------- see-also: «Смотри также» ---------- */
.see-also { display: flex; flex-direction: column; }

/* ---------- gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }

/* ---------- media-image: картинка материала на сайте — копия нужного размера; открывающаяся — ссылка
   на копию для просмотра во весь экран. В макете на её месте — placeholder ---------- */
.media-image { --media-image-width: auto; display: block; }
/* обрезанная копия (превью галереи, миниатюра новости) — плитка с постоянными пропорциями: заполняет своё
   место по ширине, на телефоне плитка бывает шире копии. Вписанную копию (картинка в тексте) не растягиваем */
.media-image--fill { --media-image-width: 100%; }
.media-image__image { width: var(--media-image-width); border-radius: var(--radius); }

/* «Открыть оригинал» в просмотре во весь экран (js/lightbox.js на сайте). pswp — блок PhotoSwipe, имена
   его элементов задаёт библиотека; цвет текста — её переменная */
.pswp__original-link { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); padding: 8px 14px; background: var(--lightbox-bar); color: var(--pswp-icon-color); font: 400 var(--font-size-small) var(--font-ui); }
.pswp__original-link:hover { color: var(--pswp-icon-color); }
.pswp__original-link.is-hidden { display: none; }

/* ---------- placeholder: место для фото в макете (на сайте — настоящие снимки) ---------- */
.placeholder { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; padding: 8px; background: repeating-linear-gradient(135deg, var(--placeholder-stripe) 0 10px, var(--placeholder-stripe-alt) 10px 20px); border-radius: var(--radius); font: 400 12px var(--font-mono); color: var(--placeholder-ink); text-align: center; }

/* ---------- illustration: шарж как книжная иллюстрация — рисунок прямо на бумаге, подпись под тонкой линейкой ----------
   Положение и ширину задаёт место: «Обо мне» — article__portrait, обращение на главной — greeting__figure. */
.illustration {
  --illustration-gap: 12px;
  --illustration-image-width: 100%;
  --illustration-image-height: auto;
  --illustration-caption-pad: 10px;
  --illustration-caption-font: italic 14px/1.4 var(--font-text);

  display: flex; flex-direction: column; gap: var(--illustration-gap);
}
/* рядом с текстом: рисунок 140px, подпись в 3 строки — вместе по высоте обращения */
.illustration--small {
  --illustration-gap: 10px;
  --illustration-image-width: auto;
  --illustration-image-height: 140px;
  --illustration-caption-pad: 8px;
  --illustration-caption-font: italic 13px/1.4 var(--font-text);
}
.illustration__image { align-self: flex-start; width: var(--illustration-image-width); height: var(--illustration-image-height); }
.illustration__caption { padding-top: var(--illustration-caption-pad); border-top: 1px solid var(--badge-border); font: var(--illustration-caption-font); color: var(--muted); }

/* ---------- home: главная ---------- */
.home__news { display: flex; flex-direction: column; gap: 18px; }

/* ---------- article__portrait: шарж на «Обо мне» — текст обтекает его; на телефоне — над текстом ---------- */
.article__portrait { width: 60%; max-width: 260px; margin: 0 0 24px; }

/* ---------- empty-message: пустой раздел, ничего не найдено ---------- */
.empty-message { padding: 24px 0; font: italic 19px/1.5 var(--font-text); color: var(--muted); }