/* VIA Derm — мобильные правки */

/* ── Глобально: плавный скролл по якорям + offset для sticky-шапки ── */
html { scroll-behavior: smooth; }
[id="appointment-form"],
section[id] {
    scroll-margin-top: 90px;
}

/* ── Соцмережі: ембеди Instagram/TikTok не мають розпирати вьюпорт ──
   Їхні скрипти вставляють блоки шириною 300–540px і більше. На мобільному
   це розтягувало layout viewport (390 → 1500+px) і ламало всі fixed-елементи
   (нижні панелі, липку шапку) у нижній частині сторінки. */
@media (max-width: 991.98px) {
    .pbmit-social-feed-section,
    .pbmit-social-feed-grid {
        overflow-x: hidden;
    }
    .pbmit-social-feed-grid .instagram-media,
    .pbmit-social-feed-grid .tiktok-embed,
    .pbmit-social-feed-grid iframe {
        max-width: 100% !important;
        min-width: 0 !important;
    }
}

/* ── Features-карточки на главной: компактные, иконка справа ────── */
@media (max-width: 991.98px) {
    .pbmit-miconheading-style-1 {
        margin-bottom: 14px !important;
    }
    /* Грид: текст слева, иконка справа сверху */
    .pbmit-ihbox-style-1,
    .pbmit-ihbox-style-1 .pbmit-ihbox-box {
        padding: 14px 16px !important;
        margin: 0 !important;
        min-height: 0 !important;
    }
    .pbmit-ihbox-style-1 .pbmit-ihbox-box {
        display: grid !important;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "title icon"
            "desc  desc";
        column-gap: 10px;
        row-gap: 6px;
        align-items: start;
    }
    .pbmit-ihbox-style-1 .pbmit-ihbox-heading-wrapper {
        grid-area: title;
        margin: 0 !important;
        padding: 0 !important;
    }
    .pbmit-ihbox-style-1 .pbmit-ihbox-icon {
        grid-area: icon;
        margin: 0 !important;
        padding: 0 !important;
        align-self: start;
    }
    .pbmit-ihbox-style-1 .pbmit-ihbox-content {
        grid-area: desc;
        margin: 0 !important;
        padding: 0 !important;
    }
    .pbmit-ihbox-style-1 .pbmit-ihbox-icon-wrapper {
        width: 36px !important;
        height: 36px !important;
        font-size: 18px !important;
        line-height: 36px !important;
        min-width: 36px !important;
    }
    .pbmit-ihbox-style-1 .pbmit-ihbox-icon-wrapper i {
        font-size: 18px !important;
        line-height: 36px !important;
    }
    .pbmit-ihbox-style-1 .pbmit-element-title {
        font-size: 19px !important;
        line-height: 1.25 !important;
        margin: 0 !important;
        font-weight: 600 !important;
    }
    .pbmit-ihbox-style-1 .pbmit-heading-desc {
        font-size: 15px !important;
        line-height: 1.5 !important;
    }
}

/* ── Карточка услуги: вся кликабельна ────────────────────────────── */
.pbmit-service-style-1 .pbminfotech-post-item {
    position: relative;
    cursor: pointer;
}
.pbmit-service-style-1 .pbmit-link {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2 !important;
    background: transparent !important;
    border: 0 !important;
}
/* Подымаем интерактивные элементы выше overlay-ссылки */
.pbmit-service-style-1 .pbmit-service-cat a,
.pbmit-service-style-1 .pbmit-service-title a,
.pbmit-service-style-1 .pbmit-service-btn {
    position: relative;
    z-index: 3;
}
.pbmit-service-style-1 .pbminfotech-post-item:hover .pbmit-featured-img-wrapper img {
    transform: scale(1.04);
    transition: transform .5s ease;
}

/* ── Слайдер услуг на главной: меньше пустот вокруг ─────────────── */
@media (max-width: 575.98px) {
    .service-one-slider.section-xl {
        padding-top: 50px !important;
        padding-bottom: 30px !important;
    }
    /* контейнер не обрезает следующий слайд (нужно для peek-эффекта от JS) */
    .service-one-slider .swiper-slider {
        overflow: visible !important;
    }
    .service-one-slider .effect-img { display: none !important; }
}

@media (max-width: 991.98px) {

    /* ── 1) H1 на страницах разделов: уменьшим, чтобы не ломал макет ── */
    .pbmit-title-bar-wrapper .pbmit-tbar-title,
    .page-content > section.section-lg h1.text-white,
    .page-content > section.section-lg h1 {
        font-size: 22px !important;
        line-height: 1.25 !important;
        letter-spacing: 0 !important;
        word-break: break-word;
        hyphens: auto;
    }

    /* ── 2) Hero (page-title) — в 2 раза ниже на мобильном ──────────── */
    .page-content > section.section-lg,
    section.section-lg[style*="background-image"] {
        padding-top: 60px !important;
        padding-bottom: 30px !important;
        min-height: 150px !important;
    }
    section.section-lg[style*="background-image"] .row {
        min-height: 150px !important;
    }
    .pbmit-title-bar-wrapper,
    .pbmit-title-bar-content {
        padding-top: 60px !important;
        padding-bottom: 30px !important;
        min-height: 200px !important;
    }

    /* ── 3) Картинки услуг короче ───────────────────────────────────── */
    .pbmit-service-style-1 .pbmit-featured-img-wrapper {
        max-height: 200px;
        overflow: hidden;
        border-radius: 12px;
    }
    .pbmit-service-style-1 .pbmit-featured-wrapper,
    .pbmit-service-style-1 .pbmit-featured-img-wrapper img {
        height: 200px !important;
        max-height: 200px !important;
        object-fit: cover;
        width: 100%;
    }

    /* ── 4) Sticky-категории: ниже шапки, компактнее пилюли ─────────── */
    .pbmit-service-filter {
        top: 56px !important; /* висота компактної липкої шапки */
        gap: 6px !important;
        padding: 8px 8px !important;
        margin-bottom: 22px !important;
        border-radius: 10px !important;
    }
    .pbmit-filter-btn {
        padding: 5px 11px !important;
        font-size: 10px !important;
        line-height: 16px !important;
        letter-spacing: .2px !important;
        border-width: 1px !important;
    }

    /* ── 5) Sticky-фильтр прячется, когда открыто бургер-меню ───────── */
    body.active .pbmit-service-filter,
    .active .pbmit-service-filter {
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }
}

/* Маленькие телефоны — компактнее */
@media (max-width: 480px) {
    .pbmit-title-bar-wrapper .pbmit-tbar-title,
    .page-content > section.section-lg h1.text-white,
    .page-content > section.section-lg h1 {
        font-size: 19px !important;
    }
    .page-content > section.section-lg {
        padding-top: 70px !important;
        padding-bottom: 32px !important;
    }
    .pbmit-service-style-1 .pbmit-featured-wrapper,
    .pbmit-service-style-1 .pbmit-featured-img-wrapper img {
        height: 170px !important;
        max-height: 170px !important;
    }
}