/* Taboola Safe Banners — без position:fixed/sticky, без анимаций, чёткое отделение от текста.
   Форматы: 200×200, 250×250, 300×250, 336×280, 728×90, 970×90, 970×250, 320×50, 320×100. */

.tsb {
	--tsb-line: #e3e3e3;
	--tsb-muted: #6b6b6b;
	--tsb-bg: #fafafa;
	--tsb-ink: #1a1a1a;
	container: tsb / inline-size;
	box-sizing: border-box;
	width: 100%; /* у контейнера нет собственной ширины — во flex-сайдбарах он бы схлопнулся */
	clear: both;
	margin: 2em 0;
	padding: 10px 0 12px;
	border-top: 1px solid var(--tsb-line);
	border-bottom: 1px solid var(--tsb-line);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.3;
}
.tsb-label {
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tsb-muted);
}
.tsb-disclaimer { margin-top: 6px; font-size: 11px; color: var(--tsb-muted); }
.tsb a, .tsb a:hover, .tsb a:focus { text-decoration: none; box-shadow: none; }

/* ---------- видимость вариантов ---------- */

.tsb .tsb-v { display: none; margin: 0 auto; }

/* Телефоны: мобильные форматы в тексте и в конце статьи */
@media (max-width: 767.98px) {
	.tsb--inline .tsb-v--m,
	.tsb--end .tsb-v--m { display: flex; }
}

/* Компьютеры/планшеты: по ширине колонки */
@media (min-width: 768px) {
	@container tsb (min-width: 728px) {
		.tsb--inline .tsb-v--d-xl { display: flex; }
	}
	@container tsb (min-width: 336px) and (max-width: 727.98px) {
		.tsb--inline .tsb-v--d-md { display: flex; }
	}
	@container tsb (max-width: 335.98px) {
		.tsb--inline .tsb-v--d-sm { display: flex; }
	}

	@container tsb (min-width: 970px) {
		.tsb--end .tsb-v--d-xxl { display: flex; }
	}
	@container tsb (min-width: 728px) and (max-width: 969.98px) {
		.tsb--end .tsb-v--d-xl { display: flex; }
	}
	@container tsb (min-width: 336px) and (max-width: 727.98px) {
		.tsb--end .tsb-v--d-md { display: flex; }
	}
	@container tsb (max-width: 335.98px) {
		.tsb--end .tsb-v--d-sm { display: flex; }
	}
}

/* Сайдбар */
@container tsb (min-width: 300px) {
	.tsb--sidebar .tsb-v--s-lg { display: flex; }
}
@container tsb (min-width: 250px) and (max-width: 299.98px) {
	.tsb--sidebar .tsb-v--s-md { display: flex; }
}
@container tsb (max-width: 249.98px) {
	.tsb--sidebar .tsb-v--s-sm { display: flex; }
}

/* Превью в админке */
.tsb--preview .tsb-v--p { display: flex; margin: 0; }
.tsb[class*="tsb--fmt-"] .tsb-v--p { display: flex; margin: 0 auto; }

/* Шорткод с format + mobile: один блок для компьютера, другой для телефона */
@media (max-width: 767.98px) { .tsb.tsb--desk { display: none; } }
@media (min-width: 768px) { .tsb.tsb--mob { display: none; } }
.tsb--sidebar, .tsb--preview { margin: 0 0 1em; }

/* Старые браузеры без container queries */
@supports not (container-type: inline-size) {
	@media (min-width: 768px) {
		.tsb--inline .tsb-v--d-sm,
		.tsb--end .tsb-v--d-sm { display: flex; }
	}
	.tsb--sidebar .tsb-v--s-md { display: flex; }
}

/* ---------- картинки ---------- */

.tsb-imglink { justify-content: center; }
.tsb-img { display: block; max-width: 100%; height: auto; }

/* ---------- HTML-баннер: общая часть ---------- */

.tsb-card {
	box-sizing: border-box;
	width: var(--tsb-w);
	max-width: 100%;
	height: var(--tsb-h);
	overflow: hidden;
	align-items: center;
	background: var(--tsb-bg);
	border: 1px solid var(--tsb-line);
	border-radius: 6px;
	color: var(--tsb-ink);
}
.tsb-card:hover { border-color: var(--tsb-brand); }
.tsb-card:focus-visible { outline: 2px solid var(--tsb-brand); outline-offset: 2px; }

.tsb-brand { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 auto; }
.tsb-logo {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 10px;
	background: var(--tsb-brand);
	color: var(--tsb-brand-ink);
	font-size: 24px;
	line-height: 1;
}
.tsb-merchant { font-size: 11px; font-weight: 700; color: var(--tsb-ink); white-space: nowrap; }
.tsb-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tsb-headline { font-size: 16px; font-weight: 700; color: var(--tsb-ink); }
.tsb-sub { font-size: 13px; color: #444; }
.tsb-code { font-size: 12px; color: var(--tsb-ink); }
.tsb-code b { letter-spacing: .04em; }
.tsb-cta {
	flex: 0 0 auto;
	padding: 8px 14px;
	border-radius: 5px;
	background: var(--tsb-brand);
	color: var(--tsb-brand-ink);
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
}

/* Однострочные тексты в полосах */
.tsb-fam-bar .tsb-headline,
.tsb-fam-bar .tsb-sub,
.tsb-fam-mbar .tsb-headline,
.tsb-fam-billboard .tsb-sub {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---------- прямоугольники: 200×200, 250×250, 300×250, 336×280 ---------- */

.tsb-fam-rect {
	flex-direction: column;
	justify-content: center;
	gap: 8px;
	padding: 12px;
	text-align: center;
}
.tsb-fam-rect .tsb-text { align-items: center; }
.tsb-f-200x200 { gap: 6px; padding: 10px; }
.tsb-f-200x200 .tsb-logo { width: 36px; height: 36px; font-size: 18px; border-radius: 8px; }
.tsb-f-200x200 .tsb-headline { font-size: 14px; }
.tsb-f-200x200 .tsb-sub,
.tsb-f-200x200 .tsb-code { display: none; }
.tsb-f-200x200 .tsb-cta { padding: 6px 10px; font-size: 12px; }
.tsb-f-250x250 .tsb-sub { font-size: 12px; }
.tsb-f-250x250 .tsb-code { display: none; }
.tsb-f-336x280 .tsb-logo { width: 56px; height: 56px; font-size: 28px; }
.tsb-f-336x280 .tsb-headline { font-size: 19px; }
.tsb-f-336x280 .tsb-sub { font-size: 14px; }

/* ---------- полосы: 728×90, 970×90, 320×100 ---------- */

.tsb-fam-bar {
	flex-direction: row;
	gap: 14px;
	padding: 0 16px;
}
.tsb-fam-bar .tsb-text { flex: 1 1 auto; }
.tsb-fam-bar .tsb-logo { width: 44px; height: 44px; font-size: 22px; }
.tsb-f-970x90 .tsb-headline { font-size: 20px; }
.tsb-f-970x90 .tsb-sub { font-size: 14px; }
.tsb-f-320x100 { gap: 10px; padding: 0 10px; }
.tsb-f-320x100 .tsb-logo { width: 40px; height: 40px; font-size: 20px; }
.tsb-f-320x100 .tsb-merchant,
.tsb-f-320x100 .tsb-sub,
.tsb-f-320x100 .tsb-code { display: none; }
.tsb-f-320x100 .tsb-headline {
	font-size: 14px;
	white-space: normal;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
.tsb-f-320x100 .tsb-cta { padding: 6px 9px; font-size: 12px; }

/* ---------- мобильная полоса 320×50 ---------- */

.tsb-fam-mbar {
	flex-direction: row;
	gap: 8px;
	padding: 0 8px;
}
.tsb-fam-mbar .tsb-text { flex: 1 1 auto; }
.tsb-fam-mbar .tsb-logo { width: 32px; height: 32px; font-size: 17px; border-radius: 7px; }
.tsb-fam-mbar .tsb-merchant,
.tsb-fam-mbar .tsb-sub,
.tsb-fam-mbar .tsb-code { display: none; }
.tsb-fam-mbar .tsb-headline { font-size: 13px; }
.tsb-fam-mbar .tsb-cta { padding: 5px 8px; font-size: 11px; }

/* ---------- билборд 970×250 ---------- */

.tsb-fam-billboard {
	flex-direction: row;
	gap: 32px;
	padding: 0 40px;
}
.tsb-fam-billboard .tsb-text { flex: 1 1 auto; gap: 8px; }
.tsb-fam-billboard .tsb-logo { width: 110px; height: 110px; font-size: 56px; border-radius: 22px; }
.tsb-fam-billboard .tsb-merchant { font-size: 15px; }
.tsb-fam-billboard .tsb-headline { font-size: 30px; }
.tsb-fam-billboard .tsb-sub { font-size: 17px; }
.tsb-fam-billboard .tsb-code { font-size: 15px; }
.tsb-fam-billboard .tsb-cta { padding: 14px 26px; font-size: 18px; border-radius: 8px; }