/* =============================================================
   RESPONSIVE.CSS
   ВСЕ медиа-запросы проекта в одном файле.
   Подключать ПОСЛЕДНИМ — чтобы перекрывать базовые стили.
   -------------------------------------------------------------
   Правило работы: любые @media добавляем ТОЛЬКО сюда,
   не разбрасываем по файлам блоков.
   ============================================================= */


/* =============================================================
   ≤ 900px
   Планшеты: сетки в одну колонку, уменьшение шрифтов Hero.
   -------------------------------------------------------------
   ВНИМАНИЕ: .header-inner { align-items: flex-start } — это
   стиль ШАПКИ, а не блоков. Перенести в header.css
   при следующем заходе в шапку. Пока оставлено здесь,
   чтобы не сломать текущий вид.
   ============================================================= */
@media (max-width: 900px) {

    /* --- Шапка (перенести в header.css) --- */
    .header-inner {
        align-items : flex-start;
    }

    /* --- Сетки блоков → 1 колонка --- */
    .services-grid,
    .reviews-grid,
    .portfolio-grid,
    .team-grid {
        grid-template-columns : 1fr;
    }

    /* --- Уменьшение шрифтов Hero --- */
    .hero h1 {
        font-size : 28px;
    }

    .hero p {
        font-size : 16px;
    }
}


/* =============================================================
   ≤ 768px
   Мобильные: высота Hero, отступы, подложка Hero.
   ============================================================= */
@media (max-width: 768px) {

    /* --- Hero: минимальная высота + отступы --- */
    .hero {
        min-height : 500px;
        padding    : 60px 15px;
    }

    /* --- Подложка под текст в Hero --- */
    /* Убран !important — медиа-запрос идёт последним, перекрывает
       базовое правило .hero-content из hero.css естественным образом */
    .hero-content {
        background    : rgba(0, 0, 0, 0.5);
        padding       : 20px 15px;
        border-radius : 10px;
        width         : 90%;
        max-width     : 90%;
        box-sizing    : border-box;
        display       : block;
        margin        : 0 auto;
    }
}


/* =============================================================
   ≤ 600px
   Очень узкие экраны: компактная таблица цен.
   ============================================================= */
@media (max-width: 600px) {

    .prices-table th,
    .prices-table td {
        padding   : 6px 8px;
        font-size : 13px;
    }
}


/* =============================================================
   ≤ 480px
   Маленькие телефоны: ещё меньше шрифты, уже контейнер.
   ============================================================= */
@media (max-width: 480px) {

    .hero h1 {
        font-size : 24px;
    }

    .hero p {
        font-size : 14px;
    }

    .container {
        padding : 0 10px;
    }
}