/* ==========================================================================
   Вътрешни страници — обучение, екип, профили.
   Продължение на дизайн системата от style.css и на секциите от home.css.
   Общото (eyebrow, hb-heading, hb-rule, hb-subhead, бутоните, hb-specs,
   hb-why-card, hb-accordion) НЕ се дублира — идва от другите два файла.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Заглавна лента на вътрешна страница.
   H1 идва от Avada page title bar, затова съдържанието започва от H2.
   Лентата е висока 90 px и стои плътно под менюто — тук ѝ се дава ритъмът
   на началната страница.
   -------------------------------------------------------------------------- */

.page-template-100-width .fusion-page-title-bar {
	border-bottom: 1px solid var(--hb-border);
}

.page-template-100-width .fusion-page-title-bar h1.entry-title {
	font-family: var(--hb-font-head);
	font-weight: 700;
	letter-spacing: -0.01em;
	/* Цветът НЕ се задава тук — идва от overlay блока по-долу (бял върху
	   зеления слой). Ако overlay-ът някога отпадне, тук се връща
	   `color: var(--hb-ink);`. */
}

/* ═══ Overlay върху заглавната лента (Avada page title bar) ═══

   Лентата има фонова снимка от Avada Theme Options
   (`page_title_bg` = uploads/2024/10/2148431496.jpg, 250 px висока).
   Заглавието обаче е зададено тъмно (`page_title_color` = #333333) и върху
   снимка се чете лошо. Слоят отдолу слага зелен градиент от дизайн системата
   между снимката и текста, а текстът става бял.

   ⚠️ Този блок ГО НЯМАШЕ никъде — нито в темата, нито в базата, нито на живия
   сайт. Тук е мястото му: файл на детската тема, значи влиза и във файловите
   архиви. В Customizer-а или в Avada Custom CSS щеше да живее само в базата.
   ═══════════════════════════════════════════════════════════════════════ */

.avada-page-titlebar-wrapper .fusion-page-title-bar {
	position: relative;
	background-position: center center;
	background-size: cover;
}

/* Слоят стои НАД снимката, но ПОД текста. */
.avada-page-titlebar-wrapper .fusion-page-title-bar::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		rgba(20, 78, 70, 0.88) 0%,
		rgba(31, 122, 110, 0.72) 45%,
		rgba(76, 175, 80, 0.50) 100%
	);
}

/* Без това съдържанието остава под слоя и изчезва. */
.avada-page-titlebar-wrapper .fusion-page-title-row,
.avada-page-titlebar-wrapper .fusion-page-title-wrapper {
	position: relative;
	z-index: 1;
}

/* ── Текстът става светъл ── */
.avada-page-titlebar-wrapper .fusion-page-title-captions .entry-title,
.avada-page-titlebar-wrapper .fusion-page-title-captions h1,
.avada-page-titlebar-wrapper .fusion-page-title-captions h2,
.avada-page-titlebar-wrapper .fusion-page-title-captions h3 {
	color: #ffffff !important;
}

.avada-page-titlebar-wrapper .fusion-breadcrumbs,
.avada-page-titlebar-wrapper .fusion-breadcrumbs a,
.avada-page-titlebar-wrapper .fusion-breadcrumbs span,
.avada-page-titlebar-wrapper .fusion-breadcrumb-sep,
.avada-page-titlebar-wrapper .breadcrumb-leaf {
	color: rgba(255, 255, 255, 0.85) !important;
}

.avada-page-titlebar-wrapper .fusion-breadcrumbs a:hover {
	color: #ffffff !important;
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Секционен ритъм — по-широко подзаглавие там, където текстът е носещ
   -------------------------------------------------------------------------- */

.hb-section .hb-subhead-wide p {
	max-width: 900px;
}

/* Изречението, което затваря секция (равносметка под списък). */
.hb-note-strong p {
	font-family: var(--hb-font-body);
	font-size: var(--hb-fs-body);
	line-height: 1.75;
	color: var(--hb-body);
	max-width: 900px;
	margin: 26px 0 0 0;
	padding-left: 18px;
	border-left: 3px solid var(--hb-grad-end);
}

/* По-малкото заглавие вътре в секция (над timeline, над етикетите и подобни).
   Нивото се избира по смисъл, затова правилото важи и за H2, и за H3. */
.hb-section .hb-heading-sm h2,
.hb-section .hb-heading-sm h3 {
	font-family: var(--hb-font-head);
	font-size: 21px !important;
	font-weight: 700;
	line-height: 1.3;
	color: var(--hb-ink);
	margin: 0;
}

/* --------------------------------------------------------------------------
   Въвеждащ блок: текст + изображение
   -------------------------------------------------------------------------- */

.hb-lead-media .fusion-imageframe,
.hb-lead-media .fusion-imageframe a {
	display: block;
	width: 100%;
}

/* Изображенията тук са информационни (плакат с програмата, снимка от
   академията). Оставят се в естественото си съотношение — изрязване с
   object-fit би отрязало текст от плаката. */
.hb-lead-image img {
	border-radius: 12px;
	display: block;
	width: 100%;
	height: auto;
	box-shadow: var(--hb-shadow);
}

@media only screen and (max-width: 800px) {
	.hb-lead-media {
		margin-top: 30px !important;
	}
}

/* --------------------------------------------------------------------------
   „На базата на“ — четири стълба с икона и етикет, без измислен текст.
   Иконите са inline SVG в CSS, за да не влачат FontAwesome заради 4 знака.
   -------------------------------------------------------------------------- */

.hb-pillars {
	margin-top: 34px;
}

.hb-pillars .hb-pillars-lead {
	font-family: var(--hb-font-body);
	font-size: var(--hb-fs-body);
	line-height: 1.75;
	color: var(--hb-body);
	margin: 0 0 18px 0;
}

.hb-pillars ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}

.hb-pillars .hb-pillar {
	position: relative;
	margin: 0;
	padding: 26px 22px 24px;
	background: #fff;
	border: 1px solid var(--hb-border);
	border-radius: 12px;
	box-shadow: var(--hb-shadow);
	font-family: var(--hb-font-head);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--hb-ink);
}

.hb-pillars .hb-pillar::before {
	content: "";
	display: block;
	width: 44px;
	height: 44px;
	margin-bottom: 16px;
	border-radius: 9px;
	background-color: var(--hb-grad-end);
	background-image: var(--hb-grad-diag);
	background-repeat: no-repeat;
	background-position: center;
}

.hb-pillars .hb-pillar::after {
	content: "";
	position: absolute;
	top: 26px;
	left: 22px;
	width: 44px;
	height: 44px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 21px 21px;
}

.hb-pillar-clinic::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2v6a4 4 0 0 0 8 0V2'/%3E%3Cpath d='M10 12v3a5 5 0 0 0 10 0v-2'/%3E%3Ccircle cx='20' cy='11' r='2'/%3E%3C/svg%3E");
}

.hb-pillar-globe::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a15 15 0 0 1 0 18 15 15 0 0 1 0-18Z'/%3E%3C/svg%3E");
}

.hb-pillar-book::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4.5h7a3 3 0 0 1 3 3v12a2.5 2.5 0 0 0-2.5-2.5H2Z'/%3E%3Cpath d='M22 4.5h-7a3 3 0 0 0-3 3v12a2.5 2.5 0 0 1 2.5-2.5H22Z'/%3E%3C/svg%3E");
}

.hb-pillar-hands::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 10 5-10 5L2 8l10-5Z'/%3E%3Cpath d='M6 10.5V16c0 1.7 2.7 3 6 3s6-1.3 6-3v-5.5'/%3E%3Cpath d='M21.5 8.5v5'/%3E%3C/svg%3E");
}

@media only screen and (max-width: 1000px) {
	.hb-pillars ul {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media only screen and (max-width: 640px) {
	.hb-pillars ul {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --------------------------------------------------------------------------
   „Какво ще научите“ — номерирани карти. Номерът е CSS брояч, не текст.
   -------------------------------------------------------------------------- */

.hb-steps {
	margin-top: 34px;
}

.hb-steps ol {
	list-style: none;
	counter-reset: hb-learn;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.hb-steps li {
	counter-increment: hb-learn;
	position: relative;
	margin: 0;
	padding: 26px 24px 24px 24px;
	background: #fff;
	border: 1px solid var(--hb-border);
	border-radius: 12px;
	box-shadow: var(--hb-shadow);
	font-family: var(--hb-font-head);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--hb-ink);
}

.hb-steps li::before {
	content: counter(hb-learn, decimal-leading-zero);
	display: block;
	margin-bottom: 14px;
	font-family: var(--hb-font-head);
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
	color: var(--hb-teal);
	opacity: 0.85;
}

.hb-steps li::after {
	content: "";
	position: absolute;
	left: 24px;
	bottom: 0;
	width: 34px;
	height: 3px;
	border-radius: 2px;
	background: var(--hb-grad);
}

@media only screen and (max-width: 1000px) {
	.hb-steps ol {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media only screen and (max-width: 640px) {
	.hb-steps ol {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --------------------------------------------------------------------------
   „За кого е“ — етикети. Кратките названия не носят описание, затова стоят
   като чипове, а не като карти с празно тяло.
   -------------------------------------------------------------------------- */

.hb-tags {
	margin-top: 30px;
}

.hb-tags ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.hb-tags li {
	margin: 0;
	padding: 13px 22px 13px 44px;
	position: relative;
	background: #fff;
	border: 1px solid var(--hb-border);
	border-radius: var(--hb-radius-pill);
	box-shadow: var(--hb-shadow);
	font-family: var(--hb-font-body);
	font-size: var(--hb-fs-small);
	font-weight: 600;
	line-height: 1.4;
	color: var(--hb-ink);
}

.hb-tags li::before {
	content: "";
	position: absolute;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23009584' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Чеклист „какво включва програмата“ — по-широк вариант на .hb-check
   -------------------------------------------------------------------------- */

.hb-check-wide {
	margin-top: 24px;
}

.hb-check-wide .fusion-li-item-content {
	font-family: var(--hb-font-body);
	font-size: var(--hb-fs-body);
	line-height: 1.6;
	color: var(--hb-body);
	margin-left: 28px !important;
}

.hb-check-wide li {
	margin-bottom: 12px;
}

/* --------------------------------------------------------------------------
   Вертикален timeline — професионалният път по години.

   Avada рисува свързващата линия само след като JavaScript добави класа
   `.fusion-appear` при скрол, и ѝ дава `height: calc(100% + 40px)` спрямо
   .content-box-wrapper (виж fusion-builder/assets/css/shortcodes/
   content-boxes.css:153). При различно дълги стъпки 40 px не стигат до
   следващата точка и линията се накъсва; без JavaScript иконите пък остават
   с `opacity: 0`. Затова тук линията се рисува върху самата колона и не
   зависи нито от скрола, нито от дължината на текста.
   -------------------------------------------------------------------------- */

.hb-vtimeline .content-box-column {
	position: relative;
	padding-bottom: 30px;
	margin-bottom: 0 !important;
}

/* След последната колона Avada оставя празен div, затова `:last-child` не
   хваща — ползва се собственият клас `content-box-column-last`. */
.hb-vtimeline .content-box-column-last {
	padding-bottom: 0;
}

/* Точката е 28×28 px и започва на 15 px от лявия ръб на колоната —
   центърът ѝ е на 29 px. */
.hb-vtimeline .content-box-column::before {
	content: "";
	position: absolute;
	left: 28px;
	top: 33px;
	bottom: -4px;
	width: 2px;
	background: #cfe0dc;
	z-index: 0;
}

.hb-vtimeline .content-box-column-last::before {
	display: none;
}

/* Собствената линия на Avada и зависимостта от анимацията отпадат. */
.hb-vtimeline .content-box-shortcode-timeline-vertical {
	display: none !important;
}

.hb-vtimeline .content-box-column .icon {
	opacity: 1 !important;
	position: relative;
	z-index: 1;
}

.hb-vtimeline .content-box-heading {
	font-family: var(--hb-font-head) !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	color: var(--hb-teal) !important;
	margin: 0 0 6px 0 !important;
}

.hb-vtimeline .content-container,
.hb-vtimeline .content-container p {
	font-family: var(--hb-font-body);
	font-size: var(--hb-fs-small);
	line-height: 1.7;
	color: var(--hb-body);
	max-width: 780px;
}

.hb-vtimeline .content-box-column {
	padding-bottom: 26px;
}

.hb-vtimeline .content-box-column:last-child {
	padding-bottom: 0;
}

/* --------------------------------------------------------------------------
   „Предимства“ — списък с разделители, различен от чиповете и от стълбовете
   -------------------------------------------------------------------------- */

.hb-adv-grid {
	margin-top: 30px;
}

.hb-adv-grid ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 40px;
}

.hb-adv-grid li {
	position: relative;
	margin: 0;
	padding: 18px 0 18px 40px;
	border-bottom: 1px solid var(--hb-border);
	font-family: var(--hb-font-body);
	font-size: var(--hb-fs-body);
	line-height: 1.6;
	color: var(--hb-ink);
}

.hb-adv-grid li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 17px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-image: var(--hb-grad-diag);
	background-repeat: no-repeat;
}

.hb-adv-grid li::after {
	content: "";
	position: absolute;
	left: 0;
	top: 17px;
	width: 24px;
	height: 24px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 13px 13px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

@media only screen and (max-width: 800px) {
	.hb-adv-grid ul {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --------------------------------------------------------------------------
   Финален CTA блок
   -------------------------------------------------------------------------- */

.hb-cta-box .fusion-column-wrapper > .fusion-title,
.hb-cta-box .fusion-column-wrapper > .fusion-text {
	flex: 0 0 100%;
	width: 100%;
}

.hb-cta-box .fusion-column-wrapper > div:has(> .fusion-button) {
	flex: 0 0 auto;
}

/* Медицинската забележка стои под бутоните и заема цял ред. */
.hb-cta-box .fusion-column-wrapper > .fusion-text.hb-medical-note {
	flex: 0 0 100%;
	width: 100%;
	margin-top: 26px;
}

.hb-cta-box .hb-subhead p {
	max-width: 820px;
	margin-bottom: 14px;
}

.hb-cta-box .hb-subhead p:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   ЕКИП — принципи на работа (три карти с икона, етикет и изречение)
   -------------------------------------------------------------------------- */

.hb-team-values {
	margin-top: 34px;
}

.hb-team-values ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.hb-team-values .hb-value {
	position: relative;
	margin: 0;
	padding: 28px 26px 26px;
	background: #fff;
	border: 1px solid var(--hb-border);
	border-radius: 12px;
	box-shadow: var(--hb-shadow);
}

.hb-team-values .hb-value::before {
	content: "";
	display: block;
	width: 44px;
	height: 44px;
	margin-bottom: 16px;
	border-radius: 9px;
	background-image: var(--hb-grad-diag);
}

.hb-team-values .hb-value::after {
	content: "";
	position: absolute;
	top: 28px;
	left: 26px;
	width: 44px;
	height: 44px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 21px 21px;
}

.hb-value-award::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='5.5'/%3E%3Cpath d='m8 13.5-1.5 8L12 19l5.5 2.5L16 13.5'/%3E%3C/svg%3E");
}

.hb-value-heart::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.4 5.6a5 5 0 0 0-7.1 0L12 6.9l-1.3-1.3a5 5 0 1 0-7.1 7.1L12 21l8.4-8.3a5 5 0 0 0 0-7.1Z'/%3E%3C/svg%3E");
}

.hb-value-search::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m20 20-4.5-4.5'/%3E%3C/svg%3E");
}

.hb-team-values .hb-value strong {
	display: block;
	margin-bottom: 8px;
	font-family: var(--hb-font-head);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--hb-ink);
}

.hb-team-values .hb-value span {
	display: block;
	font-family: var(--hb-font-body);
	font-size: 14px;
	line-height: 1.7;
	color: var(--hb-body);
}

@media only screen and (max-width: 1000px) {
	.hb-team-values ul {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --------------------------------------------------------------------------
   ЕКИП — редовете на отделните специалисти (снимка + биография)
   -------------------------------------------------------------------------- */

/* Колоната със снимка е flex контейнер, а при `align_self="flex-start"`
   обвивката ѝ се свива по напречната ос до ширината на съдържанието —
   снимката излиза по-тясна от колоната. Двете нива се разтягат изрично. */
.hb-member-media > .fusion-column-wrapper,
.hb-profile-media > .fusion-column-wrapper,
.hb-lead-media > .fusion-column-wrapper {
	align-self: stretch;
	width: 100%;
}

/* `flex: 0 0 auto`, не `flex: 0 0 100%`. Обвивката е с
   `flex-direction: column`, тоест главната ос е вертикалната и `flex-basis`
   се мери по ВИСОЧИНАТА: и снимката, и надписът под нея получаваха височината
   на цялата колона, а вторият излизаше 318 px извън нея. Не си личеше, защото
   съседната текстова колона е по-висока и поемаше разликата — но височината
   на колоната беше грешна. `width: 100%` върши същата работа по напречната
   ос и в двете посоки. Хваща се от `_local/qa-overlap.js`. */
.hb-member-media .fusion-column-wrapper > div,
.hb-profile-media .fusion-column-wrapper > div,
.hb-lead-media .fusion-column-wrapper > div {
	flex: 0 0 auto;
	width: 100%;
}

.hb-member-media .fusion-imageframe,
.hb-member-media .fusion-imageframe a {
	display: block;
	width: 100%;
}

.hb-member-photo img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 12px;
	box-shadow: var(--hb-shadow);
	background: var(--hb-surface-tint);
}

.hb-member .hb-member-name h2 {
	margin-bottom: 0;
}

.hb-member .hb-eyebrow {
	order: -1;
}

.hb-member-cv {
	margin-top: 22px;
}

.hb-member-cv ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hb-member-cv li {
	position: relative;
	margin: 0 0 14px 0;
	padding: 0 0 14px 26px;
	border-bottom: 1px solid var(--hb-border);
	font-family: var(--hb-font-body);
	font-size: var(--hb-fs-small);
	line-height: 1.7;
	color: var(--hb-body);
}

.hb-member-cv li:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

.hb-member-cv li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background-image: var(--hb-grad-diag);
}

.hb-member-cv li strong {
	color: var(--hb-ink);
	font-weight: 700;
}

/* Двуколонна биография (образование / опит) */
.hb-member-cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 30px;
}

.hb-member-cols h3 {
	font-family: var(--hb-font-head);
	font-size: 17px !important;
	font-weight: 700;
	line-height: 1.3;
	color: var(--hb-teal);
	margin: 0 0 14px 0;
}

.hb-member-cols ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hb-member-cols li {
	position: relative;
	margin: 0 0 10px 0;
	padding-left: 26px;
	font-family: var(--hb-font-body);
	font-size: var(--hb-fs-small);
	line-height: 1.7;
	color: var(--hb-body);
}

.hb-member-cols li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background-image: var(--hb-grad-diag);
}

@media only screen and (max-width: 800px) {
	.hb-member-cols {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}
}

/* Връзките под всеки специалист */
.hb-member-links p {
	margin: 26px 0 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--hb-border);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 22px;
}

.hb-member-links a {
	font-family: var(--hb-font-body);
	font-size: var(--hb-fs-small);
	font-weight: 600;
	color: var(--hb-teal);
	border-bottom: 1px solid transparent;
}

.hb-member-links a:hover {
	color: var(--hb-teal-dark);
	border-bottom-color: currentColor;
}

/* Първата връзка е основното действие — рисува се като бутон. */
.hb-member-links a.hb-member-primary {
	background: var(--hb-grad);
	color: #fff;
	border: 0;
	border-radius: var(--hb-radius-sm);
	padding: 12px 22px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 12px;
	box-shadow: 0 2px 8px rgba(123, 179, 177, 0.32);
	transition: filter 0.2s ease, box-shadow 0.2s ease;
}

.hb-member-links a.hb-member-primary:hover {
	filter: brightness(1.05);
	box-shadow: 0 6px 16px rgba(123, 179, 177, 0.42);
	color: #fff;
}

/* Прагът е 640 px, а не 800 — това е точката, в която Avada подрежда
   колоните една под друга (`type_small="1_1"`). При 800 капачето би стеснило
   снимката, докато колоните още стоят една до друга. */
@media only screen and (max-width: 640px) {
	.hb-member-media {
		margin-bottom: 26px !important;
		max-width: 220px;
	}
}

/* --------------------------------------------------------------------------
   ПРОФИЛНИ СТРАНИЦИ — /ekip/<специалист>/
   -------------------------------------------------------------------------- */

.hb-profile-media .fusion-imageframe,
.hb-profile-media .fusion-imageframe a {
	display: block;
	width: 100%;
}

.hb-profile-photo img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 12px;
	box-shadow: var(--hb-shadow);
	background: var(--hb-surface-tint);
}

/* Карти „Образование“, „Опит“, „Направления“ */
.hb-profile-card {
	height: 100%;
}

.hb-profile-card-title h2,
.hb-profile-card-title h3 {
	font-family: var(--hb-font-head);
	font-size: 19px !important;
	font-weight: 700;
	line-height: 1.3;
	color: var(--hb-teal) !important;
	margin: 0;
}

.hb-profile-list ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hb-profile-list li {
	position: relative;
	margin: 0 0 12px 0;
	padding-left: 26px;
	font-family: var(--hb-font-body);
	font-size: var(--hb-fs-small);
	line-height: 1.7;
	color: var(--hb-body);
}

.hb-profile-list li:last-child {
	margin-bottom: 0;
}

.hb-profile-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background-image: var(--hb-grad-diag);
}

/* Направленията на работа са кратки етикети — стоят като чипове. */
.hb-profile-fields ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.hb-profile-fields li {
	margin: 0;
	padding: 10px 18px;
	background: var(--hb-surface-tint);
	border-radius: var(--hb-radius-pill);
	font-family: var(--hb-font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--hb-teal-dark);
}

@media only screen and (max-width: 800px) {
	/* `height: 100%` изравнява двете карти, докато стоят една до друга. Щом се
	   подредят една под друга обаче, всяка взима 100 % от височината на РЕДА —
	   а редът е висок колкото по-дългата карта. Резултатът при 375 px беше две
	   карти по 1047 px: първата с 400 px празно поле под текста, втората
	   изтеглена върху следващата секция. Заварено е — не идва от преработката,
	   но се вижда само на телефон, затова не е било забелязвано. */
	.hb-profile-card {
		height: auto;
		margin-bottom: 20px !important;
	}
}

@media only screen and (max-width: 640px) {
	.hb-profile-media {
		margin-bottom: 26px !important;
		max-width: 220px;
	}
}

/* --------------------------------------------------------------------------
   „Вижте още“ — контекстните връзки в края на вътрешните страници
   -------------------------------------------------------------------------- */

.hb-related {
	font-family: var(--hb-font-body);
	font-size: var(--hb-fs-small);
	line-height: 1.8;
	color: var(--hb-muted);
	margin: 0;
	padding-top: 22px;
	border-top: 1px solid var(--hb-border);
}

.hb-related a {
	color: var(--hb-teal);
	font-weight: 600;
	border-bottom: 1px solid transparent;
}

.hb-related a:hover {
	color: var(--hb-teal-dark);
	border-bottom-color: currentColor;
}

/* ==========================================================================
   МОБИЛЕН ИЗГЛЕД — Фаза 17

   Компонентите по-долу са дефинирани в този файл, затова и мобилните им
   поправки живеят тук. Всичко е в @media заявка — десктопът не се пипа.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. „По темата:“ / „Вижте още:“ — редът с контекстните връзки.

   Това е един абзац с разделители „·“ между връзките. При 315 px се разкъсва
   на три реда и пренасянето пада НАСРЕД името на връзка („Обучение по
   класическа / хомеопатия“), а разделителите остават да висят в края на реда.
   Резултатът е ситен зигзаг без начало и край — точно това клиентът описа.

   `display: flex` превръща всяка връзка и всеки разделител в отделен елемент,
   който не се дели. Връзките се пренасят цели, а разделителят винаги стои
   между две от тях.
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 640px) {
	.hb-related {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		column-gap: 7px;
		row-gap: 10px;
		line-height: 1.5;
	}

	/* Целта за пръст: връзките са на един ред една до друга, затова се
	   разширяват по вертикала, без да местят текста (същият похват като
	   `.hb-link-arrow` в style.css). */
	.hb-related a {
		display: inline-block;
		padding: 6px 0;
		margin: -6px 0;
	}
}

/* --------------------------------------------------------------------------
   2. НОМЕРИРАНИ КАРТИ (`.hb-steps`) и СТЪЛБОВЕ (`.hb-pillars`).

   И двата компонента са замислени за решетка от три-четири колони, където
   номерът/иконата стои НАД етикета. На телефон колоната е една и всяка карта
   заема 110–150 px, за да покаже един-два реда текст — цял екран за пет
   кратки етикета. Клиентът го описа като „високи и празни“.

   На телефон номерът и иконата минават ВЛЯВО от текста. Височината пада
   наполовина, а етапите се четат като списък, какъвто и са.
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 640px) {
	.hb-steps ol {
		gap: 12px;
	}

	.hb-steps li {
		display: flex;
		align-items: center;
		gap: 16px;
		padding: 16px 20px 18px 20px;
	}

	.hb-steps li::before {
		flex: 0 0 auto;
		margin-bottom: 0;
		font-size: 24px;
	}

	.hb-pillars ul {
		gap: 12px;
	}

	.hb-pillars .hb-pillar {
		display: flex;
		align-items: center;
		gap: 16px;
		padding: 16px 20px;
	}

	.hb-pillars .hb-pillar::before {
		flex: 0 0 auto;
		margin-bottom: 0;
	}

	/* Иконата е абсолютно позиционирана върху градиентното квадратче, затова
	   следва новите отстъпи и се центрира вертикално заедно с него. */
	.hb-pillars .hb-pillar::after {
		top: 50%;
		left: 20px;
		transform: translateY(-50%);
	}
}

/* --------------------------------------------------------------------------
   3. ДВЕТЕ КАРТИ „Образование“ / „Опит“ в профилите и биографиите — при 315 px
   32-те px вътрешен отстъп изяждат по 20 % от реда. Свалят се, без да се
   пипа десктопът.
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 640px) {
	.hb-profile-fields li {
		padding: 9px 16px;
	}

	.hb-tags li {
		padding: 11px 18px 11px 40px;
	}

	.hb-tags li::before {
		left: 15px;
	}

	/* Връзките под всеки специалист стоят на един ред с бутона; на телефон
	   бутонът е на цяла ширина, затова редът се подрежда в колона. */
	.hb-member-links a.hb-member-primary {
		display: block;
		width: 100%;
		text-align: center;
	}
}

/* --------------------------------------------------------------------------
   Фаза 21 — блокът „Открийте се в едно от трите“ на сравнителната страница.

   Репликата и връзката към нивото са в един текстов блок, за да не се разчете
   връзката като заглавие на следващата реплика. Тук само се уплътнява двойката
   и се раздалечават двойките помежду им.
   -------------------------------------------------------------------------- */
.hb-pick {
	margin-bottom: 26px;
}

.hb-pick .hb-pick-q {
	font-family: var(--hb-font-head);
	font-size: var(--hb-fs-h3);
	font-weight: 600;
	line-height: 1.4;
	color: var(--hb-ink);
	margin: 0 0 6px;
}

.hb-pick p + p {
	margin: 0;
}

/* --------------------------------------------------------------------------
   ФАЗА 22.6 — менюто в sidebar-а (Sliding Bar Widget 1)

   Показва се на /statii/, /novini/, /czeni/ и по единичните публикации.
   Трите обучения са пунктове от ПЪРВО ниво, а не подменю: вертикалният widget
   на Avada приема само `hover` и `click`, и двете скриват подпунктовете — а
   искането е точно те да се виждат. Затова принадлежността им се показва с
   отстъп и по-тих цвят, а не със структура, която ги крие.
   -------------------------------------------------------------------------- */

.fusion-vertical-menu-widget .menu-item.hb-sub > a {
	position: relative;   /* без него абсолютното тире долу няма спрямо какво */
	padding-left: 30px !important;
	font-size: 14px;
	color: var(--hb-body);
}

.fusion-vertical-menu-widget .menu-item.hb-sub > a::before {
	content: "—";
	position: absolute;
	left: 14px;
	color: var(--hb-teal);
	opacity: 0.55;
}

.fusion-vertical-menu-widget .menu-item.hb-sub > a:hover {
	color: var(--hb-teal);
}

/* --------------------------------------------------------------------------
   „За центъра“ — чертичката да не опира в следващото заглавие

   `.hb-rule::after` е тънката градиентна черта, която затваря уводния абзац на
   всяка секция. Навсякъде другаде под нея остава въздух: 32 px на `/uslugi/`,
   30 px на `/obuchenie-po-homeopatia/`. В двете секции на „За центъра“
   (`hb-zc-directions`, `hb-zc-partners`) следващият блок тръгва на **0 px** и
   чертата се чете като подчертаване на заглавието „Консултации“, вместо като
   край на абзаца над него.

   Измерено при 1920 px: `.hb-rule` bottom → следващ блок top = 0,0 px.

   ⚠️ Отстъпът НЕ бива да се дава на `::after`. Псевдоелементът е блок ВЪТРЕ в
   `.hb-rule`, долният му margin се слива с долния ръб на родителя и измерването
   пак дава 0. Обвивката на колоната е `flex-direction: column`, а там margin-ите
   на елементите не се сливат — затова отстъпът стои на самия `.hb-rule`.
   -------------------------------------------------------------------------- */

.hb-zc-directions .hb-rule,
.hb-zc-partners .hb-rule {
	margin-bottom: 30px;
}

/* Същото и в шапката на профила `/ekip/d-r-daniel-rusev/`: там чертата опира в
   бутона „Запазете час“ и се чете като част от него. Обвивката тук е
   `content_layout="row"`, тоест обвит flex ред — долният отстъп на елемента
   влиза в височината на неговия ред и разстоянието се получава. */
.hb-profile-head .hb-rule {
	margin-bottom: 30px;
}

/* --------------------------------------------------------------------------
   Фаза 25 — многоабзацен текст в секция.

   `.hb-section .hb-subhead p` е с `margin-bottom: 0`, защото подзаглавието е
   ЕДИН абзац. Клиентските текстове от 03.09.2026 са по два и три абзаца в
   секция и със същия клас се слепват в стена без разстояние между тях.
   `.hb-prose` е същата типография с върнат долен отстъп; последният абзац
   няма отстъп, за да не разчупва подравняването със следващия елемент.

   Живее в inner.css, а не в kursove.css/uslugi.css, защото се ползва и от
   двете страници — копие в двата файла е точно разминаването, което Фаза 23
   вече хвана веднъж.
   -------------------------------------------------------------------------- */

.hb-section .hb-prose p {
	font-family: var(--hb-font-body);
	font-size: var(--hb-fs-body);
	line-height: 1.75;
	color: var(--hb-body);
	max-width: 900px;
	margin: 0 0 18px 0;
}

.hb-section .hb-prose p:last-child {
	margin-bottom: 0;
}

/* Списъкът и затварящото изречение под водещ абзац имат нужда от въздух над
   себе си — водещият абзац е с `margin-bottom: 0`. */
.hb-section .hb-prose {
	margin-top: 22px;
}