/* ================================================================
   Мобильная вёрстка страницы проекта (item.blade.php)
   Подключается ТОЛЬКО на странице /project/{id}.
   Не трогает хедер — он стилизуется глобально из main.css.
   ================================================================ */

@media (max-width: 767px) {
    html,
    body {
        overflow-x: hidden !important;
    }

    /* На странице проекта используем стандартный мобильный header
       из main.css (логотип в header-container-first + кнопка
       «Акции и скидки» в header-container-second). Поэтому
       прячем .header-mobile-actions-link, который активен только
       на странице property. */
    .header-mobile-actions-link {
        display: none !important;
    }

    body > section,
    .info-line-wrapper,
    .menu-section,
    .project-content,
    .flat-section,
    .flat-section2,
    .virtual-tours-section,
    .location-section,
    .parking-pr-section,
    .slider-s-wrapper,
    .slider-build-section {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .info-line-wrapper .container,
    .menu-section .container,
    .project-content .container,
    .flat-section .container,
    .flat-section2 .container,
    .virtual-tours-section .container,
    .location-section .container,
    .parking-pr-section .container,
    .slider-s-wrapper .container,
    .slider-build-section .container {
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: none !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        width: 100% !important;
    }

    /* ===================== ИНФО-ПЛАШКА ===================== */
    .info-line-wrapper {
        margin: 16px 0 24px !important;
        padding: 0 !important;
    }

    .info-line {
        align-items: stretch !important;
        background: linear-gradient(135deg, #1c4da4 0%, #0b58a4 100%) !important;
        border-radius: 18px !important;
        box-shadow: 0 14px 34px rgba(11, 88, 164, .2) !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        margin: 0 16px !important;
        padding: 18px 18px 6px !important;
        width: auto !important;
    }

    .info-col-f,
    .info-col-s {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        margin: 0 !important;
    }

    .info-column {
        align-items: flex-start !important;
        border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
        gap: 4px !important;
        padding: 10px 0 !important;
    }

    .info-col-s .info-column:last-child {
        border-bottom: 0 !important;
    }

    .info-title {
        color: rgba(255, 255, 255, .72) !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        letter-spacing: .02em !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        text-transform: none !important;
    }

    .info-content {
        color: #fff !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        margin: 0 !important;
        transform: none !important;
    }

    .info-square,
    .info-price {
        font-size: 18px !important;
        font-weight: 700 !important;
    }

    .info-location {
        align-items: flex-start !important;
        font-size: 15px !important;
        gap: 8px !important;
        line-height: 1.3 !important;
    }

    .info-location:before {
        flex: 0 0 auto !important;
        transform: scale(.85) translate(-2px, -1px) !important;
        transform-origin: left center !important;
    }

    .info-date {
        align-items: center !important;
        display: flex !important;
        flex-wrap: wrap !important;
        font-size: 16px !important;
        gap: 4px !important;
    }

    .info-date .info-title {
        margin-right: 6px !important;
    }

    /* ===================== ТАБЫ-МЕНЮ ===================== */
    .menu-section {
        margin: 0 0 24px !important;
        padding: 0 !important;
    }

    .menu-section .container {
        align-items: stretch !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        justify-content: flex-start !important;
    }

    .menu-section-buttons {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        justify-content: flex-start !important;
        margin: 0 !important;
        overflow-x: auto !important;
        padding: 2px 0 6px !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
    }

    .menu-section-buttons::-webkit-scrollbar {
        display: none !important;
    }

    .menu-button {
        align-items: center !important;
        background: #fff !important;
        border: 1px solid #dce7f2 !important;
        border-radius: 999px !important;
        box-shadow: 0 4px 12px rgba(11, 88, 164, .04) !important;
        color: #0b58a4 !important;
        display: inline-flex !important;
        flex: 0 0 auto !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        min-height: 38px !important;
        padding: 9px 14px !important;
        text-align: center !important;
        text-decoration: none !important;
        white-space: nowrap !important;
    }

    .menu-button.menu-button-active {
        background: #0b58a4 !important;
        border-color: #0b58a4 !important;
        color: #fff !important;
    }

    .menu-choose-flat-button {
        align-items: center !important;
        background: #0b58a4 !important;
        border: 0 !important;
        border-radius: 14px !important;
        box-shadow: 0 8px 20px rgba(11, 88, 164, .22) !important;
        color: #fff !important;
        display: flex !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        gap: 10px !important;
        height: 50px !important;
        justify-content: center !important;
        margin: 0 !important;
        text-decoration: none !important;
        width: 100% !important;
    }

    .menu-choose-flat-button .noactive-flat-choose {
        display: none !important;
    }

    .menu-choose-flat-button .active-flat-choose {
        display: inline-block !important;
        filter: brightness(0) invert(1) !important;
        height: 22px !important;
        width: 22px !important;
    }

    /* ===================== О ПРОЕКТЕ ===================== */
    .project-content {
        margin-bottom: 28px !important;
        padding: 0 !important;
    }

    .project-content .container {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    .project-content-row,
    .row-1.project-content-row {
        align-items: stretch !important;
        background: #fff !important;
        border: 1px solid #e8eef5 !important;
        border-radius: 22px !important;
        box-shadow: 0 14px 34px rgba(11, 88, 164, .08) !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        margin: 0 !important;
        overflow: hidden !important;
        padding: 20px 18px 18px !important;
        transform: none !important;
        width: 100% !important;
    }

    .project-content-row:nth-child(2) {
        flex-direction: column-reverse !important;
    }

    .project-content .col-1 {
        box-sizing: border-box !important;
        margin: 0 !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        transform: none !important;
        width: 100% !important;
    }

    .about-project {
        color: #1a1a1a !important;
        font-size: 28px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        margin: 0 0 12px !important;
        padding: 0 !important;
        text-align: left !important;
        transform: none !important;
        width: 100% !important;
    }

    .quote-project {
        color: #0b58a4 !important;
        font-size: 16px !important;
        font-style: italic !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
        margin: 0 0 12px !important;
        padding: 0 !important;
        text-align: left !important;
        transform: none !important;
        width: 100% !important;
    }

    .text-project {
        color: #273241 !important;
        font-size: 15px !important;
        font-weight: 400 !important;
        line-height: 1.62 !important;
        margin: 0 !important;
        max-width: none !important;
        padding: 0 !important;
        text-align: left !important;
        transform: none !important;
        width: 100% !important;
    }

    .project-content .image-radius-container {
        background: transparent !important;
        border: 0 !important;
        border-radius: 16px !important;
        box-shadow: none !important;
        margin: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        transform: none !important;
        width: 100% !important;
    }

    .project-content .image-radius {
        aspect-ratio: 4 / 3 !important;
        border-radius: 16px !important;
        display: block !important;
        height: auto !important;
        max-height: none !important;
        object-fit: cover !important;
        transform: none !important;
        width: 100% !important;
    }

    /* Преимущества (иконки + текст) */
    .project-content .row-2.row-icons {
        display: grid !important;
        gap: 12px !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        width: 100% !important;
    }

    .project-content .row-icons .infographics-text {
        align-items: center !important;
        background: #fff !important;
        border: 1px solid #e8eef5 !important;
        border-radius: 16px !important;
        box-shadow: 0 4px 14px rgba(11, 88, 164, .06) !important;
        box-sizing: border-box !important;
        color: #273241 !important;
        display: flex !important;
        flex-direction: column !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        gap: 10px !important;
        line-height: 1.3 !important;
        margin: 0 !important;
        min-height: 0 !important;
        padding: 14px !important;
        text-align: center !important;
        width: 100% !important;
    }

    .project-content .row-icons .infographics-text img {
        border-radius: 12px !important;
        flex: 0 0 auto !important;
        height: 80px !important;
        margin: 0 !important;
        object-fit: cover !important;
        width: 80px !important;
    }

    .project-content .row-icons .infographics-text::before,
    .project-content .row-icons .infographics-text:not(:first-child)::before,
    .project-content .row-icons .infographics-text:last-child::before {
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        flex: 0 0 auto !important;
        height: 64px !important;
        margin: 0 !important;
        width: 64px !important;
    }

    /* ===================== КВАРТИРЫ/ПЛАНИРОВКИ ===================== */
    .flat-section {
        margin: 0 0 24px !important;
        padding: 0 !important;
    }

    .flat-section .container {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
    }

    .flat-section-subtitle {
        color: #0b58a4 !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        letter-spacing: .04em !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        text-transform: uppercase !important;
        width: 100% !important;
    }

    .flat-section-title {
        color: #1a1a1a !important;
        font-size: 26px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        max-width: 100% !important;
        padding: 0 !important;
        text-align: left !important;
        width: 100% !important;
    }

    .flat-section .project-nav.project-nav-two {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .flat-section2 {
        margin: 0 0 32px !important;
        padding: 0 !important;
    }

    .flat-section2 .container {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    .flat-cards-wrapper {
        display: grid !important;
        gap: 16px !important;
        grid-template-columns: 1fr !important;
        justify-items: stretch !important;
        margin: 0 !important;
        width: 100% !important;
    }

    .flat-card-modern {
        max-width: 100% !important;
        width: 100% !important;
    }

    .flat-card-image {
        background: #f8fafc !important;
        height: 220px !important;
        position: relative !important;
    }

    .flat-card-image .property-badge.property-badge-discount {
        background: rgba(255, 255, 255, .92) !important;
        backdrop-filter: blur(6px) !important;
        border-radius: 999px !important;
        bottom: auto !important;
        box-shadow: 0 6px 16px rgba(11, 88, 164, .18) !important;
        color: #0b58a4 !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        left: auto !important;
        padding: 6px 12px !important;
        position: absolute !important;
        right: 14px !important;
        top: 14px !important;
        transform: none !important;
        z-index: 2 !important;
    }

    .choose-flat-button.shahm-button {
        align-items: center !important;
        background: #fff !important;
        border: 2px solid #0b58a4 !important;
        border-radius: 14px !important;
        color: #0b58a4 !important;
        display: flex !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        height: 50px !important;
        justify-content: center !important;
        margin: 0 !important;
        text-decoration: none !important;
        width: 100% !important;
    }

    /* ===================== 3D-ТУРЫ ===================== */
    .virtual-tours-section {
        margin: 0 0 32px !important;
        padding: 0 !important;
    }

    .virtual-tours-section .container {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
    }

    .virtual-tours-section .virtual-tours-grid {
        display: grid !important;
        gap: 14px !important;
        grid-template-columns: 1fr !important;
        margin: 0 !important;
        width: 100% !important;
    }

    /* ===================== РАСПОЛОЖЕНИЕ ===================== */
    .location-section {
        margin: 0 0 32px !important;
        padding: 0 !important;
    }

    .location-section .container {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    .location-row-1 {
        align-items: stretch !important;
        background: #fff !important;
        border: 1px solid #e8eef5 !important;
        border-radius: 22px !important;
        box-shadow: 0 14px 34px rgba(11, 88, 164, .08) !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        margin: 0 !important;
        padding: 20px 18px 18px !important;
        width: 100% !important;
    }

    .location-row-1 > div {
        text-align: left !important;
        width: 100% !important;
    }

    .location-title {
        color: #1a1a1a !important;
        font-size: 26px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        margin: 0 0 10px !important;
        padding: 0 !important;
        text-align: left !important;
        transform: none !important;
        width: 100% !important;
    }

    .location-text {
        color: #0b58a4 !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        width: 100% !important;
    }

    .location-description {
        margin-top: 10px !important;
        max-width: none !important;
    }

    .location-icons {
        display: grid !important;
        gap: 8px !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        margin-top: 14px !important;
    }

    .location-icon-item {
        background: #f8fbff !important;
        border: 1px solid #e8eef5 !important;
        border-radius: 12px !important;
        padding: 10px !important;
    }

    #location-map,
    #location-map iframe {
        border-radius: 18px !important;
        display: block !important;
        height: 260px !important;
        margin: 0 !important;
        width: 100% !important;
    }

    /* ===================== БЛАГОУСТРОЙСТВО (СЛАЙДЕР) ===================== */
    .slider-s-wrapper {
        background: #f8fbff !important;
        margin: 0 0 32px !important;
        padding: 24px 0 !important;
    }

    .slider-s-wrapper .container,
    .slider-s-wrapper .aboutus-slider.slider-section .container,
    .slider-s-wrapper .project-s-slider .container,
    .slider-s-wrapper .aboutus-slider .container {
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: none !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        width: 100% !important;
    }

    .project-s-slider,
    .project-s-slider .container,
    .project-s-slider .aboutus-swiper {
        height: auto !important;
        min-height: 0 !important;
        width: 100% !important;
    }

    .project-s-slider .aboutus-swiper {
        overflow: hidden !important;
    }

    .project-s-slider .swiper-wrapper {
        align-items: stretch !important;
        display: flex !important;
        gap: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        width: auto !important;
    }

    .project-s-slider .swiper-slide-aboutus,
    .project-s-slider .swiper-slide-aboutus-project {
        align-items: stretch !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        margin: 0 !important;
        min-height: 0 !important;
        min-width: 0 !important;
        padding: 0 !important;
    }

    .project-s-slider .slider-aboutus-column {
        align-items: flex-start !important;
        background: #fff !important;
        border: 1px solid #e8eef5 !important;
        border-radius: 22px !important;
        box-shadow: 0 14px 34px rgba(11, 88, 164, .08) !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        max-width: none !important;
        min-width: 0 !important;
        padding: 18px 16px !important;
        text-align: left !important;
        width: 100% !important;
    }

    .project-s-slider .slider-aboutus-subtitle,
    .slider-s-wrapper .project-s-slider .slider-aboutus-subtitle {
        color: #0b58a4 !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        letter-spacing: .04em !important;
        line-height: 1.2 !important;
        margin: 0 0 8px !important;
        padding: 0 !important;
        text-align: left !important;
        text-transform: uppercase !important;
        width: 100% !important;
    }

    .project-s-slider .slider-aboutus-title,
    .slider-s-wrapper .project-s-slider .slider-aboutus-title {
        color: #1a1a1a !important;
        font-size: 24px !important;
        font-weight: 700 !important;
        line-height: 1.22 !important;
        margin: 0 0 12px !important;
        padding: 0 !important;
        text-align: left !important;
        transform: none !important;
        width: 100% !important;
    }

    .project-s-slider .slider-aboutus-text,
    .slider-s-wrapper .project-s-slider .slider-aboutus-text {
        color: #273241 !important;
        font-size: 15px !important;
        line-height: 1.6 !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        width: 100% !important;
    }

    .project-s-slider .slide-img-aboutus,
    .slider-s-wrapper .project-s-slider .slide-img-aboutus {
        aspect-ratio: 4 / 3 !important;
        border-radius: 18px !important;
        display: block !important;
        height: auto !important;
        margin: 0 !important;
        max-height: none !important;
        max-width: none !important;
        object-fit: cover !important;
        transform: none !important;
        width: 100% !important;
    }

    .project-s-slider .nav-container-aboutus {
        align-items: center !important;
        background: #0b58a4 !important;
        border-radius: 14px !important;
        color: #fff !important;
        display: flex !important;
        justify-content: center !important;
        margin-top: 14px !important;
        min-height: 46px !important;
        position: static !important;
        transform: none !important;
        width: 100% !important;
    }

    .project-s-slider .swiper-pagination-aboutus {
        align-items: center !important;
        gap: 8px !important;
        justify-content: center !important;
        margin-top: 10px !important;
        position: static !important;
        text-align: center !important;
        width: 100% !important;
    }

    /* ===================== ПАРКОВКА ===================== */
    .parking-pr-section {
        margin: 0 0 32px !important;
        padding: 0 !important;
    }

    .parking-pr-section .container {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    .parking-pr-section .images-container {
        display: grid !important;
        gap: 8px !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        margin: 0 !important;
        order: 2 !important;
        width: 100% !important;
    }

    .parking-pr-section .image-radius-container {
        border-radius: 16px !important;
        margin: 0 !important;
        overflow: hidden !important;
        width: 100% !important;
    }

    .parking-pr-section .parking-zoom {
        aspect-ratio: 1 / 1 !important;
        border-radius: 16px !important;
        display: block !important;
        height: auto !important;
        object-fit: cover !important;
        transform: none !important;
        width: 100% !important;
    }

    .parking-pr-section .text-container {
        background: #fff !important;
        border: 1px solid #e8eef5 !important;
        border-radius: 22px !important;
        box-shadow: 0 14px 34px rgba(11, 88, 164, .08) !important;
        margin: 0 !important;
        order: 1 !important;
        padding: 20px 18px 18px !important;
        width: 100% !important;
    }

    .parking-pr-title {
        color: #1a1a1a !important;
        font-size: 26px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        margin: 0 0 10px !important;
        padding: 0 !important;
        text-align: left !important;
        transform: none !important;
        width: 100% !important;
    }

    .parking-pr-text {
        color: #273241 !important;
        font-size: 15px !important;
        line-height: 1.62 !important;
        margin: 0 !important;
        max-width: none !important;
        padding: 0 !important;
        text-align: left !important;
        width: 100% !important;
    }

    /* ===================== ХОД СТРОИТЕЛЬСТВА ===================== */
    .slider-build-section {
        margin: 0 0 32px !important;
        padding: 0 !important;
    }

    .slider-build-section .container {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
    }

    .build-tags {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        left: 0 !important;
        margin: 0 0 4px !important;
        overflow-x: auto !important;
        padding: 2px 0 6px !important;
        position: static !important;
        scrollbar-width: none !important;
        top: 0 !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .build-tags::-webkit-scrollbar {
        display: none !important;
    }

    .build-tag {
        background: #f2f7fd !important;
        border-radius: 999px !important;
        color: #0b58a4 !important;
        flex: 0 0 auto !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        margin: 0 !important;
        padding: 9px 14px !important;
        white-space: nowrap !important;
    }

    .build-swiper,
    .slider-section.build-slider {
        height: auto !important;
        margin: 0 !important;
        overflow: hidden !important;
        width: 100% !important;
    }

    .build-swiper .swiper-wrapper {
        height: auto !important;
    }

    .swiper-slide-build {
        border-radius: 20px !important;
        height: auto !important;
        overflow: hidden !important;
        position: relative !important;
    }

    .swiper-slide-build img {
        aspect-ratio: 4 / 3 !important;
        border-radius: 20px !important;
        display: block !important;
        height: auto !important;
        max-height: none !important;
        object-fit: cover !important;
        width: 100% !important;
    }

    .swiper-slide-build p {
        background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .65) 100%) !important;
        bottom: 0 !important;
        color: #fff !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        left: 0 !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        padding: 42px 16px 16px !important;
        position: absolute !important;
        right: 0 !important;
        top: auto !important;
        width: 100% !important;
    }

    .nav-container-build {
        display: none !important;
    }

    /* ===================== ВЕРХНИЙ HERO И БАННЕРЫ ===================== */
    /* Верхний слайдер на странице проекта (как и на главной) на мобайле скрываем */
    .slider-section.slider-section-main {
        display: none !important;
    }

    /* Хлебные крошки компактнее */
    .breadcrumbs-section,
    .breadcrumbs {
        font-size: 12px !important;
        margin: 12px 0 4px !important;
    }
}

@media (max-width: 420px) {
    .info-line {
        margin: 0 12px !important;
        padding: 16px 14px 4px !important;
    }

    .info-line-wrapper .container,
    .menu-section .container,
    .project-content .container,
    .flat-section .container,
    .flat-section2 .container,
    .virtual-tours-section .container,
    .location-section .container,
    .parking-pr-section .container,
    .slider-s-wrapper .container,
    .slider-build-section .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .project-content-row,
    .row-1.project-content-row,
    .location-row-1,
    .parking-pr-section .text-container,
    .project-s-slider .slider-aboutus-column {
        padding: 18px 14px 14px !important;
    }

    .about-project,
    .location-title,
    .parking-pr-title,
    .project-s-slider .slider-aboutus-title,
    .flat-section-title {
        font-size: 24px !important;
    }
}