/* =========================================
   RESPONSIVE.CSS - Адаптивность
   ========================================= */

/* Планшеты и небольшие ноутбуки */
@media (max-width: 1024px) {
    .nav { gap: 20px; font-size: 14px; }
    
    .hero h1 { font-size: 56px; }
    .hero-img-container { height: 400px; }
    
    /* Переход на 2 колонки */
    .cards-3, 
    .cards-3x2, 
    .cards-icon-dark, 
    .contacts-form .grid-2, 
    .footer .grid-3 { 
        grid-template-columns: repeat(2, 1fr); 
    }
    
    .cards-2x2 { 
        grid-template-columns: 1fr; 
    }
    
    /* Секции внутренних страниц */
    .page-hero { padding: 40px 0; }
    .page-hero h1 { font-size: 36px; }
    .process-steps { grid-template-columns: repeat(3, 1fr); }
}

/* Мобильные устройства */
@media (max-width: 768px) {
    /* Главный экран */
    .hero { padding: 50px 0 60px; }
    .hero-inner { flex-direction: column-reverse; gap: 40px; }
    .hero-img-container { height: 350px; }
    .hero h1 { font-size: 42px; }
    
    /* Заголовки секций */
    .section-title { font-size: 36px; }
    
    /* Переход на 1 колонку для всех сеток */
    .cards-3, 
    .cards-3x2, 
    .cards-icon-dark, 
    .contacts-form .grid-2, 
    .footer .grid-3, 
    .process-steps { 
        grid-template-columns: 1fr; 
        gap: 24px; 
    }
    
    /* Секции внутренних страниц */
    .page-hero { padding: 30px 0; }
    .page-hero h1 { font-size: 32px; }
    .info-list { padding: 24px; }
    
    /* Цитата Плевако */
    .quote-block blockquote { font-size: 24px; }
    
    /* Подвал */
    .footer .grid-3 {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
    }

    /* Принудительно показываем блок контактов */
    .footer .contacts-footer {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        text-align: left !important;
        margin-top: 10px;
    }

    /* Гарантируем читаемый цвет и размер для телефона, почты и города */
    .footer .contacts-footer p,
    .footer .contacts-footer a {
        display: block !important;
        color: rgba(255, 255, 255, 0.85) !important; /* Белый цвет для темного футера */
        font-size: 15px !important;
        line-height: 1.6 !important;
        margin: 0 0 8px 0 !important;
        text-decoration: none !important;
    }

    /* Если футер у вас светлый (#f5f2eb или #ffffff), раскомментируйте эту строку: */
    /* .footer .contacts-footer p { color: #1d2d47 !important; } */
    /* =========================================
       Адаптивные таблицы прайса и услуг
       ========================================= */
    table, 
    tbody, 
    tr, 
    td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    thead {
        display: none; /* Прячем десктопную шапку таблицы */
    }

    tr {
        margin-bottom: 16px;
        border: 1px solid rgba(29, 45, 71, 0.12);
        padding: 10px 14px;
        background: #ffffff;
        border-radius: 4px;
    }

    /* Каждая ячейка выстраивается строкой с разнесением по краям */
    td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        text-align: right; /* ВЫРАВНИВАЕТ МНОГОСТРОЧНЫЙ ТЕКСТ СТРОГО ВПРАВО */
        padding: 8px 0;
        border-bottom: 1px solid rgba(29, 45, 71, 0.06);
        font-size: 14px;
    }

    td:last-child {
        border-bottom: none;
    }

    /* Название колонки берется из data-label и всегда жмется влево */
    td::before {
        content: attr(data-label);
        font-weight: 600;
        text-align: left;
        color: #1d2d47;
        flex-shrink: 0;     /* Не дает заголовку сплющиваться при длинном тексте */
        margin-right: 16px; /* Безопасный отступ до правого текста */
        max-width: 40%;
    }
}