/* ==========================================================================
   ABOUT.CSS — страница «О компании»
   --------------------------------------------------------------------------
   Все цвета — через var(--c-*) из static/css/sys/color-theme.css.
   SEO-текст в две колонки — общий компонент sys/seo-text.css.
   Ряд кнопок CTA — .cta-row из buttons.css.
   Кнопки (.btn-primary / .btn-outline) — buttons.css, здесь НЕ переопределяются.

   Порядок подключения в шаблоне:
     1) sys/color-theme.css
     2) buttons.css
     3) sys/seo-text.css
     4) about.css  ← этот файл

   Брейкпоинты: 900px (планшет), 560px (телефон).
   ========================================================================== */


/* ==========================================================================
   1. ЦИФРЫ (блок статистики)
   --------------------------------------------------------------------------
   4 цифры в ряд: «500+ клиентов», «5 лет на рынке» и т.д.
   На планшете — 2 колонки, на телефоне — 2 колонки с меньшим шрифтом.
   ========================================================================== */
.about-numbers {
    padding: 50px 0;                       /* вертикальные отступы; горизонталь даёт .wrap */
    background: var(--c-bg-soft);          /* светло-изумрудный фон — секция выделена среди белых */
    border-top: 1px solid var(--c-border); /* верхний разделитель — отделяет от предыдущей секции */
    border-bottom: 1px solid var(--c-border); /* нижний разделитель — отделяет от следующей */
}

/* Сетка: 4 колонки на десктопе */
.about-numbers__grid {
    display: grid;                          /* grid — ровные колонки без ручных ширин */
    grid-template-columns: repeat(4, 1fr);  /* 4 равные колонки на десктопе */
    gap: 24px;                              /* зазор между цифрами — единый ритм сайта */
    text-align: center;                     /* каждая цифра и подпись — по центру своей колонки */
}

/* Один блок цифры */
.about-numbers__item {
    padding: 8px 0;                         /* лёгкий вертикальный воздух — не «прилипает» к границам */
}

/* Сама цифра: «500+», «5 лет» */
.about-numbers__value {
    display: block;                         /* на всю ширину — подпись уходит на новую строку */
    font-size: 44px;                        /* крупно — цифра является смысловым акцентом */
    font-weight: 800;                       /* максимальная жирность — «выпирает» из общего текста */
    color: var(--c-heading);                /* тёмно-изумрудный — главный цвет заголовков сайта */
    line-height: 1;                         /* плотный интерлиньяж — цифры выглядят «собранными» */
    margin-bottom: 10px;                    /* отступ до подписи — цифра и подпись разделены */
    letter-spacing: -1px;                   /* лёгкое сужение — крупные цифры смотрятся плотнее */
}

/* Подпись под цифрой */
.about-numbers__label {
    display: block;                         /* блочный — всегда под цифрой */
    color: var(--c-text-muted);             /* приглушённый серый — вторичная информация */
}


/* ==========================================================================
   2. НАПРАВЛЕНИЯ ДЕЯТЕЛЬНОСТИ
   --------------------------------------------------------------------------
   Сетка карточек: «Земляные работы», «Доставка», «Аренда техники» и т.д.
   Каждая карточка — иконка + заголовок + описание.
   ========================================================================== */
.about-directions {
    display: grid;                                          /* grid — равномерные карточки */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* от 280px, тянутся поровну */
    gap: 20px;                                              /* зазор между карточками */
    margin-top: 20px;                                       /* отступ от заголовка секции */
}

/* Одна карточка направления */
.about-direction {
    background: var(--c-bg-card);           /* белый фон — контраст с зелёными секциями */
    border: 1px solid var(--c-border);      /* мягкая изумрудная рамка */
    padding: 28px 24px;                     /* внутренние отступы: чуть больше сверху — иконка «дышит» */
    display: flex;                          /* flex-колонка для управления порядком */
    flex-direction: column;                 /* иконка → заголовок → описание сверху вниз */
    transition: border-color 0.2s ease;     /* плавная смена цвета рамки на hover */
}

.about-direction:hover {
    border-color: var(--c-accent);          /* изумрудная рамка на hover — визуальный отклик */
}

/* Квадрат с иконкой */
.about-direction__icon {
    display: inline-flex;                   /* inline-flex — квадрат по размеру контента */
    align-items: center;                    /* центрируем SVG по вертикали */
    justify-content: center;                /* и по горизонтали */
    width: 44px;                            /* фиксированная ширина — иконки выровнены в сетке */
    height: 44px;                           /* квадрат */
    background: var(--c-bg-soft);           /* светло-изумрудный фон квадрата */
    color: var(--c-price);                  /* фирменный изумруд — цвет SVG через currentColor */
    margin-bottom: 16px;                    /* отступ до заголовка карточки */
}

.about-direction__icon svg {
    width: 22px;                            /* иконка занимает половину квадрата */
    height: 22px;
}

/* Заголовок направления */
.about-direction h3 {
    color: var(--c-heading);                /* тёмно-изумрудный — главный цвет заголовков */
    margin: 0 0 8px;                        /* только снизу — отделяет от описания */
}

/* Описание направления */
.about-direction p {
    color: var(--c-text);                   /* основной серый — читаемый на белом */
    margin: 0;                              /* сброс дефолтного margin у p */
}


/* ==========================================================================
   3. ПРЕИМУЩЕСТВА
   --------------------------------------------------------------------------
   Сетка карточек с крупным полупрозрачным номером (01, 02, 03…).
   Номер — декоративный фон, не читается как текст.
   ========================================================================== */
.about-advantages {
    display: grid;                                          /* grid — равномерные карточки */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); /* от 240px — карточки компактнее, чем направления */
    gap: 20px;                                              /* зазор между карточками */
    margin-top: 20px;                                       /* отступ от заголовка секции */
}

/* Одна карточка преимущества */
.about-advantage {
    background: var(--c-bg-card);           /* белый фон */
    border: 1px solid var(--c-border-strong); /* контрастнее обычной — карточки «выступают» */
    padding: 32px 24px 28px;                /* верх больше — крупный номер «дышит» */
    position: relative;                     /* задел для абсолютного позиционирования (если понадобится) */
}

/* Декоративный номер: 01, 02, 03… */
.about-advantage__num {
    display: block;                         /* на всю ширину — текст под номером уходит вниз */
    font-size: 42px;                        /* крупный — визуально = «метка», не текст */
    font-weight: 800;                       /* максимальная жирность */
    color: var(--c-accent);                 /* изумрудный акцент */
    line-height: 1;                         /* плотный интерлиньяж */
    margin-bottom: 16px;                    /* отступ до заголовка */
    letter-spacing: -2px;                   /* сильное сужение — крупные цифры плотнее */
    opacity: 0.4;                           /* полупрозрачный — номер не перебивает заголовок */
}

.about-advantage h3 {
    color: var(--c-heading);                /* тёмно-изумрудный — главный цвет заголовков */
    margin: 0 0 8px;                        /* только снизу */
}

.about-advantage p {
    color: var(--c-text);                   /* основной серый */
    margin: 0;                              /* сброс дефолтного margin */
}


/* ==========================================================================
   4. РЕКВИЗИТЫ
   --------------------------------------------------------------------------
   Два блока в ряд: «Юридическая информация» и «Банковские реквизиты».
   На планшете — в колонку.
   ========================================================================== */
.about-requisites {
    display: grid;                          /* grid — две равные колонки */
    grid-template-columns: 1fr 1fr;         /* поровну на десктопе */
    gap: 24px;                              /* зазор между блоками */
}

/* Один блок реквизитов */
.about-req-block {
    background: var(--c-bg-card);           /* белый фон */
    border: 1px solid var(--c-border);      /* мягкая изумрудная рамка */
    padding: 28px 24px;                     /* внутренние отступы */
}

/* Заголовок блока */
.about-req-block h3 {
    color: var(--c-heading);                /* тёмно-изумрудный */
    margin: 0 0 18px;                       /* отступ до списка */
    padding-bottom: 12px;                   /* воздух до подчёркивания */
    border-bottom: 1px solid var(--c-border); /* линия-разделитель под заголовком */
}

/* Список определений (dl/dt/dd) */
.about-req-block dl {
    margin: 0;                              /* сброс дефолтного margin dl */
}

/* Термин: «ИНН», «ОГРН», «Адрес» */
.about-req-block dt {
    color: var(--c-text-muted);             /* приглушённый — термин вторичен */
    margin-top: 16px;                       /* отступ между парами dt/dd */
}

.about-req-block dt:first-of-type {
    margin-top: 0;                          /* у первой пары отступ сверху не нужен */
}

/* Значение: сам ИНН, адрес, номер счёта */
.about-req-block dd {
    color: var(--c-text-strong-2);          /* почти чёрный — важные данные, максимальный контраст */
    margin: 5px 0 0;                        /* только сверху — компактная пара dt/dd */
    word-wrap: break-word;                  /* длинные номера не вылезают за карточку */
}


/* ==========================================================================
   5. CTA-СЕКЦИЯ
   --------------------------------------------------------------------------
   Заголовок + подзаголовок + ряд кнопок (.cta-row из buttons.css).
   Сами кнопки стилизуются в buttons.css, здесь только обвязка секции.
   ========================================================================== */
.about-cta-section {
    padding: 80px 0;                        /* больше стандартных 60px — финальный призыв «дышит» */
    background: var(--c-bg-card);           /* белый фон — контраст с зелёными секциями выше */
    text-align: center;                     /* заголовок, подзаголовок, кнопки — по центру */
}

/* Отступ от заголовка до подзаголовка */
.about-cta-section .section-title {
    margin-bottom: 16px;                    /* компактный отступ — заголовок и подзаголовок = единый блок */
}

/* Отступ от подзаголовка до кнопок */
.about-cta-section .section-subtitle {
    margin-bottom: 40px;                    /* крупный отступ — отделяет текст от интерактива */
}


/* ==========================================================================
   6. АДАПТИВНОСТЬ
   ========================================================================== */

/* --- Планшет (≤900px) --- */
@media (max-width: 900px) {
    .about-numbers__grid {
        grid-template-columns: repeat(2, 1fr); /* 4 → 2 колонки: цифры не «слипаются» */
        gap: 32px 24px;                        /* вертикальный зазор больше — блоки разделены */
    }

    .about-numbers__value {
        font-size: 36px;                       /* меньше — влезает в 2 колонки */
    }

    .about-requisites {
        grid-template-columns: 1fr;            /* 2 → 1 колонка: реквизиты читаются построчно */
    }
}

/* --- Телефон (≤560px) --- */
@media (max-width: 560px) {
    .about-numbers {
        padding: 40px 0;                       /* уменьшенные отступы — экономия вертикали */
    }

    .about-numbers__value {
        font-size: 30px;                       /* ещё меньше — помещается на узком экране */
    }
}