/* beforeafter.css — Version: 1.9.0
   „Преди и след“: кадрите на случая, визитката на лекаря, кутията с
   неговите случаи в CV-то и картата в архива.

   Кадрите са готови монтажи — всеки носи преди и след заедно, с
   надписа и марката на лекаря. Затова не се режат и не се вкарват в
   квадрат: показват се цели, в своето съотношение. */

/* ── кадрите на случая ──────────────────────────────────────────────── */

.mk-ba-shots {
	position: relative !important;
	margin: 0 0 30px !important;
}

/* Решетката е наша. Masonry на Responsive Lightbox не се ползва: той
   регистрира настройките си под друг номер от този на галерията и
   скриптът не тръгва. Кадрите така или иначе са с еднаква пропорция. */
.mk-ba-frames .rl-gallery {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
	gap: 16px !important;
	margin: 0 !important;
	padding: 0 !important;
}

.mk-ba-frames .rl-gallery-item {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}

.mk-ba-frames .rl-grid-sizer,
.mk-ba-frames .rl-gutter-sizer {
	display: none !important;
}

.mk-ba-frames .rl-gallery-item-content a {
	display: block !important;
	border-radius: 4px !important;
	overflow: hidden !important;
	background: #F4EFF8 !important;
}

.mk-ba-frames .rl-gallery-item img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	border: 0 !important;
	transition: filter .3s ease, transform .3s ease !important;
}

/* ── воалът ─────────────────────────────────────────────────────────── */

/* Пада наведнъж, върху целия набор: веднъж разбрал какво отваря,
   посетителят няма нужда да го потвърждава за всеки кадър.
   Размазването е върху изображенията, не върху полето — иначе и
   надписът отгоре става нечетим. Мащабът е заради ръбовете:
   размазаното изображение изсветлява по краищата. */
.mk-ba-shots.is-veiled .mk-ba-frames {
	pointer-events: none !important;
}

.mk-ba-shots.is-veiled .mk-ba-frames .rl-gallery-item img {
	/* Първоначално 18px, после наполовина, после с още една пета:
	   воалът скрива достатъчно, без да заличава какво има отдолу. */
	filter: blur(7.2px) !important;
	transform: scale(1.06) !important;
}

/* Полето е високо — центриран воал би паднал извън екрана. Затова
   стои отгоре и се залепва, докато набавеното се превърта. */
.mk-ba-veil {
	position: sticky !important;
	top: 100px !important;
	z-index: 3 !important;
	margin: 0 0 20px !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 14px !important;
	padding: 0 20px !important;
	text-align: center !important;
}

.mk-ba-shots:not(.is-veiled) .mk-ba-veil {
	display: none !important;
}

.mk-ba-reveal {
	padding: 11px 22px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: #fff !important;
	background: rgba(54, 42, 75, .92) !important;
	border: 0 !important;
	border-radius: 999px !important;
	cursor: pointer !important;
	transition: background .16s ease !important;
}

.mk-ba-reveal:hover,
.mk-ba-reveal:focus-visible {
	background: #FF1A4B !important;
}

.mk-ba-warn {
	margin: 0 !important;
	padding: 12px 18px !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	font-weight: 600 !important;
	color: #362A4B !important;
	background: rgba(255, 255, 255, .94) !important;
	border: 1px solid #EEE6F5 !important;
	border-radius: 4px !important;
	box-shadow: 0 4px 16px rgba(54, 42, 75, .12) !important;
}

.mk-ba-note {
	margin: 16px 0 0 !important;
	font-size: 14px !important;
	line-height: 1.6 !important;
	color: #6B5D82 !important;
}

.mk-ba-gal-h .elementor-heading-title {
	font-size: 22px !important;
	font-weight: 700 !important;
	color: #362A4B !important;
	margin: 0 0 16px !important;
}

/* ── визитката на лекаря ────────────────────────────────────────────── */

.mk-ba-doc {
	display: flex !important;
	align-items: center !important;
	gap: 18px !important;
	margin: 30px 0 !important;
	padding: 18px !important;
	text-decoration: none !important;
	background: #F8F5FB !important;
	border: 1px solid #EEE6F5 !important;
	border-radius: 4px !important;
	transition: border-color .16s ease, box-shadow .16s ease !important;
}

.mk-ba-doc:hover,
.mk-ba-doc:focus-visible {
	border-color: #C9BBD8 !important;
	box-shadow: 0 6px 18px rgba(54, 42, 75, .10) !important;
}

.mk-ba-doc-img {
	flex: 0 0 96px !important;
	width: 96px !important;
}

.mk-ba-doc-img img {
	display: block !important;
	width: 96px !important;
	height: 96px !important;
	object-fit: cover !important;
	object-position: 50% 20% !important;
	border-radius: 50% !important;
	border: 6px solid #fff !important;
	box-sizing: content-box !important;
}

.mk-ba-doc-body {
	display: flex !important;
	flex-direction: column !important;
	gap: 2px !important;
}

.mk-ba-doc-eyebrow {
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: .6px !important;
	text-transform: uppercase !important;
	color: #F37B1F !important;
}

.mk-ba-doc-name {
	font-size: 18px !important;
	font-weight: 700 !important;
	color: #362A4B !important;
}

.mk-ba-doc-spec {
	font-size: 14px !important;
	color: #6B5D82 !important;
}

.mk-ba-doc-more {
	margin-top: 6px !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	color: #FF1A4B !important;
}

/* ── кутията в CV-то на специалиста ─────────────────────────────────── */

/* Самата кутия: бяла, очертана с косъм в лилавото, с което картите отвръщат
   на посочване (`#DED0EA`). Отстоянията идват от `.mk-dr-box` в
   `singles.css`; заглавието ѝ носи `mk-dr-h2`, както „Биография“ и
   останалите модули. */
.mk-dr-ba-box {
	background: #fff !important;
	border: 1px solid #DED0EA !important;
}

/* Три в ред на широк екран. `auto-fill` даваше четири и повече и картите
   ставаха миниатюрни. */
.mk-ba-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 16px !important;
}

/* Картата е умалена архивна карта. Спрямо `.mk-arch-card` в `archive.css`
   се менят само размерите: снимка 220 → 140px, заглавие 17 → 15px,
   отстояния 14/24/24 → 10/14/14. Белият фон, рамката, ъгловото квадратче и
   повдигането при посочване остават същите — едно и също съдържание се
   показва по един и същ начин навсякъде. */
.mk-ba-item {
	position: relative !important;
	isolation: isolate !important;
	display: block !important;
	text-decoration: none !important;
	background: #fff !important;
	border: 1px solid #EEE6F5 !important;
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}

.mk-ba-item:hover {
	transform: translateY(-3px) !important;
	box-shadow: 0 9px 20px rgba(54, 42, 75, .14) !important;
	border-color: #DED0EA !important;
}

/* Квадратчето в горния ляв ъгъл — същият жест като при архивните карти. */
.mk-ba-item::before {
	content: "" !important;
	position: absolute !important;
	display: block !important;
	top: -4px !important;
	left: -4px !important;
	width: 8px !important;
	height: 8px !important;
	background: #69528E !important;
	z-index: 1 !important;
	pointer-events: none !important;
	transform-origin: center center !important;
	transform: scale(1) !important;
	transition: transform .3s cubic-bezier(.22, .85, .3, 1) !important;
}

.mk-ba-item:hover::before {
	transform: scale(.125) translate(-4px, -4px) !important;
}

.mk-ba-item-img {
	display: block !important;
	overflow: hidden !important;
	border-radius: 0 !important;
	background: #F4EFF8 !important;
	position: relative !important;
	z-index: 2 !important;
}

/* Кадърът е цял, в собствените си пропорции — както в архива
   (`.mk-arch-card.is-beforeafter .mk-arch-img img`). Всеки монтаж носи преди
   и след заедно, с надписа и марката на лекаря; изрязан по фиксирана
   височина, той губи едната половина или надписа. Тук само се смалява до
   ширината на колоната. */
.mk-ba-item-img img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	max-height: none !important;
	min-height: 0 !important;
	transition: transform .2s ease !important;
}

.mk-ba-item:hover .mk-ba-item-img img {
	transform: scale(1.04) !important;
}

.mk-ba-item-title {
	display: block !important;
	margin: 0 !important;
	padding: 10px 14px 14px !important;
	font-size: 15px !important;
	line-height: 1.35 !important;
	font-weight: 400 !important;
	color: #362A4B !important;
}

.mk-ba-item:hover .mk-ba-item-title {
	color: #69528E !important;
}

/* Прелистване вътре в кутията — случаите на един лекар няма да са
   много, но шестица на екран стига. */
.mk-ba-pager {
	display: flex !important;
	gap: 6px !important;
	margin-top: 18px !important;
}

.mk-ba-page {
	min-width: 34px !important;
	height: 34px !important;
	padding: 0 10px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: #69528E !important;
	background: #fff !important;
	border: 1px solid #E7DFF0 !important;
	border-radius: 3px !important;
	cursor: pointer !important;
	transition: background .16s ease, color .16s ease, border-color .16s ease !important;
}

.mk-ba-page:hover {
	border-color: #69528E !important;
}

.mk-ba-page.on {
	color: #fff !important;
	background: #69528E !important;
	border-color: #69528E !important;
}

/* ── картата в архива ───────────────────────────────────────────────── */

/* Кадрите варират по пропорция. Останалите архиви режат изображението
   до обща височина, за да върви редът; тук това би отрязало „след“-а
   от монтажа. Затова кадърът остава цял и редът се подрежда от
   masonry. */
.mk-arch-card.is-beforeafter .mk-arch-img img {
	width: 100% !important;
	height: auto !important;
	max-height: none !important;
	min-height: 0 !important;
	object-fit: contain !important;
	aspect-ratio: auto !important;
	display: block !important;
}

/* Тялото на картата е като при останалите; само резюмето не държи
   обща височина, иначе под различно високите кадри остават дупки. */
.mk-arch-card.is-beforeafter .mk-arch-exc {
	min-height: 0 !important;
}

/* ── заключението ───────────────────────────────────────────────────── */

/* Сертификатът, поканата и бележката са едни и същи за всеки случай и
   затова стоят в шаблона, не в текста. Тук получават вид на притурка:
   отделени с линия, по-дребни от същината над тях. */
.mk-ba-cert {
	margin-top: 30px !important;
	padding-top: 24px !important;
	border-top: 1px solid #EEE6F5 !important;
}

.mk-ba-cert,
.mk-ba-outro-t {
	font-size: 15px !important;
	line-height: 1.65 !important;
	color: #6B5D82 !important;
}

.mk-ba-outro-h .elementor-heading-title {
	font-size: 19px !important;
	font-weight: 700 !important;
	color: #362A4B !important;
	margin: 22px 0 10px !important;
}

.mk-ba-disclaim {
	margin-top: 14px !important;
	font-size: 13px !important;
	color: #8A7F9C !important;
}

/* ── превюто на чувствителния случай ────────────────────────────────── */

/* Знакът `mk-ba-veiled` идва от `post_class` и стои на всеки елемент на
   цикъла. В кутията на специалиста шорткодът го слага сам — там картите не
   минават през loop шаблон. Кадърът, който на страницата на случая е
   забулен, беше открит в картата и в страничния модул — тук губи същото.
   Воалът се вдига само вътре в случая; оттук се влиза с клик. */
/* Знакът `mk-ba-veiled` идва от `post_class` и затова стои на две различни
   места: на всяка карта в цикъл и на обвивката на самата единична страница.
   Второто е капан — общ селектор под него хваща цялата страница, тоест и
   съдържание от съвсем друг тип. Затова тук няма общо правило: всеки
   модул, който показва кадър, има свое, по собствения си клас.

   Къде се показва кадър на случай:
     1. `.mk-ba-gal`      — кадрите на самата страница (по `is-veiled`, горе)
     2. `.mk-hl-avatar`   — превюто в заглавния блок на страницата
     3. `.mk-side-img`    — превюто в страничния модул „Последно добавени“
     4. `.mk-arch-img`    — картата в архива
     5. `.mk-ba-item-img` — картата в кутията на специалиста

   Всичко извън този списък — снимки на събития, лекари, болници — не се
   размазва никога, каквото и да стои над него. */

/* 2. Превюто в заглавния блок. Важи само когато знакът е на корена, тоест
      когато самата страница е на чувствителен случай. */
.mk-ba-veiled.elementor-location-single .mk-hl-avatar {
	overflow: hidden !important;
}

.mk-ba-veiled.elementor-location-single .mk-hl-avatar img {
	filter: blur(5.6px) !important;
	transform: scale(1.08) !important;
}

/* 3 и 4. Страничният модул и архивната карта. Коренът се изключва изрично —
      иначе правилото пада върху всяка карта в страницата. */
.mk-ba-veiled:not(.elementor-location-single) .mk-side-img,
.mk-ba-veiled:not(.elementor-location-single) .mk-arch-img {
	overflow: hidden !important;
}

.mk-ba-veiled:not(.elementor-location-single) .mk-side-img img,
.mk-ba-veiled:not(.elementor-location-single) .mk-arch-img img {
	filter: blur(5.6px) !important;
	transform: scale(1.08) !important;
}

/* 5. Кутията в профила на специалиста. Знакът стои на самата карта —
      шорткодът го слага, защото тези карти не минават през loop шаблон. */
.mk-ba-item.mk-ba-veiled .mk-ba-item-img {
	overflow: hidden !important;
}

.mk-ba-item.mk-ba-veiled .mk-ba-item-img img {
	filter: blur(5.6px) !important;
	transform: scale(1.08) !important;
}

/* 6. Резултатите на глобалната търсачка. Там картата е на джаджата за
      публикации на Elementor и кадърът стои в `.elementor-post__thumbnail`,
      не в някой от нашите класове. Знакът е на самата карта (`article`),
      затова коренът пак се изключва. */
.mk-ba-veiled:not(.elementor-location-single) .elementor-post__thumbnail {
	overflow: hidden !important;
}

.mk-ba-veiled:not(.elementor-location-single) .elementor-post__thumbnail img {
	filter: blur(5.6px) !important;
	transform: scale(1.08) !important;
}

/* Посочването не отваря воала — само уголемяването се запазва, за да не
   се бие с `transform` отгоре. */
.mk-ba-item.mk-ba-veiled:hover .mk-ba-item-img img {
	transform: scale(1.12) !important;
}

/* ── празният модул в страничната лента ─────────────────────────────── */

/* „Последно добавени“ на самия случай изключва текущия от заявката.
   Докато друг случай няма, Elementor рендира празно съобщение вместо
   карти, а заглавието и връзката са отделни елементи и остават да
   висят. Падат заедно с нея и се връщат от само себе си, щом се появи
   втори случай. */
.single-mk_beforeafter .mk-arch-side .mk-side-grid:has( .e-loop-nothing-found-message ),
.single-mk_beforeafter .mk-arch-side .mk-side-grid:has( .e-loop-nothing-found-message ) + .mk-side-more,
.single-mk_beforeafter .mk-arch-side .mk-side-title:has( + .mk-side-grid .e-loop-nothing-found-message ) {
	display: none !important;
}

/* Отстоянието между модулите в лентата идва от `:not(:first-child)` в
   archive.css. Следващият модул си остава втори по ред и го получава,
   макар първият да е паднал — затова тук се маха и той застава на
   линията на текста отляво. */
.single-mk_beforeafter .mk-arch-side .mk-side-grid:has( .e-loop-nothing-found-message ) + .mk-side-more + .mk-side-title {
	margin-top: 0 !important;
}

/* ── телефон ────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
	.mk-ba-frames .rl-gallery {
		grid-template-columns: 1fr !important;
	}

	.mk-ba-doc {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 12px !important;
	}

	.mk-ba-grid {
		grid-template-columns: 1fr !important;
		gap: 12px !important;
	}
}

/* Таблетът: две в ред. Границата е 1024px, както при страничната колона
   на архивите в `archive.css`. */
@media (min-width: 768px) and (max-width: 1024px) {
	.mk-ba-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 14px !important;
	}
}