/* ==========================================================================
   Tablet-слой (подключается ПОСЛЕ style.css и style-mobile.css).

   Планшетные исправления вешаются на класс html.is-tablet — его ставит
   скрипт в header.php по факту устройства (UA + тач-экран, iPadOS 13+
   распознаётся отдельно), а не по ширине вьюпорта. Поэтому стили работают
   на всех планшетных разрешениях и в любой ориентации, включая
   горизонтальную (1024–1366+), и имеют повышенную специфичность —
   перебивают style-mobile.css и CSS компонентов независимо от порядка
   подключения файлов.

   Медиа-запросы остались только там, где важна именно ширина:
   1. ≤1023px — бургер-меню вместо десктопного (разметка обоих меню
      рендерится всегда, см. header.php).
   2. 1024–1279px — компактный десктопный вид (шапка, заголовки, 3 колонки).
   3. 768–1023px — правила, нужные только на узком контейнере.
   ========================================================================== */

/* Мобильный попап рендерится всегда — по умолчанию скрыт на любой ширине */
.popup-menu__mob {
    display: none;
}

/* --------------------------------------------------------------------------
   Шапка: до 1023px — бургер и попап-меню вместо десктопного меню
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {

    .nav > .b-menu__list {
        display: none;
    }

    .menu__btn {
        display: flex;
    }

    /* Стили попапа (дублируют блок <=768px из style-mobile.css, чтобы меню
       корректно открывалось на планшете в портретной ориентации) */
    .popup-menu__mob {
        position: fixed;
        top: 0;
        right: -100vw;
        width: 90vw;
        height: 100%;
        background-color: white;
        box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
        transition: right 0.3s ease;
        z-index: 999;
        padding: 16px;
        border-radius: 20px 0 0 20px;
        display: block;
    }

    .popup-menu__mob.active {
        right: 0;
        transition: right 0.3s ease;
        display: block;
        overflow-y: auto;
    }

    .menu {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .menu a,
    .header-fixed .menu__link path {
        color: #2C2C2C;
        fill: #2C2C2C;
        stroke: #2C2C2C;
    }

    .li___drop {
        position: relative;
        display: block;
    }

    .sub-menu span {
        padding-left: 15px;
        color: #5C5C5C;
    }

    .sub-menu li {
        margin: 4px 0;
    }

    .popup-close {
        padding: 6px 6px 6px 12px;
    }

    .popup-close p {
        font-size: 12px;
    }

    .popup-close img {
        width: 24px;
        height: 24px;
    }

    .popup-content-title {
        padding: 16px 0 13px 0;
        margin-bottom: 16px;
    }

    .menu-mobile__list-link {
        display: flex;
        align-items: center;
        font-size: 18px;
        line-height: 1;
        color: #2c2c2c;
    }

    .menu-mobile__list-item {
        margin-bottom: 8px;
    }

    .menu-mobile__list-item:last-child {
        margin-bottom: 0;
    }

    .menu__list-dropdown-villages-mob,
    .menu__list-dropdown-service-mob {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin: 14px 0;
    }

    .contact-mobile {
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
        padding: 16px 0;
    }

    .contact-text {
        font-size: 14px;
        line-height: 1.20;
    }

    .connect {
        margin-bottom: 8px;
    }

    .menu-mobile__content {
        gap: 16px;
    }

    .contacts__socials-mob {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 26px;
    }

    .contacts-icon-mob {
        width: 34px;
        height: 34px;
    }

    .logo-mobile {
        display: flex;
    }
}

/* --------------------------------------------------------------------------
   Планшет landscape: 1024–1279px — компактный десктопный вид
   (только усиления десктопной вёрстки, с is-tablet-правилами не конфликтуют)
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1279px) {

    /* страховка от 6px переполнения из теневого DOM swiper-слайдеров */
    html {
        overflow-x: clip;
    }

    /* Шапка: компактнее, чтобы меню помещалось в одну строку */
    .header__top {
        padding: 8px 0;
        justify-content: space-between;
    }

    .nav {
        gap: 22px;
    }

    .header__top .logo {
        width: 130px;
    }

    .menu {
        gap: 6px;
    }

    .menu__link {
        font-size: 15px;
    }

    .contact__number .phone {
        font-size: 14px;
    }

    .order-call {
        padding: 8px 12px;
    }

    .header__top .socials {
        gap: 14px;
    }

    /* декоративный разделитель не влезает — прячем */
    .border-img {
        display: none;
    }

    /* возвращаем десктопную кнопку «избранное» (скрыта в блоке <=1200 style-mobile.css) */
    header .social-like {
        display: block;
    }

    .social-like-cor-mobile {
        display: none;
    }

    /* Заголовки: промежуточные размеры вместо 50–60px */
    .title {
        font-size: 46px;
    }

    #slider .text-slide {
        font-size: 46px;
    }

    .section-title {
        font-size: 38px;
    }

    .life__title {
        font-size: 44px;
    }

    .privileges-title {
        font-size: 46px;
    }

    .bid__title {
        font-size: 40px;
    }

    /* Hero-слайдер: ровные отступы вместо скачка 241→258px на границе 1024px */
    .top__swiper {
        margin-top: 84px;
        margin-bottom: 248px;
    }

    /* «Жизнь в посёлке»: гибкие колонки вместо фиксированных 425px + 566px */
    .life__inner {
        grid-template-columns: minmax(0, 3fr) minmax(0, 4fr);
        gap: 24px;
    }

    /* «Технология строительства»: десктопная схема дома вместо мобильной 520px */
    .technology-build-cont {
        padding: 48px 40px;
        height: 680px;
        overflow: visible;
    }

    .technology-build-cont::before {
        display: none;
    }

    .technology-build-h {
        font-size: 36px;
        width: fit-content;
        padding: 0;
    }

    .technology-build-discr {
        font-size: 16px;
        width: 440px;
    }

    .technology-build-house {
        width: 1000px;
        height: 560px;
        background-size: 1000px 560px;
    }

    .technology-build-house-info {
        width: 48px;
        height: 48px;
    }

    .technology-build-house-info::before,
    .technology-build-house-info::after {
        width: 20px;
        height: 2px;
        left: 14px;
    }

    .technology-build-house-info-container {
        font-size: 14px;
        padding: 12px 18px;
        width: fit-content;
    }

    .technology-build-house-info-container::after {
        display: block;
    }

    .technology-build-house-info-pos-1 { top: 150px; left: 230px; }
    .technology-build-house-info-pos-2 { top: 337px; left: 117px; }
    .technology-build-house-info-pos-3 { top: 360px; left: 354px; }
    .technology-build-house-info-pos-4 { top: 72px;  left: 606px; }
    .technology-build-house-info-pos-5 { top: 188px; left: 671px; }
    .technology-build-house-info-pos-6 { top: 266px; left: 791px; }
    .technology-build-house-info-pos-7 { top: 377px; left: 677px; }

    .technology-build-house-info-1 { top: -108px; left: -296px; width: 345px; }
    .technology-build-house-info-2 { top: -114px; left: -274px; width: auto; }
    .technology-build-house-info-3 { top: -91px;  left: -246px; width: auto; }
    .technology-build-house-info-4 { top: -112px; left: -334px; width: 384px; }
    .technology-build-house-info-5 { top: -112px; left: -304px; width: auto; }
    .technology-build-house-info-6 { top: -110px; left: -381px; width: auto; }
    .technology-build-house-info-7 { top: -92px;  left: -307px; width: auto; }

    /* Дома и проекты: 3 колонки вместо 2 (в style.css блок <=1200 ставит repeat(2,1fr)) */
    .slider-built-cottages__inner {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* Посёлки: карточка тянется — 3 штуки в ряд даже при контейнере 1004px */
    .villages__item {
        width: calc((100% - 56px) / 3);
    }

    /* Инфраструктура на странице посёлка: десктопная версия (список поверх фото) */
    .infrastructure__content {
        display: block;
    }

    .infrastructure__content-mobile {
        display: none;
    }

    /* Схема дома: обёртка растягивается на всю панель, а дом в потоке
       прижат влево — центрируем flex-ом (zoom/transform центр не чинят:
       Safari считает zoom по-старому) */
    .technology-build-cont-cor {
        display: flex;
        justify-content: center;
    }
}

/* 1024–1099px: контейнер меньше 1000px — уменьшаем всю схему целиком,
   чтобы маркеры оставались на своих местах. transform вместо zoom: Safari
   трактует zoom по-старому (раскладка 1000px, визуал у левого края) —
   дом получается не по центру блока */
@media (min-width: 1024px) and (max-width: 1099px) {

    .technology-build-cont {
        padding: 40px 24px;
    }

    .technology-build-house {
        flex-shrink: 0; /* иначе flex ужмёт схему и маркеры разъедутся с графикой */
        transform: scale(0.9);
        transform-origin: center center;
    }
}

/* --------------------------------------------------------------------------
   Планшет портрет: 768–1023px — точечные правила для узкого контейнера
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {

    /* Блок контактов: min-width 764px не влезает в контейнер 748–1003px */
    .our-contacts__item-flex {
        min-width: 100%;
    }

    /* Схема дома: компактная версия 520x292 целиком влезает в контейнер,
       но в потоке прижата к левому краю — центрируем тем же способом,
       что и в 1024–1279 (flex: zoom/transform центр не чинят в Safari) */
    .technology-build-cont-cor {
        display: flex;
        justify-content: center;
    }
}

/* ==========================================================================
   Планшетные исправления по факту устройства (класс ставится в header.php).
   Работают на любой ширине и ориентации; специфичность html.is-tablet
   перебивает style-mobile.css и CSS компонентов
   ========================================================================== */

/* страховка от переполнения на несколько пикселей (тесные блоки, теневой
   DOM swiper): без неё на планшетах появляется горизонтальный скролл */
html.is-tablet {
    overflow-x: clip;
}

/* Hero: карточка слайдера всегда видна (правило ≤768px прячет её на границе
   ровно 768px) и не показывает соседние слайды за своими краями */
html.is-tablet .top__swiper {
    display: block;
    overflow: hidden;
}

/* Фон первого экрана: явная высота экрана (в Safari min-height:100% у
   absolutely-позиционированного header-cover схлопывает фон до высоты
   видео). Точную высоту «до конца hero» дозадаёт main.js: замеряет низ
   section.top и выставляет cover.height инлайном — фон начинается от
   верха страницы и накрывает hero целиком, прозрачная шапка лежит
   поверх видео */
html.is-tablet .header-cover {
    height: 100vh;
}

html.is-tablet .header-cover video {
    object-fit: cover;
}

/* Стрелка вниз под заголовком: правило ≤768px задаёт width/height 80% —
   на границе 768px стрелка раздувается до ширины колонки */
html.is-tablet .header-icon {
    width: auto;
    height: auto;
    padding: 12px;
}

/* Слайды промо-карточки («Доступная ипотека» и др.): правило ≤1200px
   снимает padding списка пунктов (padding: unset) — текст прижимается
   к левому краю карточки. Возвращаем десктопный отступ */
html.is-tablet .top-slide__privilege {
    padding: 18px;
}

/* Блоки «Получите ипотеку» и документы: отрицательные поля -14px выпирают
   за контейнер на 4px с каждой стороны */
html.is-tablet .ipoteka_block_wrap,
html.is-tablet .ipdoc_wrap {
    margin-left: 0;
    margin-right: 0;
}

/* Превью генплана до тапа: картинка с натуральной шириной 3840px при
   height:250px даёт 551px ширины и серую пустоту справа */
html.is-tablet .preview-plan img {
    width: 100%;
}

/* Галерея на карточке дома/участка: на всю ширину экрана (базовое
   max-width:566px рассчитано на десктопную колонку). Картинкам ширину
   не трогаем — слайдер сам растягивает их по высоте слайда.
   Грид контейнера разворачиваем в одну колонку (галерея сверху на всю
   ширину, блок параметров под ней): во второй колонке на планшете пусто.
   min-width:0 обязателен: .container-mobile — grid, и Swiper-слайды
   (slides-per-view=1, ширина = ширине контейнера) через min-width:auto
   раздували грид-трек до 19000px */
html.is-tablet .container-mobile {
    grid-template-columns: 1fr;
}

html.is-tablet .hero__images {
    min-width: 0;
}

html.is-tablet .hero__images__slider {
    max-width: 100%;
}

/* кадр слайда — на всю ширину слайдера (по десктопу картинка 545px слева,
   справа остаётся размытая подложка) */
html.is-tablet .hero__images__slider img,
html.is-tablet .hero__images__slider video {
    width: 100%;
    object-fit: cover;
}

/* Галерея отделки: masonry-сетка в 2 колонки (слайдер — только на телефонах,
   флаг в template.php компонента). Компонент прячет сетку при ≤1023px —
   возвращаем */
html.is-tablet #fgGallery .fg-gallery .fg-grid {
    display: block;
    column-count: 2;
}

/* «Что входит в отделку»: фото на всю ширину, список под ним. Базовая сетка
   компонента держит 2 колонки, а finishing-mobile.css при ≤800px фото
   скрывает вовсе */
html.is-tablet .finishing .finishing__content {
    grid-template-columns: 1fr;
}

html.is-tablet .finishing .finishing__content-img {
    display: block;
}

/* «Способы покупки»: при ≤1200px блок превращён в горизонтальную ленту со
   свайпом — возвращаем десктопную раскладку: заголовок слева (sticky),
   колонка карточек справа */
/* «Способы покупки» на планшете: заголовок по центру сверху, лента карточек
   под ним (как на смартфоне), композиция по центру секции */
html.is-tablet .purchaseOptions .container {
    flex-direction: column;
    align-items: center;
}

html.is-tablet .purchaseOptions-title__container {
    width: 100%;
}

html.is-tablet .purchaseOptions-title {
    position: static;
    text-align: center;
    max-width: 100%;
    margin-bottom: 25px !important;
}

html.is-tablet .purchaseOptions .purchaseOptions-title {
    position: static;
}

html.is-tablet .purchaseOptions__content-container {
    width: 100%;
    overflow-x: auto;
    /* кружки с номерами (top: -23px) не должны срезаться скролл-контейнером */
    padding-top: 25px;
}

html.is-tablet .purchaseOptions__content {
    flex-direction: row;
    max-width: 100%;
    gap: 0;
    margin-top: 0;
}

html.is-tablet .purchaseOptions__card {
    min-width: 46%;
    margin-right: 16px;
}

/* «Рядом с домом»: панель ограничена 700px при ≤1200px — на всю ширину
   контейнера */
html.is-tablet .near-house-new-cont {
    max-width: none;
}

/* «Как добраться»: две колонки ~50% (route__info + route__content) не
   помещаются в контейнер и переносятся по одной, оставляя пустую правую
   половину секции — на планшете ставим в столбик на всю ширину */
html.is-tablet .route-container {
    flex-direction: column;
}

html.is-tablet .route__info,
html.is-tablet .route__content {
    width: 100%;
}

/* Кнопка «Построить маршрут»: width:100% + боковые margin 8px выталкивали
   её за границы блока — ширина с учётом отступов */
html.is-tablet .route-container .route__privileges__link {
    width: calc(100% - 16px);
}

/* Карта «Наши посёлки на карте»: мобильная раскладка (карта во всю ширину,
   свайпер карточек снизу). Разметку переключает флаг в template.php
   компонента (планшеты = мобильная ветка), здесь только раскладка */
html.is-tablet .map-container .map-wrapper {
    flex-direction: column;
    height: calc(100vh - 93px);
}

html.is-tablet .map-container .map {
    margin-left: 0;
    width: 100%;
}

html.is-tablet .map-container .map-block-title {
    padding: 20px 0 16px;
}

html.is-tablet .map-container .map-block-title .section-title {
    text-align: center;
}

html.is-tablet .map-container .map-panel {
    display: none;
}

html.is-tablet .map-container #balloon-content {
    width: 100vw;
    top: auto;
    bottom: 55px;
    margin-top: 0;
    height: auto;
    padding-left: 16px;
}

html.is-tablet .map-container #balloon-content .villages__item {
    width: 100%;
    margin: 0;
    display: flex;
}

/* Фото в карточке посёлка на карте: высота от ширины колонки (фото
   ресайзятся в бокс 500x250, пропорции ~3:2). Фикс. 91px превращали
   фото 366px шириной в полоску — видно ~четверть кадра */
html.is-tablet .map-container #balloon-content .villages__item > a {
    display: block;
    width: 40%;
}

html.is-tablet .map-container #balloon-content .villages__item .gallery-one,
html.is-tablet .map-container #balloon-content .villages__item .slider-cottage-listing {
    height: auto;
    max-height: none;
    aspect-ratio: 3 / 2;
}

html.is-tablet .map-container #balloon-content .villages__content-wrapper {
    margin-left: 12px;
}

html.is-tablet .map-container {
    height: auto;
}

html.is-tablet .map-container .container {
    justify-content: center;
}

/* Блок «Посмотрите видеообзоры»: при пролистывании слайды вылетают за
   границы блока (у swiper-контейнера overflow visible) — обрезаем по
   границам блока */
html.is-tablet #reviewVideo swiper-container.slider-video {
    overflow-x: clip;
}

/* «Этапы строительства дома»: 2 карточки на экран (слайдеру задаёт
   slidesPerView: 2 шаблон projects/sections.php по классу is-tablet;
   style-mobile.css ≤1200px держит слайд width:100% !important —
   возвращаем половинную ширину с зазором 28px) */
html.is-tablet .stages__slaider-container-desctop .stages__slide {
    width: calc((100% - 28px) / 2) !important;
    margin-right: 28px !important;
}