/* Стили для страниц, скопированных с spabest.ru */

/* Общие стили для контента страниц */
.klb-page .klb-post,
.page-content {
    max-width: 100%;
}

.klb-page .klb-post img,
.page-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 20px 0;
}

/* Стили для выравнивания изображений */
.klb-page .klb-post img.alignleft,
.page-content img.alignleft {
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
    max-width: 300px;
}

.klb-page .klb-post img.alignright,
.page-content img.alignright {
    float: right;
    margin-left: 20px;
    margin-bottom: 20px;
    max-width: 300px;
}

.klb-page .klb-post img.aligncenter,
.page-content img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Очистка float */
.klb-page .klb-post::after,
.page-content::after {
    content: "";
    display: table;
    clear: both;
}

/* Стили для заголовков */
.klb-page .klb-post h1,
.klb-page .klb-post h2,
.klb-page .klb-post h3,
.klb-page .klb-post h4,
.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4 {
    margin-top: 30px;
    margin-bottom: 20px;
    font-weight: 600;
    line-height: 1.3;
}

.klb-page .klb-post h2,
.page-content h2 {
    font-size: 28px;
}

.klb-page .klb-post h3,
.page-content h3 {
    font-size: 24px;
}

/* Стили для параграфов */
.klb-page .klb-post p,
.page-content p {
    margin-bottom: 15px;
    line-height: 1.6;
}

/* Стили для списков */
.klb-page .klb-post ul,
.klb-page .klb-post ol,
.page-content ul,
.page-content ol {
    margin-bottom: 20px;
    padding-left: 30px;
}

.klb-page .klb-post li,
.page-content li {
    margin-bottom: 10px;
    line-height: 1.6;
}

/* Стили для видео */
.klb-page .klb-post .lazy-video,
.page-content .lazy-video {
    margin: 30px 0;
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
}

.klb-page .klb-post .lazy-video iframe,
.klb-page .klb-post .lazy-video video,
.page-content .lazy-video iframe,
.page-content .lazy-video video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Стили для секций */
.klb-page .klb-post section,
.page-content section {
    margin: 40px 0;
}

/* Стили для контейнеров */
.klb-page .klb-post .container,
.page-content .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Адаптивность */
@media (max-width: 768px) {
    .klb-page .klb-post img.alignleft,
    .klb-page .klb-post img.alignright,
    .page-content img.alignleft,
    .page-content img.alignright {
        float: none;
        display: block;
        margin: 20px auto;
        max-width: 100%;
    }
    
    .klb-page .klb-post h2,
    .page-content h2 {
        font-size: 24px;
    }
    
    .klb-page .klb-post h3,
    .page-content h3 {
        font-size: 20px;
    }
}

/* Скрываем breadcrumbs и лишние заголовки на странице Доставка */
.offer-header-section .breadcrumbs,
.offer-header-section .offer-breadcrumbs,
.offer-header-section h1 {
    display: none !important;
}

/* Стили для элементов услуг в ряд - применяется ко всем страницам */
.offer-layout .relevant-list-section,
.relevant-list-section,
.page .relevant-list-section,
.klb-page .relevant-list-section {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
    display: block !important;
    width: 100% !important;
}

.relevant-list-section h2,
.relevant-list-section h2.py-4 {
    margin-bottom: 30px !important;
    font-size: 28px !important;
    font-weight: 600 !important;
}

.relevant-list-section .relevant-list,
.offer-layout .relevant-list-section .relevant-list,
.page .relevant-list-section .relevant-list,
.klb-page .relevant-list-section .relevant-list,
body .relevant-list-section .relevant-list,
body .offer-layout .relevant-list-section .relevant-list,
ul.relevant-list,
.relevant-list-section ul.relevant-list,
.offer-layout .relevant-list-section ul.relevant-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    gap: 30px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.relevant-list-section .relevant-list li,
.offer-layout .relevant-list-section .relevant-list li,
.page .relevant-list-section .relevant-list li,
.klb-page .relevant-list-section .relevant-list li,
body .relevant-list-section .relevant-list li,
body .offer-layout .relevant-list-section .relevant-list li,
ul.relevant-list li,
.relevant-list-section ul.relevant-list li,
.offer-layout .relevant-list-section ul.relevant-list li {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    float: none !important;
    width: 100% !important;
}

.relevant-list-section .relevant-list .offer-card,
.offer-layout .relevant-list-section .relevant-list .offer-card {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.relevant-list-section .relevant-list .offer-card img,
.offer-layout .relevant-list-section .relevant-list .offer-card img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
}

.relevant-list-section .relevant-list .offer-card figcaption,
.offer-layout .relevant-list-section .relevant-list .offer-card figcaption {
    margin-top: 15px !important;
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.relevant-list-section .relevant-list .offer-card h3,
.offer-layout .relevant-list-section .relevant-list .offer-card h3 {
    margin: 0 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}

.relevant-list-section .relevant-list .offer-card h3 a,
.offer-layout .relevant-list-section .relevant-list .offer-card h3 a {
    text-decoration: none !important;
    color: #333 !important;
}

.relevant-list-section .relevant-list .offer-card h3 a:hover,
.offer-layout .relevant-list-section .relevant-list .offer-card h3 a:hover {
    color: #006699 !important;
}

/* Переопределяем любые другие стили, которые могут делать элементы в столбик */
.relevant-list-section .relevant-list li {
    display: flex !important;
    flex-direction: column !important;
}

.relevant-list-section .relevant-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .relevant-list-section .relevant-list,
    .offer-layout .relevant-list-section .relevant-list,
    body .relevant-list-section .relevant-list {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

@media (max-width: 480px) {
    .relevant-list-section .relevant-list,
    .offer-layout .relevant-list-section .relevant-list,
    body .relevant-list-section .relevant-list {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

/* Стили для блоков установки на странице доставки - в ряд с высотой 100px */
.klb-page .klb-post figure,
.page-content figure,
.klb-page .klb-post .wp-block-image,
.page-content .wp-block-image {
    margin: 15px 0 !important;
}

/* Контейнер для блоков установки в ряд */
.klb-page .klb-post .delivery-installation-blocks,
.page-content .delivery-installation-blocks,
.klb-page .klb-post .installation-row,
.page-content .installation-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    margin: 30px 0 !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
}

/* Блоки установки - каждый блок */
.klb-page .klb-post .delivery-installation-blocks figure,
.page-content .delivery-installation-blocks figure,
.klb-page .klb-post .installation-row figure,
.page-content .installation-row figure,
.klb-page .klb-post .delivery-installation-blocks .wp-block-image,
.page-content .delivery-installation-blocks .wp-block-image,
.klb-page .klb-post .installation-row .wp-block-image,
.page-content .installation-row .wp-block-image {
    flex: 1 1 calc(25% - 20px) !important;
    min-width: 200px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Изображения в блоках установки - высота 100px */
.klb-page .klb-post .delivery-installation-blocks img,
.page-content .delivery-installation-blocks img,
.klb-page .klb-post .installation-row img,
.page-content .installation-row img,
.klb-page .klb-post .delivery-installation-blocks figure img,
.page-content .delivery-installation-blocks figure img,
.klb-page .klb-post .installation-row figure img,
.page-content .installation-row figure img {
    width: 100% !important;
    height: 100px !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
}

/* Заголовки под изображениями */
.klb-page .klb-post .delivery-installation-blocks figcaption,
.page-content .delivery-installation-blocks figcaption,
.klb-page .klb-post .installation-row figcaption,
.page-content .installation-row figcaption,
.klb-page .klb-post .delivery-installation-blocks h3,
.page-content .delivery-installation-blocks h3,
.klb-page .klb-post .installation-row h3,
.page-content .installation-row h3 {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-align: center !important;
    line-height: 1.4 !important;
}

/* Автоматическое определение блоков установки по заголовкам */
.klb-page .klb-post h3:has(+ figure img),
.page-content h3:has(+ figure img),
.klb-page .klb-post h3:has(+ .wp-block-image img),
.page-content h3:has(+ .wp-block-image img) {
    display: none !important;
}

/* Альтернативный способ - находим все figure после определенных заголовков */
.klb-page .klb-post h3:contains("Занос мини бассейна"),
.klb-page .klb-post h3:contains("Установка свим спа"),
.klb-page .klb-post h3:contains("Установка плавательного"),
.klb-page .klb-post h3:contains("Встраивание уличного") {
    display: none !important;
}

/* Стили для всех figure на странице доставки - группируем в ряд */
body.page-slug-dostavka .klb-page .klb-post figure,
body.page-slug-dostavka .page-content figure {
    display: inline-block !important;
    vertical-align: top !important;
    width: calc(25% - 20px) !important;
    margin: 0 10px 20px 10px !important;
}

body.page-slug-dostavka .klb-page .klb-post figure img,
body.page-slug-dostavka .page-content figure img {
    width: 100% !important;
    height: 100px !important;
    object-fit: cover !important;
    display: block !important;
}

body.page-slug-dostavka .klb-page .klb-post figure figcaption,
body.page-slug-dostavka .page-content figure figcaption {
    margin-top: 10px !important;
    font-size: 14px !important;
    text-align: center !important;
}

/* Обертка для всех figure на странице доставки */
body.page-slug-dostavka .klb-page .klb-post,
body.page-slug-dostavka .page-content {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
}

/* Более специфичный селектор для блоков установки */
.klb-page .klb-post figure:has(img[alt*="Занос"]),
.klb-page .klb-post figure:has(img[alt*="манипулятором"]),
.klb-page .klb-post figure:has(img[alt*="плавательного"]),
.klb-page .klb-post figure:has(img[alt*="уличного"]),
.page-content figure:has(img[alt*="Занос"]),
.page-content figure:has(img[alt*="манипулятором"]),
.page-content figure:has(img[alt*="плавательного"]),
.page-content figure:has(img[alt*="уличного"]) {
    flex: 1 1 calc(25% - 20px) !important;
    min-width: 200px !important;
    margin: 0 !important;
}

.klb-page .klb-post figure:has(img[alt*="Занос"]) img,
.klb-page .klb-post figure:has(img[alt*="манипулятором"]) img,
.klb-page .klb-post figure:has(img[alt*="плавательного"]) img,
.klb-page .klb-post figure:has(img[alt*="уличного"]) img,
.page-content figure:has(img[alt*="Занос"]) img,
.page-content figure:has(img[alt*="манипулятором"]) img,
.page-content figure:has(img[alt*="плавательного"]) img,
.page-content figure:has(img[alt*="уличного"]) img {
    height: 100px !important;
    object-fit: cover !important;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .klb-page .klb-post .delivery-installation-blocks figure,
    .page-content .delivery-installation-blocks figure,
    .klb-page .klb-post .installation-row figure,
    .page-content .installation-row figure,
    body.page-slug-dostavka .klb-page .klb-post figure,
    body.page-slug-dostavka .page-content figure {
        flex: 1 1 calc(50% - 10px) !important;
        min-width: 150px !important;
    }
}

@media (max-width: 480px) {
    .klb-page .klb-post .delivery-installation-blocks figure,
    .page-content .delivery-installation-blocks figure,
    .klb-page .klb-post .installation-row figure,
    .page-content .installation-row figure,
    body.page-slug-dostavka .klb-page .klb-post figure,
    body.page-slug-dostavka .page-content figure {
        flex: 1 1 100% !important;
        min-width: 100% !important;
    }
}