/* ============================================================
   Связки между вёрсткой клиента и шаблонами движка. Вид не меняют.
   Нужны, потому что в шаблонах карточки стали ссылками, панель фильтров — формой,
   вопросы FAQ — нативными <details>, а пагинация — настоящими ссылками.
   Цвета только через переменные вёрстки (assets/css/main.css).
   ============================================================ */

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; white-space: nowrap; }

/* сборка проставляет картинкам width и height (чтобы страница не дёргалась при загрузке);
   высота при этом остаётся пропорциональной, если вёрстка не задала её сама */
:where(img[width][height]) { height: auto; }

/* метка над заголовком карточки приходит из данных обычным регистром, в макете она прописными */
.primary-name { text-transform: uppercase; }

/* заголовок и обложка карточки — ссылки: цвет и вид как у прежнего текста */
.starting-out-boxes h4 a, .marketer-this-box h4 a, .recommend-box h4 a, .current-point-cnt h3 a,
.blog-leads-name h4 a { color: inherit; text-decoration: none; }
.starting-out-boxes h4 a:hover, .marketer-this-box h4 a:hover, .recommend-box h4 a:hover,
.current-point-cnt h3 a:hover, .blog-leads-name h4 a:hover { text-decoration: underline; }
a.starting-out-photo, a.recommend-phto, a.current-point-photo { display: flex; position: relative; }
a.catalog-item-link { text-decoration: none; color: inherit; }
/* сетка обложек в карточке «Раздел ведёт»: каждая обложка — ссылка на статью; при одной и трёх статьях первая обложка крупная, во всю ширину */
a.blog-leads-picture { border-radius: 8px; overflow: hidden; }
a.blog-leads-picture img { transition: transform .25s ease; }
a.blog-leads-picture:hover img { transform: scale(1.04); }
.blog-leads-picture.sb-lead-big { width: 100%; }
.blog-leads-picture.sb-lead-big img { height: auto; aspect-ratio: 16 / 9; }
/* карточка по высоте своего содержимого: при 1–2 статьях в разделе под обложками не остаётся пустого белого поля */
.blog-banner > .blog-leads { align-self: flex-start; }
:where(a, button, summary, input, select):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* крошки: nav вместо div */
nav.bread-crumbs ul { margin: 0; }

/* панель фильтров: form и fieldset вместо div */
form.catalog-filters-items, form.catalog-search-block { margin: 0; }
fieldset.c-filter-item { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.c-filter-item legend.c-filter-title { padding: 0; float: left; width: 100%; }
fieldset.c-filter-item .catalog-check-col { clear: both; }
.catalog-search-block input[type="search"] { appearance: none; -webkit-appearance: none; }

/* сортировка: нативный select в рамке прежнего выпадающего списка */
.blog-sort select { font: inherit; color: inherit; background: transparent; border: 0; cursor: pointer; padding: 10px 14px; }

/* пагинация ссылками */
nav.catalog-pagination a.c-pagination-link { display: inline-flex; color: inherit; text-decoration: none; }
nav.catalog-pagination .c-pagination-gap { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; }
/* значок пропуска «…» — маска, без цвета фона его не видно; в вёрстке цвет задан только для значка внутри ссылки */
nav.catalog-pagination .c-pagination-gap i { font-size: 10px; background: var(--text-color6); }
nav.catalog-pagination i.disabled { opacity: .35; }

/* FAQ на <details>: без скрипта и без штатного маркера */
details.often-asks-item > summary { list-style: none; cursor: pointer; }
details.often-asks-item > summary::-webkit-details-marker { display: none; }
details.often-asks-item .asks-list-sub { display: block; }
details.often-asks-item[open] .asks-list-icon { transform: rotate(45deg); }

/* статья: таблица шире телефона прокручивается внутри себя */
.post-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
figure.sentences-main { margin: 0; }
.share-copy { font: inherit; cursor: pointer; }

/* изогнутый край подвала клиента стоит на 45px выше подвала: если страница заканчивается не тёмным блоком, текст под ним нужно приподнять */
main > section:last-child:not(.linking-card-main):not(.quality-inspiration) { padding-bottom: 96px; }

/* cookie-баннер: в шаблонах ленты, категории и автора у клиента нет обёртки, которая прижимает его к углу экрана
   (на их главной и в статье она есть). Здесь одна обёртка на все страницы блога. */
.blog-cookie { display: none; position: fixed; left: 16px; bottom: 16px; z-index: 9999; width: calc(100% - 32px); max-width: 476px; }
/* скрыт, пока скрипт в каркасе не убедится, что согласия ещё нет: иначе баннер мигает при каждой загрузке */
.blog-cookie.is-open { display: block; }

/* страница автора и пустые состояния */
.author-topic-item { display: contents; }
.author-topic-item[hidden] { display: none; }
.article-topic-title h2 { font: inherit; font-weight: 600; font-size: 1.25em; margin: 0; }
.blog-empty { padding: 32px 0; opacity: .75; }
/* «Показать ещё» под найденным по фильтру; переход по страницам открывает список, а не начало страницы */
.sb-more { display: flex; width: fit-content; margin: 24px auto 0; cursor: pointer; }
.sb-more[hidden] { display: none; }
#articles { scroll-margin-top: 16px; }
[hidden] { display: none !important; }