/*
 * Sun Trans — блог v2. Макет Елены «Logistics Insights & Freight News», 25.08.
 * Всё висит под body.ste-blog-v2, который ставится только под ste_preview,
 * поэтому файл физически не может изменить ни одну живую страницу.
 * Классы .stb-* тема не адресует ни одним правилом — !important не нужен.
 */

body.ste-blog-v2 {
	--stb-navy: #0B1F3A;
	--stb-navy-2: #14304F;
	--stb-orange: #F2622E;
	--stb-orange-dark: #D94F1E;
	--stb-bg: #F7F8FA;
	--stb-card: #FFFFFF;
	--stb-text: #1C1F26;
	--stb-muted: #5B6472;
	--stb-border: #E2E6EB;
	background: var(--stb-bg);
}

body.ste-blog-v2 .stb { display: block; }

body.ste-blog-v2 .stb h1,
body.ste-blog-v2 .stb h2,
body.ste-blog-v2 .stb h3 {
	font-family: 'Oswald', system-ui, sans-serif;
	text-transform: uppercase;
	letter-spacing: .01em;
	color: var(--stb-navy);
	line-height: 1.15;
	margin: 0 0 .5em;
}

body.ste-blog-v2 .stb p { margin: 0 0 1.1em; color: var(--stb-text); line-height: 1.6; }

/* --- hero --------------------------------------------------------------- */
body.ste-blog-v2 .stb-hero {
	background: linear-gradient(180deg, var(--stb-navy) 0%, var(--stb-navy-2) 100%);
	color: #fff;
	/* шапка темы position:fixed, 79px — верхний отступ обязан её перекрыть, иначе крошки лезут под логотип */
	padding: clamp(104px, 9vw, 128px) 0 clamp(40px, 5vw, 64px);
}
body.ste-blog-v2 .stb .stb-hero__title {
	color: #fff;
	font-size: clamp(1.6rem, 4vw, 3.2rem);
	overflow-wrap: break-word;
	font-weight: 600;
	margin: 0 0 .4em;
}
body.ste-blog-v2 .stb .stb-hero__lead {
	color: #B9C4D6;
	font-size: clamp(1rem, 1.4vw, 1.15rem);
	max-width: 640px;
	margin: 0;
}
body.ste-blog-v2 .stb-crumb { font-size: .82rem; color: #8FA0BB; margin: 0 0 18px; }
body.ste-blog-v2 .stb-crumb a { color: #8FA0BB; text-decoration: none; }
body.ste-blog-v2 .stb-crumb a:hover { color: var(--stb-orange); }
body.ste-blog-v2 .stb-crumb span { margin: 0 6px 0 0; }

body.ste-blog-v2 .stb-eyebrow {
	display: block;
	color: var(--stb-orange);
	font-weight: 700;
	font-size: .78rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	margin-bottom: 8px;
}
body.ste-blog-v2 .stb-eyebrow--dark { color: var(--stb-orange-dark); margin-bottom: 18px; }

/* --- sections ----------------------------------------------------------- */
body.ste-blog-v2 .stb-section { padding: clamp(36px, 4.5vw, 64px) 0; }
body.ste-blog-v2 .stb-section--tight { padding: clamp(26px, 3vw, 40px) 0; }
/* тема сама добавляет footer{margin-top:107px} на всех страницах — свой отступ держим маленьким */
body.ste-blog-v2 .stb-section--cta { padding-bottom: clamp(16px, 2vw, 28px); }

body.ste-blog-v2 .stb-divider {
	height: 0;
	border: 0;
	border-top: 3px dashed #C9CFD9;
	margin: 0;
	position: relative;
}
body.ste-blog-v2 .stb-divider::after {
	content: "";
	position: absolute;
	right: 0;
	top: -7px;
	width: 14px;
	height: 14px;
	background: var(--stb-orange);
	border-radius: 50%;
}

/* --- chips -------------------------------------------------------------- */
body.ste-blog-v2 .stb-chips { display: flex; gap: 10px; flex-wrap: wrap; }
body.ste-blog-v2 .stb-chip {
	border: 1px solid var(--stb-border);
	background: #fff;
	padding: 8px 16px;
	border-radius: 20px;
	font-size: .85rem;
	font-weight: 600;
	color: var(--stb-navy);
	text-decoration: none;
	line-height: 1.4;
	transition: .2s ease;
}
body.ste-blog-v2 .stb-chip:hover { border-color: var(--stb-orange); color: var(--stb-orange-dark); }
body.ste-blog-v2 .stb-chip.is-active { background: var(--stb-navy); border-color: var(--stb-navy); color: #fff; }

/* --- cards -------------------------------------------------------------- */
body.ste-blog-v2 .stb-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px;
}

body.ste-blog-v2 .stb-card {
	background: var(--stb-card);
	border: 1px solid var(--stb-border);
	border-radius: 6px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-width: 0;
}
body.ste-blog-v2 .stb-card__thumb {
	display: block;
	aspect-ratio: 16 / 10;
	background: #DCE3EC;
	overflow: hidden;
}
body.ste-blog-v2 .stb-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.ste-blog-v2 .stb-card__body {
	padding: 20px 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}
body.ste-blog-v2 .stb-card__title { margin: 2px 0 0; font-size: 1.05rem; font-weight: 600; letter-spacing: .03em; }
body.ste-blog-v2 .stb-card__title a { color: var(--stb-navy); text-decoration: none; }
body.ste-blog-v2 .stb-card__title a:hover { color: var(--stb-orange-dark); }
body.ste-blog-v2 .stb .stb-card__text { color: var(--stb-muted); font-size: .92rem; margin: 0; flex: 1; }
body.ste-blog-v2 .stb-card__meta {
	font-size: .78rem;
	color: var(--stb-muted);
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}
body.ste-blog-v2 .stb-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--stb-muted); flex: none; }
body.ste-blog-v2 .stb-card__link { font-weight: 600; font-size: .86rem; color: var(--stb-orange-dark); text-decoration: none; }
body.ste-blog-v2 .stb-card__link:hover { text-decoration: underline; }

body.ste-blog-v2 .stb-tag {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #fff;
	border: 1px solid var(--stb-border);
	border-left: 4px solid var(--stb-orange);
	padding: 5px 12px 5px 10px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--stb-navy);
	border-radius: 2px;
	line-height: 1.3;
}

/* --- featured ----------------------------------------------------------- */
body.ste-blog-v2 .stb-card--featured {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	align-items: stretch;
}
body.ste-blog-v2 .stb-card--featured .stb-card__thumb { aspect-ratio: auto; height: 100%; min-height: 300px; position: relative; overflow: hidden; }
body.ste-blog-v2 .stb-card--featured .stb-card__img { position: absolute; inset: 0; object-position: 50% 18%; }
body.ste-blog-v2 .stb-card--featured .stb-card__body { padding: clamp(22px, 2.6vw, 32px); gap: 12px; }
body.ste-blog-v2 .stb-card--featured .stb-card__title { font-size: clamp(1.15rem, 1.8vw, 1.4rem); }
body.ste-blog-v2 .stb-card--featured .stb-card__text { font-size: .96rem; flex: 0 0 auto; }

/* --- empty state -------------------------------------------------------- */
body.ste-blog-v2 .stb-empty {
	background: var(--stb-card);
	border: 1px solid var(--stb-border);
	border-left: 4px solid var(--stb-orange);
	border-radius: 6px;
	padding: 26px 24px;
}
body.ste-blog-v2 .stb-empty h3 { margin: 0 0 8px; font-size: 1.05rem; }
body.ste-blog-v2 .stb-empty p { margin: 0; color: var(--stb-muted); }

/* --- cta band ----------------------------------------------------------- */
body.ste-blog-v2 .stb-cta {
	background: linear-gradient(180deg, var(--stb-navy) 0%, var(--stb-navy-2) 100%);
	border-radius: 8px;
	padding: clamp(26px, 3.4vw, 40px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
body.ste-blog-v2 .stb-cta h2 { color: #fff; font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 600; margin: 0 0 .4em; }
body.ste-blog-v2 .stb-cta p { color: #B9C4D6; margin: 0 0 10px; }
body.ste-blog-v2 .stb-cta__text { min-width: 0; }
body.ste-blog-v2 .stb-cta__line { color: #B9C4D6; font-size: .95rem; }
body.ste-blog-v2 .stb-cta__line a { color: var(--stb-orange); text-decoration: none; }
body.ste-blog-v2 .stb-cta__line a:hover { text-decoration: underline; }

body.ste-blog-v2 .stb-btn {
	display: inline-block;
	flex: none;
	padding: 12px 26px;
	border-radius: 3px;
	background: var(--stb-orange);
	color: #fff;
	font-family: 'Inter', system-ui, sans-serif;
	font-weight: 600;
	font-size: .88rem;
	letter-spacing: .02em;
	text-transform: uppercase;
	text-decoration: none;
	transition: .2s ease;
}
body.ste-blog-v2 .stb-btn:hover { background: var(--stb-orange-dark); color: #fff; }

/* --- pagination --------------------------------------------------------- */
body.ste-blog-v2 .stb-pagination { margin-top: 34px; }
body.ste-blog-v2 .stb-pagination ul { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
body.ste-blog-v2 .stb-pagination a,
body.ste-blog-v2 .stb-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border: 1px solid var(--stb-border);
	border-radius: 4px;
	background: #fff;
	color: var(--stb-navy);
	font-size: .9rem;
	font-weight: 600;
	text-decoration: none;
}
body.ste-blog-v2 .stb-pagination .current { background: var(--stb-navy); border-color: var(--stb-navy); color: #fff; }

/* --- adaptive ----------------------------------------------------------- */
@media (width <= 60em) {
	body.ste-blog-v2 .stb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body.ste-blog-v2 .stb-card--featured { grid-template-columns: 1fr; }
	body.ste-blog-v2 .stb-card--featured .stb-card__thumb { aspect-ratio: 16 / 9; min-height: 0; }
}

@media (width <= 40em) {
	body.ste-blog-v2 .stb-grid { grid-template-columns: minmax(0, 1fr); }
	body.ste-blog-v2 .stb-cta { flex-direction: column; align-items: flex-start; }
	body.ste-blog-v2 .stb-btn { width: 100%; text-align: center; }
}