/*
 * mobile-fixes.css — DEV svetlaya-feo.ru mobile responsive overrides
 * Author: Vasily Omni AI · 2026-05-20
 * Purpose:
 *   - Eliminate horizontal scroll at 375 viewport (Bootstrap 3 row negative-margin trap)
 *   - Wrap wide tables (e.g. /pages/ceny .price-table) — responsive scroll
 *   - Break-word for long URLs (e.g. /pages/kontakty fsa.gov.ru link)
 *   - Larger touch targets for nav, footer links, social buttons
 *   - Container width safety at all viewports
 * Loaded AFTER style.css so cascade wins. PROD untouched — DEV only.
 */

/* ===== Global safety: never let any element trigger body horizontal scroll ===== */
html, body {
    max-width: 100%;
    overflow-x: clip; /* modern (Chrome 90+/FF 81+/Safari 16+); unlike hidden does NOT create containing block for sticky/fixed — fixes navbar overlapping scrollbar (PROD parity) */
}

/* Long URLs/emails must wrap, not stretch the layout */
.content a,
.content p,
.contac-p a,
.contac-p {
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

/* Global image safety — images shall never exceed their parent column */
.content img,
.box img {
    max-width: 100%;
    height: auto;
}

/* ===== Bootstrap 3 .row negative-margin overflow guard =====
 * Rows have margin: 0 -15px by default. When .row sits inside a
 * .container-fluid (which has 15px padding), they cancel. Inside .content
 * (col-) they also cancel. But some legacy .row.o-nas markup sits inside
 * elements without that padding, producing a 30px-wide overflow horn at
 * narrow viewports. This clamps it. */
@media (max-width: 991px) {
    .row.o-nas,
    .row.o-nas > [class*="col-"] {
        margin-left: 0;
        margin-right: 0;
    }
}

/* ===== Tablet-landscape (1024 boundary) container safety =====
 * Bootstrap 3 .container = 970px at min-width:992. Some pages exhibit a
 * 3-8px overflow on /pages/bankety, /pages/p-prozhivanie — likely due to
 * inline content with min-width or non-collapsing padding. Cap it. */
@media (min-width: 992px) and (max-width: 1199px) {
    .container {
        max-width: 100%;
    }
}

/* ===== Responsive tables (.price-table on /pages/ceny etc.) =====
 * Tables with min-width columns overflow on phones. We wrap with
 * overflow-x:auto and add a touch-friendly scroll hint. */
@media (max-width: 767px) {
    .content {
        overflow-x: hidden;
    }
    .content table,
    .ceny-page .price-table {
        display: block;
        width: 100% !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* Allow horizontal scroll WITHIN the table, never body */
    }
    .ceny-page .price-table thead,
    .ceny-page .price-table tbody {
        /* keep semantic table layout inside the scrollable block */
        display: table-header-group;
    }
    .ceny-page .price-table tbody {
        display: table-row-group;
    }
    /* visual scroll cue */
    .content > .ceny-page > .price-table,
    .ceny-page .price-table {
        position: relative;
    }
}

/* ===== Navbar / menu — mobile usability ===== */
@media (max-width: 767px) {
    .navbar-toggle {
        min-width: 44px;
        min-height: 44px;
        padding: 10px 12px;
    }
    .navbar-default .navbar-nav > li > a,
    .menu_main-menu .nav > li > a {
        padding-top: 14px;
        padding-bottom: 14px;
        min-height: 44px;
        line-height: 1.4;
        font-size: 16px;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        padding: 12px 20px;
        min-height: 44px;
        line-height: 1.4;
        font-size: 15px;
    }
}

/* ===== Footer & social icons — touch targets ===== */
@media (max-width: 767px) {
    .footer a,
    footer a {
        display: inline-block;
        padding: 6px 4px;
        min-height: 24px;
    }
    .btn-social,
    .bootstrap-social a,
    .social a {
        min-width: 44px;
        min-height: 44px;
        line-height: 44px;
        display: inline-block;
    }
}

/* ===== Forms — stack vertically on small screens ===== */
@media (max-width: 575px) {
    .form-inline .form-group,
    .form-inline .form-control,
    .form-inline .btn {
        display: block;
        width: 100%;
        margin-bottom: 10px;
    }
}

/* ===== Iframe / 3D-tour / video containers ===== */
@media (max-width: 767px) {
    iframe,
    .video-container,
    .embed-responsive {
        max-width: 100%;
        width: 100%;
    }
}

/* ===== Modal dialog width on mobile (callback form) ===== */
@media (max-width: 575px) {
    .modal-dialog {
        margin: 10px;
        width: auto;
    }
    .modal-content {
        border-radius: 4px;
    }
}

/* ===== Breadcrumbs — touch friendly on phones ===== */
@media (max-width: 575px) {
    .breadcrumb > li > a,
    .breadcrumb > li {
        font-size: 14px;
        line-height: 1.6;
    }
}

/* ===== Page-specific overrides ===== */
/* /pages/kontakty — the fsa.gov.ru link must wrap */
@media (max-width: 767px) {
    .contac-p,
    .contac-p a {
        font-size: 14px;
        word-break: break-word;
        overflow-wrap: anywhere;
        max-width: 100%;
    }
}

/* /pages/galerei — gallery thumbs spacing */
@media (max-width: 575px) {
    .jgallery .preview-mode-mosaic .item img,
    .gallery img {
        max-width: 100%;
        height: auto;
    }
}