/* wave10: страница статьи, мероприятия, сертификата */

/* Баг: хлебные крошки статьи были в Title Case ("Почему Иностранцы...")
   из-за общего правила .breadcrumb li{text-transform:capitalize} в
   additional_102024.css (общий для всего сайта файл, не трогаем).
   На странице статьи блога должен быть обычный текст предложения —
   выключаем capitalize только в этой ветке. Без media-query: баг
   воспроизводится на всех ширинах, включая мобильную. */
.page-cover:has(.breadcrumb a[href*="/blog/"]) .breadcrumb li {
	text-transform: none;
}

/* ============================================================
   New tpl (html.gw-p-blog-article): page-cover is display:none, so
   ~ #primary sibling rules below never apply chrome kills. Mirror
   critical desktop body/header/TOC/latest rules here as ID beaters.
   Full set also lives in blog-article.css @min-width 901.
   ============================================================ */
@media (min-width: 901px) {
	/* Kill white chrome on body article only — not .article_latest .col-md-4 */
	html.gw-p-blog-article #content .content-box,
	html.gw-p-blog-article #content .site-main article.content-box,
	html.gw-p-blog-article #content .site-main article.content-box.content-box-wrapper {
		max-width: 980px !important;
		width: 980px !important;
		margin: 0 0 28px !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		border: 0 !important;
		border-radius: 0 !important;
	}

	/* Body H2/H3 Figma 22/400 #5B6D9C — beat Listify + gw11 30/500
	   Scope to .entry-content / content-box so latest card titles stay put */
	html.gw-p-blog-article #content .site-main article.content-box h2,
	html.gw-p-blog-article #content .site-main article.content-box h3,
	html.gw-p-blog-article #content .site-main article.content-box .entry-content h2,
	html.gw-p-blog-article #content .site-main article.content-box .entry-content h3 {
		font-size: 22px !important;
		font-weight: 400 !important;
		line-height: 26px !important;
		color: #5B6D9C !important;
		border-bottom: 0 !important;
		padding-bottom: 0 !important;
		margin: 24px 0 10px !important;
	}

	html.gw-p-blog-article #primary.container {
		padding-left: 0 !important;
		padding-right: 0 !important;
		max-width: 1180px !important;
	}

	/* Latest cards must stay 380 — beat any stray article width */
	html.gw-p-blog-article .article_latest .blog-items > article,
	html.gw-p-blog-article .article_latest .blog-items > [class*="col-"] {
		width: 380px !important;
		max-width: 380px !important;
		flex: 0 0 380px !important;
		padding: 0 !important;
		margin: 0 !important;
	}
}

/* Картинка карточки "Последние статьи" — квадрат 1:1 на десктопе
   (Figma 852:44642). На mobile (≤900) Figma 1050:82628 даёт landscape
   16/10 full-bleed — см. blog-article.css mobile override. */
@media (min-width: 901px) {
	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_latest .blog-items .item .img img,
	html.gw-p-blog-article .article_latest .blog-items .item .img img {
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
		object-fit: cover;
		display: block;
		border-radius: 6px;
		margin: 0;
		max-width: none;
	}
}

/* Гоча: страницы статьи/мероприятия/сертификата используют один и тот же
   шаблон newsblog/article.tpl и общий body-класс "newsblog-article",
   различить их можно только по ссылке в хлебных крошках (/blog/, /afisha/,
   /specials/). Правки ниже намеренно ограничены веткой "статья" (:has на
   ссылку хлебных крошек), чтобы не задеть мероприятие и сертификат —
   там высота уже близка к макету, и её трогать не нужно.

   Причина лишней высоты статьи (9677px против 5661px в макете): реальная
   статья почти в 5 раз длиннее черновика из макета (104 абзаца, 16 h3,
   14 разделителей-hr против 4 подзаголовков в макете) — это легитимный
   контент, который нельзя резать (SEO). Ниже — уплотнение технических
   отступов/интерлиньяжа и подрезка двух крупных фото, без изменения
   текста, заголовков и ссылок. */

@media (min-width: 1025px) {

	/* ------------------------------------------------------------
	   Figma 852:44710 «Страница Статьи» 1920×5661
	   - Outer content / breadcrumbs / related: 1180
	   - Article body column + header card + text: 980 (left-aligned in 1180)
	   - No navy hero with big H1 — only site header + breadcrumbs, then card
	   ------------------------------------------------------------ */

	/* Cover: collapse to breadcrumbs strip. H1 stays in DOM (SEO), hidden
	   visually like catalog SEO-sub. Visual title = card title 20/400. */
	body.newsblog-article .page-cover.page-cover--large:has(.breadcrumb a[href*="/blog/"]),
	body.newsblog-article .page-cover:has(.breadcrumb a[href*="/blog/"]) {
		background-image: none !important;
		background-color: #fff;
		padding: 16px 0 8px;
		min-height: 0;
		margin: 0;
	}

	body.newsblog-article .page-cover:has(.breadcrumb a[href*="/blog/"]) .page-title,
	body.newsblog-article .page-cover--large:has(.breadcrumb a[href*="/blog/"]) .page-title,
	body.newsblog-article .page-cover--large:has(.breadcrumb a[href*="/blog/"]) > .cover-wrapper {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		padding: 0 !important;
		margin: -1px !important;
		overflow: hidden !important;
		clip: rect(0, 0, 0, 0) !important;
		white-space: nowrap !important;
		border: 0 !important;
	}

	/* breadcrumbs live in .page-cover > .container (default pad 15 → 1150) */
	body.newsblog-article .page-cover:has(.breadcrumb a[href*="/blog/"]) > .container {
		max-width: 1180px;
		padding-left: 0;
		padding-right: 0;
		padding-top: 0;
		padding-bottom: 0;
	}

	body.newsblog-article .page-cover:has(.breadcrumb a[href*="/blog/"]) .breadcrumb {
		color: #6C737D;
		padding: 0;
		margin: 0;
		max-width: 1180px;
		width: 100%;
		font-size: 14px;
	}

	body.newsblog-article .page-cover:has(.breadcrumb a[href*="/blog/"]) .breadcrumb,
	body.newsblog-article .page-cover:has(.breadcrumb a[href*="/blog/"]) .breadcrumb a,
	body.newsblog-article .page-cover:has(.breadcrumb a[href*="/blog/"]) .breadcrumb li {
		color: #6C737D;
	}

	body.newsblog-article .page-cover:has(.breadcrumb a[href*="/blog/"]) .breadcrumb a:hover {
		color: #0066B2;
	}

	/* #primary.container default pad 15+15 → 1150 inner. Figma outer = 1180
	   (related 3×380+2×20). Pad 0 → content 1180. Card/text stay max 980. */
	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary.container,
	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary {
		padding-left: 0;
		padding-right: 0;
		max-width: 1180px;
	}

	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .site-main {
		padding-left: 0;
		padding-right: 0;
	}

	/* Bootstrap .row {-15px} раздувал колонку до 1210 и сдвигал card/related
	   влево относительно 1180. Обнуляем на ветке статьи. */
	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .row.content-area,
	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .row {
		margin-left: 0;
		margin-right: 0;
		max-width: 1180px;
		width: 100%;
	}

	/* дальше — контент статьи (сиблинг обложки в .site-content) */
	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .entry-content p {
		line-height: 1.6;
		margin-bottom: 10px;
		color: #6C737D;
		font-size: 16px;
	}

	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .entry-content li {
		line-height: 1.5;
		margin-bottom: 4px;
		color: #6C737D;
	}

	/* Figma body subheads 22/400 #5B6D9C (not 30/500 blue) */
	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .entry-content h2 {
		margin-top: 24px;
		margin-bottom: 10px;
		padding-bottom: 8px;
		font-size: 22px;
		font-weight: 400;
		line-height: 26px;
		color: #5B6D9C;
	}

	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .entry-content h3 {
		margin-top: 18px;
		margin-bottom: 8px;
		padding-bottom: 6px;
		font-size: 22px;
		font-weight: 400;
		color: #5B6D9C;
	}

	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .entry-content hr {
		margin-top: 6px;
		margin-bottom: 14px;
	}

	/* крупные фото внутри статьи растянуты на всю ширину колонки (~950px);
	   сужаем, чтобы пропорционально уменьшить и высоту, без обрезки/искажения */
	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .entry-content img {
		max-width: 700px;
		height: auto;
		display: block;
		margin: 0 auto 20px;
	}

	/* Body column 980 = Figma Text/Content list. No chrome card around body. */
	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary article.content-box,
	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .content-box.content-box-wrapper {
		max-width: 980px;
		width: 980px;
		margin: 0;
		padding: 0;
		background: transparent;
		box-shadow: none;
		border: none;
	}

	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .content-box-inner {
		padding: 0;
	}

	/* Duplicate meta under card (date/author/comments) — not in 852:44710 */
	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .entry-meta {
		display: none;
	}

	/* ------------------------------------------------------------
	   blog Card 2 — 980×412, pad 16, gap 16, r6 (Figma 852:44745)
	   ------------------------------------------------------------ */
	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_header_card {
		display: flex;
		gap: 16px;
		align-items: stretch;
		background: #fff;
		border-radius: 6px;
		box-shadow: 0 5px 20px rgba(193, 200, 218, .4);
		padding: 16px;
		margin: 0 0 24px;
		max-width: 980px;
		width: 980px;
		box-sizing: border-box;
	}

	/* Image 380×380 square */
	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_header_card-img {
		flex: 0 0 380px;
		width: 380px;
		aspect-ratio: 1 / 1;
	}

	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_header_card-img img {
		width: 100%;
		height: 100%;
		aspect-ratio: 1 / 1;
		object-fit: cover;
		border-radius: 6px;
		display: block;
	}

	/* Content column 552; Figma itemSpacing 16. Order: chip → meta → title → author/share → comments */
	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_header_card-body {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 16px;
		flex: 1 1 auto;
		min-width: 0;
	}

	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_header_card-body > .item_category {
		order: 1;
		align-self: flex-start;
	}

	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_header_card-body > .item_meta {
		order: 2;
	}

	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_header_card-body > .article_header_card-title {
		order: 3;
	}

	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_header_card-body > .article_header_card-row {
		order: 4;
	}

	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_header_card-body > .article_header_card-comments {
		order: 5;
	}

	/* Author + share row (Frame 427320839, h34) */
	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_header_card-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		margin-top: 0;
		flex-wrap: wrap;
		min-height: 34px;
	}

	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_header_card-authorlabel {
		color: #6C737D;
		font-size: 16px;
		font-family: 'Rubik', sans-serif;
		margin-right: 0;
	}

	/* Share Button web 126×34, fs16/400 #0066B2, gap6, r6 (852:44771) */
	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_header_card-share {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		padding: 6px 12px;
		border: 1.3px solid #0066B2;
		border-radius: 6px;
		background: #fff;
		color: #0066B2;
		font-size: 16px;
		font-weight: 400;
		font-family: 'Rubik', sans-serif;
		cursor: pointer;
		line-height: 22px;
		min-height: 34px;
		height: 34px;
		box-sizing: border-box;
	}

	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_header_card-share:hover {
		background: #0066B2;
		color: #fff;
	}

	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_header_card-share svg {
		flex: 0 0 auto;
		width: 16px;
		height: 16px;
	}

	/* Comments label #6C737D 16/400 */
	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_header_card-comments {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		color: #6C737D;
		font-size: 16px;
		font-family: 'Rubik', sans-serif;
	}

	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_header_card-comments a {
		color: #5B6D9C;
		display: inline;
		padding: 0;
		margin: 0;
	}

	/* Card title Figma 852:44763 — 20/400 #0066B2 lh~24 (was 24/500 #000F38) */
	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_header_card-title {
		font-family: 'Rubik', sans-serif;
		font-size: 20px;
		font-weight: 400;
		line-height: 24px;
		color: #0066B2;
		margin: 0;
	}

	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_header_card-author {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		color: #2E437B;
		font-size: 16px;
	}

	/* Avatar 24×24 (Figma Author), not 32 */
	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_header_card-author img {
		border-radius: 50%;
		object-fit: cover;
		width: 24px;
		height: 24px;
	}

	/* ------------------------------------------------------------
	   Chip + date + read-time (header card meta)
	   ------------------------------------------------------------ */
	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_header_card .item_category {
		display: inline-block;
		padding: 4px 8px;
		background: #fff;
		border: 1px solid #0066B2;
		border-radius: 999px;
		color: #0066B2;
		font-size: 14px;
		line-height: 19px;
		font-weight: 400;
		font-family: 'Rubik', sans-serif;
	}

	/* Date row: "Дата публикации:" 16 #6C737D + value 14 #5B6D9C (852:44753) */
	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_header_card .item_meta {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_header_card .item_meta::before {
		content: none;
	}

	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_header_card .item_date {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		font-size: 14px;
		line-height: 19px;
		font-weight: 400;
		color: #5B6D9C;
		font-family: 'Rubik', sans-serif;
	}

	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_header_card .item_date::before {
		content: "Дата публикации:";
		font-size: 16px;
		line-height: 22px;
		font-weight: 400;
		color: #6C737D;
		font-family: 'Rubik', sans-serif;
	}

	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_header_card .item_read {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		font-size: 16px;
		color: #5B6D9C;
		font-family: 'Rubik', sans-serif;
	}

	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_header_card .item_read-label {
		color: #5B6D9C;
		font-size: 16px;
		font-family: 'Rubik', sans-serif;
	}

	/* Related cards meta (not header card) — keep list-style chip+date row */
	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_latest .item_category {
		display: inline-block;
		padding: 4px 12px;
		background: #fff;
		border: 1px solid #0066B2;
		border-radius: 999px;
		color: #0066B2;
		font-size: 13px;
		line-height: 1.4;
		font-family: 'Rubik', sans-serif;
	}

	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_latest .item_read-label {
		color: #5B6D9C;
		font-size: 16px;
		font-family: 'Rubik', sans-serif;
	}

	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_latest .item_meta {
		display: block;
	}

	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_latest .item_meta::before {
		content: none;
	}

	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .item_meta-top {
		display: flex;
		align-items: center;
		gap: 12px;
		margin-bottom: 6px;
	}

	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .item_meta-top .item_date {
		position: relative;
		padding-left: 12px;
	}

	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .item_meta-top .item_date:before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 1px;
		height: 14px;
		background: #DDDDDD;
	}

	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .item_meta-bottom {
		margin-bottom: 4px;
	}

	/* ------------------------------------------------------------
	   Related «Последние статьи» — Frame 1180×715 (852:44827)
	   title 38/400 #0066B2; cards 380×~630; gap 20; 3×380+2×20=1180
	   ------------------------------------------------------------ */
	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_latest {
		margin: 40px 0;
		max-width: 1180px;
		width: 100%;
	}

	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_latest-title {
		font-family: 'Rubik', sans-serif;
		font-size: 38px;
		line-height: 45px;
		font-weight: 400;
		color: #0066B2;
		margin: 0 0 20px;
		max-width: 1180px;
	}

	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_latest .blog-items.row {
		display: grid;
		grid-template-columns: repeat(3, 380px);
		gap: 20px;
		margin: 0;
		width: 1180px;
		max-width: 100%;
		justify-content: start;
	}

	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_latest .blog-items.row > [class*="col-"] {
		width: 380px !important;
		max-width: 380px !important;
		flex: 0 0 380px !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_latest .blog-items .item {
		display: flex;
		flex-direction: column;
		height: 100%;
		width: 380px;
		max-width: 380px;
		background: #fff;
		border: none;
		border-radius: 6px;
		box-shadow: 0 5px 20px rgba(193, 200, 218, .4);
		padding: 16px 16px 16px;
		overflow: hidden;
		position: relative;
		box-sizing: border-box;
	}

	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_latest .blog-items .item .img {
		margin: 0;
	}

	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_latest .blog-items .item .name,
	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_latest .blog-items .item .text,
	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_latest .blog-items .item .item_meta {
		margin-left: 0;
		margin-right: 0;
	}

	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_latest .blog-items .item .text {
		font-size: 16px;
		display: -webkit-box;
		-webkit-line-clamp: 4;
		-webkit-box-orient: vertical;
		overflow: hidden;
		margin-bottom: 14px;
	}

	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_latest .blog-items .item .button_white {
		position: static;
		display: inline-block;
		margin: auto 0 0;
		align-self: flex-start;
		padding: 6px 16px;
		min-height: 34px;
		line-height: 22px;
		background: #fff;
		border: 1.3px solid #0066B2;
		border-radius: 6px;
		color: #0066B2;
		font-size: 16px;
		font-weight: 400;
		box-sizing: border-box;
	}

	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_latest .blog-items .item .button_white:hover {
		background: #0066B2;
		color: #fff;
	}

}

@media (max-width: 1024px) {
	/* Мобильная/планшетная адаптация новых блоков статьи — в макете есть
	   отдельные мобильные фреймы, здесь — безопасный запасной вариант,
	   чтобы не было горизонтального скролла и карточки не разъезжались. */

	/* Хлебные крошки статьи в предложенческом регистре стали чуть длиннее
	   визуально помещающейся строки на узких экранах (однострочный
	   nowrap-макет .breadcrumb). Разрешаем перенос, как это уже сделано
	   для списка блога в gw15-infomob.css, чтобы не резать текст и не
	   вызывать горизонтальный скролл. */
	body.newsblog-article .page-cover:has(.breadcrumb a[href*="/blog/"]) .breadcrumb {
		flex-wrap: wrap;
		font-size: 12px;
		row-gap: 4px;
	}

	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_header_card {
		display: flex;
		flex-direction: column;
		background: #fff;
		border-radius: 6px;
		box-shadow: 0 5px 20px rgba(193, 200, 218, .4);
		padding: 16px;
		margin-bottom: 20px;
		gap: 12px;
	}

	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_header_card-img img {
		width: 100%;
		aspect-ratio: 1 / 1;
		height: auto;
		object-fit: cover;
		border-radius: 6px;
		display: block;
	}

	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_header_card-title {
		font-family: 'Rubik', sans-serif;
		font-size: 20px;
		font-weight: 500;
		color: #000F38;
		margin: 0;
	}

	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_header_card-row {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		margin-top: 4px;
	}

	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_header_card-authorlabel {
		color: #5B6D9C;
		font-size: 14px;
		font-family: 'Rubik', sans-serif;
		margin-right: 6px;
	}

	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_header_card-share {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 8px 16px;
		border: 1.3px solid #0066B2;
		border-radius: 6px;
		background: #fff;
		color: #0066B2;
		font-size: 14px;
		font-family: 'Rubik', sans-serif;
		cursor: pointer;
		/* тап-таргет ≥44px по высоте на мобильном */
		min-height: 44px;
	}

	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_header_card-comments {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		color: #5B6D9C;
		font-size: 14px;
		font-family: 'Rubik', sans-serif;
	}

	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_header_card-comments a {
		color: #0066B2;
		/* тап-таргет ≥44px без изменения визуальной высоты строки */
		display: block;
		padding: 12.5px 0;
		margin: -12.5px 0;
	}

	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .item_category {
		display: inline-block;
		padding: 4px 12px;
		background: #fff;
		border: 1px solid #0066B2;
		border-radius: 999px;
		color: #0066B2;
		font-size: 13px;
		font-family: 'Rubik', sans-serif;
	}

	/* Figma "Блог Tab/Mob" (1050:82628), заголовок "Последние статьи" на
	   Tablet 800 и Mobile 400 одинаково: 28px/33px. */
	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_latest-title {
		font-family: 'Rubik', sans-serif;
		font-size: 28px;
		line-height: 33px;
		font-weight: 500;
		color: #0066B2;
		margin-bottom: 16px;
	}

	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_latest .blog-items.row {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_latest .blog-items .item {
		background: #fff;
		border-radius: 6px;
		box-shadow: 0 5px 20px rgba(193, 200, 218, .4);
		overflow: hidden;
		padding-bottom: 16px;
	}

	/* Mobile article latest: landscape thumbs + clamp + full-width CTA
	   (page-cover branch; new tpl also covered in blog-article.css) */
	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_latest .blog-items > [class*="col-"] {
		width: 100% !important;
		max-width: none !important;
		padding: 0 !important;
		float: none !important;
	}
	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_latest .blog-items .item .img,
	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_latest .blog-items .item .img img {
		aspect-ratio: 16 / 10 !important;
		width: 100%;
		height: auto;
		object-fit: cover;
	}
	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_latest .blog-items .item .text {
		display: -webkit-box;
		-webkit-line-clamp: 4;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_latest .blog-items .item .button_white {
		width: 100%;
		text-align: center;
		align-self: stretch;
		display: block;
		box-sizing: border-box;
	}

	/* Header card mobile: tighter gap, 4/3 hero, stacked meta, text share */
	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_header_card {
		gap: 14px;
		padding: 14px;
	}
	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_header_card-img img {
		aspect-ratio: 4 / 3 !important;
		min-height: 0 !important;
		height: auto !important;
	}
	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_header_card-title {
		font-size: 20px !important;
		font-weight: 400 !important;
		line-height: 1.25 !important;
		color: #0066B2 !important;
	}
	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_header_card-share {
		border: 0 !important;
		padding: 0 !important;
		min-height: auto !important;
		background: transparent !important;
	}

}

/* ---------- Планшет 768–1024: шапка статьи остаётся ГОРИЗОНТАЛЬНОЙ ----------
   Эталон найден в Figma: фрейм страницы статьи Tablet `1050:85469` → `blog Card 2`
   `1050:85931` — 736×412, layoutMode HORIZONTAL, фото `1050:85932` 380×380 слева,
   контент `1050:85933` 324 справа. Это НЕ карточка листинга `1050:85339` (та с
   кнопкой «Читать» живёт в отдельном узле 1050:82631).
   Правило ниже перекрывает блок `@media (max-width:1024px)`, который складывал
   карточку в столбец и раздувал фото до 658×658 — почти вдвое против макета.
   Выход из 15px-паддингов `#primary.container`: 720 → 750, чтобы правая колонка
   получилась 322 против макетных 324. */
@media (min-width: 768px) and (max-width: 1024px) {
	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_header_card {
		flex-direction: row;
		align-items: flex-start;
		gap: 16px;
		padding: 16px;
		width: calc(100% + 30px);
		margin-left: -15px;
		margin-right: -15px;
	}

	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_header_card-img {
		flex: 0 0 380px;
		width: 380px;
		aspect-ratio: 1 / 1;
	}

	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_header_card-img img {
		width: 100%;
		height: 100%;
		aspect-ratio: 1 / 1;
		object-fit: cover;
	}

	.page-cover:has(.breadcrumb a[href*="/blog/"]) ~ #primary .article_header_card-body {
		flex: 1 1 auto;
		min-width: 0;
	}
}