/* ROGACHEV — журнал и статья (этап 7, макеты Journal 1440, Article 1440, ArticleMobile 390).
   Значения — design/tokens.css. Сетки: 3 колонки → ниже 1100 px 2 → ниже 760 px 1.
   Карточка статьи — одна ссылка на всю карточку (::after на ссылке заголовка). */

/* ---------- Общая строка значков: дата, время чтения, просмотры */
.rg-jmeta{display:flex;flex-wrap:wrap;gap:6px 14px;font-family:var(--font-mono);line-height:1.4;color:var(--text-3)}
.rg-jmeta__fact{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.rg-jmeta__fact .rg-home-post__icon{flex:none}
.rg-jmeta--card{font-size:11px}
.rg-jmeta--lead{font-size:13px;gap:6px 16px}
.rg-jmeta--article{font-size:13px;gap:6px 22px}

/* ---------- Список журнала */
.rg-journal{display:flex;flex-direction:column}
.rg-journal__back{display:none}

.rg-journal__head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;padding-top:48px;padding-bottom:32px}
.rg-journal__title{font-family:var(--font-display);font-weight:400;font-size:64px;line-height:1;margin:0;overflow-wrap:break-word}

/* Поиск по журналу: поле 320 с линией снизу и значком-лупой (он же кнопка отправки) */
.rg-jsearch{display:flex;align-items:center;gap:10px;width:320px;max-width:100%;height:48px;border-bottom:1px solid var(--ink);flex:none}
.rg-jsearch__btn{display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);margin-left:-11px;flex:none;color:var(--text)}
.rg-jsearch__input{flex:1;min-width:0;height:46px;padding:0;border:0;background:transparent;outline:none;font-size:15px;color:var(--text);appearance:none;-webkit-appearance:none}
.rg-jsearch__input::placeholder{color:var(--text-3);opacity:1}
.rg-jsearch__input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.rg-jsearch:focus-within{border-color:var(--patina)}

.rg-journal__rubrics{padding-bottom:40px}

/* ---------- Главная статья журнала */
.rg-lead-post{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:56px;align-items:center;padding-bottom:64px;position:relative}
.rg-lead-post__media{position:relative;display:block;width:100%;height:520px;overflow:hidden;background:linear-gradient(170deg,#F1F3EE 0%,var(--tile) 100%)}
.rg-lead-post__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rg-lead-post__text{display:flex;flex-direction:column;gap:18px;min-width:0}
.rg-lead-post__rubric{font-family:var(--font-mono);font-size:12px;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;color:var(--patina)}
.rg-lead-post__title{font-family:var(--font-display);font-weight:400;font-size:44px;line-height:1.1;margin:0;overflow-wrap:break-word}
.rg-lead-post__link::after{content:"";position:absolute;inset:0;z-index:1}
.rg-lead-post__link:focus-visible{outline:none}
.rg-lead-post__link:focus-visible::after{outline:2px solid var(--ink);outline-offset:-2px}
.rg-lead-post__excerpt{font-size:17px;line-height:1.6;color:var(--text-2);margin:0}
.rg-lead-post__more{align-self:flex-start;font-size:15px;border-bottom:1px solid var(--underline)}
.rg-lead-post:hover .rg-lead-post__more{border-color:var(--patina)}

/* ---------- Сетка статей.
   Черта над сеткой и воздух под ней — на обёртке: у неё поля страницы лежат внутри рамки,
   поэтому линия идёт во всю ширину полосы (как в макете), а карточки остаются в полях.
   На самой сетке отступы не задать: их обнуляет общее правило ul[class] из base.css. */
.rg-journal__body{display:flex;flex-direction:column;border-top:1px solid var(--line);padding-top:56px;padding-bottom:72px}
.rg-journal__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 24px;margin:0;list-style:none}
.rg-journal__cell{min-width:0}

.rg-post{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0}
.rg-post__media{position:relative;display:block;width:100%;height:250px;overflow:hidden;background:linear-gradient(170deg,#F1F3EE 0%,var(--tile) 100%)}
.rg-post__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rg-post__media--empty{display:flex;align-items:center;justify-content:center}
.rg-post__noimg{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--text-3)}
.rg-post__rubric{font-family:var(--font-mono);font-size:11px;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;color:var(--patina)}
.rg-post__title{font-family:var(--font-display);font-weight:400;font-size:22px;line-height:1.25;margin:0;overflow-wrap:break-word}
/* Вся карточка — одна ссылка: растягиваем ссылку заголовка, рамку фокуса уводим внутрь */
.rg-post__link::after{content:"";position:absolute;inset:0;z-index:1}
.rg-post__link:focus-visible{outline:none}
.rg-post__link:focus-visible::after{outline:2px solid var(--ink);outline-offset:-2px}

/* ---------- Низ списка: «Показать ещё» и номера страниц */
.rg-journal__more{display:flex;flex-direction:column;align-items:center;gap:14px;padding:64px 0 0}
.rg-journal__more-btn{min-height:58px;padding:0 28px;font-size:16px}
.rg-journal__more-error{font-size:14px;color:var(--brick)}
.rg-journal__more-error button{min-height:var(--tap);border-bottom:1px solid currentColor}
.rg-journal__pages{font-size:12px;color:var(--text-3);display:flex;flex-wrap:wrap;justify-content:center;gap:2px 8px;margin:0}
.rg-journal__pages a{display:inline-flex;align-items:center;justify-content:center;min-width:var(--tap);min-height:var(--tap);margin:-12px 0}
.rg-journal__pages [aria-current]{color:var(--text);border-bottom:2px solid var(--ink)}

/* Поля страницы у пустого состояния даёт rg-container — сокращённой записью padding их не сбиваем. */
.rg-journal__empty{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-4);padding-top:var(--s-7);padding-bottom:var(--s-9)}
.rg-journal__empty-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s-3)}

/* ---------- Статья: шапка */
.rg-article{display:flex;flex-direction:column}
.rg-article__back{display:none}
.rg-article__crumbs{padding-top:22px}
.rg-article__crumbs + .rg-article__back + .rg-article__head{padding-top:32px}
.rg-article__head{width:100%;max-width:calc(760px + var(--page-x) * 2);margin:0 auto;padding:56px var(--page-x) 36px;display:flex;flex-direction:column;gap:20px}
.rg-article__rubric{align-self:flex-start;display:inline-flex;align-items:center;min-height:var(--tap);margin:-12px 0;font-family:var(--font-mono);font-size:12px;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;color:var(--patina)}
.rg-article__rubric:hover{color:var(--patina-hover)}
.rg-article__title{font-family:var(--font-display);font-weight:400;font-size:52px;line-height:1.08;margin:0;overflow-wrap:break-word}
.rg-article__intro{font-size:21px;line-height:1.55;color:var(--text-2);margin:0}
.rg-article__byline{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:16px}
.rg-article__author{font-size:13px;color:var(--text-3)}
.rg-jmeta__fact--upd{color:var(--text-3)}

/* ---------- Статья: обложка во всю ширину */
.rg-article__cover{padding:0 var(--page-x)}
.rg-article__cover-box{position:relative;display:block;width:100%;height:640px;overflow:hidden;background:linear-gradient(170deg,#F1F3EE 0%,var(--tile) 100%)}
.rg-article__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- Статья: текстовая колонка */
/* Колонка статьи — сетка в три дорожки: посередине текст 680, по краям воздух.
   Обычные части стоят в средней дорожке, широкие занимают всю полосу страницы.
   Полоса уже 680 (телефон) — боковые дорожки сами сжимаются в ноль, второго набора правил не нужно. */
.rg-article__col,
.rg-article__text{display:grid;grid-template-columns:[wide-start] minmax(0,1fr) [main-start] minmax(0,680px) [main-end] minmax(0,1fr) [wide-end];row-gap:26px}
.rg-article__col{width:100%;max-width:1440px;margin:0 auto;padding:56px var(--page-x) 64px}
.rg-article__col > *,
.rg-article__text > *{grid-column:main-start / main-end;min-width:0}
/* Широкие элементы статьи: текст целиком (внутри у него та же сетка), фото во всю ширину,
   два фото рядом и ряд товаров — одно правило на всех. */
.rg-article__col > .rg-article__text,
.rg-article__text > .wp-block-image,
.rg-article__text > .wp-block-gallery,
.rg-article__text > .rg-inrow{grid-column:wide-start / wide-end}

/* Содержание: в макете его нет — та же типографика, ненавязчиво */
.rg-article__toc{display:flex;flex-direction:column;gap:8px;border-left:1px solid var(--line);padding-left:20px}
.rg-article__toc-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.rg-article__toc-list{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none}
.rg-article__toc-list a{display:inline-flex;align-items:center;min-height:var(--tap);margin:-11px 0;font-size:16px;line-height:1.45;border-bottom:1px solid var(--underline)}

/* Текст статьи и элементы редактора внутри него */
.rg-article__text{font-size:19px;line-height:1.7;color:#232B26}
.rg-article__text > p{margin:0}
.rg-article__text h2{font-family:var(--font-display);font-weight:400;font-size:30px;line-height:1.2;color:var(--text);margin:16px 0 0}
.rg-article__text h3{font-family:var(--font-display);font-weight:400;font-size:24px;line-height:1.2;color:var(--text);margin:8px 0 0}
.rg-article__text a{border-bottom:1px solid var(--underline)}
.rg-article__text ul,.rg-article__text ol{margin:0;padding-left:24px}
.rg-article__text li + li{margin-top:8px}
.rg-article__text figure{margin:0}
.rg-article__text img{max-width:100%;height:auto}
/* Фото редактора — во всю ширину колонки */
.rg-article__text .wp-block-image img{width:100%;height:auto}
.rg-article__text figcaption{font-size:13px;line-height:1.5;color:var(--text-3);margin-top:8px}

/* Два фото рядом: галерея и колонки редактора.
   Правила галереи у ядра WordPress написаны через :not(#individual-image) — чтобы они не перебивали
   макет, свои селекторы пишем тем же приёмом, иначе фото обрезается и встаёт в столбик. */
.rg-article__text .wp-block-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0}
.rg-article__text .wp-block-gallery.has-nested-images figure.wp-block-image:not(#rg-gallery){display:flex;flex-direction:column;width:auto;max-width:none;min-width:0;margin:0;flex:none}
.rg-article__text .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#rg-gallery) img,
.rg-article__text .wp-block-gallery.has-nested-images figure.wp-block-image:not(#rg-gallery) img{width:100%;max-width:100%;height:auto;flex:none;object-fit:contain}
.rg-article__text .wp-block-gallery figcaption{position:static;background:none;padding:0;margin-top:8px;font-size:13px;line-height:1.5;color:var(--text-3)}
.rg-article__text .wp-block-columns{display:flex;gap:24px;align-items:flex-start}
.rg-article__text .wp-block-column{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:16px}

/* Цитата */
.rg-article__text blockquote{margin:0;border-left:2px solid var(--line);padding-left:24px;display:flex;flex-direction:column;gap:8px}
.rg-article__text blockquote p{margin:0;font-family:var(--font-display);font-weight:400;font-size:24px;line-height:1.35;color:var(--text)}
.rg-article__text blockquote cite{font-family:var(--font-mono);font-style:normal;font-size:13px;color:var(--text-3)}

/* Таблица: строки в две колонки, линия --line-soft, правая колонка моно 14 */
.rg-article__text table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.45}
/* У ядра WordPress ячейки обведены со всех сторон — по макету остаётся только линия снизу. */
.rg-article__text table th,.rg-article__text table td{text-align:left;font-weight:400;padding:12px 0;border:0;border-bottom:1px solid var(--line-soft);vertical-align:top}
.rg-article__text table tr > *:first-child{padding-right:16px}
.rg-article__text table tr > * + *{font-family:var(--font-mono);font-size:14px}
.rg-article__text table caption{text-align:left;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);padding-bottom:8px}

/* ---------- Блок «Товар в тексте» */
.rg-inprod{position:relative}
.rg-inprod__link{display:flex;gap:20px;align-items:center;border:1px solid var(--line);background:var(--surface);padding:16px;min-height:var(--tap)}
.rg-inprod__link:hover{border-color:var(--ink);color:var(--text)}
.rg-inprod__media{width:88px;height:110px;flex:none;overflow:hidden;background:linear-gradient(160deg,#F1F3EE 0%,var(--tile) 100%);display:flex;align-items:center;justify-content:center}
.rg-inprod__img{width:100%;height:100%;object-fit:cover}
.rg-inprod__text{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.rg-inprod__name{font-size:17px;line-height:1.3}
.rg-inprod__meta{font-family:var(--font-mono);font-size:12px;line-height:1.4;color:var(--text-3)}
.rg-inprod__price{font-family:var(--font-display);font-weight:400;font-size:20px;line-height:1.2}
.rg-inprod__more{flex:none;font-size:14px;border-bottom:1px solid var(--underline)}
.rg-inprod__link:hover .rg-inprod__more{border-color:var(--patina)}

/* ---------- Блок «Ряд товаров»: заголовок и обычные карточки товара сайта */
.rg-inrow{display:flex;flex-direction:column;gap:20px}
.rg-inrow__title{font-family:var(--font-display);font-weight:400;font-size:26px;line-height:1.2;margin:0}
.rg-inrow__list{display:grid;grid-template-columns:repeat(var(--rg-inrow-n,3),minmax(0,1fr));gap:32px 24px;margin:0;padding:0;list-style:none}
.rg-inrow__item{min-width:0}

/* ---------- Свои блоки внутри текста статьи.
   Типографика редактора (ссылка с подчёркиванием, подзаголовок антиквой, отступ списка)
   написана селекторами по тегам и перебивает классы блоков — здесь возвращаем им своё.
   Карточка товара в ряду должна выглядеть точно так же, как везде на сайте. */
.rg-article__text .rg-inprod__link{border:1px solid var(--line)}
.rg-article__text .rg-inprod__link:hover{border-color:var(--ink)}
.rg-article__text .rg-inrow__title{font-family:var(--font-display);font-size:26px;line-height:1.2;margin:0}
.rg-article__text .rg-inrow__list{padding:0;margin:0}
.rg-article__text .rg-inrow__item + .rg-inrow__item{margin-top:0}
.rg-article__text .rg-card{font-size:16px;line-height:1.5;color:var(--text)}
.rg-article__text .rg-card__name{font-family:var(--font-body);font-weight:400;font-size:16px;line-height:1.3;margin:0}
.rg-article__text .rg-card a{border-bottom:0}

/* ---------- Блок «Совет» */
.rg-tip{display:flex;flex-direction:column;gap:6px;border-left:2px solid var(--patina);padding:4px 0 4px 24px}
.rg-tip__label{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--patina)}
.rg-tip__text{font-size:18px;line-height:1.6}

/* ---------- Метки-темы */
.rg-article__tags{display:flex;gap:10px;flex-wrap:wrap;padding-top:8px}
.rg-article__tag{display:inline-flex;align-items:center;min-height:var(--tap);padding:6px 12px;font-size:13px;border:1px solid var(--line)}
.rg-article__tag:hover{border-color:var(--ink);color:var(--text)}

/* ---------- Pinterest и «Скопировать ссылку» */
.rg-share{display:flex;flex-wrap:wrap;align-items:center;gap:20px;border-top:1px solid var(--line);padding-top:20px;font-size:14px}
.rg-share__btn{display:inline-flex;align-items:center;gap:8px;min-height:var(--tap)}
.rg-share__btn:hover{color:var(--patina)}
.rg-share__short{display:none}
.rg-share__fallback{flex:1 1 240px;min-width:180px}
.rg-share__fallback input{width:100%;height:var(--field);padding:0 12px;background:var(--surface);border:1px solid var(--line);font-family:var(--font-mono);font-size:13px;outline:none}

/* ---------- Подписка в статье (светлый вариант формы подвала) */
.rg-jsub{background:var(--surface);border:1px solid var(--line-soft);padding:32px;display:flex;flex-direction:column;gap:14px}
.rg-jsub__title{font-family:var(--font-display);font-weight:400;font-size:26px;line-height:1.2;margin:0}
.rg-jsub__note{font-size:14px;line-height:1.5;color:var(--text-3);margin:0}
.rg-jsub .rg-subscribe__input{background:var(--ground);border-color:var(--line);color:var(--text)}
.rg-jsub .rg-subscribe__input::placeholder{color:var(--text-3)}
.rg-jsub .rg-subscribe__input:focus{border-color:var(--ink)}
.rg-jsub .rg-subscribe__input.is-error{border-color:var(--brick)}
.rg-jsub .rg-subscribe__btn{background:var(--ink);color:var(--surface)}
.rg-jsub .rg-subscribe__btn:hover{background:#2A332E}
.rg-jsub .rg-subscribe__tg{border-color:var(--ink);color:var(--text)}
.rg-jsub .rg-subscribe__tg:hover{background:var(--ink);color:var(--surface)}
.rg-jsub .rg-subscribe__msg{color:var(--text-3)}
.rg-jsub .rg-subscribe__msg.is-error{color:var(--brick)}
.rg-jsub .rg-subscribe__msg.is-ok{color:var(--patina-text)}
.rg-jsub__check{min-height:0;padding:0;gap:10px;align-items:center}
.rg-jsub__check .rg-check__box{width:18px;height:18px}
.rg-jsub__check .rg-check__text{font-size:12px;line-height:1.45;color:var(--text-3)}

/* ---------- Статья: «Товары из статьи» и «Читайте также» */
.rg-article__sec{display:flex;flex-direction:column;gap:28px;padding-top:56px;border-top:1px solid var(--line)}
.rg-article__sec--also{border-top:0;padding-top:72px;padding-bottom:88px}
.rg-article__h2{font-family:var(--font-display);font-weight:400;font-size:32px;line-height:1.15;margin:0;overflow-wrap:break-word}
.rg-article__goods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 24px;margin:0;padding:0;list-style:none}
.rg-article__goods > li{min-width:0}
.rg-article__also{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 24px;margin:0;padding:0;list-style:none}
.rg-article__also > li{min-width:0}

/* ---------- Ниже 1100 px: сетки по две колонки, строка «← Журнал» (шапка телефона включается здесь же) */
@media (max-width:1099px){
  .rg-journal__title{font-size:48px}
  .rg-lead-post{grid-template-columns:minmax(0,1fr);gap:24px}
  .rg-lead-post__media{height:auto;aspect-ratio:3/2}
  .rg-lead-post__title{font-size:34px}
  .rg-journal__body{padding-top:40px}
  .rg-journal__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 20px}
  .rg-article__title{font-size:40px}
  .rg-article__also{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rg-article__goods{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rg-article__crumbs{display:none}
  .rg-article__crumbs + .rg-article__back + .rg-article__head{padding-top:12px}
  .rg-journal__back,.rg-article__back{display:flex;align-items:center;height:var(--tap);padding:0 var(--page-x);font-size:14px;color:var(--text-3)}
  .rg-journal__back:hover,.rg-article__back:hover{color:var(--text)}
}

/* ---------- Ниже 760 px: одна колонка, размеры макета ArticleMobile */
@media (max-width:760px){
  .rg-journal__head{flex-direction:column;align-items:stretch;gap:20px;padding-top:24px;padding-bottom:24px}
  .rg-journal__title{font-size:38px}
  .rg-jsearch{width:100%}
  .rg-journal__rubrics{padding-bottom:28px}

  .rg-lead-post{padding-bottom:36px;gap:16px}
  .rg-lead-post__title{font-size:28px}
  .rg-lead-post__excerpt{font-size:16px}

  .rg-journal__body{padding-top:32px;padding-bottom:48px}
  .rg-journal__grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .rg-post__media{height:auto;aspect-ratio:3/2}
  .rg-post__title{font-size:20px}
  .rg-journal__more{padding:40px 0 0}

  .rg-article__head{padding:12px var(--page-x) 24px;gap:14px}
  .rg-article__title{font-size:32px;line-height:1.12}
  .rg-article__intro{font-size:17px}
  .rg-article__byline{padding-top:14px}
  .rg-jmeta--article{font-size:12px;gap:6px 16px}
  .rg-article__author{font-size:12px}

  .rg-article__cover{padding:0}
  .rg-article__cover-box{height:260px}

  .rg-article__col{padding:28px var(--page-x) 40px}
  .rg-article__col,.rg-article__text{row-gap:22px}
  .rg-article__text{font-size:17px}
  .rg-article__text h2{font-size:24px;margin-top:8px}
  .rg-article__text h3{font-size:20px}
  .rg-article__text table{font-size:14px}
  .rg-article__text table tr > * + *{font-size:13px}
  .rg-article__text .wp-block-columns{flex-direction:column;gap:16px}

  .rg-inprod__link{gap:14px;padding:12px}
  .rg-inprod__media{width:64px;height:80px}
  .rg-inprod__name{font-size:15px}
  .rg-inprod__price{font-size:17px}
  .rg-inrow__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
  .rg-article__text .rg-inrow__title{font-size:22px}
  .rg-article__text .rg-card__name{font-size:14px}
  .rg-tip{padding-left:16px}
  .rg-tip__text{font-size:16px}

  .rg-share{gap:16px;padding-top:16px}
  .rg-share__long{display:none}
  .rg-share__short{display:inline}
  .rg-jsub{padding:22px}
  .rg-jsub__title{font-size:22px}

  .rg-article__sec{padding-top:0;border-top:0;gap:14px}
  .rg-article__sec--also{padding-top:40px;padding-bottom:48px}
  .rg-article__h2{font-size:24px}
  .rg-article__goods{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
  .rg-article__also{grid-template-columns:minmax(0,1fr);gap:32px}
}
/* Раздел статьи, куда перевёл пункт «В статье» (tabindex="-1", journal.js): фокус без рамки — это заголовок, не кнопка */
.rg-article [tabindex="-1"]:focus{outline:none}