/* archive.css — Version: 2.15.0 Общ език на архивните страници. Картата и нейният ховър са един и същ механизъм за всички архиви — услуги, награди и следващите — затова живеят под общите класове `.mk-arch-*`, а не под името на конкретния тип. */ /* ── Въздух над заглавния блок ────────────────────────────────────────── */ /* Един ритъм с единичните страници: 70px между хедъра и първата джаджа. Шаблоните на архивите носят 64 от Elementor — разликата се виждаше при преминаване от архив към запис. */ .elementor-location-archive > .elementor-section:first-of-type { padding-top: 70px !important; } .elementor-location-archive > .elementor-section:first-of-type > .elementor-container > .elementor-column > .elementor-element-populated { padding-top: 0 !important; } /* ── Заглавен блок на архив ───────────────────────────────────────────── */ .mk-arch-head { text-align: center !important; } .mk-arch-head .eyebrow .elementor-heading-title { font-size: 15px !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: #F37B1F !important; } /* Надписът няма отстъп отдолу, заглавието има 14 отгоре — както в заглавния блок на единичните страници. Двата отстъпа заедно даваха 31. */ .mk-arch-head .eyebrow, .mk-arch-head .eyebrow .elementor-heading-title { margin-bottom: 0 !important; } .mk-arch-head .mk-arch-title .elementor-heading-title { font-size: 34px !important; line-height: 1.2 !important; font-weight: 800 !important; color: #362A4B !important; margin: 14px 0 12px !important; } .mk-arch-head .mk-arch-lead { font-size: 16px !important; line-height: 26px !important; color: #6B5D82 !important; max-width: 68ch !important; margin: 0 auto !important; } /* ── Картата ──────────────────────────────────────────────────────────── */ .mk-arch-card { position: relative !important; isolation: isolate !important; background: #fff !important; border: 1px solid #EEE6F5 !important; border-radius: 0 !important; overflow: visible !important; height: 100% !important; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important; } .mk-arch-card:hover { transform: translateY(-3px) !important; box-shadow: 0 9px 20px rgba(54,42,75,.14) !important; border-color: #DED0EA !important; } /* Вътрешните нива на Elementor стават статични, за да може линкът на заглавието да се разпъне върху цялата карта (същият модел като на началната страница). */ .mk-arch-card .elementor-container, .mk-arch-card .elementor-column, .mk-arch-card .elementor-widget-wrap, .mk-arch-card .elementor-widget, .mk-arch-card .elementor-section, .mk-arch-card .elementor-inner-section { position: static !important; } .mk-arch-card .elementor-widget-wrap { padding: 0 !important; } .mk-arch-img, .mk-arch-img .elementor-widget-container, .mk-arch-img figure { margin: 0 !important; line-height: 0 !important; overflow: hidden !important; } /* Снимките на статиите са колажи с бели полета по ръба — затова по 10px от всяка страна се отрязват. Решетката е masonry (640 статии в 41 съотношения), затова височината е естествена, не обща. */ .mk-arch-card.is-news .mk-arch-img img { width: calc(100% + 20px) !important; max-width: none !important; height: auto !important; margin: -10px !important; } /* Снимката се смалява, не се реже. Общата височина от 220px режеше кадъра толкова, колкото се разминава с неговото съотношение: при естетиката 37%, при иновациите 28%, при болниците 19%. Решетките са masonry, затова различната височина не разваля реда — вече беше направено поотделно за лекари, събития, „За здравето“ и бебета, сега важи за всички. */ .mk-arch-img img { width: 100% !important; height: 220px !important; object-fit: cover !important; display: block !important; } /* ── кои типове показват снимката цяла ────────────────────────────── Подразбирането остава изрязване: повечето карти носят кадър, който търпи рязане, а общата височина държи реда на решетката. Изключение правят онези, при които съотношението се разминава толкова, че изрязването отнема същината — мерено на всеки архив: болници 19% иновации, изследвания, лаборатории 28% естетика 37% Правилото е нарочно поименно: общото обслужва четиринайсет вида карти и всеки носи свои снимки — направленията с вградена рамка, новините с колажи и бели полета, наградите с вертикални кадри. Обръщането му счупи точно тях. */ .mk-arch-card.is-hospital .mk-arch-img img, .mk-arch-card.is-innovation .mk-arch-img img, .post-type-archive-aesthetics .mk-arch-img img { width: auto !important; max-width: 100% !important; height: auto !important; max-height: 300px !important; object-fit: contain !important; margin: 0 auto !important; background: #F7F4FA !important; } /* Тези бяха така и преди: снимката им се показва цяла, височината следва кадъра, а masonry подрежда различните ръстове. */ .mk-arch-card.is-health .mk-arch-img img, .mk-arch-card.is-doctor .mk-arch-img img, .mk-arch-card.is-event .mk-arch-img img, .mk-arch-card.is-baby .mk-arch-img img { height: auto !important; object-fit: contain !important; } /* Наградите идват в девет съотношения, включително вертикални 1200x1600. Решетката им е masonry, затова всяка снимка остава в естествената си височина, вместо да се реже до обща. */ .mk-arch-card.is-award .mk-arch-img img { height: auto !important; background: #F7F4FA !important; } .mk-arch-body .elementor-element-populated { padding: 14px 24px 24px !important; } .mk-arch-card .mk-arch-name .elementor-heading-title { font-size: 17px !important; line-height: 1.35 !important; font-weight: 700 !important; color: #362A4B !important; margin: 0 0 8px !important; } .mk-arch-card .mk-arch-exc { font-size: 13.5px !important; line-height: 1.55 !important; color: #7B6B93 !important; } .mk-arch-card .mk-arch-cta .elementor-button { background: transparent !important; border: 0 !important; padding: 0 !important; margin-top: 14px !important; font-size: 13px !important; font-weight: 600 !important; color: #FF1A4B !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; } .mk-arch-card .mk-arch-cta .elementor-button .elementor-button-text::after { content: " →" !important; display: inline-block !important; transition: transform .22s ease !important; } .mk-arch-card:hover .mk-arch-cta .elementor-button .elementor-button-text::after { transform: translateX(5px) !important; } /* Контурът се дорисува при ховър — същият ефект като при картите на началната, направен от четирите псевдо-елемента на секцията и на нейния контейнер. */ .mk-arch-card::before, .mk-arch-card::after, .mk-arch-card > .elementor-container::before, .mk-arch-card > .elementor-container::after { content: "" !important; position: absolute !important; display: block !important; background: #69528E !important; z-index: 1 !important; pointer-events: none !important; } /* ЕКСПЕРИМЕНТ 2026-10-05, втора редакция — квадрат в ъгъла, от който се излива контурът. В покой: само квадрат 10×10 с ЦЕНТЪР точно в горния ляв ъгъл на снимката, тоест 5px навън и 5px навътре. Той не участва в движението и не губи остротата си. При ховър: горната и лявата линия тръгват от квадрата. Те не са правоъгълни, а трапецовидни — 10px при квадрата, 1px в далечния край. Формата идва от `clip-path`, защото рамка не може да изтънява по дължината си; `scaleX`/ `scaleY` удължават вече изрязаната форма, затова скосяването се запазва. Долната и дясната линия са вече тънките 1px и само дорисуват обиколката. Връщане към стария вид: `_backups\archive.css.pre-stroke-experiment_20261005_000003`. */ /* Квадратът 8×8 с център в ъгъла. Стои ЗАД снимката, затова се вижда само външната му половина — ъгълът, който стърчи от картата. */ .mk-arch-card > .elementor-container > .elementor-column::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; } /* Квадратът се топи заедно с изтичането — от 8×8 до 1×1 в ъгъла, тоест накрая е част от самата 1px линия, а не остатък върху нея. */ .mk-arch-card:hover > .elementor-container > .elementor-column::before { transform: scale(.125) translate(-4px, -4px) !important; } /* Снимката застава над контура. */ .mk-arch-card .mk-arch-img .elementor-widget-container { position: relative !important; z-index: 2 !important; } /* Горната линия: дебела колкото квадрата, изтънява ДОКАТО напредва, и в края е 1px по цялата си дължина. Дебелината е transform по напречната ос — затова няма запазен клин, какъвто оставя `clip-path`. Центърът ѝ е по ръба на картата, тоест видима е външната половина, както при квадрата. */ .mk-arch-card::before { top: -4px !important; left: 0 !important; width: 100% !important; height: 8px !important; transform-origin: left center !important; transform: scaleX(0) scaleY(1) !important; transition: transform .3s cubic-bezier(.22,.85,.3,1) !important; } /* Лявата линия: същото, надолу. */ .mk-arch-card::after { top: 0 !important; left: -4px !important; right: auto !important; width: 8px !important; height: 100% !important; transform-origin: center top !important; transform: scaleY(0) scaleX(1) !important; transition: transform .3s cubic-bezier(.22,.85,.3,1) !important; } /* Дясната и долната: вече тънките 1px, дорисуват обиколката след първите две. */ .mk-arch-card > .elementor-container::before { top: 0 !important; right: -1px !important; bottom: auto !important; width: 1px !important; height: 100% !important; transform-origin: top center !important; transform: scaleY(0) !important; transition: transform .14s ease .14s !important; } .mk-arch-card > .elementor-container::after { bottom: -1px !important; right: -1px !important; top: auto !important; left: auto !important; width: 100% !important; height: 1px !important; transform-origin: right center !important; transform: scaleX(0) !important; transition: transform .14s ease .2s !important; } /* В края: пълна дължина и дебелина 8px × .125 = 1px. `translate`-ът след мащаба снапва линията върху цял пиксел ОТВЪН, иначе съдържанието я крие. */ .mk-arch-card:hover::before { transform: scaleX(1) scaleY(.125) translateY(-4px) !important; } .mk-arch-card:hover::after { transform: scaleY(1) scaleX(.125) translateX(-4px) !important; } .mk-arch-card:hover > .elementor-container::before { transform: scaleY(1) !important; } .mk-arch-card:hover > .elementor-container::after { transform: scaleX(1) !important; } /* Разтегнат линк — цялата карта е кликаема, но линкът е един и смислен. */ .mk-arch-card .mk-stretch a::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 4 !important; } .mk-arch-card .mk-stretch a { position: static !important; } /* Решетката да е с еднакви по височина карти. */ .mk-arch-grid .elementor-loop-container { align-items: stretch !important; } .mk-arch-grid .e-loop-item { height: 100% !important; } /* На тесен екран нищо не се реже — височината си остава естествена, както и на широк. */ /* Страниране */ /* Страницирането беше долепено за последния ред карти — контейнерът свършваше и то започваше на същия пиксел. Правилото минава през `.elementor-location-archive`, не през `.mk-arch-sec`: джаджата стои в обвивка на Search & Filter и класът на секцията не стига до нея. Така важи за всички архиви наведнъж. */ /* Номерата са `inline-flex` с хоризонтален отстъп, а кутията беше `display: block`: щом не се съберат на един ред, вторият ляга точно под първия — 38px височина, нула разстояние, цифрите се допират. Тук кутията сама нарежда и дава отстъп в двете посоки. */ .elementor-location-archive .elementor-pagination, .mk-arch-sec .elementor-pagination { margin-top: 44px !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 8px !important; text-align: center !important; } /* Хоризонталният отстъп вече идва от `gap`; старите 4px отстрани го удвояваха. */ .elementor-location-archive .elementor-pagination .page-numbers, .mk-arch-sec .elementor-pagination .page-numbers { margin: 0 !important; } .mk-arch-sec .elementor-pagination .page-numbers { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 38px !important; height: 38px !important; padding: 0 12px !important; margin: 0 4px !important; border: 1px solid #E7DFF0 !important; border-radius: 3px !important; color: #69528E !important; font-size: 14px !important; font-weight: 600 !important; transition: background .18s ease, border-color .18s ease, color .18s ease !important; } .mk-arch-sec .elementor-pagination .page-numbers:hover { border-color: #69528E !important; background: #F4F0F8 !important; } .mk-arch-sec .elementor-pagination .page-numbers.current { background: #69528E !important; border-color: #69528E !important; color: #fff !important; } /* ── Странична колона на архива ───────────────────────────────────────── */ .mk-arch-side > .elementor-element-populated { padding: 10px 0 0 36px !important; } .mk-arch-side .mk-side-title .elementor-heading-title { font-size: 18px !important; font-weight: 700 !important; letter-spacing: .02em !important; color: #362A4B !important; line-height: 1.2 !important; margin: 0 0 18px !important; padding-bottom: 12px !important; border-bottom: 2px solid #69528E !important; } .mk-arch-side .mk-side-more .elementor-button { background: transparent !important; border: 0 !important; border-bottom: 2px solid #C9BBD8 !important; border-radius: 0 !important; padding: 0 0 3px !important; margin-top: 0 !important; font-size: 15px !important; font-weight: 600 !important; color: #69528E !important; } .mk-arch-side .mk-side-more .elementor-button:hover { border-bottom-color: #69528E !important; } .mk-side-card { position: relative !important; isolation: isolate !important; background: #fff !important; border: 1px solid #EEE6F5 !important; border-radius: 0 !important; margin-bottom: 12px !important; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease !important; } .mk-side-card:hover { transform: translateX(3px) !important; border-color: #69528E !important; box-shadow: 0 5px 12px rgba(54,42,75,.1) !important; } .mk-side-card .elementor-container, .mk-side-card .elementor-column, .mk-side-card .elementor-widget-wrap, .mk-side-card .elementor-widget { position: static !important; } .mk-side-card .elementor-element-populated { padding: 10px !important; display: flex !important; align-items: center !important; } .mk-side-card .mk-side-img { flex: 0 0 72px !important; width: 72px !important; } /* Снимките на отзивите са банери с етикет „ПАЦИЕНТИТЕ ЗА НАС" в горния край — кадърът се взема по-ниско, за да не влиза лентата в малкия квадрат. */ .mk-side-card .mk-side-img img { width: 72px !important; height: 72px !important; object-fit: cover !important; object-position: 50% 72% !important; border-radius: 0 !important; display: block !important; } /* Три модула показват кадъра цял, защото квадратът от 72 им отнемаше същината: портретите на специалистите (300x350), банерите на историите (1080x1350) и хоризонталните на направленията (678x393). Останалите единайсет остават на квадрата. */ /* Всяка карта носи своето правило, дори когато стойностите съвпадат: модулите са разделени точно за да се менят поотделно. */ /* специалисти — портрет 300x350 */ .mk-side-card.is-doctor .mk-side-img img { width: 72px !important; height: auto !important; max-height: none !important; object-fit: contain !important; object-position: center !important; } /* пациентски истории — банер 1080x1350 */ .mk-side-card.is-story .mk-side-img img { width: 72px !important; height: auto !important; max-height: none !important; object-fit: contain !important; object-position: center !important; } /* методи — хоризонтални 678x393 и 2560x955 Банерите 678x393 носят лилав кант в самия файл: 2.5–3.1% по височина, 1.6–2.1% по ширина. Кадърът излиза извън кутията с по 2px, кутията го подрязва. Ширината е +25% (90px), както при направленията — при 72 височината пада под 42 и снимката се губи. */ .mk-side-card.is-innovation .mk-side-img { flex: 0 0 90px !important; width: 90px !important; overflow: hidden !important; } .mk-side-card.is-innovation .mk-side-img img { width: 94px !important; max-width: none !important; height: auto !important; max-height: none !important; margin: -2px !important; object-fit: contain !important; object-position: center !important; } /* бебета — вертикални 852x1065 и 785x980, едно квадратно 1080x1080 Квадратът от 72 режеше горния и долния край; кадърът остава цял. */ .mk-side-card.is-baby .mk-side-img img { width: 72px !important; height: auto !important; max-height: none !important; object-fit: contain !important; object-position: center !important; } /* направления — хоризонтален банер 678x393 Кадърът е нисък и широк: при 72px височината пада до 42 и снимката се губи до текста. Ширината е +25% (90px), кутията расте с нея. */ .mk-side-card.is-direction .mk-side-img { flex: 0 0 90px !important; width: 90px !important; } .mk-side-card.is-direction .mk-side-img img { width: 90px !important; height: auto !important; max-height: none !important; object-fit: contain !important; object-position: center !important; } /* Банерите на направленията носят лилав кант в самия файл — 10–14px при 678x393, тоест 2.8% по височина и 1.5% по ширина. При показани 72px това са по 2px от страна. Кадърът излиза извън кутията, кутията го подрязва — същият похват като при архивните карти. */ .mk-side-card.is-direction .mk-side-img { overflow: hidden !important; } .mk-side-card.is-direction .mk-side-img img { width: 94px !important; margin: -2px !important; } .mk-side-card .mk-side-name .elementor-heading-title { font-size: 14px !important; line-height: 1.45 !important; color: #4E3D6B !important; font-weight: 600 !important; padding-left: 12px !important; } /* Специалността стои под името и тръгва от същия отстъп. Тя е пояснение, не втори заглавен ред: главните букви заемат цялата височина на реда и при тях 10.5px се четат наравно с името от 14px, затова са малки. */ /* Специалността е линк към рубриката: джаджата → `.elementor-widget-container` → `` w=68.0, h=316.5. Единичните страници решават същото от по-рано: `singles.css:442, 460, 538, 736` стифират главната и страничната колона при ≤1024. Архивите не го получаваха, защото `archive.css` никъде не задава ширина на `.mk-arch-side` — само падинг. Главната колона няма собствен клас, затова се хваща през контейнера: `:has()` се ползва и по-долу в този файл. Контейнерът вече е `flex-wrap: wrap` до 1024 — проверено — тоест двете колони се стифират, а не се свиват. */ @media (max-width: 1024px) { .mk-arch-side > .elementor-element-populated { padding: 36px 0 0 !important; } .elementor-container:has( > .mk-arch-side ) > .elementor-column { width: 100% !important; } } /* Височината на картите: решетката на Elementor изравняваше ВСИЧКИ редове по най-високата клетка (grid-auto-rows:1fr) и под връзката оставаше до 130px празно. Заглавието се ограничава на два реда, резюмето на три — така картите излизат еднакви по естествен път и редовете могат да са с автоматична височина. */ .mk-arch-grid .elementor-loop-container { grid-auto-rows: auto !important; } .mk-arch-card .mk-arch-name .elementor-heading-title { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; min-height: 46px !important; } .mk-arch-card .mk-arch-exc p { display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; margin: 0 !important; } .mk-arch-card .mk-arch-exc { min-height: 84px !important; } /* „Имате въпрос?" — огромен въпросителен от шрифта на сайта като воден знак: завъртян на 35° надясно, излиза извън картата и се отрязва от нея. Съдържанието стои над него. */ .mk-arch-side .mk-side-cta > .elementor-element-populated , .mk-faq-single .mk-side-cta > .elementor-element-populated , .mk-sg-main .mk-side-cta > .elementor-element-populated { position: relative !important; overflow: hidden !important; } .mk-arch-side .mk-side-cta > .elementor-element-populated::before , .mk-faq-single .mk-side-cta > .elementor-element-populated::before , .mk-sg-main .mk-side-cta > .elementor-element-populated::before { content: "?" !important; position: absolute !important; right: -6px !important; bottom: -64px !important; font-family: Onest, sans-serif !important; font-size: 240px !important; font-weight: 800 !important; line-height: 1 !important; color: rgba(255,255,255,.14) !important; transform: rotate(35deg) !important; transform-origin: 50% 50% !important; pointer-events: none !important; z-index: 0 !important; } .mk-arch-side .mk-side-cta > .elementor-element-populated > .elementor-element , .mk-faq-single .mk-side-cta > .elementor-element-populated > .elementor-element , .mk-sg-main .mk-side-cta > .elementor-element-populated > .elementor-element { position: relative !important; z-index: 1 !important; } /* Двете карти — питането и Viber — са съседни колони в една секция и Elementor ги нарежда една до друга, по 199px всяка. В странична колона от 397px това ги прави нечетими; затова се редят вертикално. */ .mk-arch-side .elementor-container:has( > .mk-side-cta ) , .mk-faq-single .elementor-container:has( > .mk-side-cta ) , .mk-sg-main .elementor-container:has( > .mk-side-cta ) { flex-wrap: wrap !important; } .mk-arch-side .elementor-container > .mk-side-cta , .mk-faq-single .elementor-container > .mk-side-cta , .mk-sg-main .elementor-container > .mk-side-cta { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; } /* ── близнакът за Viber ────────────────────────────────────────────── Същата кутия, същият воден знак, друг цвят и друг знак: вместо въпросителната стои логото на Viber, със същото завъртане и същото отрязване от ръба. Знакът е изображение, не глиф, затова идва през `background-image` на псевдоелемента — `content` с низ не може да носи картинка със запазена прозрачност. Непрозрачността е 18 на сто вместо 14: белият знак върху виолетово е по-блед от бяла буква върху тъмнолилаво. */ .mk-arch-side .mk-viber-body.mk-viber-body , .mk-faq-single .mk-viber-body.mk-viber-body , .mk-sg-main .mk-viber-body.mk-viber-body , .mk-cta-sec .mk-viber-body.mk-viber-body { background: transparent !important; } .mk-arch-side .mk-side-cta.is-viber > .elementor-element-populated , .mk-faq-single .mk-side-cta.is-viber > .elementor-element-populated , .mk-sg-main .mk-side-cta.is-viber > .elementor-element-populated , .mk-cta-sec .mk-side-cta.is-viber > .elementor-element-populated { background: #7D5FA8 !important; } .mk-arch-side .mk-side-cta.is-viber > .elementor-element-populated::before , .mk-faq-single .mk-side-cta.is-viber > .elementor-element-populated::before , .mk-sg-main .mk-side-cta.is-viber > .elementor-element-populated::before , .mk-cta-sec .mk-side-cta.is-viber > .elementor-element-populated::before { content: "" !important; width: 200px !important; height: 200px !important; right: -42px !important; bottom: -56px !important; background: url( "img/viber-mark.svg" ) no-repeat center / contain !important; opacity: .16 !important; transform: rotate(35deg) !important; } /* Бутонът взема по-тъмния тон на Viber — червеното на останалите карти се бие с виолетовото. */ .mk-arch-side .mk-side-cta.is-viber .elementor-button , .mk-faq-single .mk-side-cta.is-viber .elementor-button , .mk-sg-main .mk-side-cta.is-viber .elementor-button , .mk-cta-sec .mk-side-cta.is-viber .elementor-button { background: #FF1A4B !important; } /* ── ховър на двата бутона ─────────────────────────────────────────── Потъмненото розово е утвърдено в сайта (`header-menu.css:53`, `hero.css:19`). Добавя се и повдигане с един пиксел — картите са тъмни и само смяната на тона се губи. */ .mk-arch-side .mk-side-cta .elementor-button , .mk-faq-single .mk-side-cta .elementor-button , .mk-sg-main .mk-side-cta .elementor-button , .mk-cta-sec .mk-side-cta .elementor-button { transition: background .16s ease, transform .16s ease, box-shadow .16s ease !important; } .mk-arch-side .mk-side-cta .elementor-button:hover , .mk-faq-single .mk-side-cta .elementor-button:hover , .mk-sg-main .mk-side-cta .elementor-button:hover , .mk-cta-sec .mk-side-cta .elementor-button:hover , .mk-arch-side .mk-side-cta .elementor-button:focus-visible , .mk-faq-single .mk-side-cta .elementor-button:focus-visible , .mk-sg-main .mk-side-cta .elementor-button:focus-visible , .mk-cta-sec .mk-side-cta .elementor-button:focus-visible { background: #E5133F !important; color: #fff !important; transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, .22) !important; } .mk-arch-side .mk-side-cta .elementor-button:active , .mk-faq-single .mk-side-cta .elementor-button:active , .mk-sg-main .mk-side-cta .elementor-button:active , .mk-cta-sec .mk-side-cta .elementor-button:active { transform: translateY(0) !important; box-shadow: none !important; } .mk-arch-side .mk-side-cta.is-viber .mk-side-cta-txt , .mk-faq-single .mk-side-cta.is-viber .mk-side-cta-txt , .mk-sg-main .mk-side-cta.is-viber .mk-side-cta-txt , .mk-cta-sec .mk-side-cta.is-viber .mk-side-cta-txt { color: #E6E1FD !important; } /* Когато дясната колона има повече от едно гнездо, второто заглавие се отделя. */ .mk-arch-side .elementor-widget-heading.mk-side-title:not(:first-child) { margin-top: 34px !important; } .mk-arch-card.is-service .mk-arch-img { overflow: hidden !important; } .mk-arch-card.is-service .mk-arch-img img { width: calc(100% + 24px) !important; max-width: none !important; margin: 0 -12px !important; } /* Етикет с категорията върху картите в блога. */ .mk-arch-card .mk-arch-label .elementor-heading-title { display: inline-block !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: #69528E !important; background: #F4EEFA !important; border-radius: 2px !important; padding: 5px 10px !important; margin: 0 0 8px !important; } .mk-arch-card .mk-arch-label a { color: inherit !important; } /* Странична карта с кратко резюме — ползва се в блока „Къде можете да се лекувате?“ */ .mk-side-card.has-exc .elementor-element-populated { align-items: flex-start !important; } /* Динамичният таг извежда чист текст, без

, затова се стилизира и самият контейнер на джаджата, не само евентуалният абзац. */ .mk-side-card .mk-side-exc { margin-top: 3px !important; } .mk-side-card .mk-side-exc .elementor-widget-container, .mk-side-card .mk-side-exc p { margin: 0 !important; font-size: 13px !important; line-height: 1.45 !important; color: #6E6880 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } /* Лилавата рамка е вградена в снимките на направленията (10px при файл 678px, тоест ~6px при показания размер). Горе и долу се крие от изрязването по височина; отляво и отдясно снимката се разширява с по 8px. */ .mk-arch-card.is-direction .mk-arch-img img { width: calc(100% + 16px) !important; max-width: none !important; margin-left: -8px !important; margin-right: -8px !important; } /* Резюмето в страничната карта трябва да е точно под името, не под снимката. `-webkit-box` прави контейнера способен да се разлее извън колоната, затова ширината му се заключва изрично на двете нива. */ .mk-side-card .mk-side-body { flex: 1 1 auto !important; min-width: 0 !important; } .mk-side-card.has-exc .mk-side-body .elementor-widget-wrap { display: block !important; min-width: 0 !important; } .mk-side-card .mk-side-name, .mk-side-card .mk-side-exc { width: 100% !important; min-width: 0 !important; } .mk-side-card .mk-side-exc { overflow: hidden !important; } /* Заглавието е с `padding-left: 12px`; резюмето трябва да ляга точно под него. */ .mk-side-card.has-exc .mk-side-exc .elementor-widget-container { width: 100% !important; max-width: 100% !important; padding-left: 12px !important; } .mk-side-card.has-exc .mk-side-name .elementor-heading-title { margin: 0 !important; } .mk-side-card.has-exc .mk-side-exc { margin-top: 4px !important; } /* Картите със снимки са без заобляне (решение на оператора, 2026-10-05). */ .mk-arch-img, .mk-arch-img .elementor-widget-container, .mk-arch-img figure, .mk-arch-img img { border-radius: 0 !important; } /* ── Архив на болниците ───────────────────────────────────────────────── Дивайдърът с иконка и редът „държава → град“ са това, което отличава типа; останалото е общият език на картите. */ .mk-arch-card.is-hospital .mk-arch-div { margin: 0 0 10px !important; } .mk-arch-card.is-hospital .mk-arch-div .elementor-divider-separator { border-top-color: #E4DAF0 !important; } .mk-arch-card.is-hospital .mk-arch-div .elementor-icon, .mk-arch-card.is-hospital .mk-arch-div i { color: #FF1A4B !important; font-size: 17px !important; } .mk-arch-geo { margin-bottom: 8px !important; } .mk-arch-geo .elementor-icon-list-items { gap: 6px !important; } .mk-arch-geo .elementor-icon-list-text { font-size: 12.5px !important; font-weight: 600 !important; letter-spacing: .02em !important; color: #69528E !important; text-transform: uppercase !important; } .mk-arch-geo .elementor-icon-list-icon i { color: #C0ADD8 !important; font-size: 12px !important; } /* Свързаните филтри в дясната колона. */ .mk-side-filter ul { list-style: none !important; margin: 0 !important; padding: 0 !important; margin-bottom: 4px !important; } .mk-side-filter li { margin: 0 !important; } .mk-side-filter a { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; padding: 6px 10px !important; border-radius: 0 !important; text-decoration: none !important; font-size: 14px !important; color: #4E3D6B !important; line-height: 1.3 !important; border-left: 2px solid transparent !important; transition: background .16s ease, border-color .16s ease, color .16s ease !important; } .mk-side-filter a:hover { background: #F7F4FA !important; border-left-color: #C9BBD8 !important; } .mk-side-filter a.is-active { background: #F2ECF8 !important; border-left-color: #69528E !important; color: #362A4B !important; font-weight: 700 !important; } .mk-side-filter a span { flex: 0 0 auto !important; font-size: 12px !important; font-weight: 600 !important; color: #9A8CB0 !important; background: #fff !important; border: 1px solid #EEE6F5 !important; padding: 1px 7px !important; } .mk-side-filter a.is-active span { color: #69528E !important; border-color: #D9CCE9 !important; } /* Дивайдърът стои плътно между името и параметрите — без празнина над него. */ .mk-arch-card.is-hospital .mk-arch-name .elementor-heading-title { margin-bottom: 10px !important; } .mk-arch-card.is-hospital .mk-arch-div .elementor-widget-container, .mk-arch-card.is-hospital .mk-arch-div .elementor-divider { padding: 0 !important; margin: 0 !important; } .mk-arch-card.is-hospital .mk-arch-div .elementor-divider-separator { margin: 0 !important; } /* Недостъпна държава, когато е избран град. */ .mk-side-filter .is-disabled { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; padding: 6px 10px !important; font-size: 14px !important; line-height: 1.3 !important; color: #BDB4CB !important; border-left: 2px solid transparent !important; cursor: default !important; } .mk-side-filter .is-disabled span { font-size: 12px !important; font-weight: 600 !important; color: #CFC7DA !important; background: #FBFAFD !important; border: 1px solid #F2EDF7 !important; padding: 1px 7px !important; } /* Elementor слага 20px под всяка джаджа, а самият дивайдър — още по 15px отгоре и отдолу. Затова името, дивайдърът и редът с локацията стоят разделени; тук се стягат до една група. */ .mk-arch-card.is-hospital .mk-arch-name { margin-bottom: 0 !important; } .mk-arch-card.is-hospital .mk-arch-div { margin: 0 !important; } .mk-arch-card.is-hospital .mk-arch-div .elementor-divider { padding-block-start: 0 !important; padding-block-end: 0 !important; padding: 0 !important; } .mk-arch-card.is-hospital .mk-arch-geo { margin: 6px 0 10px !important; } /* ── Картата на болница: подредба на главата ──────────────────────────── Празнината над дивайдъра идваше от `min-height: 46px` на името (две реда), не от отстояния. При този тип името е с естествена височина. */ .mk-arch-card.is-hospital .mk-arch-name { min-height: 0 !important; } .mk-arch-card.is-hospital .mk-arch-name .elementor-heading-title { margin-bottom: 0 !important; } .mk-arch-card.is-hospital .mk-arch-name { padding-bottom: 11px !important; } /* Дивайдърът: без лявата страна, иконката е най-вляво, на равнището на името, линията продължава надясно. */ .mk-arch-card.is-hospital .mk-arch-div .elementor-divider { display: flex !important; justify-content: flex-start !important; } .mk-arch-card.is-hospital .mk-arch-div .elementor-divider-separator { display: flex !important; align-items: center !important; width: 100% !important; } .mk-arch-card.is-hospital .mk-arch-div .elementor-divider-separator::before { display: none !important; } .mk-arch-card.is-hospital .mk-arch-div .elementor-divider-separator::after { flex: 1 1 auto !important; display: block !important; content: "" !important; border-block-start: 1px solid #E4DAF0 !important; } .mk-arch-card.is-hospital .mk-arch-div .elementor-divider__element { margin-left: 0 !important; margin-right: 10px !important; } /* Държава и град: вляво, без отметките, със стрелка 50% по-голяма в цвета на иконката от дивайдъра. Конструкцията е вдигната с четвърт нагоре. */ .mk-arch-card.is-hospital .mk-arch-geo { margin: 11px 0 9px !important; } .mk-arch-card.is-hospital .mk-arch-geo .elementor-icon-list-items { justify-content: flex-start !important; gap: 8px !important; } .mk-arch-card.is-hospital .mk-arch-geo .elementor-icon-list-item:nth-child(1) .elementor-icon-list-icon, .mk-arch-card.is-hospital .mk-arch-geo .elementor-icon-list-item:nth-child(3) .elementor-icon-list-icon { display: none !important; } .mk-arch-card.is-hospital .mk-arch-geo .elementor-icon-list-item:nth-child(2) .elementor-icon-list-icon i { color: #FF1A4B !important; font-size: 18px !important; } /* Иконката на дивайдъра излиза наполовина извън лявия ръб на картата. Тялото е с 24px вътрешен отстъп, иконката е 26px — затова отместването е 24 + 13 = 37px наляво. Линията тръгва след нея и свършва там, където свършва текстът, тоест по десния ръб на тялото. */ .mk-arch-card.is-hospital .mk-arch-div .elementor-divider__element { position: relative !important; z-index: 3 !important; margin-left: -37px !important; margin-right: 11px !important; } .mk-arch-card.is-hospital .mk-arch-div .elementor-icon, .mk-arch-card.is-hospital .mk-arch-div i { font-size: 26px !important; line-height: 1 !important; } /* Ховърът минава под иконата. */ .mk-arch-card.is-hospital .mk-arch-div { position: relative !important; z-index: 3 !important; } /* Глифът е кръг с изрязана буква — без бял диск отдолу ховърът прозира през самата буква. */ .mk-arch-card.is-hospital .mk-arch-div .elementor-divider__element { background: #fff !important; border-radius: 50% !important; line-height: 0 !important; } /* ── Поправки по картата на болница, 2026-10-05 ───────────────────────── 1. Ховърът местеше картата с мащаб 1.02 — дробният мащаб размазва текст и иконки. Сменен с повдигане, което не пипа мащаба. 2. Редът с локацията беше навътре спрямо заглавието и резюмето, а стрелката стоеше далеч и леко паднала. 3. Групата дивайдър + локация се вдига към заглавието. 4. Masonry: височината на картата е по съдържание, не фиксирана. */ .mk-arch-card.is-hospital .mk-arch-name { padding-bottom: 7px !important; } .mk-arch-card.is-hospital .mk-arch-geo { margin: 7px 0 10px !important; } /* Подравняване вляво с текста и стегнати разстояния около стрелката. */ .mk-arch-card.is-hospital .mk-arch-geo .elementor-icon-list-items { margin: 0 !important; padding: 0 !important; gap: 0 !important; align-items: center !important; } .mk-arch-card.is-hospital .mk-arch-geo .elementor-icon-list-item { margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; } .mk-arch-card.is-hospital .mk-arch-geo .elementor-icon-list-item:nth-child(2) { padding: 0 6px !important; } .mk-arch-card.is-hospital .mk-arch-geo .elementor-icon-list-icon { margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; line-height: 0 !important; } .mk-arch-card.is-hospital .mk-arch-geo .elementor-icon-list-text { padding: 0 !important; } /* Masonry. Обработчикът на Elementor работи само при контейнерния модел, а тази инсталация е на стария секционен — затова подредбата е с CSS колони. Редът на четене става по колони, не по редове. */ /* Разположението се смята в `masonry.js`: всяка карта влиза в най-късата колона, затова редът по дата се пази. `column-count` не става — той пълни колона по колона и разбърква реда. Тук остава само онова, което JS-ът очаква да намери; без него картите падат в нормален поток. */ .mk-grid-masonry .elementor-loop-container { display: block !important; position: relative !important; } /* Elementor дава на картите `height: 100%`, за да ги изравни в решетката. При masonry това ги залепва за височината на контейнера и ги прави еднакви — точно обратното на търсеното. */ .mk-grid-masonry .e-loop-item { margin: 0 !important; height: auto !important; } .mk-grid-masonry .mk-arch-card { height: auto !important; } /* Заглавието слиза с 16px от снимката. */ .mk-arch-card.is-hospital .mk-arch-body .elementor-element-populated { padding-top: 30px !important; } /* ── Архив на специалистите ───────────────────────────────────────────── Три колони, портрет, специалност, болница и дивайдър под нея. */ /* Снимките са 678×393 при всичките 326 — еднакви, затова пълната височина не прави решетката назъбена. Изрязването на 260px отрязваше горе и долу. */ .mk-arch-card.is-doctor .mk-arch-body .elementor-element-populated { padding: 22px 20px 20px !important; } .mk-arch-card.is-doctor .mk-arch-name { min-height: 0 !important; } .mk-arch-card.is-doctor .mk-arch-name .elementor-heading-title { font-size: 16px !important; margin-bottom: 6px !important; } .mk-arch-card.is-doctor .mk-arch-spec { font-size: 12.5px !important; font-weight: 700 !important; letter-spacing: .02em !important; text-transform: uppercase !important; color: #69528E !important; margin-bottom: 6px !important; } /* Болницата идва от `[mk_doctor_hospital]` — от 30.10.2026. Дотам беше `dce-acf-relationship` и рисуваше списък, затова тук имаше правила за `ul` и `li`; шорткодът връща самата връзка. */ .mk-arch-card.is-doctor .mk-arch-hosp { font-size: 13px !important; color: #7B6B93 !important; } .mk-arch-card.is-doctor .mk-arch-hosp a { color: #7B6B93 !important; text-decoration: none !important; } /* Дивайдърът стои под болницата, със същата механика като при болниците. */ .mk-arch-card.is-doctor .mk-arch-div { margin: 10px 0 !important; position: relative !important; z-index: 3 !important; } .mk-arch-card.is-doctor .mk-arch-div .elementor-divider { display: flex !important; justify-content: flex-start !important; padding: 0 !important; } .mk-arch-card.is-doctor .mk-arch-div .elementor-divider-separator { display: flex !important; align-items: center !important; width: 100% !important; margin: 0 !important; } .mk-arch-card.is-doctor .mk-arch-div .elementor-divider-separator::before { display: none !important; } .mk-arch-card.is-doctor .mk-arch-div .elementor-divider-separator::after { flex: 1 1 auto !important; display: block !important; content: "" !important; border-block-start: 1px solid #E4DAF0 !important; } .mk-arch-card.is-doctor .mk-arch-div .elementor-divider__element { position: relative !important; z-index: 3 !important; margin-left: -33px !important; margin-right: 10px !important; background: #fff !important; border-radius: 50% !important; line-height: 0 !important; } .mk-arch-card.is-doctor .mk-arch-div .elementor-icon, .mk-arch-card.is-doctor .mk-arch-div i { color: #FF1A4B !important; font-size: 22px !important; line-height: 1 !important; } /* Падащите списъци в дясната колона. */ .mk-side-select { margin-top: 18px !important; } .mk-side-select label { display: block !important; font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .04em !important; color: #8C7CA6 !important; margin-bottom: 6px !important; } .mk-side-select select { width: 100% !important; padding: 9px 12px !important; font-size: 14px !important; color: #4E3D6B !important; background: #fff !important; border: 1px solid #E7DFF0 !important; border-radius: 0 !important; cursor: pointer !important; } .mk-side-select select:focus { outline: none !important; border-color: #69528E !important; } /* Иконката на дивайдъра при специалистите: плътен кръг с бял лекар вътре. */ .mk-arch-card.is-doctor .mk-arch-div .elementor-divider__element { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 26px !important; height: 26px !important; background: #FF1A4B !important; border-radius: 50% !important; margin-left: -33px !important; margin-right: 10px !important; } .mk-arch-card.is-doctor .mk-arch-div .elementor-icon, .mk-arch-card.is-doctor .mk-arch-div i { color: #fff !important; font-size: 13px !important; line-height: 1 !important; } /* ── Архив на събитията ───────────────────────────────────────────────── Снимката запазва естествената си височина, затова решетката е masonry. */ .mk-arch-card.is-event .mk-arch-body .elementor-element-populated { padding: 20px 22px 22px !important; } .mk-arch-card.is-event .mk-arch-name { min-height: 0 !important; } .mk-arch-card.is-event .mk-arch-name .elementor-heading-title { font-size: 16px !important; margin-bottom: 8px !important; } .mk-arch-card.is-event .mk-arch-geo { margin: 0 0 8px !important; } .mk-arch-card.is-event .mk-arch-geo .elementor-icon-list-items { gap: 14px !important; } .mk-arch-card.is-event .mk-arch-geo .elementor-icon-list-item { display: flex !important; align-items: center !important; gap: 5px !important; margin: 0 !important; padding: 0 !important; } .mk-arch-card.is-event .mk-arch-geo .elementor-icon-list-icon i { color: #A58FC4 !important; font-size: 13px !important; } .mk-arch-card.is-event .mk-arch-geo .elementor-icon-list-text { font-size: 12.5px !important; font-weight: 600 !important; color: #69528E !important; padding: 0 !important; } /* Етикетът за статус. Стойността идва от ACF като HTML с клас, а темата го стилизира като ЗНАЧКА ВЪРХУ СНИМКАТА (`position: absolute; top/left`) — виж `style.css`, `.past-css` и другите два. Тук само се вдига над контура и се приглажда към езика на архивите; цветовете остават на темата. */ .mk-arch-card.is-event .mk-arch-status { position: static !important; } .mk-arch-card.is-event .mk-arch-status .past-css, .mk-arch-card.is-event .mk-arch-status .upfront-css, .mk-arch-card.is-event .mk-arch-status .canceled-css { z-index: 4 !important; margin: 0 !important; top: 12px !important; left: 12px !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .06em !important; text-transform: uppercase !important; padding: 5px 11px !important; } /* Процедурите в дясната колона четат preview банера от ACF `ads_banner` (620x230 при всичките 61), а не featured image — той е OG снимката за Facebook и идва в четири различни съотношения. Лентата „ОФЕРТА“ заема първите 9% от банера и отпада сама при изрязването до квадрат, затова тук не е нужна нито панорама, нито `object-position`. */ /* Текстът не се лепи за снимката. */ .mk-side-card.has-exc .mk-side-body { padding-left: 4px !important; } /* Редът с дата и град застава вляво, както е при другите архиви. */ .mk-arch-card.is-event .mk-arch-geo .elementor-icon-list-items { justify-content: flex-start !important; } /* Значката стои в потока, веднага под снимката — там, където е и джаджата в картата. Темата я прави `absolute`; тук се връща в потока и се изнася с 20% вляво извън картата. Ширината ѝ зависи от текста, затова изместването е процентно, не в пиксели. */ .mk-arch-card.is-event .mk-arch-status .past-css, .mk-arch-card.is-event .mk-arch-status .upfront-css, .mk-arch-card.is-event .mk-arch-status .canceled-css { position: static !important; display: inline-block !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; margin-left: -22px !important; transform: translateX(-20%) !important; } /* Значката е в потока, затова `z-index` на самата нея не важи. Вдига я обвивката — както при дивайдърите на болниците и специалистите, за да мине контурът на ховъра под нея. */ .mk-arch-card.is-event .mk-arch-status { overflow: visible !important; position: relative !important; z-index: 3 !important; } /* Иконката на календара се режеше от фиксираната кутия на icon-list. */ .mk-arch-card.is-event .mk-arch-geo .elementor-icon-list-icon { width: auto !important; height: auto !important; overflow: visible !important; line-height: 1 !important; } .mk-arch-card.is-event .mk-arch-geo .elementor-icon-list-icon i { width: auto !important; height: auto !important; overflow: visible !important; line-height: 1 !important; } .mk-arch-card.is-event .mk-arch-geo .elementor-icon-list-icon svg { width: 13px !important; height: 13px !important; } /* Elementor дава на inline списъка отрицателно външно отстояние и изнася първата иконка извън кутията на тялото — там тя се реже. */ .mk-arch-card.is-event .mk-arch-geo .elementor-icon-list-items.elementor-inline-items { margin-left: 0 !important; margin-right: 0 !important; } .mk-arch-card.is-event .mk-arch-geo .elementor-icon-list-item.elementor-inline-item { margin-left: 0 !important; padding-left: 0 !important; } .mk-arch-card.is-event .mk-arch-geo .elementor-icon-list-icon { min-width: 15px !important; display: inline-flex !important; justify-content: flex-start !important; } /* ── Карта на процедура ─────────────────────────────────────────────── Снимката е preview банерът `ads_banner`: 620x230 при всичките 61, с лента „ОФЕРТА“ отляво. Плътната ѝ част е 14.5%, но дясната ѝ граница е извита и върхът на кривата стига до 17.7% — затова рязането е на 18%. Снимката се разширява до 121.95% (1 / 0.82) и се измества с -21.95%, за да запълни кутията. Съотношението след рязането е едно и също навсякъде, затова височината е естествена, не фиксирана. */ .mk-arch-card.is-procedure .mk-arch-img { overflow: hidden !important; } .mk-arch-card.is-procedure .mk-arch-img img { width: 121.95% !important; max-width: none !important; margin-left: -21.95% !important; height: auto !important; } /* ── Карта на пациентска история ────────────────────────────────────── Снимките идват в единайсет размера: 134 чисти хоризонтални кадри и 67 вертикални банера 1080x1350 с лента „ПАЦИЕНТИТЕ ЗА НАС…“ горе и цитат в долната половина. Няма изрязване, което да ги подреди всички, затова всяка се показва в естествената си височина, а решетката е masonry. */ .mk-arch-card.is-story .mk-arch-img img { height: auto !important; } /* ── „Имате въпрос?“ като самостоятелна секция ──────────────────────── Архивите на стария дизайн нямат дясна колона, затова блокът стои сам в края на страницата. Видът е същият — стиловете по-горе висят на `.mk-arch-side`, затова тук се повтарят за `.mk-cta-sec`, в по-едър мащаб и центрирани. */ .mk-cta-sec .mk-side-cta > .elementor-element-populated { position: relative !important; overflow: hidden !important; background: #362A4B !important; border-radius: 4px !important; padding: 34px 40px !important; max-width: 760px !important; margin: 0 auto !important; } .mk-cta-sec .mk-side-cta > .elementor-element-populated::before { content: "?" !important; position: absolute !important; right: -6px !important; bottom: -74px !important; font-family: Onest, sans-serif !important; font-size: 260px !important; font-weight: 800 !important; line-height: 1 !important; color: rgba(255,255,255,.14) !important; transform: rotate(35deg) !important; transform-origin: 50% 50% !important; pointer-events: none !important; z-index: 0 !important; } .mk-cta-sec .mk-side-cta > .elementor-element-populated > .elementor-element { position: relative !important; z-index: 1 !important; } .mk-cta-sec .mk-side-cta .elementor-heading-title { color: #fff !important; font-size: 22px !important; text-align: center !important; } .mk-cta-sec .mk-side-cta .mk-side-cta-txt { color: #C9BBDD !important; font-size: 15px !important; line-height: 1.55 !important; text-align: center !important; } .mk-cta-sec .mk-side-cta .elementor-widget-button { text-align: center !important; } .mk-cta-sec .mk-side-cta .elementor-button { background: #FF1A4B !important; color: #fff !important; border: 0 !important; border-radius: 3px !important; padding: 13px 22px !important; font-size: 14.5px !important; font-weight: 600 !important; } /* ── Резерв в заглавния блок срещу подскачането ─────────────────────── Заглавието, водещият абзац и формата нямаха запазена височина и до идването на Onest стояха по-ниски. Измерени стойности: 63 / 66 / 46. */ .mk-arch-title { min-height: 63px !important; } .mk-arch-lead { min-height: 66px !important; } /* Ширината на картите идва оттук, не от JavaScript. Преди това те се рисуваха на пълна ширина (карта 1296px висока), после JS ги свиваше в колони (757px) и контейнерът се свиваше наполовина, влачейки всичко под себе си — измерено 1.68 CLS на архива с историите. Сега първият рендер е с верните размери, а JS само ги позиционира. */ .mk-grid-masonry .e-loop-item { width: calc( (100% - 24px) / 2 ) !important; } @media (max-width: 767px) { .mk-grid-masonry .e-loop-item { width: 100% !important; } } /* Леченията над заглавието в картата: етикети, не заглавие. Снимките са 400×400 при всичките 49 — еднакви, затова пълната височина не прави решетката назъбена. Изрязването на 220px отрязваше горе и долу. Термините идват от динамичния таг `post-terms` и са връзки. Размерът от 12px стоеше на джаджата, а `a` наследяваше 16px — измерено на архива: лечението излизаше 16px срещу 17px на заглавието, тоест тежеше колкото него. Затова селекторът хваща и `a`, както при картата на лекаря. Етикетът е пил, а редът им е flex с 6px разстояние — запетая между тях няма. Връзките идват от `[mk_link_treatments class="mk-tags"]`, затова редът стои и на `.mk-tags`, и на контейнера на джаджата: обвивката е вътре в него. */ .mk-arch-card.is-health .mk-arch-spec { margin-bottom: 8px !important; } /* Етикетите стоят под заглавието — от 29.10.2026. Разстоянието между двете е на джаджата на заглавието и беше 20px, колкото между отделните блокове; етикетът обаче е част от заглавието, не следващ блок. */ .mk-arch-card.is-health .mk-arch-name { margin-bottom: 6px !important; } .mk-arch-card.is-health .mk-arch-spec .elementor-widget-container, .mk-arch-card.is-health .mk-arch-spec .mk-tags { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; } .mk-arch-card.is-health .mk-arch-spec p { margin: 0 !important; } .mk-arch-card.is-health .mk-arch-spec a { display: inline-block !important; padding: 3px 8px !important; font-size: 11px !important; font-weight: 700 !important; line-height: 1.4 !important; letter-spacing: 0 !important; /* Главни букви нямаше да се поберат: „Пластична и естетична хирургия" излиза 254px при колона от 235px и пилът се пренасяше на два реда. Измерено. */ text-transform: none !important; text-decoration: none !important; color: #69528E !important; background: #F3EEF8 !important; border: 1px solid #E7DEF2 !important; border-radius: 999px !important; } .mk-arch-card.is-health .mk-arch-spec a:hover { background: #E9DFF5 !important; border-color: #D6C6E8 !important; } /* Заглавието е връзка и губеше дебелината, зададена на джаджата. */ .mk-arch-card.is-health .mk-arch-name .elementor-heading-title a { font-weight: 700 !important; } /* ── Търсачка в заглавния блок на архива ───────────────────────────────── Полето е на Search & Filter, видът е същият, какъвто беше при нативната форма: поле 46px и плътен лилав бутон до него, двете в 520px, центрирани. Плъгинът рисува полетата си с CSS променливи — задават се стойностите, не се пипа структурата му. Височината не е `height`: тя излиза от padding + line-height + рамка, тоест 2 + 12 + 20.3 + 12 ≈ 46. Мащабът се връща на 1: пресетът на плъгина (`uploads/search-filter/style.css`) задава `input-scale: 2` и всеки шрифт излиза с 2px по-голям. Класът на бутона е `--control-type-submit`, не `--input-type-submit`. */ .mk-arch-searchbox { margin-top: 22px !important; min-height: 46px !important; } .mk-arch-searchbox .elementor-shortcode { display: flex !important; gap: 10px !important; max-width: 520px !important; margin: 0 auto !important; align-items: center !important; } .mk-arch-searchbox .search-filter-base { --search-filter-input-scale: 1; --search-filter-scale-base: 14.5; --search-filter-input-color: #4E3D6B; --search-filter-input-background-color: #fff; --search-filter-input-placeholder-color: #9A92AC; --search-filter-input-border-style: solid; --search-filter-input-border-width: 1px; --search-filter-input-border-color: #E7DFF0; --search-filter-input-border-hover-color: #C9B8DC; --search-filter-input-border-focus-color: #69528E; --search-filter-input-border-radius: 3px; --search-filter-input-box-shadow: none; --search-filter-input-padding-top: 12px; --search-filter-input-padding-bottom: 12px; --search-filter-input-padding-left: 16px; --search-filter-input-padding-right: 16px; --search-filter-input-gap: 0px; --search-filter-input-margin: 0px; --search-filter-field-padding: 0px; } .mk-arch-searchbox .search-filter-field--type-search { flex: 1 1 auto !important; min-width: 0 !important; } .mk-arch-searchbox .search-filter-input-text { min-height: 46px !important; } .mk-arch-searchbox .search-filter-input-text__input { height: 44px !important; font-size: 14.5px !important; } .mk-arch-searchbox .search-filter-field--control-type-submit { flex: 0 0 auto !important; } .mk-arch-searchbox .search-filter-field--control-type-submit .search-filter-input-button { height: 46px !important; padding: 0 22px !important; margin: 0 !important; background: #69528E !important; color: #fff !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; border-radius: 3px !important; font-size: 14.5px !important; font-weight: 600 !important; line-height: 1 !important; white-space: nowrap !important; cursor: pointer !important; -webkit-appearance: none !important; appearance: none !important; transition: background .18s ease !important; } .mk-arch-searchbox .search-filter-field--control-type-submit .search-filter-input-button:hover, .mk-arch-searchbox .search-filter-field--control-type-submit .search-filter-input-button:focus, .mk-arch-searchbox .search-filter-field--control-type-submit .search-filter-input-button:active { background: #55407A !important; color: #fff !important; outline: 0 !important; box-shadow: none !important; } @media (max-width: 575px) { .mk-arch-searchbox .elementor-shortcode { flex-direction: column !important; align-items: stretch !important; } .mk-arch-searchbox .search-filter-field--control-type-submit .search-filter-input-button { width: 100% !important; justify-content: center !important; } } /* ── Карта „Методи и технологии" ────────────────────────────────────────── Лилавата рамка е вградена в самите снимки. Мерено по пикселите на файловете (шест от осем я носят): 10–11px горе и долу от 393, тоест 2.5–2.8%, и 9–14px отляво и отдясно от 678, тоест 1.3–2.1%. Ширината сама не стига. Разширяването с отрицателни отстъпи режеше само отляво и отдясно, а височината на кутията следва височината на снимката — горният и долният кант оставаха видими. Мащабирането реже по двете оси наведнъж: 1.07 отнема по 3.3% от всяка страна, с резерв над измерените 2.8%. Кутията не се мени, защото `transform` не участва в подредбата. */ .mk-arch-card.is-innovation .mk-arch-img { overflow: hidden !important; } .mk-arch-card.is-innovation .mk-arch-img img { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; transform: scale( 1.07 ) !important; } /* ── Карта „Добре дошли" (бебета) ───────────────────────────────────────── Снимката е плакат: номерът на бебето е горе, името — долу. Рязането на обща височина отрязваше името, затова се показва цяла. 135 от 157 са 1080×1080, останалите 22 са пейзажни и излизат по-ниски — решетката е с изравнени карти, тоест текстът просто започва по-надолу при тях. */ /* Тук стоеше датата на публикуване над заглавието. Джаджата падна от карта #31488 на 29.10.2026 — датата на публикуване не се показва. */ /* ── Здравен видео канал ───────────────────────────────────────────────── Решетката е на чужд плъгин (youtube-gallery-vc). Истинската му подредба, извадена от рендирания код: .yt-gallery-listing-wrap обвивка на листинга .yt-gallery-page-items редът .yt-gallery-item колоната (50% при две в ред) .yt-gallery-entry-wrapper картата .yt-gallery-picture миниатюрата .yt-gallery-content заглавие и резюме Плъгинът нулира всички полета с `.yt-defaults-videos-container *{margin:0; padding:0}` — оттам липсата на отстояние между колоните. */ .mk-video-grid .yt-gallery-container { max-width: none !important; } /* Горе имаше 20px празнина, заради която лявата колона стоеше по-ниско от дясната. Измерено: контейнер top=491, първа карта top=511. */ .mk-video-grid .yt-gallery-listing-section, .mk-video-grid .yt-gallery-listing-wrap, .mk-video-grid .yt-gallery-page-items { padding-top: 0 !important; margin-top: 0 !important; } /* Отстоянието между картите: подложка на колоната, изтеглен навън ред. */ .mk-video-grid .yt-gallery-page-items { margin-left: -12px !important; margin-right: -12px !important; } .mk-video-grid .yt-gallery-item { padding: 0 12px 24px !important; margin-bottom: 0 !important; } /* ── картата ───────────────────────────────────────────────────────────── Същият механизъм като при `.mk-arch-card`: квадрат 8×8 с център в горния ляв ъгъл, който стои ЗАД снимката — вижда се само външната му половина. При ховър картата се повдига, квадратът се свива и горната линия изтича по ръба. Затова обвивката е `overflow: visible`, а изрязването на снимката е на самата снимка. */ /* Колона: картата е разтегната до височината на реда, а снимката и текстът са по-къси при по-кратките заглавия — под текста оставаше бяло поле и долната линия на контура увисваше над дъното на картата. Текстовият блок поема остатъка. */ .mk-video-grid .yt-gallery-entry-wrapper { position: relative !important; display: flex !important; flex-direction: column !important; height: 100% !important; background: #fff !important; border: 1px solid #EEE6F5 !important; border-radius: 0 !important; overflow: visible !important; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important; } .mk-video-grid .yt-gallery-item:hover .yt-gallery-entry-wrapper { transform: translateY(-3px) !important; box-shadow: 0 9px 20px rgba(54, 42, 75, .14) !important; border-color: #DED0EA !important; } /* Квадратът в ъгъла — зад снимката. */ .mk-video-grid .yt-gallery-entry-wrapper::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-video-grid .yt-gallery-item:hover .yt-gallery-entry-wrapper::before { transform: scale(.125) translate(-4px, -4px) !important; } /* Горната линия изтича от квадрата при ховър. */ .mk-video-grid .yt-gallery-entry-wrapper::after { content: "" !important; position: absolute !important; display: block !important; /* Картата е с 1px рамка, а `100%` се мери спрямо полето вътре в нея — оттам изваждането встрани по 1px. Линията трябва да легне по border box, иначе не се събира със страничните. */ top: -4px !important; left: -1px !important; width: calc(100% + 2px) !important; height: 8px !important; background: #69528E !important; z-index: 1 !important; pointer-events: none !important; transform-origin: left center !important; transform: scaleX(0) scaleY(1) !important; transition: transform .3s cubic-bezier(.22, .85, .3, 1) !important; } .mk-video-grid .yt-gallery-item:hover .yt-gallery-entry-wrapper::after { transform: scaleX(1) scaleY(.125) translateY(-4px) !important; } /* Останалите три линии на обиколката. Картата няма свободни псевдо-елементи, затова лявата и дясната се рисуват от колоната, а долната — от текстовия блок, който ляга на долния ръб на картата. Колоната е с подложка 0 12px 24px, тоест ръбовете на картата са на 12px отвътре. */ .mk-video-grid .yt-gallery-item { position: relative !important; } /* Лявата: дебела колкото квадрата, изтънява докато слиза. */ .mk-video-grid .yt-gallery-item::before { content: "" !important; position: absolute !important; display: block !important; top: 0 !important; left: 9px !important; width: 8px !important; height: calc(100% - 24px) !important; background: #69528E !important; z-index: 1 !important; pointer-events: none !important; transform-origin: center top !important; transform: scaleY(0) scaleX(1) !important; transition: transform .3s cubic-bezier(.22, .85, .3, 1) !important; } /* Двете странични линии стоят на колоната, а колоната не се повдига при ховър — картата се повдига с translateY(-3px). Затова линиите носят същото повдигане, иначе остават 3px по-ниско: горе не се събират с горната линия, долу надрастват под долната. */ .mk-video-grid .yt-gallery-item:hover::before { transform: scaleY(1) scaleX(.125) translateX(-4px) translateY(-3px) !important; } /* Дясната: вече тънката 1px, дорисува след първите две. */ .mk-video-grid .yt-gallery-item::after { content: "" !important; position: absolute !important; display: block !important; top: 0 !important; right: 12px !important; width: 1px !important; height: calc(100% - 24px) !important; background: #69528E !important; z-index: 1 !important; pointer-events: none !important; transform-origin: top center !important; transform: scaleY(0) !important; transition: transform .14s ease .14s !important; } .mk-video-grid .yt-gallery-item:hover::after { transform: scaleY(1) translateY(-3px) !important; } /* Долната: 1px по ръба на текстовия блок. */ .mk-video-grid .yt-gallery-content::after { content: "" !important; position: absolute !important; display: block !important; bottom: -1px !important; left: -1px !important; width: calc(100% + 2px) !important; height: 1px !important; background: #69528E !important; z-index: 1 !important; pointer-events: none !important; transform-origin: right center !important; transform: scaleX(0) !important; transition: transform .14s ease .2s !important; } .mk-video-grid .yt-gallery-item:hover .yt-gallery-content::after { transform: scaleX(1) !important; } /* ── миниатюрата ───────────────────────────────────────────────────────── Застава над контура, както снимката в картите на архивите. YouTube връща `hqdefault` 480×360 — 4:3, в което кадърът 16:9 стои с черни ленти; кутията се прави 16:9 и снимката се изрязва по нея. */ .mk-video-grid .yt-gallery-picture { position: relative !important; z-index: 2 !important; flex: 0 0 auto !important; aspect-ratio: 16 / 9 !important; overflow: hidden !important; background: #2B2338 !important; } .mk-video-grid .yt-gallery-picture-wrap { height: 100% !important; overflow: hidden !important; } .mk-video-grid .yt-gallery-img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; display: block !important; } /* ── текстът ─────────────────────────────────────────────────────────── */ .mk-video-grid .yt-gallery-content { position: relative !important; z-index: 2 !important; flex: 1 1 auto !important; background: #fff !important; padding: 20px 20px 22px !important; } .mk-video-grid .yt-gallery-title, .mk-video-grid .yt-gallery-title-link { font-size: 17px !important; font-weight: 600 !important; line-height: 1.35 !important; color: #362A4B !important; text-decoration: none !important; } .mk-video-grid .yt-gallery-title { margin: 0 0 8px !important; } .mk-video-grid .yt-gallery-item:hover .yt-gallery-title-link { color: #69528E !important; } .mk-video-grid .yt-gallery-excerpt { margin: 0 !important; font-size: 14px !important; line-height: 1.55 !important; color: #6E6880 !important; } /* ── страниране ──────────────────────────────────────────────────────── */ .mk-video-grid .yt-gallery-pagination-wrap { margin-top: 24px !important; } /* Банерът на плъгина е изключен от шорткода; правилото е предпазител, ако някой го върне от настройките. */ .mk-video-grid .yt-gallery-header-container { display: none !important; } /* ── Често задавани въпроси ─────────────────────────────────────────────── Архивът е вход, не съдържание: въпрос, встъпителен текст с многоточие и връзка. Отговорът живее на своята страница — там се индексира отделно и там се добавя каквото потрябва към конкретния отговор. */ .mk-faq-col .elementor-widget-heading.mk-faq-group:not(:first-child) { margin-top: 46px !important; } .mk-faq-col .mk-faq-group .elementor-heading-title { font-size: 15px !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: #69528E !important; padding-bottom: 10px !important; border-bottom: 1px solid #EEE6F5 !important; } /* Редът. Цялата карта води към страницата — заглавието е разтегнато върху нея с `mk-stretch`, същото както при останалите архиви. */ .mk-faq-list .elementor-grid { gap: 0 !important; } .mk-faq-item { position: relative !important; padding: 20px 46px 20px 0 !important; border-bottom: 1px solid #EEE6F5 !important; transition: background-color .18s ease, padding-left .18s ease !important; } .mk-faq-item:hover { background: #FBF9FD !important; padding-left: 10px !important; } .mk-faq-q { margin: 0 0 6px !important; } .mk-faq-q .elementor-heading-title { font-size: 17px !important; font-weight: 700 !important; line-height: 1.45 !important; color: #362A4B !important; margin: 0 !important; } /* Връзката вътре в заглавието идва с тегло 400 от темата и го изтриваше. */ .mk-faq-q .elementor-heading-title a { color: inherit !important; text-decoration: none !important; font-weight: inherit !important; font-size: inherit !important; line-height: inherit !important; } /* Цялата карта води към страницата, не само заглавието. Правилото за `mk-stretch` горе е вързано за `.mk-arch-card`; тук картата е друга. Колоната на Elementor е позиционирана и разтегнатата връзка опираше в нея, тоест оставаше извън подложката на секцията. Затова обвивката и колоната се обезпозиционират и връзката се мери спрямо самата карта. */ .mk-faq-item > .elementor-container, .mk-faq-item > .elementor-container > .elementor-column, .mk-faq-item > .elementor-container > .elementor-column > .elementor-widget-wrap, .mk-faq-item .mk-stretch, .mk-faq-item .mk-stretch > .elementor-widget-container { position: static !important; } .mk-faq-item .mk-stretch a { position: static !important; } .mk-faq-item .mk-stretch a::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 4 !important; } .mk-faq-item:hover .mk-faq-q .elementor-heading-title { color: #69528E !important; } .mk-faq-lead p { font-size: 14px !important; line-height: 1.65 !important; color: #6E6880 !important; margin: 0 !important; } .mk-faq-more p { font-size: 13px !important; font-weight: 600 !important; color: #69528E !important; margin: 8px 0 0 !important; } /* Стрелката вдясно, която се подава при посочване. */ .mk-faq-item::after { content: "" !important; position: absolute !important; right: 18px !important; top: 26px !important; width: 9px !important; height: 9px !important; pointer-events: none !important; border-top: 2px solid #C9B8DC !important; border-right: 2px solid #C9B8DC !important; transform: rotate(45deg) !important; transition: transform .18s ease, border-color .18s ease !important; } .mk-faq-item:hover::after { border-color: #69528E !important; transform: rotate(45deg) translate(3px, -3px) !important; } /* ── страницата на един въпрос ───────────────────────────────────────── */ .mk-faq-back p { font-size: 13px !important; margin: 0 0 14px !important; } .mk-faq-back a { color: #69528E !important; text-decoration: none !important; } .mk-faq-back a::before { content: "← " !important; } .mk-faq-back a:hover { text-decoration: underline !important; } .mk-faq-title .elementor-heading-title { font-size: 30px !important; font-weight: 700 !important; line-height: 1.25 !important; color: #362A4B !important; margin: 0 0 22px !important; } .mk-faq-body { font-size: 16px !important; line-height: 1.75 !important; color: #4A4458 !important; } .mk-faq-body p { margin: 0 0 16px !important; } .mk-faq-body h2, .mk-faq-body h3 { color: #362A4B !important; margin: 28px 0 12px !important; } .mk-faq-body ul, .mk-faq-body ol { margin: 0 0 16px 20px !important; } .mk-faq-body li { margin-bottom: 8px !important; } .mk-faq-body img { max-width: 100% !important; height: auto !important; } .mk-faq-single .mk-side-cta , .mk-sg-main .mk-side-cta { margin-top: 40px !important; } /* ── специалисти: четири в ред ─────────────────────────────────────────── Решетката е 4 / 3 / 2 (шаблон #17815, джаджа `mkdralg`). Колоната пада от 286 на 206px; снимката е в естествени пропорции и се смалява заедно с нея, вместо да се реже — и 326-те кадъра са 300x350. Разстоянието между картите е наполовина, 32 → 16px, а освободеното отива в самите карти: при четири колони това са 48px, по 12 на карта. Размерите вътре в картата са същите, каквито бяха при три колони — само решетката е по-гъста. */ .elementor-element-mkdralg .elementor-loop-container { --grid-column-gap: 16px !important; --grid-row-gap: 16px !important; gap: 16px !important; } .mk-arch-card.is-doctor .mk-arch-body .elementor-element-populated { padding: 16px 20px 16px !important; } .mk-arch-card.is-doctor .mk-arch-name .elementor-heading-title { margin-bottom: 4px !important; } /* Специалността и болницата отстъпват на името. Декларациите на джаджата не стигат: текстът е връзка и носи собствен размер, затова селекторът хваща и `a`. 12.8px е −20% от реалните 16px, които връзката наследяваше. */ .mk-arch-card.is-doctor .mk-arch-spec, .mk-arch-card.is-doctor .mk-arch-spec p, .mk-arch-card.is-doctor .mk-arch-spec a, .mk-arch-card.is-doctor .mk-arch-spec .elementor-widget-container { font-size: 12.8px !important; } .mk-arch-card.is-doctor .mk-arch-spec { margin-bottom: 4px !important; } .mk-arch-card.is-doctor .mk-arch-hosp, .mk-arch-card.is-doctor .mk-arch-hosp p, .mk-arch-card.is-doctor .mk-arch-hosp li, .mk-arch-card.is-doctor .mk-arch-hosp a, .mk-arch-card.is-doctor .mk-arch-hosp .elementor-widget-container { font-size: 12.8px !important; } .mk-arch-card.is-doctor .mk-arch-div { margin: 6px 0 !important; } /* Съобщение в архив без записи — казва защо е празно и накъде да се върви. */ .mk-arch-empty { margin: 20px 0 0 !important; padding: 28px 30px !important; background: #F8F5FB !important; border: 1px solid #EEE6F5 !important; } .mk-arch-empty p { margin: 0 !important; font-size: 16px !important; line-height: 26px !important; color: #4A4458 !important; } .mk-arch-empty a { color: #69528E !important; border-bottom: 1px solid #C9B8DC !important; text-decoration: none !important; } .mk-arch-empty a:hover { border-bottom-color: #69528E !important; } /* Уводният ред на архива и опциите на филтрите се равняват по общата стълбица: темата държи `p { line-height: 1.7 }` на самия елемент и без изрично правило уводът излиза на 27 вместо на 26. */ .mk-arch-head .mk-arch-lead p { font-size: 16px !important; line-height: 26px !important; } /* Полетата на Search & Filter остават на 14.5 — това е мярката на нативната форма и е описана в `search-filter.css`; не е пропуск. */ /* Същото и в страничната колона. Пак `padding`: с `margin` полето се слива с това на решетката и остава 20. */ .mk-arch-side .mk-side-more { padding-top: 17px !important; } /* ══ ТЕЛЕФОН: решетката с карти ════════════════════════════════════════ Elementor оставя две колони и при 390px. Карта от 170 не побира „проф. д-р Сюлейман Алъджъ“ — името се режеше с многоточие, а специалността се чупеше по средата на думата. Една колона дава 354 и всичко се събира. Прагът е 600: между 600 и 1024 две колони още вършат работа. */ @media (max-width: 600px) { /* Elementor рисува Loop Grid-а ту като grid, ту като flex — зависи от скина. Само `grid-template-columns` не стига: при flex без пренос трите карти се свиваха в един ред по 110px и текстът слизаше буква по буква. Затова и двете. */ .mk-arch-grid .elementor-loop-container, .mk-arch-grid .elementor-grid { grid-template-columns: 1fr !important; flex-direction: column !important; flex-wrap: nowrap !important; } .mk-arch-grid .e-loop-item { width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; } /* Името вече има място за два реда; резервът от решетката на широк екран само отваря дупка под него. */ .mk-arch-card .mk-arch-name { min-height: 0 !important; } .mk-arch-card .mk-arch-exc { min-height: 0 !important; } } /* Заглавният блок на архива: резервите срещу подскачане са мерени за широк екран, където заглавието е на един ред. На телефон същите числа оставят празнина под текста. */ @media (max-width: 767px) { .mk-arch-title { min-height: 0 !important; } .mk-arch-lead { min-height: 0 !important; } } /* ── страничната колона на тесен екран ────────────────────────────────── Размерите по-горе са мерени за колона от 300px отстрани. Под 900px тя слиза под текста и заема целия ред — 72px снимка до надпис от 14px се чете като точка. Кадрите го позволяват: процедурите са 150px във файла, направленията 300x174. */ @media only screen and (max-width: 900px) { .mk-side-card .mk-side-img { flex: 0 0 120px !important; width: 120px !important; } .mk-side-card .mk-side-img img { width: 120px !important; height: 120px !important; } .mk-side-card.is-direction .mk-side-img { flex: 0 0 300px !important; width: 300px !important; } .mk-side-card.is-direction .mk-side-img img { width: 306px !important; height: auto !important; } } /* ── същите снимки, още веднъж и по-големи ────────────────────────────── Правилата по вид (`is-doctor`, `is-story`, `is-baby`, `is-innovation`) са с клас повече от общото правило отгоре и затова оставаха на мярката за широк екран: 72px при портретните, 94 при хоризонталните. Измерено на „Въпроси": 72x90 за история при колона от 335px. Всяка мярка расте с 150% спрямо онова, което е била на телефон. */ @media only screen and (max-width: 900px) { /* Кутията на кадъра няма своя височина — взема я от снимката вътре. Иначе портретните кадри (специалистите са 216x252) излизат извън нея и лягат върху името отдолу. */ .mk-side-card .mk-side-img, .mk-side-card .mk-side-img > * { flex: 0 0 auto !important; width: 180px !important; height: auto !important; max-height: none !important; overflow: hidden !important; } .mk-side-card .mk-side-img img { display: block !important; width: 180px !important; height: 180px !important; max-height: none !important; } .mk-side-card.is-baby .mk-side-img img { width: 108px !important; height: auto !important; } /* Специалистите и историите още веднъж толкова: портретните кадри се четат по-трудно от квадратните и 108px не стигаха. */ .mk-side-card.is-doctor .mk-side-img, .mk-side-card.is-doctor .mk-side-img > *, .mk-side-card.is-story .mk-side-img, .mk-side-card.is-story .mk-side-img > * { flex: 0 0 auto !important; width: 216px !important; height: auto !important; } .mk-side-card.is-doctor .mk-side-img img, .mk-side-card.is-story .mk-side-img img { width: 216px !important; height: auto !important; } .mk-side-card.is-innovation .mk-side-img { flex: 0 0 135px !important; width: 135px !important; } .mk-side-card.is-innovation .mk-side-img img { width: 141px !important; height: auto !important; } } /* На телефон въздухът над първата джаджа е колкото между секциите. */ @media only screen and (max-width: 900px) { .elementor-location-archive > .elementor-section:first-of-type { padding-top: 40px !important; } } /* ── въздухът под страничната колона ──────────────────────────────────── Измерено на пет страници: 40px на архивите, 22 на единичен специалист, 46 на лечение и събитие, 0 на места. Три различни правила даваха по нещо — полето на секцията, полето на колоната и отстъпът на последната карта — и сборът излизаше различен според това кои от трите важат. Тук въздухът идва само от едно място: колоната. Секцията се нулира отдолу, последната джаджа в колоната също. */ @media only screen and (max-width: 900px) { .elementor-section:has( .mk-arch-side ), .elementor-section:has( .mk-in-side ) { padding-bottom: 0 !important; } .mk-arch-side.mk-arch-side > .elementor-widget-wrap.elementor-element-populated, .mk-in-side.mk-in-side > .elementor-widget-wrap.elementor-element-populated { padding-bottom: 40px !important; } .mk-arch-side .elementor-widget-wrap > .elementor-widget:last-child, .mk-in-side .elementor-widget-wrap > .elementor-widget:last-child { margin-bottom: 0 !important; } }