/* =============================================================================
   belselhoz — modern.css  (editorial-magazine modernization layer)
   -----------------------------------------------------------------------------
   Loaded AFTER all Helix CSS. Keeps the brand: green #68a225, Montserrat,
   the Helix section chrome (top-banner / topbar / logo-row / green nav /
   main / footer). Modernizes execution toward a credible national
   agricultural-editorial magazine (think Modern Farmer / The Land Report /
   Grain): tight type, real measure, refined reading, grounded cards,
   restrained motion. No content/DB changes — pure presentation. OKLCH.
   ============================================================================= */

:root {
	/* Brand green refined in OKLCH (anchored to #68a225 ≈ oklch(.66 .14 125)) */
	--bel-green:        oklch(0.66 0.14 125);
	--bel-green-hover:  oklch(0.50 0.13 128);   /* ≈ #265c00 */
	--bel-green-deep:   oklch(0.42 0.11 130);
	--bel-green-soft:   oklch(0.96 0.025 125);  /* faint tint bg */
	--bel-green-line:   oklch(0.88 0.05 125);

	/* Neutral ramp — true off-white, hair of green tint (NOT cream) */
	--bel-bg:           oklch(0.992 0.004 125);
	--bel-surface:      #ffffff;
	--bel-ink:          oklch(0.24 0.015 150);  /* ≥4.5:1 on bg */
	--bel-ink-soft:     oklch(0.38 0.015 150);  /* ≥4.5:1 */
	--bel-muted:        oklch(0.50 0.012 150);  /* ≥4.5:1 on white */
	--bel-line:         oklch(0.90 0.008 125);
	--bel-line-strong:  oklch(0.84 0.010 125);

	/* Type */
	--bel-font:         "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
	--bel-measure:      64ch;

	/* Rhythm */
	--bel-space-section: clamp(2.75rem, 5.5vw, 5rem);
	--bel-radius:        12px;
	--bel-radius-sm:     6px;
	--bel-shadow:        0 1px 2px oklch(0.24 0.015 150 / 0.05), 0 10px 30px oklch(0.24 0.015 150 / 0.06);
	--bel-shadow-soft:   0 1px 2px oklch(0.24 0.015 150 / 0.04), 0 4px 14px oklch(0.24 0.015 150 / 0.04);
	--bel-ease:          cubic-bezier(0.22, 1, 0.36, 1);
	--bel-speed:         0.22s;
}

/* ---------- Base typography ---------- */
body {
	font-family: var(--bel-font);
	background: var(--bel-bg);
	color: var(--bel-ink);
	font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
	line-height: 1.7;
	/* Boxed frame (Helix ships this only as a captured inline style on the home
	 * page; secondary pages have no captured head CSS, so the body went
	 * full-width there and the green navbar bands escaped the frame). Declare
	 * it here so every page shares the same 1240px box. */
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--bel-font);
	font-weight: 700;
	color: var(--bel-ink);
	line-height: 1.16;
	letter-spacing: -0.025em;
	text-wrap: balance;
}
h1 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.85rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.15rem); letter-spacing: -0.03em; }
h3 { font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem); letter-spacing: -0.025em; }
h4 { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem); letter-spacing: -0.02em; }

a {
	color: var(--bel-green-hover);
	text-decoration: none;
	transition: color var(--bel-speed) var(--bel-ease);
}
a:hover { color: var(--bel-green); }

:focus-visible {
	outline: 2px solid var(--bel-green);
	outline-offset: 2px;
	border-radius: 2px;
}

p { line-height: 1.75; }

/* ============================================================================
   HEADER CHROME
   ========================================================================== */
#sp-top-bar {
	background: var(--bel-green-deep);
	font-size: 0.82rem;
	letter-spacing: 0.01em;
}
#sp-top-bar a { color: #fff; opacity: 0.92; }
#sp-top-bar a:hover { opacity: 1; color: #fff; }

#sp-logo-section { padding: clamp(1rem, 2vw, 1.6rem) 0; background: var(--bel-surface); }
#sp-logo-section #sp-logotip a {
	color: var(--bel-ink);
	font-weight: 700;
	font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
	letter-spacing: -0.01em;
	line-height: 1.3;
}
#sp-phone, #sp-phone a {
	color: var(--bel-ink-soft);
	font-weight: 600;
	font-size: 0.95rem;
}

/* The green nav row — clean flex bar.
 * Helix lays this out with Bootstrap columns (.col-lg-9 / .col-lg-3) and the
 * menu <ul> carries .d-lg (= display:block !important). That combination
 * collapses widths and stacks the menu vertically. Override it explicitly:
 * a single flex row, nav left, search right, menu forced horizontal. */
#sp-header {
	background: var(--bel-green);
	border: none;
	box-shadow: 0 2px 12px oklch(0.42 0.11 130 / 0.18);
	display: flex;
	align-items: center;
	min-height: 64px;
}
#sp-header > .container,
#sp-header .container-inner,
#sp-header .container-inner > .row {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	flex-wrap: nowrap;
	width: 100%;
	min-height: 64px;
}
#sp-header #sp-menu,
#sp-header #sp-search {
	flex: 0 0 auto;
	width: auto;
	max-width: none;
	display: flex;
	align-items: center;
	min-height: 64px;
}
#sp-header #sp-search { margin-left: auto; }
#sp-header #sp-menu .sp-column,
#sp-header #sp-search .sp-column,
#sp-header #sp-search .sp-module,
#sp-header .sp-megamenu-wrapper { display: flex; align-items: center; }
#sp-header #sp-search .sp-column { width: 100%; min-height: 64px; }
/* !important to override Bootstrap .d-lg (display:block !important) on the ul. */
#sp-header .sp-megamenu-parent {
	display: flex !important;
	align-items: center;
	flex-wrap: nowrap;
	height: 64px;
}
#sp-header .sp-megamenu-parent > li {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	width: auto;
	height: 64px;
}
#sp-header .sp-megamenu-parent > li > a {
	color: #fff;
	font-weight: 600;
	font-size: 0.95rem;
	letter-spacing: 0.005em;
	line-height: 64px;
	padding: 0 0.95rem;
	position: relative;
	transition: color var(--bel-speed) var(--bel-ease), background var(--bel-speed) var(--bel-ease);
}
#sp-header .sp-megamenu-parent > li > a::after {
	content: "";
	position: absolute;
	left: 0.95rem; right: 0.95rem; bottom: 0;
	height: 3px;
	background: #fff;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--bel-speed) var(--bel-ease);
}
#sp-header .sp-megamenu-parent > li > a:hover::after,
#sp-header .sp-megamenu-parent > li.active > a::after,
#sp-header .sp-megamenu-parent > li.current-item > a::after { transform: scaleX(1); }
#sp-header .sp-megamenu-parent > li > a:hover,
#sp-header .sp-megamenu-parent > li.active > a { color: #fff; background: oklch(1 0 0 / 0.10); }

/* Search — right-aligned, real width */
#sp-header #sp-search .sp-module,
#sp-header #sp-search .sp-module-content,
#sp-header #sp-search .search,
#sp-header #sp-search form { display: flex; align-items: center; width: 100%; }
#sp-search input.form-control,
#sp-search input[type="search"] {
	background: oklch(1 0 0 / 0.16);
	border: 1px solid oklch(1 0 0 / 0.28);
	color: #fff;
	border-radius: 999px;
	padding: 0.45rem 1rem;
	font-size: 0.88rem;
	width: 100%;
	min-width: 180px;
	height: 38px;
	transition: background var(--bel-speed) var(--bel-ease), border-color var(--bel-speed) var(--bel-ease);
}
#sp-search input::placeholder { color: oklch(1 0 0 / 0.75); }
#sp-search input:focus {
	background: #fff;
	color: var(--bel-ink);
	border-color: #fff;
	outline: none;
	box-shadow: none;
}

/* ---------- Main body ---------- */
#sp-main-body { padding: var(--bel-space-section) 0; background: var(--bel-bg); }
#sp-component { padding: 0; }
/* Fill the boxed frame — HOME ONLY. Bootstrap caps .container (and SPB
 * .sppb-row-container) at 1140px, leaving content inset ~50px inside the
 * 1240px frame, so the news/partners blocks read narrower than the
 * header/footer bands and the full-bleed banner. Scoped to the front page
 * (the only page with #sp-page-builder) so secondary pages (single posts,
 * archives) keep Bootstrap's centered 1140 container. */
body:has(#sp-page-builder) .container,
#sp-page-builder .sppb-row-container {
	max-width: 100% !important;
	padding-left: clamp(1rem, 3vw, 2rem);
	padding-right: clamp(1rem, 3vw, 2rem);
}

/* Breadcrumbs */
.breadcrumb, .sp-module-content .breadcrumb {
	font-size: 0.82rem;
	color: var(--bel-muted);
	padding: 0 0 1rem;
	margin: 0;
	background: none;
}
.breadcrumb a { color: var(--bel-ink-soft); }
.breadcrumb a:hover { color: var(--bel-green-hover); }

/* ============================================================================
   HOME (#sp-page-builder) — editorial magazine front
   -----------------------------------------------------------------------------
   front-page.php replays the captured Joomla SP Page Builder output
   (captured/home-<lang>.html) verbatim: .sppb-section / .sppb-addon-single-image
   / .sppb-addon-module (newsflash modules). This layer restyles that captured
   markup into a grounded magazine front. Pure presentation scoped to
   #sp-page-builder — no markup / DB change, never touches articles.
   ============================================================================= */

/* Page rhythm: sections carry their own padding (see .sppb-section), so the
 * #sp-page-builder wrapper itself adds none — this keeps the banner flush to
 * the navbar and the partners block flush to the footer (no stacked padding). */
#sp-page-builder { padding: 0; }
/* Zero the SPB column gutters so every home content block (lead, 4-up, partner
 * logos) fills the full container width (1140) like the header/footer content,
 * instead of being inset 15px each side by .sppb-col-md-12. */
#sp-page-builder [class*="sppb-col-"] { padding-left: 0; padding-right: 0; }
/* Joomla newsflash module ships margin:0 -15px (a Bootstrap row gutter) which
 * makes the 4-up overflow its container once the column padding is zeroed. */
#sp-page-builder .newsflash { margin-left: 0; margin-right: 0; }
/* On the home/front page, trim the #sp-main-body top padding so the banner
 * sits close to the green navbar, and zero the bottom so partners' bottom
 * margin matches its top. */
#sp-main-body:has(#sp-page-builder) {
	padding-top: clamp(0.75rem, 1.5vw, 1.25rem);
	padding-bottom: 0;
}
/* !important: captured SPB section inline styles force padding:0 on some
 * sections (e.g. Партнеры), gluing them to the previous block. */
#sp-page-builder .sppb-section { padding-block: clamp(2rem, 4vw, 3.25rem) !important; }
#sp-page-builder .page-content > .sppb-section + .sppb-section { border-top: 1px solid var(--bel-line); }

/* Section title ("Все новости" / "Партнеры") → block heading with a short
 * green accent rule beneath (deliberate, fixed width — never a full text-width
 * underline, which reads as a strikethrough on Cyrillic descenders). */
#sp-page-builder .sppb-section-title {
	font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.15;
	color: var(--bel-ink);
	margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
	padding: 0;
	border: none;
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	vertical-align: top;
	max-width: 100%;
	text-wrap: balance;
}
#sp-page-builder .sppb-section-title::after {
	content: "";
	display: block;
	width: 52px;
	height: 3px;
	margin-top: 0.65rem;
	border-radius: 2px;
	background: var(--bel-green);
}
/* The actual heading text lives in a child <h2 class="sppb-title-heading">;
 * make it inherit the wrapper's sizing and carry no border/underline of its
 * own. !important on margin: captured Helix ships .sppb-title-heading a
 * margin-bottom:-30px that collapses the wrapper and pulls the accent rule up
 * over the text. */
#sp-page-builder .sppb-section-title .sppb-title-heading {
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	color: inherit;
	margin: 0 !important;
	padding: 0;
	border: none;
	text-decoration: none;
	background: none;
}

/* ---- Masthead banner (first section) — full-bleed so it fills the page
 * width instead of sitting short of the content column below. ---- */
#sp-page-builder .page-content > .sppb-section:first-child { padding-block: 0 !important; }
#sp-page-builder .page-content > .sppb-section:first-child .sppb-row-container,
#sp-page-builder .page-content > .sppb-section:first-child .sppb-row,
#sp-page-builder .page-content > .sppb-section:first-child .sppb-column,
#sp-page-builder .page-content > .sppb-section:first-child [class*="sppb-col-"],
#sp-page-builder .page-content > .sppb-section:first-child .sppb-column-addons,
#sp-page-builder .page-content > .sppb-section:first-child .sppb-addon-single-image,
#sp-page-builder .page-content > .sppb-section:first-child .sppb-addon-single-image-container {
	max-width: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
}
#sp-page-builder .page-content > .sppb-section:first-child .sppb-addon-single-image img {
	width: 100%;
	height: auto;
	display: block;
}

/* Captured <figure class="newsflash-image"> ships a 1px gray SQUARE border
 * (border-radius:0) that frames the rounded cover image with square corners.
 * Neutralize it on every cover so the rounded image clips cleanly. */
#sp-page-builder .newsflash-image {
	margin: 0;
	padding: 0;
	border: 0;
	outline: none;
	max-width: none;
	border-radius: var(--bel-radius);
	overflow: hidden;
	background: none;
}

/* ---- "Все новости": CURRENT-ISSUE LEAD (single item) -----------------------
 * Captured: ul.newsflash-horiz.odna_novost > li > .item-news
 *   > .news_body > figure.newsflash-image > a > img
 *   > .news-info > span.date / h3.newsflash-title / a.readmore
 * The lone col-lg-3 item used to occupy ~25% of a full-width row and left the
 * rest blank. Turn it into a balanced cover + blurb lead so the space reads. */
#sp-page-builder .newsflash-horiz.odna_novost,
#sp-page-builder .newsflash-horiz.odna_novost > li { list-style: none; margin: 0; padding: 0; }
/* HR separator below the lead (matches the rule under the tractor banner). */
#sp-page-builder .newsflash-horiz.odna_novost {
	padding-bottom: clamp(2rem, 4vw, 3rem);
	margin-bottom: clamp(2rem, 4vw, 3rem);
	border-bottom: 1px solid var(--bel-line);
}
#sp-page-builder .newsflash-horiz.odna_novost .item-news {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
}
/* The <figure> + .news-info both live inside .news_body, so the cover/text
 * grid goes here, not on .item-news. First column hugs the cover (auto width),
 * text takes the rest. */
#sp-page-builder .newsflash-horiz.odna_novost .news_body {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: clamp(1.5rem, 3.5vw, 3rem);
	align-items: center;
	margin: 0;
	padding: 0;
	width: 100%;
	box-shadow: none; /* drop Joomla's rgba(153,153,153,.25) 0 0 8px wrapper shadow */
}
#sp-page-builder .newsflash-horiz.odna_novost .newsflash-image { width: auto; box-shadow: none; border-radius: 0; }
#sp-page-builder .newsflash-horiz.odna_novost .newsflash-image a { display: block; }
/* Cover: fixed height, width auto — preserves the full cover (no side crop),
 * sized to its natural aspect at the chosen height. */
#sp-page-builder .newsflash-horiz.odna_novost .newsflash-image img {
	height: clamp(300px, 32vw, 440px);
	width: auto;
	max-width: 100%;
	aspect-ratio: auto;
	object-fit: contain;
	display: block;
	transition: transform 0.5s var(--bel-ease);
}
#sp-page-builder .newsflash-horiz.odna_novost .item-news:hover .newsflash-image img { transform: scale(1.02); }
#sp-page-builder .newsflash-horiz.odna_novost .news-info {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-width: 0;
	width: 100%;
	max-width: 100%;
	padding: clamp(0.5rem, 1.5vw, 1rem) 0;
	align-items: flex-end;   /* anchor the blurb to the right edge (cover is on the left) */
	text-align: right;
}
#sp-page-builder .newsflash-horiz.odna_novost .newsflash-title { display: block; width: 100%; max-width: 100%; }
#sp-page-builder .newsflash-horiz.odna_novost .news-info > a:not(.readmore) { display: none; }
#sp-page-builder .newsflash-horiz.odna_novost .date {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bel-green-hover);
}
#sp-page-builder .newsflash-horiz.odna_novost .newsflash-title { margin: 0; }
#sp-page-builder .newsflash-horiz.odna_novost .newsflash-title a {
	font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2rem);
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: -0.025em;
	color: var(--bel-ink);
	transition: color var(--bel-speed) var(--bel-ease);
}
#sp-page-builder .newsflash-horiz.odna_novost .newsflash-title a:hover { color: var(--bel-green-hover); }
#sp-page-builder .newsflash-horiz.odna_novost .readmore {
	align-self: flex-end;
	margin-top: 0.5rem;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--bel-green-hover);
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0;
	border-bottom: 2px solid var(--bel-green);
	transition: gap var(--bel-speed) var(--bel-ease);
}
#sp-page-builder .newsflash-horiz.odna_novost .readmore::after { content: "→"; }
#sp-page-builder .newsflash-horiz.odna_novost .readmore:hover { gap: 0.65rem; }

/* ---- "Все новости": 4-UP ISSUE COVERS --------------------------------------
 * Captured: .newsflash > .container > .row > .item-news.col-lg-3 (×4).
 * Each cover: .news_body > figure.newsflash-image > img, then .news-info
 * (h3.newsflash-title + span.date — no readmore on the grid items). */
#sp-page-builder .newsflash > .container { padding: 0; max-width: 100%; }
#sp-page-builder .newsflash > .container > .row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	align-items: stretch;
	gap: clamp(1.25rem, 2vw, 1.75rem);
	margin: 0;
}
#sp-page-builder .newsflash > .container > .row > .item-news {
	width: 100%;
	max-width: 100%;
	padding: 0;
}
/* 4-up cover cards: FIXED height, image fills, title + date overlaid at the
 * bottom of the image over a subtle semi-transparent backdrop. Identical
 * height on every card regardless of title length. */
#sp-page-builder .newsflash > .container > .row > .item-news .news_body {
	position: relative;
	height: clamp(280px, 24vw, 360px);
	overflow: hidden;
	border-radius: var(--bel-radius);
	box-shadow: var(--bel-shadow-soft);
	background: var(--bel-green-soft);
}
#sp-page-builder .newsflash > .container > .row > .item-news .newsflash-image {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	overflow: hidden;
	background: none;
}
#sp-page-builder .newsflash > .container > .row > .item-news .newsflash-image a { display: block; height: 100%; }
#sp-page-builder .newsflash > .container > .row > .item-news .newsflash-image img {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
	display: block;
	transition: transform 0.6s var(--bel-ease);
}
#sp-page-builder .newsflash > .container > .row > .item-news:hover .newsflash-image img { transform: scale(1.06); }
#sp-page-builder .newsflash > .container > .row > .item-news .news-info {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: clamp(2rem, 4vw, 3rem) 1rem 0.85rem;
	background: linear-gradient(to top, oklch(0.18 0.02 150 / 0.93), oklch(0.18 0.02 150 / 0.53) 65%, transparent);
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 0;
	transition: background 0.25s var(--bel-ease);
}
/* Backdrop darkens on hover for stronger legibility. */
#sp-page-builder .newsflash > .container > .row > .item-news:hover .news-info {
	background: linear-gradient(to top, oklch(0.18 0.02 150 / 0.965), oklch(0.18 0.02 150 / 0.65) 65%, transparent);
}
#sp-page-builder .newsflash > .container > .row > .item-news .news-info > a:not(.readmore) { display: none; }
#sp-page-builder .newsflash > .container > .row > .item-news .newsflash-title {
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
#sp-page-builder .newsflash > .container > .row > .item-news .newsflash-title a {
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.28;
	letter-spacing: -0.015em;
	color: #fff;
	transition: color var(--bel-speed) var(--bel-ease);
}
#sp-page-builder .newsflash > .container > .row > .item-news .newsflash-title a:hover { color: oklch(0.96 0.05 125); }
#sp-page-builder .newsflash > .container > .row > .item-news .date {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: oklch(1 0 0 / 0.78);
}

/* ---- "Партнеры": logo wall --------------------------------------------------
 * Captured: a column grid of .sppb-addon-single-image logos (every section
 * except the first/banner one). Keep the SPB column layout; just quiet the
 * logos (grayscale) and wake them on hover. */
#sp-page-builder .page-content > .sppb-section:not(:first-child) .sppb-addon-single-image img {
	width: auto;
	max-width: 100%;
	height: auto;
	filter: grayscale(1);
	opacity: 0.68;
	transition: filter var(--bel-speed) var(--bel-ease),
	            opacity var(--bel-speed) var(--bel-ease),
	            transform var(--bel-speed) var(--bel-ease);
}
#sp-page-builder .page-content > .sppb-section:not(:first-child) .sppb-addon-single-image:hover img {
	filter: grayscale(0);
	opacity: 1;
	transform: translateY(-2px);
}
/* Touch devices (no hover) and narrow screens can't wake the logos on hover,
 * so show them in full color instead of leaving them grayed-out. Desktop with
 * a pointer keeps the grayscale → color-on-hover treatment. */
@media (hover: none), (max-width: 768px) {
	#sp-page-builder .page-content > .sppb-section:not(:first-child) .sppb-addon-single-image img {
		filter: none;
		opacity: 1;
	}
}

/* ============================================================================
   ARTICLE (single.php) — magazine reading experience
   ============================================================================= */
.article-details {
	/* Title + header span the full content column (≈1140px); the body caps
	 * itself below. Full-width title, centered reading column — magazine
	 * header asymmetry, not a pinched 64ch column for the whole article. */
	max-width: none;
	margin: 0 auto;
	font-family: var(--bel-font);
}
/* Title + meta share the centered reading column: header capped to the body
 * width and text-centered, so a short headline no longer strands left in the
 * full-width column. Body below stays left-aligned. */
.article-details .article-header {
	max-width: calc((100% + var(--bel-measure)) / 2);
	margin: 0 auto;
	text-align: center;
	font-size: 1.09rem; /* match the body's font-size so the ch-based measure
	                     * resolves identically and the header width == body width */
}
.article-details .article-header h1,
.article-details .article-header h2,
.article-details h1[itemprop="headline"],
.article-details .entry-title {
	font-size: clamp(1.9rem, 1.35rem + 2.1vw, 2.75rem) !important;
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.1;
	margin: 0 0 1rem;
	text-align: center;
	color: var(--bel-ink);
}
.article-info, .article-details .published, .article-meta {
	color: var(--bel-muted);
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	text-transform: none;
	margin-bottom: 2.25rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--bel-line);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
}
.article-info time, .article-details time[itemprop="datePublished"] { color: var(--bel-green-hover); font-weight: 600; }

/* Article hero image */
.article-full-image,
.article-details .article-full-image {
	margin: 0 0 2.25rem;
	border-radius: var(--bel-radius);
	overflow: hidden;
	box-shadow: var(--bel-shadow-soft);
	position: relative;
	background: var(--bel-green-soft);
}
.article-full-image img,
.article-details img[itemprop="image"] {
	width: 100%;
	height: auto;
	display: block;
}
.article-full-image figcaption,
.article-details .article-full-image figcaption {
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--bel-muted);
	padding: 0.7rem 1rem;
	margin: 0;
	background: var(--bel-surface);
	border-top: 1px solid var(--bel-line);
	font-style: normal;
	text-align: left;
}
.article-details .article-header .bel-kicker { margin-bottom: 0.75rem; }
.article-details .article-header h1 { margin-top: 0; }

/* Article body — measure + rhythm + wysiwyg cleanup */
.article-details .article-body,
.article-details [itemprop="articleBody"],
.article-details .entry-content {
	/* Halfway between the 64ch reading measure and the full column width:
	 * consumes half of each side's empty space, so the body widens with the
	 * title breakout without going full-bleed (≈909px at 1140 column). */
	max-width: calc((100% + var(--bel-measure)) / 2);
	margin: 0 auto;
	font-size: 1.09rem;
	line-height: 1.8;
	color: var(--bel-ink);
}
.article-details [itemprop="articleBody"] > * + * { margin-top: 1.3rem; }
.article-details [itemprop="articleBody"] h2 { margin-top: 2.75rem; font-size: 1.55rem; }
.article-details [itemprop="articleBody"] h3 { margin-top: 2.25rem; font-size: 1.3rem; }

/* No first-letter drop-cap on posts/pages (per spec — content stays plain). */

/* Editorial pull-quote option: a <blockquote> renders as a magazine pull-quote */
.article-details [itemprop="articleBody"] blockquote {
	margin: 2.25rem 0;
	padding: 0.5rem 0 0.5rem 0;
	border-left: 3px solid var(--bel-green);
	border-right: 0;
	color: var(--bel-ink);
	font-size: 1.4rem;
	line-height: 1.35;
	font-weight: 700;
	letter-spacing: -0.02em;
	font-style: normal;
	text-wrap: balance;
	max-width: 52ch;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}
.article-details [itemprop="articleBody"] blockquote::before {
	content: "“";
	position: absolute;
	left: -0.1em;
	top: -0.25em;
	font-size: 1.6em;
	color: var(--bel-green);
	font-weight: 800;
	line-height: 1;
}
.article-details [itemprop="articleBody"] blockquote p { margin: 0; }

/* ---- wysiwyg / replica cleanup (scoped, no content change) ---- */
.article-details [itemprop="articleBody"] img,
.entry-content img,
.article-content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--bel-radius-sm);
	margin: 1.5rem auto;
	display: block;
}
/* neutralize inline wysiwyg font sizes/colors so the modern scale rules */
.article-details [itemprop="articleBody"] [style*="font-size"],
.entry-content [style*="font-size"],
.article-content [style*="font-size"] { font-size: inherit !important; line-height: inherit !important; }
.article-details [itemprop="articleBody"] [style*="color"],
.entry-content [style*="color"] { color: inherit !important; }
.article-details [itemprop="articleBody"] font,
.entry-content font { color: inherit !important; font-size: inherit !important; }
.article-details [itemprop="articleBody"] p,
.entry-content p { margin: 0 0 1.2rem; }
.article-details [itemprop="articleBody"] ul,
.article-details [itemprop="articleBody"] ol { margin: 0 0 1.3rem; padding-left: 1.4rem; }
.article-details [itemprop="articleBody"] li { margin-bottom: 0.45rem; }
.article-details [itemprop="articleBody"] a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--bel-green-line); }
.article-details [itemprop="articleBody"] a:hover { text-decoration-color: var(--bel-green); }
.article-details [itemprop="articleBody"] table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.95rem; }
.article-details [itemprop="articleBody"] th,
.article-details [itemprop="articleBody"] td { border: 1px solid var(--bel-line); padding: 0.6rem 0.8rem; }

/* ---- Single-post readability for magazine-release posts (TOC + subscribe).
 *   Content is pasted markup: Word .MsoNormal paragraphs with inline styles,
 *   a leading cover <img>, and bold all-caps section labels. Normalized here
 *   without changing any post bytes. --------------------------------------- */

/* The issue cover is the first <p> child of the body and renders at natural
 * (huge) size. Contain it as a tidy, centered cover frame. */
.article-details [itemprop="articleBody"] > p:first-child:has(img),
.article-details [itemprop="articleBody"] > p:first-of-type:has(img) {
	margin: 0 auto 1.75rem;
	text-align: center;
}
.article-details [itemprop="articleBody"] > p:first-child img,
.article-details [itemprop="articleBody"] > p:first-of-type img {
	max-width: clamp(18rem, 38vw, 32rem);
	width: auto;
	margin: 0 auto;
	border-radius: var(--bel-radius);
	box-shadow: var(--bel-shadow);
}

/* Neutralize Word's .MsoNormal inline margin/font so the reading rhythm holds. */
.article-details [itemprop="articleBody"] .MsoNormal,
.article-details [itemprop="articleBody"] .MsoNormal span {
	margin: 0 0 0.7rem;
	font-family: inherit !important;
	font-size: inherit !important;
	line-height: inherit;
	color: inherit;
}
.article-details [itemprop="articleBody"] p.MsoNormal { line-height: 1.7; }

/* Section labels in the TOC: a <p> whose only child is a <strong> ("УСАДЬБЫ",
 * "ЛЮБИМЫЙ САД"…). Turn the paragraph into a spaced divider and the strong
 * into a proper sub-heading — a visible step up from the body (1.09rem) and
 * just under the h3 (1.3rem), same Montserrat family, normal tracking. The
 * source bytes are already uppercase, so they render as crisp caps section
 * labels without forcing a tiny tracked eyebrow that fights the running text. */
.article-details [itemprop="articleBody"] p:has(> strong:only-child) {
	margin: 2.1rem 0 0.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--bel-line);
}
.article-details [itemprop="articleBody"] p:has(> strong:only-child):first-of-type {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}
.article-details [itemprop="articleBody"] p > strong:only-child {
	display: inline;
	font-size: 1.18rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.005em;
	text-transform: none;
	color: var(--bel-green-hover);
}

/* ============================================================================
   ARCHIVE / NEWS LIST (archive.php) — modern card grid
   ========================================================================== */
.blog { max-width: 1240px; margin: 0 auto; }
.blog > h2 {
	font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	margin: 0 0 0.5rem;
	padding: 0 0 0.9rem;
	border-bottom: 2px solid var(--bel-ink);
}
.blog > h2 .subheading-category { font-weight: inherit; color: inherit; }

/* ---- News list: horizontal rows (thumbnail | content) with hairline
 * dividers. Replaces the distorted Joomla 3-col grid, which rendered
 * thumbnails at a captured ~109px width and left uneven card heights. ---- */
.article-list.articles-leading,
.article-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-top: clamp(1rem, 2vw, 1.5rem);
}
.article-list .article,
.article-list [itemprop="blogPost"] {
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	transition: none;
	display: grid;
	grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
	gap: clamp(1rem, 2vw, 1.75rem);
	align-items: center;
	width: 100%;
	min-width: 0;
	padding: clamp(1.25rem, 2.5vw, 1.9rem) 0;
	border-bottom: 1px solid var(--bel-line);
}
.article-list .article:hover,
.article-list [itemprop="blogPost"]:hover { transform: none; box-shadow: none; border-color: var(--bel-line); }

/* thumbnail — override Joomla's fixed ~109px width on .article-intro-image */
.article-list .article-intro-image,
.article-list .article .article-intro-image {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--bel-radius);
	overflow: hidden;
	background: var(--bel-green-soft);
	position: relative;
	aspect-ratio: 3 / 2;
	box-shadow: none;
}
.article-list .article-intro-image::after,
.article-list .article .article-intro-image::after { display: none; }
.article-list .article-intro-image img,
.article-list .article img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s var(--bel-ease);
}
.article-list .article:hover .article-intro-image img,
.article-list .article:hover img { transform: scale(1.04); }
.article-list .article-intro-image a,
.article-list .article-intro-image.float-none { display: block; height: 100%; }
.article-list .article .article-intro-image.float-none { padding: 0; border: 0; width: 100%; max-width: none; }

/* content column */
.article-list .article .article-body { padding: 0; display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.article-list .article .article-info {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bel-green-hover);
	border: none;
	margin: 0;
	padding: 0;
	display: block;
}
.article-list .article .article-info time,
.article-list .article .published { color: inherit; }
.article-list .article .article-header h2,
.article-list .article h2,
.article-list .article .article-title,
.article-list .article a[itemprop="url"] {
	font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--bel-ink);
	margin: 0;
	text-wrap: balance;
}
.article-list .article h2 a,
.article-list .article a[itemprop="url"] { color: inherit; }
.article-list .article h2 a:hover,
.article-list .article a[itemprop="url"]:hover { color: var(--bel-green-hover); }
.article-list .article .article-introtext,
.article-list .article-introtext {
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--bel-muted);
	margin: 0;
	overflow-wrap: anywhere;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.article-list .article .article-introtext p,
.article-list .article-introtext p { margin: 0; }
/* Hide images inside excerpts: the Joomla intro text sometimes begins with the
 * cover image (inherited content); in the list the thumbnail already shows it,
 * so an in-excerpt image would duplicate it and blow the row height. */
.article-list .article .article-introtext img,
.article-list .article-introtext img,
.article-list .article .article-introtext figure { display: none !important; }

/* tags — quiet pills */
.article-list .article .tags.list-inline,
.article-list .tags.list-inline {
	display: flex; flex-wrap: wrap; gap: 0.35rem;
	margin: 0.4rem 0 0; padding: 0; list-style: none;
}
.article-list .article .tags .list-inline-item { margin: 0; }
.article-list .article .tags .label,
.article-list .article .tags a.label {
	background: var(--bel-green-soft);
	color: var(--bel-green-hover);
	border: 1px solid var(--bel-green-line);
	border-radius: 999px;
	padding: 0.15rem 0.6rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: none;
}

/* Pagination */
.pagination-wrapper {
	margin-top: clamp(2rem, 4vw, 3rem);
	padding-top: 1.5rem;
	border-top: 1px solid var(--bel-line);
	align-items: center !important;
	gap: 1rem;
}
.pagination-wrapper .mr-auto { margin-right: auto; }
.pagination { margin: 0; gap: 0.3rem; }
.pagination a, .pagination span, .pagination .page-link {
	border-radius: var(--bel-radius-sm) !important;
	border: 1px solid var(--bel-line) !important;
	background: var(--bel-surface) !important;
	color: var(--bel-ink-soft) !important;
	padding: 0.4rem 0.75rem !important;
	font-weight: 600;
	font-size: 0.9rem;
	transition: all var(--bel-speed) var(--bel-ease);
}
.pagination a:hover, .pagination .page-link:hover {
	background: var(--bel-green-soft) !important;
	border-color: var(--bel-green-line) !important;
	color: var(--bel-green-hover) !important;
}
.pagination .active, .pagination .active > a, .pagination span.active {
	background: var(--bel-green) !important;
	border-color: var(--bel-green) !important;
	color: #fff !important;
}
.pagination-counter {
	font-size: 0.85rem;
	color: var(--bel-muted);
	font-weight: 600;
	white-space: nowrap;
}

/* ============================================================================
   STATIC PAGES — prose measure so short institutional pages (contacts,
   advertising, documents) don't read as adrift on a wide column. A short
   green rule above the title gives presence without extra chrome.
   ========================================================================== */
.page .article-details { max-width: none; margin: 0 auto; }
.page .article-details .article-header { position: relative; }
.page .article-details .article-header::before {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	background: var(--bel-green);
	margin: 0 auto 1.1rem;
	border-radius: 2px;
}

/* Buttons (generic + baforms) */
.btn, .btn-primary, .button, input[type="submit"], .su-button {
	background: var(--bel-green) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 999px !important;
	padding: 0.65rem 1.5rem !important;
	font-weight: 600 !important;
	font-size: 0.92rem !important;
	letter-spacing: 0.01em;
	box-shadow: none !important;
	transition: background var(--bel-speed) var(--bel-ease), transform var(--bel-speed) var(--bel-ease) !important;
}
.btn:hover, .btn-primary:hover, .button:hover, input[type="submit"]:hover, .su-button:hover {
	background: var(--bel-green-hover) !important;
	color: #fff !important;
	transform: translateY(-1px);
}

/* Forms (search/baforms inputs) */
input[type="text"], input[type="email"], input[type="search"], input[type="tel"], textarea, select, .form-control {
	border: 1px solid var(--bel-line) !important;
	border-radius: var(--bel-radius-sm) !important;
	padding: 0.55rem 0.8rem !important;
	font-size: 0.95rem !important;
	color: var(--bel-ink) !important;
	background: var(--bel-surface) !important;
	transition: border-color var(--bel-speed) var(--bel-ease), box-shadow var(--bel-speed) var(--bel-ease);
}
input:focus, textarea:focus, select:focus, .form-control:focus {
	border-color: var(--bel-green) !important;
	box-shadow: 0 0 0 3px var(--bel-green-soft) !important;
	outline: none;
}

/* ============================================================================
   FOOTER
   ========================================================================== */
#sp-logo-bottom { padding: 1.5rem 0; border-top: 1px solid var(--bel-line); background: var(--bel-surface); }
#sp-logo-bottom #sp-logotip a { color: var(--bel-ink); font-weight: 700; }

#sp-bottom {
	background: oklch(0.975 0.006 125);
	border-top: 1px solid var(--bel-line);
	padding: clamp(2rem, 4vw, 3.5rem) 0;
	color: var(--bel-ink-soft);
}
/* Helix ships module body text white (it assumes a dark footer / dark section
 * background). On the light backgrounds we use, that text is invisible —
 * "Наш адрес", "Режим работы", and the local part of cloaked emails disappear.
 * Force a readable ink on module content in the light areas. */
#sp-bottom .sp-module-content,
#sp-bottom .custom,
#sp-bottom p, #sp-bottom span, #sp-bottom li,
#sp-main-body .sp-module .sp-module-content,
#sp-main-body .sp-module .custom,
#sp-main-body .sp-module p,
#sp-main-body .sp-module span,
#sp-main-body .sp-module li { color: var(--bel-ink-soft); }
#sp-bottom .sp-module-title, #sp-bottom h3, #sp-bottom h3.sp-module-title {
	font-size: 0.78rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--bel-ink);
	margin-bottom: 1rem;
	padding-bottom: 0.6rem;
	border-bottom: 2px solid var(--bel-green);
	display: inline-block;
}
#sp-bottom a { color: var(--bel-ink-soft); }
#sp-bottom a:hover { color: var(--bel-green-hover); }
#sp-footer {
	background: var(--bel-green-deep);
	color: oklch(1 0 0 / 0.85);
	padding: 0.85rem 0;
	font-size: 0.85rem;
}
#sp-footer a { color: #fff; }

/* Language switcher */
.lang-inline { display: inline-flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
.lang-inline li a { color: oklch(1 0 0 / 0.85); font-size: 0.8rem; padding: 0.15rem 0.4rem; border-radius: 4px; }
.lang-inline li.lang-active a, .lang-inline li a:hover { color: #fff; background: oklch(1 0 0 / 0.18); }

/* Scroll-up */
.sp-scroll-up {
	background: var(--bel-green) !important;
	border-radius: 999px !important;
	box-shadow: var(--bel-shadow) !important;
	transition: background var(--bel-speed) var(--bel-ease), transform var(--bel-speed) var(--bel-ease);
}
.sp-scroll-up:hover { background: var(--bel-green-hover) !important; transform: translateY(-2px); }

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 980px) {
	#sp-page-builder .newsflash > .container > .row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* News list rows: shrink the thumbnail on tablet. */
	.article-list .article { grid-template-columns: minmax(0, 160px) minmax(0, 1fr); }
}
@media (max-width: 720px) {
	#sp-page-builder .newsflash-horiz.odna_novost .news_body {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}
	#sp-page-builder .newsflash-horiz.odna_novost .newsflash-image img {
		height: clamp(240px, 42vw, 320px);
		width: auto;
		max-width: 100%;
		aspect-ratio: auto;
	}
	#sp-page-builder .newsflash-horiz.odna_novost .newsflash-title a { font-size: clamp(1.55rem, 1.2rem + 2vw, 2rem); }
	/* Single-column: center the cover, title and "Подробнее" on phones. */
	#sp-page-builder .newsflash-horiz.odna_novost .newsflash-image { text-align: center; justify-self: center; }
	#sp-page-builder .newsflash-horiz.odna_novost .news-info { align-items: center; text-align: center; }
	#sp-page-builder .newsflash-horiz.odna_novost .readmore { align-self: center; }
	#sp-page-builder .newsflash > .container > .row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* Mobile news list: thumbnail above content, single column. */
	.article-list .article { grid-template-columns: 1fr; gap: 1rem; }
	.article-list .article .article-intro-image { aspect-ratio: 16 / 10; max-width: 240px; }
}

/* ============================================================================
   MOBILE / TOUCH — all rules are media-query-scoped; desktop (≥992px) untouched.
   ========================================================================== */

/* Tablet/phone nav: hide the forced-horizontal desktop megamenu so it stops
 * overflowing the narrow bar. Helix's off-canvas (#offcanvas-toggler →
 * .offcanvas-menu) already owns small-screen nav; this just gets the desktop
 * <ul> out of the way (modern.css forces it flex !important at all widths). */
@media (max-width: 991px) {
	#sp-header .sp-megamenu-parent { display: none !important; }
	#sp-header #sp-menu { flex: 0 0 auto; width: auto; max-width: none; }
	#sp-header #sp-search { flex: 0 0 auto; }
	/* Off-canvas drawer: drop the disc bullets + 40px indent, enlarge tap
	 * targets so adjacent items can't be mis-tapped, and lift contrast
	 * (white on green-deep instead of low-contrast white on brand green). */
	.offcanvas-menu { background: var(--bel-green-deep) !important; }
	.offcanvas-menu ul,
	.offcanvas-menu ol { list-style: none !important; margin: 0 !important; padding: 0 !important; }
	.offcanvas-menu li { list-style: none !important; }
	.offcanvas-menu ul a {
		display: block;
		color: #fff !important;
		font-size: 1.05rem !important;
		font-weight: 600 !important;
		line-height: 1.3 !important;
		padding: 0.95rem 1.25rem !important;
		border-bottom: 1px solid oklch(1 0 0 / 0.14);
		text-decoration: none;
	}
	.offcanvas-menu ul a:hover,
	.offcanvas-menu ul li.active > a,
	.offcanvas-menu ul li.current-item > a { background: oklch(1 0 0 / 0.16) !important; }

	/* Topbar utility row (lang switcher + BVI accessibility toggle): on phones
	 * the thin desktop bar is too crowded and its tap targets are ~20px — below
	 * the 44px minimum and unusable for the vision-impaired users who need the
	 * BVI toggle most. Restyle both into two large, high-contrast rows. */
	/* Language switcher → segmented 3-button control (БЕЛ | РУС | ENG). */
	.lang-inline {
		display: flex !important;
		width: 100% !important;
		gap: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
	}
	.lang-inline li { flex: 1 1 0; list-style: none; }
	.lang-inline li a {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		padding: 0 0.5rem;
		font-size: 0.95rem;
		font-weight: 700;
		letter-spacing: 0.04em;
		color: var(--bel-ink) !important;
		background: var(--bel-bg);
		border: 1px solid var(--bel-line);
		text-decoration: none;
	}
	.lang-inline li + li a { border-left: 0; }
	.lang-inline li.lang-active a {
		background: var(--bel-green);
		color: #fff !important;
		border-color: var(--bel-green);
	}
	/* BVI accessibility toggle → prominent full-width button. It is the entry
	 * point to accessibility mode, so it carries the brand green + an icon and
	 * the largest tap target. */
	.bvi-open {
		display: flex !important;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		width: 100% !important;
		margin: 0.5rem 0 0 !important;
		padding: 0 1rem !important;
		min-height: 48px;
		background: var(--bel-green-hover) !important;
		color: #fff !important;
		font-size: 1rem !important;
		font-weight: 700 !important;
		line-height: 1.2;
		text-align: center;
		border-radius: var(--bel-radius);
	}
	.bvi-open::before { content: none; }
}

/* Home SPB blocks (featured lead, 4-recent, partners) render wider than the
 * phone viewport because #sp-main-body's Bootstrap .row carries margin:0 -15px,
 * making every descendant 30px wider than the screen and offset -15px (clipped
 * by an overflow:hidden ancestor) — so the lead title overflows off-screen and
 * partners/4-recent read with broken spacing. Zero that gutter on small screens. */
@media (max-width: 768px) {
	#sp-main-body > .row,
	#sp-main-body .row,
	#sp-page-builder .newsflash,
	#sp-page-builder .newsflash-horiz {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	body:has(#sp-page-builder) .container,
	#sp-page-builder .sppb-row-container {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}
	/* SPB columns: stack full-width on phones (featured, 4-recent, banners). */
	#sp-page-builder .sppb-row { display: flex !important; flex-wrap: wrap !important; gap: 1rem; }
	#sp-page-builder .sppb-row > [class*="sppb-col-"] { flex: 0 0 100%; max-width: 100%; }
	/* Partner logos: SPB lays them out as 6 columns × 5 stacked logos. Flatten
	 * the column wrappers (display:contents) so all logos flow as one responsive
	 * grid instead of 6 tall cells. */
	#sp-page-builder .sppb-row:has(> .sppb-col-md-2) { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)) !important; gap: 1.25rem !important; justify-items: center !important; align-items: center !important; margin: 0 !important; padding: 0 1.25rem !important; }
	#sp-page-builder .sppb-col-md-2,
	#sp-page-builder .sppb-col-md-2 .sppb-column,
	#sp-page-builder .sppb-col-md-2 .sppb-column-addons { display: contents !important; }
	#sp-page-builder .sppb-row:has(> .sppb-col-md-2) .sppb-addon-single-image-container { display: block; max-width: 100%; }
	#sp-page-builder .sppb-row img { max-width: 100%; height: auto; }
}

/* Phone tuning: title/cover sizes + long-word & table overflow safety. */
@media (max-width: 600px) {
	#sp-page-builder .newsflash-horiz.odna_novost .newsflash-title a { font-size: clamp(1.35rem, 1.1rem + 2vw, 1.7rem); }
	.article-details .article-header h1,
	.article-details .entry-title { font-size: clamp(1.5rem, 1.2rem + 2vw, 1.9rem) !important; }
	.article-details [itemprop="articleBody"] > p:first-child img,
	.article-details [itemprop="articleBody"] > p:first-of-type img { max-width: 86%; }
	.article-details [itemprop="articleBody"] { overflow-wrap: anywhere; }
	.article-details [itemprop="articleBody"] table { display: block; overflow-x: auto; max-width: 100%; }
	/* News/archive pagination: page-number row + "Страница 1 из 9" counter
	 * don't fit one line on phones — wrap the numbers and drop the counter
	 * to its own centered line so nothing overflows. */
	.pagination-wrapper { flex-wrap: wrap !important; gap: 0.75rem !important; justify-content: center !important; }
	.pagination-wrapper .mr-auto { flex-wrap: wrap !important; margin-right: 0 !important; justify-content: center; width: 100%; gap: 0.25rem; }
	.pagination-wrapper .pagination { flex-wrap: wrap !important; justify-content: center !important; gap: 0.25rem; }
	.pagination-wrapper .page-link { padding: 0.35rem 0.6rem; }
	.pagination-counter { width: 100%; text-align: center; margin: 0; }
}

/* ============================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	#sp-page-builder .item-news:hover .newsflash-image img,
	.article-list .article:hover img { transform: none; }
}