/* Итерация журнала 22.09 (design lock §7) поверх принятого бандла dist/journal.style.css.
 *
 * Бандл остаётся на принятой production-базе и не пересобирается, поэтому дельта едет отдельным
 * файлом и отдаётся напрямую — тем же способом, что journal-covers.css и layout-d1.css. Файл
 * подключается зависимостью от `gtyres-journal-edition`, то есть всегда после бандла: правила
 * равной специфичности решаются порядком, а адресные переопределения ниже объявлены с запасом.
 *
 * Композиция: кружки «Видео и истории» наверху, строка рубрик, ведущая фотоистория во всю полосу,
 * обычная сетка публикаций и строка .r56-endnote (подборка моделей + карточка канала) перед
 * поиском. Прежние .r56-frontpage / .r56-sidebar / .r56-lead-photo / .r56-categories в разметке
 * не встречаются — их правила в бандле остаются мёртвыми и ничего не рисуют.
 */

.r56-journal-social--lead{padding-top:0;margin-top:0;border-top:0}

.r56-rubrics{display:flex;flex-wrap:wrap;gap:8px 10px;margin:0 0 36px}
.r56-rubrics a{display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:0 16px;border:1px solid var(--line);background:#fff;font-size:12px;font-weight:600}
.r56-rubrics a:hover{border-color:var(--gt-red)}
.r56-rubrics a>span:last-child{font-size:11px;font-weight:500;color:#737577}

.r56-lead{margin-bottom:8px}
.r56-lead-story{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:40px;align-items:center}
.r56-lead-media{position:relative;aspect-ratio:16/10;background:#eeefee;overflow:hidden}
.r56-lead-media>a{display:block;width:100%;height:100%}
/* Кадр вписан целиком (contain), поля закрывает размытая копия того же файла: вертикальную
   обложку это не тянет и не режет подписи. Резкий кадр позиционирован, иначе подложка,
   выведенная абсолютом, перекрыла бы его. */
.r56-lead-media img{display:block;position:relative;width:100%;height:100%;object-fit:contain}
.r56-lead-media .r56-lead-ambient{position:absolute;inset:0;object-fit:cover;filter:blur(22px);opacity:.38;transform:scale(1.08)}
.r56-lead-content{padding:0}
.r56-lead-content>p.r56-lead-byline{font-size:11px;font-weight:600;line-height:1.5;color:#4c4c4c;margin:0 0 20px}
.r56-lead-content .r56-kicker time{color:inherit}

.r56-endnote{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:40px;align-items:center;margin-top:44px;padding-top:42px;border-top:1px solid var(--line)}

/* Квадратный постер с текстом резать нельзя: кадр вписывается целиком, поля закрывает размытая
   копия того же файла из общего .gt-ambient-cover. Ссылка поднята над слоем подложки, дата — над
   затемнением: у подложки z-index 0, у затемнения 1 (ambient-cover.css). */
.r56-blog-images img{object-fit:contain}
.r56-blog-images>a{position:relative;z-index:2}
.r56-blog-date{z-index:3}

/* Пара управления полкой. В бандле живут прежние `.r56-rail-actions button` и
   `.r57-carousel-controls button` — белая круглая шайба 38–40 px. Кнопки общей пары
   .gt-control-pair лежат внутри этой же обёртки, а правило пары приходит в marketing-наборе,
   то есть раньше журнального: при равной специфичности шайба победила бы. Адресные правила
   ниже (0,2,1) возвращают геометрию пары независимо от порядка файлов. */
.r56-rail-actions{align-items:center;gap:14px}
.r56-rail-actions .gt-control-pair>button,
.r57-carousel-controls .gt-control-pair>button{flex:1 1 50%;width:auto;height:100%;min-width:0;min-height:0;padding:0;border:0;border-radius:0;background:transparent;color:var(--gt-black);box-shadow:none;font-size:inherit}
.r56-rail-actions .gt-control-pair>button+button,
.r57-carousel-controls .gt-control-pair>button+button{border-left:1px solid var(--gt-cloud)}
.r56-rail-actions .gt-control-pair>button:disabled,
.r57-carousel-controls .gt-control-pair>button:disabled{opacity:1;color:var(--gt-steel)}

/* Крестик окна отзыва на страницах журнала — тот же тихий контрол 44×44, что и на остальных
   страницах (creative-studio.css); в бандле остался прежний круг 40×40. */
.r57-mercari .gt-review-dialog__close{width:44px;height:44px;min-width:44px;min-height:44px;padding:12px;border-radius:10px}

@media(max-width:1050px){
 .r56-lead-story,.r56-endnote{gap:32px}
}
/* Порог ровно тот, на котором шапка сайта печатает свою полосу кружков (.gt-mobile-stories,
   mobile-life.css, max-width:767). Кружки на странице стоят теперь наверху, сразу под шапкой, —
   без этого правила телефон показал бы два одинаковых трека подряд. Полка публикаций и архив
   историй в секции остаются; узел кружков остаётся в DOM, поэтому номера просмотрщика не съезжают. */
@media(max-width:767px){
 .r56-journal-social--lead .gt-journal-stories{display:none}
}
@media(max-width:760px){
 .r56-lead-story{display:block}.r56-lead-media{aspect-ratio:3/2}
 /* Отступ верхнего блока на телефоне задаёт бандл (.r56-lead-content{padding-top:18px}), но
    он объявлен в медиазапросе более раннего файла — медиазапрос специфичности не добавляет,
    поэтому обнуление выше перебило бы его. Повторяем здесь. */
 .r56-lead-content{padding:18px 0 0}
 /* На телефоне семь рубрик переносом занимали 176 px — это уже не компактная строка. Здесь они
    остаются одной строкой с горизонтальной прокруткой, как и вкладки .r56-nav выше. */
 .r56-rubrics{flex-wrap:nowrap;overflow-x:auto;gap:8px;margin-bottom:26px;scrollbar-width:none}
 .r56-rubrics::-webkit-scrollbar{display:none}
 .r56-rubrics a{flex:0 0 auto;min-height:38px;padding:0 13px;font-size:11px}
 .r56-endnote{grid-template-columns:1fr;gap:20px;margin-top:32px;padding-top:28px}
}