/* ============================================
   КОММЕРЧЕСКАЯ НЕДВИЖИМОСТЬ - СТИЛИ
   ============================================ */

/* ----- ШАПКА РАЗДЕЛА ----- */
.commercial-title {
    margin-top: 140px;
    font-weight: 600;
    color: #333;
}

.page-lead {
    font-size: 20px;
    line-height: 1.6;
    margin-top: 20px;
    text-align: center;
}

/* ----- СЕКЦИЯ С ПЛИТКОЙ ----- */
#commercial-tiles {
    /*padding: 60px 0;*/
}

.commercial-row {
    margin: 0 -10px 20px;
}

.commercial-col {
    padding: 0 16px;
    margin-bottom: 20px;
}

.commercial-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}

/* ----- КАРТОЧКА ОБЪЕКТА ----- */
.pos_item {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.pos_item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.pos_img {
    width: 100%;
    height: 400px;
    overflow: hidden;
    position: relative;
}

.pos_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.pos_item:hover .pos_img img {
    transform: scale(1.05);
}

.pos_info {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.pos_info h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
}

.pos_info ul {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    flex-grow: 1;
}

.pos_info ul li {
    padding: 8px 0;
    padding-left: 24px;
    position: relative;
    font-size: 18px;
    line-height: 1.5;
}

.pos_info ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
}

.pos_info ul li.l1::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23039bdc' viewBox='0 0 16 16'%3E%3Cpath d='M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z'/%3E%3C/svg%3E");
}

.pos_info ul li.l2::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23039bdc' viewBox='0 0 16 16'%3E%3Cpath d='M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z'/%3E%3C/svg%3E");
}

.pos_info ul li.l3::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23039bdc' viewBox='0 0 16 16'%3E%3Cpath d='M4 10.781c.148 1.667 1.513 2.85 3.591 3.003V15h1.043v-1.216c2.27-.179 3.678-1.438 3.678-3.3 0-1.59-.947-2.51-2.956-3.028l-.722-.187V3.467c1.122.11 1.879.714 2.07 1.616h1.47c-.166-1.6-1.54-2.748-3.54-2.875V1H7.591v1.233c-1.939.23-3.27 1.472-3.27 3.156 0 1.454.966 2.483 2.661 2.917l.61.162v4.031c-1.149-.17-1.94-.8-2.131-1.718H4zm3.391-3.836c-1.043-.263-1.6-.825-1.6-1.616 0-.944.704-1.641 1.8-1.828v3.495l-.2-.05zm1.591 1.872c1.287.323 1.852.859 1.852 1.769 0 1.097-.826 1.828-2.2 1.939V8.73l.348.086z'/%3E%3C/svg%3E");
}

.pos_trig {
    display: inline-block;
    padding: 10px 24px;
    background: linear-gradient(135deg, #0d3c63 0%, #2c5f7c 100%);
    color: #fff;
    border-radius: 18px;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    transition: background 0.3s ease;
    margin-top: auto;
}

.pos_item:hover .pos_trig {
    background: #ec6830;
}

/* ----- CTA КАРТОЧКА (ФОРМА) ----- */
.form_comm {
    background: #fff;
    border: solid 1px #ddd;
    border-radius: 18px;
    padding: 30px 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.form_comm .section__title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 15px;
    text-align: center;
}

.form_comm .section__description {
    font-size: 18px;
    /*color: #666;*/
    line-height: 1.6;
    margin-bottom: 25px;
    /*text-align: center;*/
}

.bitrix-form-placeholder {
    margin-top: 10px;
}

/* ----- РАЗДЕЛИТЕЛЬ ----- */
.commercial-divider {
    height: 10px;
    margin: 60px 0;
    background: #5a98cc center;
    border: none;
}

/* ----- АДАПТИВНОСТЬ ----- */

/* Планшет */
@media (max-width: 991px) {
    .commercial-title {
        margin-top: 100px;
        font-size: 32px;
    }
    
    .pos_img {
        height: 200px;
    }
    
    .pos_info h3 {
        font-size: 18px;
    }
}

/* Мобильные */
@media (max-width: 767px) {
    .commercial-title {
        margin-top: 80px;
        font-size: 28px;
    }
    
    .page-lead {
        font-size: 16px;
    }
    
    #commercial-tiles {
        padding: 40px 0;
    }
    
    .commercial-row {
        margin: 0 0 10px;
    }
    
    .commercial-col {
        padding: 0;
        margin-bottom: 15px;
    }
    
    .pos_img {
        height: 220px;
    }
    
    .pos_info {
        padding: 15px;
    }
    
    .pos_info h3 {
        font-size: 18px;
        margin-bottom: 12px;
    }
    
    .pos_info ul li {
        font-size: 14px;
        padding: 6px 0 6px 22px;
    }
    
    .pos_info ul li::before {
        width: 14px;
        height: 14px;
    }
    
    .form_comm {
        padding: 20px 15px;
    }
    
    .form_comm .section__title {
        font-size: 20px;
    }
    
    .form_comm .section__description {
        font-size: 14px;
    }
    
    .commercial-divider {
        margin: 40px 0;
    }
}

/* Очень маленькие экраны */
@media (max-width: 480px) {
    .pos_img {
        height: 180px;
    }
    
    .pos_trig {
        padding: 8px 20px;
        font-size: 13px;
    }
}