.w-100/.h-100/.object-fit-cover/
   .position-relative/.overflow-hidden/.stretched-link/.mb-*/.text-end).

   ⚠️ Чому не підключили bootstrap.min.css і style.css напряму:
   вони глобальні (reboot скидає margin у h1..p, ставить box-sizing
   на *, перефарбовує посилання) і зламали б шапку/футер/решту
   сторінок pesticid.bg, куди цей же файл підключається через
   спільний HEADER_TPL. Тому все, що нижче, обмежене скоупом
   .blog-page (обгортка навколо контенту новин), а шапка/футер
   сайту лишаються на своєму CSS.
   ============================================================ */

/* ---------- Базова типографіка блогу (body з оригіналу) ---------- */
.blog-page {
	font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: #5c6b80;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
/* ⚠️ Разом із .blog-page, а не тільки з нащадками: на сторінці статті
   <main> має і клас .blog-page, і .container (padding 12px). Без
   border-box на самому елементі виходило width:100% + 24px падингу —
   сторінка ставала ширшою за екран, і на телефоні збоку з'являлася
   смуга порожнечі (горизонтальний скрол). */
.blog-page,
.blog-page *,
.blog-page *::before,
.blog-page *::after {
	box-sizing: border-box;
}
.blog-page p,
.blog-page a,
.blog-page span,
.blog-page time,
.blog-page li,
.blog-page td,
.blog-page th {
	font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: inherit;
}
.blog-page p {
	font-weight: 300;
	margin: 0;
}
.blog-page h1,
.blog-page h2,
.blog-page h3,
.blog-page h4,
.blog-page h5,
.blog-page h6 {
	font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 500;
	color: inherit;
	text-rendering: optimizelegibility;
	margin: 0;
}
.blog-page h1 { font-size: 2.5em; line-height: 1.333em; }
.blog-page h2 { font-size: 1.75em; line-height: 1.4em; margin-bottom: 0.375em; }
.blog-page h3 { font-size: 1.125em; }
.blog-page h4 { font-size: 1.1em; font-weight: 700; }
.blog-page h5 { font-size: 0.846em; line-height: 2.09em; text-transform: uppercase; letter-spacing: 2px; }
.blog-page img {
	max-width: 100%;
	height: auto;
}

/* ---------- Bootstrap-підмножина (тільки те, що є в розмітці) ---------- */
.blog-page .container,
.blog-page.container {
	width: 100%;
	padding-right: 12px;
	padding-left: 12px;
	margin-right: auto;
	margin-left: auto;
}
@media (min-width: 576px) {
	.blog-page .container, .blog-page.container { max-width: 540px; }
}
@media (min-width: 768px) {
	.blog-page .container, .blog-page.container { max-width: 720px; }
}
@media (min-width: 992px) {
	.blog-page .container, .blog-page.container { max-width: 960px; }
}
@media (min-width: 1200px) {
	.blog-page .container, .blog-page.container { max-width: 1140px; }
}
@media (min-width: 1400px) {
	.blog-page .container, .blog-page.container { max-width: 1320px; }
}
.blog-page .row {
	display: flex;
	flex-wrap: wrap;
	margin-right: -12px;
	margin-left: -12px;
}
.blog-page .row > * {
	flex-shrink: 0;
	width: 100%;
	max-width: 100%;
	padding-right: 12px;
	padding-left: 12px;
}
@media (min-width: 992px) {
	.blog-page .col-lg-8 { flex: 0 0 auto; width: 66.66666667%; }
}
@media (min-width: 1200px) {
	.blog-page .col-xl-7 { flex: 0 0 auto; width: 58.33333333%; }
}
.blog-page .position-relative { position: relative !important; }
.blog-page .overflow-hidden { overflow: hidden !important; }
.blog-page .w-100 { width: 100% !important; }
.blog-page .h-100 { height: 100% !important; }
.blog-page .object-fit-cover { object-fit: cover !important; }
.blog-page .mb-3 { margin-bottom: 1rem !important; }
.blog-page .mb-0 { margin-bottom: 0 !important; }
.blog-page .text-end { text-align: right !important; }
.blog-page .stretched-link::after {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	content: "";
}

/* ============================================================
   Стрічка: герой
   ============================================================ */
.blog-hero {
	margin-top: clamp(24px, 5vw, 56px);
	margin-bottom: clamp(24px, 5vw, 48px);
}
.blog-hero__article {
	border-radius: 20px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}
.blog-hero__media {
	position: relative;
	aspect-ratio: 16/7;
	overflow: hidden;
}
.blog-hero__img {
	display: block;
}
.blog-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.65) 100%);
	pointer-events: none;
}
.blog-hero__content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding-bottom: clamp(16px, 4vw, 32px);
	color: #fff;
}
.blog-hero__meta {
	font-size: 14px;
	opacity: 0.9;
	margin-bottom: 8px;
}
.blog-hero__meta .dot {
	margin: 0 0.5ch;
	opacity: 0.7;
}
.blog-hero__meta .cats {
	opacity: 0.9;
}
.blog-page .blog-hero__title {
	font-size: clamp(28px, 4vw, 44px);
	line-height: 1.12;
	font-weight: 800;
	margin: 0;
	color: #fff;
	text-wrap: balance;
}
.blog-page .blog-hero__excerpt {
	font-size: clamp(16px, 1.6vw, 18px);
	opacity: 0.95;
	color: #fff;
}

/* На вузьких екранах картинка 16:7 нижча за сам підпис, і заголовок
   вилазив за межі картки (у джерела той самий баг — від нього лишався
   видимим тільки хвіст анонсу). Тому тут картинка стає тлом на всю
   картку, а текст іде звичайним потоком: картка росте під довгий
   заголовок і нічого не ріже. */
@media (max-width: 700px) {
	.blog-hero__article {
		display: flex;
		align-items: flex-end;
		min-height: 440px;
	}
	.blog-hero__media {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
	}
	.blog-hero__overlay {
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.78) 100%);
	}
	.blog-hero__content {
		position: relative;
		width: 100%;
		padding-top: 20px;
	}
}

/* ============================================================
   Стрічка: сітка карток + пагінація
   ============================================================ */
.blog-list {
	/* локальний контейнер: адаптивна ширина, без впливу на інші блоки */
	width: min(1280px, 100% - 40px);
	margin: 30px auto;
}
.blog-list__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
}
.blog-list__pagination {
	margin-top: 32px;
	display: flex;
	justify-content: center;
}
.blog-list__pagination .pagination,
.blog-list__pagination .nav-links,
.blog-list__pagination .page-numbers {
	display: flex;
	gap: 8px;
	align-items: center;
	list-style: none;
	padding: 0;
	margin: 0;
}
.blog-list__pagination a,
.blog-list__pagination span {
	display: inline-flex;
	min-width: 36px;
	height: 36px;
	padding: 0 12px;
	border: 1px solid #ccc;
	border-radius: 8px;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: #323944;
	background: #fff;
	font-weight: 600;
	font-size: 16px;
}
.blog-list__pagination .current {
	background: #f8f9fa;
}
.blog-list__pagination a:hover {
	background: #f8f9fa;
	color: #323944;
}
.blog-list__pagination .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}

/* ---------- Картка ---------- */
.blog-card {
	display: flex;
	flex-direction: column;
	border: 1px solid #ccc;
	border-radius: 16px;
	background: #fff;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.blog-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}
.blog-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16/9;
	overflow: hidden;
}
.blog-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.blog-card__body {
	padding: 16px 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 160px; /* щоб текст не «сплющувався» на дуже коротких постах */
}
.blog-card__meta {
	font-size: 13px;
	color: #9fa6b4;
}
.blog-card__meta .dot {
	margin: 0 0.5ch;
	opacity: 0.7;
}
.blog-page .blog-card__title {
	margin: 0;
	font-size: 20px;
	line-height: 1.25;
}
.blog-page .blog-card__title a {
	color: #323944;
	text-decoration: none;
	font-size: inherit;
}
.blog-page .blog-card__title a:hover {
	color: #323944;
	text-decoration: underline;
}
.blog-page .blog-card__excerpt {
	margin: 0;
	color: #5c6b80;
}
.blog-page .blog-card__more {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	color: #f01d4f;
	text-decoration: none;
	font-size: 16px;
}
/* Стрілка — іконкою (коло з шевроном) замість символу «→». Малюємо
   маскою, а не <img>/inline-svg: колір тоді береться з currentColor,
   тож іконка сама підхоплює і базовий колір посилання, і :hover, а в
   розмітку не доводиться копіювати svg у кожну з 21 картки. */
.blog-page .blog-card__more::after {
	content: "";
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 426.667 426.667'><path d='M213.332 0C95.512 0 0 95.512 0 213.332s95.512 213.336 213.332 213.336 213.336-95.516 213.336-213.336C426.535 95.566 331.102.132 213.332 0m0 405.332c-106.039 0-192-85.96-192-192 0-106.039 85.961-192 192-192 106.04 0 192 85.961 192 192-.121 105.988-86.012 191.879-192 192m0 0'/><path d='M188.355 130.637c-4.437-3.88-11.175-3.426-15.054 1.008-3.875 4.437-3.422 11.175 1.012 15.054l76.156 66.633-76.16 66.637c-4.438 3.879-4.887 10.617-1.012 15.05 3.879 4.438 10.617 4.891 15.055 1.012l85.332-74.668a10.67 10.67 0 0 0 0-16.062zm0 0'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 426.667 426.667'><path d='M213.332 0C95.512 0 0 95.512 0 213.332s95.512 213.336 213.332 213.336 213.336-95.516 213.336-213.336C426.535 95.566 331.102.132 213.332 0m0 405.332c-106.039 0-192-85.96-192-192 0-106.039 85.961-192 192-192 106.04 0 192 85.961 192 192-.121 105.988-86.012 191.879-192 192m0 0'/><path d='M188.355 130.637c-4.437-3.88-11.175-3.426-15.054 1.008-3.875 4.437-3.422 11.175 1.012 15.054l76.156 66.633-76.16 66.637c-4.438 3.879-4.887 10.617-1.012 15.05 3.879 4.438 10.617 4.891 15.055 1.012l85.332-74.668a10.67 10.67 0 0 0 0-16.062zm0 0'/></svg>") center / contain no-repeat;
	transition: transform 200ms;
}
.blog-page .blog-card__more:hover {
	color: #d10e3c;
	text-decoration: underline;
}
.blog-page .blog-card__more:hover::after {
	transform: translateX(3px);
}

/* mobile tweaks (з оригіналу) */
@media (max-width: 480px) {
	.blog-list {
		width: min(100%, 100% - 24px);
		margin: 24px auto;
	}
	.blog-list__grid {
		gap: 16px;
	}
}

/* ============================================================
   Сторінка окремої статті (main.single-article з оригіналу)
   ------------------------------------------------------------
   В оригіналі стаття (на відміну від стрічки) обгорнута в
   #content > #inner-content.wrap, і саме .wrap задає реальну
   ширину колонки — 96% / 760px / 1040px за брейкпоінтами
   (тому текст статті вужчий за стрічку). Відтворюємо ці ж
   значення на своїх класах, щоб не чіпати чужі id.
   ============================================================ */
.blog-content-wrap {
	margin-top: 1.5em;
	padding-bottom: 40px;
}
.blog-wrap {
	width: 96%;
	margin: 0 auto;
}
@media only screen and (min-width: 768px) {
	.blog-wrap { width: 760px; }
}
@media only screen and (min-width: 1030px) {
	.blog-wrap { width: 1040px; }
}

main.single-article .single-hero {
	position: relative;
}
main.single-article .single-hero__media {
	position: relative;
	width: 100%;
	height: auto;
}
main.single-article .single-hero__media img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}
main.single-article .single-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(50, 57, 68, 0.35) 0%, rgba(50, 57, 68, 0.45) 55%, rgba(50, 57, 68, 0.55) 100%);
}
/* ⚠️ У джерелі темно-зелена підкладка під заголовком приходить із
   загального правила теми `header {background-color:#043A3A; padding:30px}`
   (бо .single-header — це <header>). У нас таке правило без скоупу
   зачепило б шапку сайту, тому колір заданий прямо тут. */
main.single-article .single-hero + .single-header {
	position: relative;
	margin-top: -88px; /* підсуваємо у зону зображення */
	padding: 24px 20px 20px;
	color: #fff;
	background-color: #043A3A;
	text-shadow: 0 2px 12px rgba(50, 57, 68, 0.35);
}
@media (max-width: 640px) {
	main.single-article .single-hero + .single-header {
		margin-top: -64px;
		padding: 16px;
	}
}
main.single-article .single-hero + .single-header .single-meta {
	color: rgba(255, 255, 255, 0.85);
	font-size: 14px;
	margin-bottom: 8px;
}
main.single-article .single-hero + .single-header .single-meta .dot {
	margin: 0 0.5ch;
	opacity: 0.9;
}
main.single-article .single-hero + .single-header .single-meta a {
	color: rgba(255, 255, 255, 0.9);
	font-size: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
main.single-article .single-hero + .single-header .single-meta a:hover {
	color: #fff;
	border-bottom-color: #fff;
}
main.single-article .single-hero + .single-header .single-title {
	color: #fff;
	margin: 0;
	font-weight: 800;
	font-size: clamp(28px, 4vw, 44px);
	line-height: 1.15;
	text-wrap: balance;
}
main.single-article .single-header + .entry-content {
	margin-top: 16px;
}

/* ---------- .entry-content (базові правила теми-джерела) ---------- */
.blog-page .entry-content {
	padding: 1.5em 1.5em 0;
	font-size: 1.1em;   /* .single-post .entry-content з оригіналу */
	line-height: 1.7;
}
.blog-page .entry-content p {
	margin: 0 0 1.5em;
	font-weight: 300;
}
.blog-page .entry-content ul,
.blog-page .entry-content ol {
	margin: 0 0 1.5em;
	padding-left: 1.5em;
}
.blog-page .entry-content ul li,
.blog-page .entry-content ol li {
	margin-bottom: 0.25em;
}
.blog-page .entry-content a {
	color: #f01d4f;
	font-size: inherit;
}
.blog-page .entry-content a:hover {
	color: #d10e3c;
}
.blog-page .entry-content h2,
.blog-page .entry-content h3,
.blog-page .entry-content h4 {
	color: #323944;
	margin-top: 1em;
}
.blog-page .entry-content figure {
	margin: 0 0 1em;
}
.blog-page .entry-content img {
	margin: 0 0 1.5em 0;
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}
.blog-page .entry-content table {
	width: 100%;
	border: 1px solid #eaedf2;
	margin-bottom: 1.5em;
	border-collapse: collapse;
	font-size: 0.9em;
}
.blog-page .entry-content table caption {
	margin: 0 0 7px;
	font-size: 0.75em;
	color: #9fa6b4;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.blog-page .entry-content tr {
	border-bottom: 1px solid #eaedf2;
}
.blog-page .entry-content tr:nth-child(even) {
	background-color: #f8f9fa;
}
.blog-page .entry-content td {
	padding: 7px;
	border-right: 1px solid #eaedf2;
}
.blog-page .entry-content td:last-child {
	border-right: 0;
}
.blog-page .entry-content th {
	background-color: #f8f9fa;
	border-bottom: 1px solid #eaedf2;
	border-right: 1px solid #eaedf2;
}
.blog-page .entry-content th:last-child {
	border-right: 0;
}
.blog-page .entry-content blockquote {
	margin: 0 0 1.5em 0.75em;
	padding: 0 0 0 0.75em;
	border-left: 4px solid #2FB95D;
	font-style: italic;
	color: #9fa6b4;
}
.blog-page .entry-content hr {
	border: none;
	border-top: 1px solid #eaedf2;
	margin: 1.5em 0;
}

/* ---------- Навігація попередня/наступна ----------
   В оригіналі цей блок лишився без стилів (голі підкреслені
   посилання в рядок) — тут мінімальне оформлення тими ж
   кольорами, щоб не виглядало як недоробка. */
.blog-page .post-nav {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin-top: 32px;
	padding: 24px 1.5em 0;
	border-top: 1px solid #eaedf2;
}
.blog-page .post-nav > div { max-width: 48%; }
.blog-page .post-nav > div.text-end { margin-left: auto; }
.blog-page .post-nav a {
	text-decoration: none;
	display: block;
	font-size: 16px;
}
.blog-page .post-nav .label {
	display: block;
	color: #9fa6b4;
	font-size: 13px;
	margin-bottom: 4px;
}
.blog-page .post-nav .title {
	display: block;
	color: #323944;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.35;
}
.blog-page .post-nav a:hover .title {
	color: #f01d4f;
}
@media (max-width: 640px) {
	.blog-page .post-nav { flex-direction: column; padding: 24px 16px 0; }
	.blog-page .post-nav > div,
	.blog-page .post-nav > div.text-end { max-width: 100%; text-align: left; margin-left: 0; }
}