/* ============================================================
   css/mobile-home.css — мобільна версія ТІЛЬКИ титульної сторінки.
   Ширше 700px сторінка не змінюється (жодного правила поза @media).
   Правила й токени — за mobile_style.md.
   ============================================================ */

@media (max-width: 700px) {
    /* ── 2. Каркас документа ───────────────────────────────── */
    html,
    body {
        width: 100%;
        overflow-x: hidden;
    }
    .uv-mh {
        overflow-x: clip !important;
        padding-bottom: 86px; /* запас під плаваючу кнопку звʼязку */
    }
    .uv-mh-wrap {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .uv-mh #clusters,
    .uv-mh #poslugy-detalno,
    .uv-mh #krainy,
    .uv-mh #about,
    .uv-mh #mista,
    .uv-mh #yak-pratsyuemo,
    .uv-mh #chomu-my,
    .uv-mh #diplomas,
    .uv-mh #partners,
    .uv-mh #yurydychnyi-suprovid,
    .uv-mh #dovidnyk,
    .uv-mh #reviews,
    .uv-mh #faq {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }
    .uv-mh-rounded {
        margin: 0 12px !important;
        border-radius: 22px !important;
    }

    /* ── 5. Типографічні деескалації ───────────────────────── */
    .uv-mh h1 {
        font-size: clamp(31px, 8.8vw, 38px) !important;
        line-height: 1.1 !important;
        letter-spacing: 0 !important;
        text-wrap: balance;
    }
    .uv-mh h2 {
        font-size: clamp(27px, 7.4vw, 32px) !important;
        line-height: 1.14 !important;
        letter-spacing: 0 !important;
        text-wrap: pretty;
    }
    .uv-mh h3 {
        letter-spacing: 0 !important;
        text-wrap: pretty;
    }

    /* ── Сітки → одна колонка ──────────────────────────────── */
    .uv-mh-hero-grid,
    .uv-mh-grid-2,
    .uv-mh-grid-3,
    .uv-mh-grid-4,
    .uv-mh-sublist,
    .uv-mh-about-grid,
    .uv-mh-legal-grid,
    .uv-mh-np,
    .uv-mh .uv-process-steps-grid,
    .uv-mh .uv-delivery-grid,
    .uv-mh .uv-trigger-grid,
    .uv-mh .uv-svc-panel {
        grid-template-columns: 1fr !important;
    }
    .uv-mh-grid-2,
    .uv-mh-grid-3,
    .uv-mh-grid-4 {
        gap: 14px !important;
    }
    .uv-mh-sublist {
        gap: 8px !important;
    }
    .uv-mh-grid-2 > *,
    .uv-mh-grid-3 > *,
    .uv-mh-grid-4 > *,
    .uv-mh-about-grid > *,
    .uv-mh-legal-grid > * {
        min-width: 0;
    }
    .uv-mh-reviews {
        grid-auto-rows: auto !important;
    }

    /* ── 4. Хіро ───────────────────────────────────────────── */
    .uv-mh-hero {
        padding: 100px 0 52px !important;
    }
    .uv-mh-hero > img {
        opacity: 0.04 !important;
    }
    .uv-mh-hero-grid {
        gap: 32px !important;
        max-width: 560px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .uv-mh-hero p {
        font-size: 16px !important;
        line-height: 1.62 !important;
        max-width: none !important;
        margin-top: 22px !important;
    }
    .uv-mh-hero-cta {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin-top: 28px !important;
    }
    .uv-mh-hero-cta > a {
        width: 100%;
        min-height: 52px;
        padding: 15px 18px !important;
        text-align: center;
    }
    .uv-mh-stats {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin-top: 32px !important;
    }
    .uv-mh-stats > div {
        min-width: 0;
        padding: 12px 8px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.045);
    }
    .uv-mh-stat-div {
        display: none !important;
    }
    .uv-mh-stats > div > div:first-child {
        font-size: 23px !important;
        letter-spacing: 0 !important;
    }
    .uv-mh-stats > div > div:last-child {
        font-size: 11.5px !important;
        letter-spacing: 0.02em !important;
        line-height: 1.35;
    }
    .uv-mh-deco {
        display: none !important;
    }
    .uv-mh-hero-photo {
        justify-self: center !important;
    }
    .uv-mh-hero-img {
        width: min(74vw, 300px) !important;
    }
    .uv-mh-estd {
        top: 12px !important;
        left: -12px !important;
        padding: 10px 13px !important;
    }

    /* ── Стрічка послуг (ticker) ───────────────────────────── */
    .uv-mh .uv-trust-ticker {
        padding: 15px 0 !important;
    }
    .uv-mh .uv-trust-ticker span {
        font-size: 13px !important;
        gap: 18px !important;
        padding: 0 18px !important;
    }

    /* ── Послуги детально ──────────────────────────────────── */
    .uv-mh .uv-svc-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    .uv-mh .uv-svc-panel {
        gap: 28px !important;
        padding: 24px 20px !important;
        min-height: 0 !important;
    }
    .uv-mh .uv-svc-panel h3 {
        font-size: 23px !important;
        min-height: 0 !important;
    }
    .uv-mh .uv-svc-panel p,
    .uv-mh .uv-svc-panel ul {
        min-height: 0 !important;
    }
    .uv-mh .uv-svc-panel > div:last-child > div {
        padding: 22px 18px !important;
    }
    .uv-mh .uv-svc-panel .uv-btn-gold {
        width: 100%;
        justify-content: center;
        min-height: 50px;
    }

    /* ── Міста ─────────────────────────────────────────────── */
    .uv-mh-city-cards {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        margin-bottom: 34px !important;
    }
    .uv-mh-city-cards > div {
        height: 268px !important;
    }

    /* ── Як працюємо / доставка ────────────────────────────── */
    .uv-mh .uv-process-steps-grid {
        gap: 26px !important;
    }
    .uv-mh .uv-process-steps-grid > div {
        padding: 0 !important;
    }
    .uv-mh-np {
        margin-top: 44px !important;
        padding: 26px 20px !important;
        gap: 28px !important;
    }
    .uv-mh .uv-delivery-grid {
        gap: 18px !important;
    }
    .uv-mh .uv-flag-media {
        height: 180px !important;
    }
    .uv-mh-card-body {
        padding: 24px 20px !important;
    }

    /* ── Умови роботи ──────────────────────────────────────── */
    .uv-mh .uv-trigger-grid {
        gap: 14px !important;
    }
    .uv-mh .uv-trigger-tile {
        padding: 24px 20px !important;
    }

    /* ── Дипломи: стрічка з drag (touch-action: pan-y вже в HTML) ── */
    .uv-mh #uvDipTrack {
        gap: 16px !important;
        padding: 14px 16px !important;
    }
    .uv-mh-dip-card {
        width: min(78vw, 320px) !important;
    }
    .uv-mh-dip-card h3 {
        font-size: 18px !important;
    }

    /* ── Партнери ──────────────────────────────────────────── */
    .uv-mh .uv-partner-media {
        height: 186px !important;
    }

    /* ── Юридичний супровід ────────────────────────────────── */
    .uv-mh-legal-grid {
        gap: 30px !important;
    }
    .uv-mh .uv-legal-row {
        padding: 18px 18px !important;
    }
    .uv-mh .uv-legal-row-label {
        font-size: 16px !important;
    }

    /* ── Про власницю ──────────────────────────────────────── */
    .uv-mh-about-grid {
        gap: 30px !important;
    }
    .uv-mh-about-photo {
        justify-self: center !important;
    }
    .uv-mh-about-img {
        width: min(74vw, 300px) !important;
    }
    .uv-mh #about blockquote {
        font-size: 18px !important;
        line-height: 1.55 !important;
        margin: 22px 0 !important;
        padding-left: 16px !important;
    }
    .uv-mh #about p {
        font-size: 16px !important;
    }

    /* ── FAQ ───────────────────────────────────────────────── */
    .uv-mh .uv-faq-q {
        padding: 20px 2px !important;
        gap: 14px !important;
    }
    .uv-mh .uv-faq-qtext {
        font-size: 16.5px !important;
    }
    .uv-mh-faq-a {
        padding: 0 2px 22px 34px !important;
        font-size: 15px !important;
    }

    /* ── Лід-форма (js/leadblock-form.js) ──────────────────── */
    .uv-mh .uv-shared-lead {
        margin: 0 12px !important;
        border-radius: 22px !important;
    }
    .uv-mh .uv-shared-lead > div {
        grid-template-columns: 1fr !important;
        padding: 0 !important;
    }
    .uv-mh .uv-shared-lead-copy {
        padding: 44px 22px !important;
    }
    .uv-mh .uv-shared-lead-form {
        padding: 34px 22px 44px !important;
        border-top: 1px solid rgba(200, 144, 88, 0.25);
    }

    /* ── Контакти + офіс (js/shared-contacts-office.js) ────── */
    .uv-mh .uv-shared-contacts {
        padding: 30px 0 72px !important;
    }
    .uv-mh .uv-office-photos {
        margin: 44px 12px 0 !important;
    }
    .uv-mh .uv-office-photos > div:last-child {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    /* ── Футер (js/seo-nav.js) ─────────────────────────────── */
    .uv-mh .uvs-sitemap {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    /* ── 6. Модалка міста → нижній шит ─────────────────────── */
    .uv-city-modal-overlay {
        align-items: stretch !important;
        justify-content: flex-end !important;
        padding: 10px !important;
    }
    .uv-city-modal-overlay > div {
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100dvh - 20px) !important;
        border-radius: 18px !important;
    }
    .uv-mh-modal-grid {
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
    }
    .uv-mh-modal-map {
        min-height: 280px !important;
        height: 280px !important;
        border-left: 0 !important;
        border-top: 1px solid #e2dccb !important;
    }
    .uv-city-modal-overlay .uv-modal-btn {
        width: 44px !important;
        height: 44px !important;
    }

    /* ── Лайтбокс диплома ──────────────────────────────────── */
    .uv-mh-dip-overlay {
        padding: 64px 12px 88px !important;
    }
    .uv-mh-dip-overlay .uv-modal-btn {
        width: 44px !important;
        height: 44px !important;
    }
    .uv-mh-dip-overlay .uv-modal-nav {
        top: auto !important;
        bottom: 20px !important;
        transform: none !important;
    }
    .uv-mh-dip-overlay .uv-modal-nav[aria-label="Попередній"] {
        left: 18px !important;
    }
    .uv-mh-dip-overlay .uv-modal-nav[aria-label="Наступний"] {
        right: 18px !important;
    }
    .uv-mh-dip-overlay #uvSeoDiplomaImg {
        max-height: 54dvh !important;
    }
    .uv-mh-dip-overlay h3 {
        font-size: 21px !important;
    }
}

@media (max-width: 460px) {
    .uv-mh #clusters,
    .uv-mh #poslugy-detalno,
    .uv-mh #krainy,
    .uv-mh #about,
    .uv-mh #mista,
    .uv-mh #yak-pratsyuemo,
    .uv-mh #chomu-my,
    .uv-mh #diplomas,
    .uv-mh #partners,
    .uv-mh #yurydychnyi-suprovid,
    .uv-mh #dovidnyk,
    .uv-mh #reviews,
    .uv-mh #faq {
        padding-top: 52px !important;
        padding-bottom: 52px !important;
    }
    .uv-mh-wrap,
    .uv-mh-hero-grid {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .uv-mh .uv-svc-cards {
        grid-template-columns: 1fr !important;
    }
    .uv-mh-stats {
        grid-template-columns: 1fr !important;
    }
}