/* Taboola Safe Banners — три тянущихся мастера на оффер.
   Форматы файлов и потолки показа:
     2880×480 → до 1440px (полоса 6:1,   макет 1440×240, плотность 2×)
     1200×375 → до  400px (полоса 3.2:1, макет 400×125,  плотность 3×)
     1008×840 → до  336px (прямоугольник 1.2:1, макет 336×280, плотность 3×)
   Картинка занимает всю ширину места, но не шире своего потолка: вниз масштабируется
   резко, вверх не растягивается — поэтому нет ни пустых полей по бокам, ни мыла.
   Без position:fixed/sticky, без анимаций, чёткое отделение от текста. */

.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 .tsb-v--m { display: flex; }
}
/* Компьютеры и планшеты */
@media (min-width: 768px) {
	.tsb .tsb-v--d { display: flex; }
}
/* Квадратные места: один мастер на все ширины */
.tsb .tsb-v--s { 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; }

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

/* Потолок приходит из PHP в --tsb-cap: он у каждого формата свой, и это же работает
   для принудительного формата. Селектор ниже намеренно длиннее обычного: темы сайтов
   держат правило вида `.theme-main .tsb .tsb-img{width:auto}` (специфичность 0,3,0),
   которое прибивает картинку к натуральной ширине и оставляет пустые поля по бокам.
   Здесь 0,4,0 — перебивает его без !important. Если правите селектор, пересчитайте вес. */
.tsb .tsb-v.tsb-imglink { justify-content: center; }
.tsb .tsb-v.tsb-imglink .tsb-img {
	display: block;
	width: 100%;
	height: auto;
	max-width: var(--tsb-cap, 100%);
}
.tsb-img { display: block; max-width: 100%; height: auto; }

/* ---------- HTML-карточка: фолбэк, когда для оффера нет картинки ---------- */

.tsb-card {
	box-sizing: border-box;
	/* Не жёсткий размер: ширина по месту, но не больше потолка; высота — по пропорции формата. */
	width: min(100%, var(--tsb-w));
	aspect-ratio: var(--tsb-ar);
	container-type: inline-size;
	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: clamp( 9px, 3.4cqi, 12px ); 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: clamp( 12px, 5.6cqi, 19px ); font-weight: 700; color: var(--tsb-ink); }
.tsb-sub { font-size: clamp( 10px, 4.2cqi, 14px ); color: #444; }
.tsb-code { font-size: clamp( 10px, 3.8cqi, 13px ); 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: clamp( 10px, 4cqi, 14px );
	font-weight: 700;
	white-space: nowrap;
}

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

/* ---------- прямоугольник 1008×840 (макет 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-fam-rect .tsb-logo { width: 56px; height: 56px; font-size: 28px; }
.tsb-fam-rect .tsb-headline { font-size: clamp( 14px, 5.6cqi, 19px ); }
.tsb-fam-rect .tsb-sub { font-size: clamp( 11px, 4.2cqi, 14px ); }

/* ---------- полоса 2880×480 (макет 1440×240) ---------- */

.tsb-fam-wide {
	flex-direction: row;
	gap: 32px;
	padding: 0 40px;
}
.tsb-fam-wide .tsb-text { flex: 1 1 auto; gap: 8px; }
.tsb-fam-wide .tsb-logo {
	width: clamp( 64px, 11cqi, 112px );
	height: clamp( 64px, 11cqi, 112px );
	font-size: clamp( 32px, 5.6cqi, 56px );
	border-radius: 22px;
}
.tsb-fam-wide .tsb-merchant { font-size: clamp( 12px, 1.7cqi, 17px ); }
.tsb-fam-wide .tsb-headline { font-size: clamp( 20px, 3.6cqi, 34px ); }
.tsb-fam-wide .tsb-sub { font-size: clamp( 13px, 1.9cqi, 19px ); }
.tsb-fam-wide .tsb-code { font-size: clamp( 12px, 1.6cqi, 16px ); }
.tsb-fam-wide .tsb-cta {
	padding: clamp( 8px, 1.3cqi, 15px ) clamp( 14px, 2.6cqi, 28px );
	font-size: clamp( 13px, 1.9cqi, 19px );
	border-radius: 8px;
}

/* ---------- мобильная полоса 1200×375 (макет 400×125) ---------- */

.tsb-fam-mwide {
	flex-direction: row;
	gap: 10px;
	padding: 0 10px;
}
.tsb-fam-mwide .tsb-text { flex: 1 1 auto; }
.tsb-fam-mwide .tsb-logo { width: 40px; height: 40px; font-size: 20px; }
.tsb-fam-mwide .tsb-merchant,
.tsb-fam-mwide .tsb-code { display: none; }
.tsb-fam-mwide .tsb-headline {
	font-size: clamp( 12px, 4.4cqi, 16px );
	white-space: normal;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.tsb-fam-mwide .tsb-sub { font-size: clamp( 10px, 3.4cqi, 12px ); }
.tsb-fam-mwide .tsb-cta { padding: 6px 10px; font-size: clamp( 10px, 3.2cqi, 12px ); }

@media print {
	.tsb { display: none !important; }
}