/* =========================================================
   1. СКРЫВАЕМ СИСТЕМНЫЙ МУСОР
   ========================================================= */
.field-group-tabs-wrapper > .horizontal-tabs > ul, 
.field-group-tabs-wrapper details summary, 
.view-vyvod-nedvizhimosti-v-gorodakh .headline { 
    display: none !important; 
}
.city-objects.catalog details, 
.city-objects.catalog details .details-wrapper { 
    display: block !important; border: none !important; padding: 0 !important; margin: 0 !important; 
}

/* Скрываем только большие кнопки-табы во всю ширину на мобилке */
@media (max-width: 991px) {
    .city-objects.catalog .prod_vill > summary,
    .city-objects.catalog .prod_apart > summary {
        display: none !important;
    }
}
/* =========================================================
   2. ДЕЛАЕМ КАРТОЧКИ ШИРЕ НА МОБИЛКЕ
   ========================================================= */
@media (max-width: 576px) {
    section.container-fluid.city-objects.catalog { padding-right: 8px !important; padding-left: 8px !important; }
    .city-objects.catalog .row.items > .col-12 { padding-right: 8px !important; padding-left: 8px !important; }
}

/* =========================================================
   3. КАРУСЕЛЬ ГОРОДОВ: ЧИНИМ СЛИПШИЙСЯ ТЕКСТ
   ========================================================= */
@media (max-width: 767px) {
    .cities-slider .slide a { position: relative !important; display: block !important; }
    .cities-slider .slide a > span {
        position: absolute !important; bottom: 20px !important; left: 0 !important; width: 100% !important;
        display: flex !important; flex-direction: column !important; align-items: center !important;
        padding: 0 10px !important; z-index: 10 !important; line-height: 1.2 !important;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.8); font-size: 20px !important;
    }
    .cities-slider .slide a > span > br { display: none !important; }
    .cities-slider .slide a > span .small { display: block !important; margin-top: 6px !important; font-size: 15px !important; }
}

/* =========================================================
   4. БЛОК ПРЕИМУЩЕСТВ (Текст под фото)
   ========================================================= */
@media (max-width: 767px) {
    section.city-features { padding-left: 0 !important; padding-right: 0 !important; }
    section.city-features .row { margin-left: 0 !important; margin-right: 0 !important; }
    
    .paragraph--type--chem-tak-khorosha-nedvizhimost-v .item { 
        padding-left: 0 !important; padding-right: 0 !important; margin-bottom: 15px !important; 
        display: flex !important; flex-direction: column !important; 
    }
    .paragraph--type--chem-tak-khorosha-nedvizhimost-v .item:last-child { margin-bottom: 0 !important; }
    
    section.city-features .headline { padding-left: 15px !important; padding-right: 15px !important; margin-bottom: 20px !important; }
    
    .paragraph--type--chem-tak-khorosha-nedvizhimost-v .item .image { 
        width: 100% !important; height: 280px !important; position: relative !important; overflow: hidden !important; margin-bottom: 0 !important; 
    }
    .paragraph--type--chem-tak-khorosha-nedvizhimost-v .item .image img {
        width: 100% !important; height: 100% !important; object-fit: cover !important; position: absolute !important; top: 0 !important; left: 0 !important;
    }
    
    .paragraph--type--chem-tak-khorosha-nedvizhimost-v .item .text { 
        display: block !important; visibility: visible !important; opacity: 1 !important; position: relative !important; z-index: 10 !important; 
        margin-top: 0 !important; margin-bottom: 0 !important; padding: 20px 20px 5px 20px !important; 
        text-align: center !important; color: #c5a67c !important; font-family: 'Lora', serif !important; font-size: 19px !important; line-height: 1.4 !important; 
    }
}


/* =========================================================
   5. БЛОК "НОВЫЕ ПРЕДЛОЖЕНИЯ"
   ========================================================= */
@media (max-width: 767px) {
    section.new-objects {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    section.new-objects .row.headline {
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 20px !important;
    }
    section.new-objects .row.headline h2 {
        color: #c5a67c !important;
        font-family: 'Lora', serif !important;
        font-size: 38px !important;
        font-weight: 400 !important;
        text-transform: none !important;
        line-height: 1.2 !important;
        margin-bottom: 12px !important;
    }
    section.new-objects .row.headline .subheader,
    section.new-objects .row.headline .subheader span {
        color: #555 !important;
        font-family: 'Lora', serif !important;
        font-style: italic !important;
        font-size: 20px !important;
        font-weight: 400 !important;
        line-height: 1.4 !important;
        margin-top: 0 !important;
    }
    section.new-objects .row.background {
        margin-left: -15px !important;
        margin-right: -15px !important;
    }
    section.new-objects .row.background > [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 0 !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        height: 250px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    section.new-objects .row.background > [class*="col-"] a {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        position: relative !important;
    }
    section.new-objects .row.background > [class*="col-"] a::before {
        content: '';
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 65% !important;
        background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0) 100%) !important;
        z-index: 2 !important;
        pointer-events: none !important;
    }
    section.new-objects .item .title,
    section.new-objects .item .price {
        position: absolute !important;
        left: 20px !important;
        right: 20px !important;
        z-index: 3 !important;
        text-align: left !important;
        color: #fff !important;
        text-shadow: none !important;
        display: block !important;
        transform: none !important;
        top: auto !important;
    }
    section.new-objects .item .title {
        bottom: 45px !important;
        font-family: 'Lora', serif !important;
        font-size: 19px !important;
        line-height: 1.2 !important;
        font-weight: 400 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    section.new-objects .item .price {
        bottom: 15px !important;
        font-family: 'Rubik', sans-serif !important;
        font-size: 18px !important;
        font-weight: 500 !important;
        margin: 0 !important;
    }
}

/* Принудительный отступ через padding секции */
section.container-fluid.new-objects {
    padding-left: 15px !important;
    padding-right: 15px !important;
}
section.container-fluid.new-objects .row.background {
    margin-left: -15px !important;
    margin-right: -15px !important;
}

/* =========================================================
   6. КАРТА В ШАПКЕ (ЛАЗУРНЫЙ БЕРЕГ)
   ========================================================= */

/* Растягиваем карту на всю ширину экрана - только десктоп */
@media (min-width: 992px) {
    .cote-d-azure-map {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* МОБИЛКА: карта на всю ширину с правильными пропорциями */
@media (max-width: 991px) {
    header.cote-d-azure-map {
        padding: 0 !important;
        overflow: hidden !important;
    }

    header.cote-d-azure-map .col-12.map-wrapper {
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
    }

    /* Показываем картинку с прокруткой по горизонтали */
    header.cote-d-azure-map .col-12.map-wrapper img.map {
        height: 597px !important;
        width: auto !important;
        max-width: none !important;
        display: block !important;
    }
}

/* МОБИЛКА: карта на всю ширину с правильными пропорциями */
@media (max-width: 991px) {
    header.cote-d-azure-map {
        padding: 0 !important;
        overflow: hidden !important;
    }

    /* Включаем горизонтальный скролл */
    header.cote-d-azure-map .col-12.map-wrapper {
        min-height: 0 !important;
        overflow-x: scroll !important;
        overflow-y: hidden !important;
        padding: 0 !important;
        -webkit-overflow-scrolling: touch !important;
        /* Начальная позиция скролла - сдвиг вправо на 500px */
        scroll-behavior: auto !important;
    }

    /* Картинка полного размера */
    header.cote-d-azure-map .col-12.map-wrapper img.map {
        height: 597px !important;
        width: auto !important;
        max-width: none !important;
        display: block !important;
    }

    /* Все названия городов белым цветом */
    header.cote-d-azure-map .link-city .city,
    header.cote-d-azure-map .link-city .fr {
        color: #ffffff !important;
    }
}
/* =========================================================
   7. ГЛАВНОЕ ФОТО ГОРОДА ВПРАВО (ТОЛЬКО ДЕСКТОП)
   ========================================================= */
@media (min-width: 992px) {
    section.city { padding-right: 0 !important; }
    section.city > .row { margin-right: 0 !important; }
    section.city > .row > .image { padding-right: 0 !important; }
    section.city > .row > .image img {
        width: 100% !important; max-width: none !important; height: 100% !important; min-height: 550px !important; object-fit: cover !important; display: block !important;
    }
}

/* =========================================================
   8. ГЛАВНЫЙ БЛОК ГОРОДА - ТЕКСТ И ФОТО (МОБИЛКА)
   ========================================================= */
@media (max-width: 991px) {
    section.city > .row {
        display: flex !important;
        flex-wrap: wrap !important;
        flex-direction: column !important;
    }

    /* 1. ФОТО ПОДНИМАЕМ НАВЕРХ */
    section.city > .row > .image {
        order: 1 !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        display: block !important;
    }

    section.city > .row > .image img {
        width: 100% !important;
        height: 250px !important;
        object-fit: cover !important;
        display: block !important;
        padding-left: 15px;
    }

    /* 2. ТЕКСТ ОПУСКАЕМ ВНИЗ */
    section.city > .row > .headline {
        order: 2 !important;
        width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-top: 20px !important;
    }
}

/* ФИКС АДМИНКИ GIN */
.gin--vertical-toolbar #toolbar-item-administration-tray .toolbar-menu a.toolbar-icon { color: transparent !important; }
.gin--vertical-toolbar #toolbar-item-administration-tray .toolbar-menu a.toolbar-icon:hover { color: #222330 !important; }

/* Карта Лазурного берега - фикс высоты на мобильном */

@media (max-width: 991px) {
  header.cote-d-azure-map img.map {
    width: 100%;
    height: auto;
    display: block;
  }
  
/* =========================================================
   9. ВОЗВРАЩАЕМ ОТСТУПЫ ДЛЯ "НОВЫХ ПРЕДЛОЖЕНИЙ" (КАК В FIGMA)
   ========================================================= */
@media (max-width: 767px) {
    /* 1. Отменяем растягивание ряда до краев экрана */
    section.new-objects .row.background,
    section.container-fluid.new-objects .row.background {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* 2. Возвращаем карточкам белые поля по бокам и делаем отступ снизу */
    section.new-objects .row.background > [class*="col-"] {
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-bottom: 20px !important; /* Расстояние между верхней и нижней картинкой */
    }
    
    /* 3. Делаем идеально ровные (острые) углы у карточек */
    section.new-objects .row.background > [class*="col-"] a {
        border-radius: 0 !important;
        overflow: hidden !important;
    }
}

/* =========================================================
   9. хедер по всей ширене
   ========================================================= */
@media (min-width: 992px) {
  .cote-d-azure-map {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden !important;
  }

  .cote-d-azure-map .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .cote-d-azure-map .map-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .cote-d-azure-map img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
}