/* services_layout.css Каталог-стили для УЗИ/Диагностики/Процедур/Забора материала: 2-колоночная раскладка на десктопе + мобильная строка title+цена в одну линию. Никакой booking widget логики — только layout каталог-страниц. */ /* === 2-колоночная раскладка каталога на десктопе === На УЗИ/Диагностике/Процедурах/Заборе материала убрали кнопки «Записаться», осталось title + цена → уплотняем секции в 2 колонки. column-count само балансирует, break-inside: avoid не даёт разорвать секцию между колонками. Анализы и приёмы врачей оставляем в одну колонку (data-type-exam отсутствует на странице врачей; для ANALYZE этот атрибут явно не выставляется). */ @media (min-width: 992px) { .ml-content > .ml-section-wrapper[data-type-exam="ULTRASOUND"], .ml-content > .ml-section-wrapper[data-type-exam="DIAGNOSTIC"], .ml-content > .ml-section-wrapper[data-type-exam="PROCEDURE"], .ml-content > .ml-section-wrapper[data-type-exam="MATERIAL"] { column-count: 2; column-gap: 40px; } .ml-content > .ml-section-wrapper[data-type-exam="ULTRASOUND"] .ml-analysis, .ml-content > .ml-section-wrapper[data-type-exam="DIAGNOSTIC"] .ml-analysis, .ml-content > .ml-section-wrapper[data-type-exam="PROCEDURE"] .ml-analysis, .ml-content > .ml-section-wrapper[data-type-exam="MATERIAL"] .ml-analysis { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; margin-bottom: 32px; } .ml-content > .ml-section-wrapper[data-type-exam="ULTRASOUND"] .ml-analysis:last-child, .ml-content > .ml-section-wrapper[data-type-exam="DIAGNOSTIC"] .ml-analysis:last-child, .ml-content > .ml-section-wrapper[data-type-exam="PROCEDURE"] .ml-analysis:last-child, .ml-content > .ml-section-wrapper[data-type-exam="MATERIAL"] .ml-analysis:last-child { margin-bottom: 32px; } } /* При активном поиске или выбранных фильтрах сайдбара multicolumn-раскладка ломает остатки таблиц (1-2 строки в каждой колонке смотрятся странно). Возвращаем одну колонку до сброса фильтра. Класс `is-filtering` ставится: а) серверно в index_content.php при наличии $_REQUEST['FILTER'] б) JS-кодом внутри того же шаблона при изменении поиска/чекбоксов. Селектор без `>` — wrap может оказаться вложенным в .ml-content после AJAX-replace. */ @media (min-width: 992px) { .ml-section-wrapper.is-filtering, .ml-section-wrapper.is-filtering[data-type-exam] { column-count: 1 !important; column-gap: 0 !important; } } /* === Прижим цены к правому краю на десктопе === .table-service tr — flex space-between (main.css), но без явного flex-grow на title цена сидит сразу после названия, а не у правого края колонки. Раздвигаем явно. */ @media (min-width: 992px) { .ml-section-wrapper[data-type-exam="ULTRASOUND"] .table-service tr td.table-service__heading, .ml-section-wrapper[data-type-exam="DIAGNOSTIC"] .table-service tr td.table-service__heading, .ml-section-wrapper[data-type-exam="PROCEDURE"] .table-service tr td.table-service__heading, .ml-section-wrapper[data-type-exam="MATERIAL"] .table-service tr td.table-service__heading { flex: 1 1 0; min-width: 0; } .ml-section-wrapper[data-type-exam="ULTRASOUND"] .table-service tr td.table-service__bold, .ml-section-wrapper[data-type-exam="DIAGNOSTIC"] .table-service tr td.table-service__bold, .ml-section-wrapper[data-type-exam="PROCEDURE"] .table-service tr td.table-service__bold, .ml-section-wrapper[data-type-exam="MATERIAL"] .table-service tr td.table-service__bold { flex: 0 0 auto; text-align: right; white-space: nowrap; } } /* === Мобильная раскладка строки каталога === Только для УЗИ/Диагностики/Процедур — у них убрали кнопки «Записаться», осталось title + цена; держим их в одной строке (flex), не отдельным блоком. Анализы и забор материала оставляем как есть. */ @media (max-width: 800px) { .ml-section-wrapper[data-type-exam="ULTRASOUND"] .table-service tr, .ml-section-wrapper[data-type-exam="DIAGNOSTIC"] .table-service tr, .ml-section-wrapper[data-type-exam="PROCEDURE"] .table-service tr { padding: 0; align-items: baseline; } .ml-section-wrapper[data-type-exam="ULTRASOUND"] .table-service tr td.table-service__heading, .ml-section-wrapper[data-type-exam="DIAGNOSTIC"] .table-service tr td.table-service__heading, .ml-section-wrapper[data-type-exam="PROCEDURE"] .table-service tr td.table-service__heading { flex: 1 1 0; min-width: 0; width: auto; order: 1; padding: 14px 12px 14px 0; font-size: 17px; line-height: 1.35; } .ml-section-wrapper[data-type-exam="ULTRASOUND"] .table-service tr td.table-service__heading a, .ml-section-wrapper[data-type-exam="DIAGNOSTIC"] .table-service tr td.table-service__heading a, .ml-section-wrapper[data-type-exam="PROCEDURE"] .table-service tr td.table-service__heading a { word-break: break-word; } .ml-section-wrapper[data-type-exam="ULTRASOUND"] .table-service tr td.table-service__bold, .ml-section-wrapper[data-type-exam="DIAGNOSTIC"] .table-service tr td.table-service__bold, .ml-section-wrapper[data-type-exam="PROCEDURE"] .table-service tr td.table-service__bold { flex: 0 0 auto; width: auto; order: 2; padding: 14px 0 14px 12px; font-size: 18px; text-align: right; white-space: nowrap; } /* Срединная ячейка (PRICE_INFO для Процедур) — отдельная подстрока под title+price, мелким серым. */ .ml-section-wrapper[data-type-exam="PROCEDURE"] .table-service tr td:nth-child(2):not(.table-service__bold) { flex: 1 0 100%; width: 100%; order: 3; padding: 0 0 12px; font-size: 13px; line-height: 1.35; color: #898f9a; white-space: normal; } } /* === Уменьшение «i»-тултип иконки возле названий услуг === 22px было слишком крупно для рядом с текстом; уменьшаем до 16px. После уменьшения иконка сидит на baseline → смещаем её на пару пикселей вверх. Красный вариант (.hint--alert) — для предупреждений у Процедур («стоимость зависит от метода»). */ .hint.hint--main, .hint.hint--alert { width: 16px !important; height: 16px !important; font-size: 11px !important; line-height: 16px !important; margin-left: 6px; margin-right: 5px; position: relative; top: -3px; } .hint.hint--alert { background-color: #e74c3c !important; color: #fff !important; }