.bl-tabs-head { margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); max-width: 760px; }
.bl-text-center .bl-tabs-head { margin-inline: auto; }

.bl-tabs-shell { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }

/* ---------- навигация табов ---------- */

.bl-tabs-nav { display: flex; gap: .5rem; flex-wrap: wrap; }
.bl-tabs--tabs-h .bl-tabs-nav { border-bottom: var(--bl-border-width, 1px) solid var(--bl-border); padding-bottom: .75rem; }
.bl-tabs--tabs-v .bl-tabs-nav { flex-direction: column; flex-wrap: nowrap; }

.bl-tabs-tab {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	max-width: 100%;
	padding: .7em 1.15em;
	border: var(--bl-border-width, 1px) solid var(--bl-border);
	border-radius: var(--bl-radius-pill, 9999px);
	background: var(--bl-surface);
	color: inherit;
	font: inherit;
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
	transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.bl-tabs-tab__label { min-width: 0; overflow-wrap: anywhere; }
.bl-tabs-tab:hover { border-color: var(--bl-accent); }
.bl-tabs-tab:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 2px; }
.bl-tabs-tab.is-active {
	background: var(--bl-accent);
	border-color: var(--bl-accent);
	color: var(--bl-accent-contrast);
}
.bl-tabs--tabs-v .bl-tabs-tab { border-radius: var(--bl-card-radius); width: 100%; box-sizing: border-box; }

.bl-tabs-icon { width: 22px; flex: none; border-radius: 0; box-shadow: none; }
.bl-tabs-num {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 1.55em;
	height: 1.55em;
	border-radius: 50%;
	font-size: .8125em;
	font-weight: 700;
	background: color-mix(in srgb, var(--bl-accent) 16%, transparent);
	color: var(--bl-accent);
}
.bl-tabs-tab.is-active .bl-tabs-num {
	background: color-mix(in srgb, var(--bl-accent-contrast) 25%, transparent);
	color: inherit;
}

/* ---------- заголовки-переключатели (аккордеон и мобильные табы) ---------- */

.bl-tabs-head-row { margin: 0; font-size: inherit; font-weight: inherit; }

.bl-tabs-toggle {
	display: flex;
	align-items: center;
	gap: .7rem;
	box-sizing: border-box;
	width: 100%;
	padding: 1.05em 1.15em;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 1.0625rem;
	font-weight: 650;
	line-height: 1.35;
	text-align: left;
	cursor: pointer;
}
.bl-tabs-toggle:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: -2px; }
.bl-tabs-toggle__label { flex: 1; min-width: 0; overflow-wrap: anywhere; }

.bl-tabs-chevron {
	flex: none;
	width: .6em;
	height: .6em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-.12em, -.12em);
	opacity: .55;
	transition: transform .2s ease;
}
.bl-tabs-item.is-active .bl-tabs-chevron { transform: rotate(-135deg) translate(-.12em, -.12em); }

/* ---------- панели ---------- */

.bl-tabs-panels { display: grid; gap: .75rem; }
.bl-tabs--tabs-h .bl-tabs-shell.is-enhanced .bl-tabs-panels,
.bl-tabs--tabs-v .bl-tabs-shell.is-enhanced .bl-tabs-panels { gap: 0; }

.bl-tabs-item {
	border: var(--bl-border-width, 1px) solid var(--bl-border);
	border-radius: var(--bl-card-radius);
	background: var(--bl-surface);
	overflow: hidden;
	transition: border-color .2s ease;
}
.bl-tabs-item.is-active { border-color: color-mix(in srgb, var(--bl-accent) 45%, var(--bl-border)); }

.bl-tabs-panel[hidden] { display: none; }
.bl-tabs-panel:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: -2px; }
.bl-tabs-panel__inner { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); padding: 0 1.15rem 1.35rem; }
.bl-tabs-panel__text > :first-child { margin-top: 0; }
.bl-tabs-panel__text > :last-child { margin-bottom: 0; }
.bl-tabs-panel__text { min-width: 0; line-height: 1.65; overflow-wrap: anywhere; }
.bl-tabs-panel__text a:not(.bl-btn) { color: var(--bl-accent); }
.bl-tabs-panel__cta { margin-top: 1.25rem; }

@media (min-width: 700px) {
	.bl-tabs-panel__inner:has(.bl-tabs-panel__media) { grid-template-columns: minmax(0, 1fr) minmax(220px, 38%); align-items: start; }
}

/* ---------- режим табов: десктоп ---------- */

@media (min-width: 768px) {
	.bl-tabs--tabs-h .bl-tabs-shell.is-enhanced .bl-tabs-head-row,
	.bl-tabs--tabs-v .bl-tabs-shell.is-enhanced .bl-tabs-head-row { display: none; }

	/* Заголовки скрыты — значит от неактивного пункта осталась бы пустая рамка. */
	.bl-tabs--tabs-h .bl-tabs-shell.is-enhanced .bl-tabs-item:not(.is-active),
	.bl-tabs--tabs-v .bl-tabs-shell.is-enhanced .bl-tabs-item:not(.is-active) { display: none; }

	.bl-tabs--tabs-h .bl-tabs-shell.is-enhanced .bl-tabs-panel__inner,
	.bl-tabs--tabs-v .bl-tabs-shell.is-enhanced .bl-tabs-panel__inner { padding: clamp(1.35rem, 3vw, 2.25rem); }
}

@media (min-width: 900px) {
	.bl-tabs--tabs-v .bl-tabs-shell { grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); align-items: start; }
}

/* На телефоне горизонтальные табы работают как аккордеон: список вкладок
   прячем, остаются заголовки внутри пунктов. */
@media (max-width: 767px) {
	.bl-tabs-nav { display: none; }
}