/* ============================================================
   Блок «Наша команда» — правки отступов/расположения
   ------------------------------------------------------------
   - Кнопки листания раньше были прямым соседом .heading__wrapper
     (который включает и заголовок, и подзаголовок), поэтому
     расстояние от НИХ до кнопок зависело от того, насколько
     ШИРОК подзаголовок (он определял ширину всего wrapper) — на
     разных страницах с разной длиной подзаголовка зазор от текста
     заголовка до кнопок визуально «плавал», хотя CSS-отступ (gap)
     был одинаковым везде. Теперь заголовок и кнопки — в общей
     строке .heading__top-row, а подзаголовок — отдельной строкой
     ниже. Зазор до кнопок больше не зависит от длины подзаголовка.
   - ПК: отступ заголовок→карточки как у блока «Преимущества» (80px);
     обеспечивается padding-bottom .team-swiper (базовое значение).
   - Телефон: компактнее — меньше отступ заголовок↔кнопки и кнопки↔фото.

   Всё scoped на .team-swiper. Файл вне frontend/build — пересборка
   Astro его не затронет. Подключается только на главной.
   ============================================================ */

/* Баг: у .team-card__img (см. TeamCard.astro/custom-style.css) нет
   явной width, только object-fit:contain. Раньше это "работало" случайно,
   пока фото отдавались напрямую оригиналом; после перехода на
   faz64Picture()/размер 'medium' (см. functions.php) исходники стали
   ~200×300, а глобальный reset "img,video{max-width:100%;height:auto}"
   только СЖИМАЕТ картинку крупнее контейнера, но не растягивает меньшую —
   в итоге фото рендерилось в своём мелком исходном размере вместо 336/260px
   карточки. Фикс: явная width:100%, высота остаётся auto (сохраняет
   пропорции фото, ничего не обрезает — как и задумано object-fit:contain). */
.team-card__img {
    width: 100%;
    height: auto;
}

.team-swiper .heading__top-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
}

@media (min-width: 768px) {
    /* Отступ подзаголовок → карточки чуть сокращён (было базовое 80px) */
    .team-swiper {
        padding-bottom: 56px;
    }
}

/* --- Телефон: компактнее --- */
@media (max-width: 767px) {
    .team-swiper .heading__top-row {
        gap: 16px;
    }
    .team-swiper {
        padding-bottom: 24px;  /* кнопки ↔ карточки (было 60px) */
    }
    /* Кнопки листания на мобильном — не у заголовка, а после карточек
       (см. .swiper-nav-mobile ниже и в deals.css/reviews.css). */
    .team-swiper__nav {
        display: none;
    }
    /* Отступ карточки -> кнопки сокращён: у самого swiper-контейнера
       был padding-bottom:60px (для десктопного пробела ниже, которого
       на мобильном уже нет — кнопки идут сразу следом). */
    .team-swiper__swiper {
        padding-bottom: 16px;
    }
}

@media (max-width: 575px) {
    .team-swiper {
        padding-bottom: 20px;  /* было 40px */
    }
}

/* ============================================================
   Мобильные дубли кнопок листания — общий стиль для «Команда»/
   «Дела»/«Отзывы». По ТЗ на мобильном кнопки стоят ПОСЛЕ карточек
   (для «Дела» — перед «Посмотреть все дела»), а не у заголовка.
   Программно кликают по настоящим кнопкам — см. assets/js/mobile-nav.js
   ============================================================ */
.swiper-nav-mobile {
    display: none;
}

@media (max-width: 767px) {
    .swiper-nav-mobile {
        display: flex;
        flex-direction: row;
        gap: 10px;
        margin-bottom: 16px;
    }
    .swiper-nav-mobile__btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 56px;
        height: 56px;
        border-radius: 15px;
        border-width: 1px;
        color: var(--color-slate-300);
        font-size: 24px;
        cursor: pointer;
    }
}