/*
 * Стили страницы «Решения» (solutions-banner, solutions-grid, success-stories-banner)
 *
 * Для чего: CSS для классов, которые НЕ определены в скомпилированном Vite-бандле
 *           index-jMqdjw-a.css. Классы card-f, card-c, posts__items, page__header-banner*
 *           уже определены там — не дублируем.
 * Зачем: В оригинале (Vue SPA) вкладки делал Swiper.js со своим CSS; в WordPress
 *        заменяем на кастомный .solutions-tabs без сторонних зависимостей.
 * Когда: Подключается через enqueue_style в acf-blocks.php при рендере solutions-grid
 */

/* ══════════════════════════════════════════════════════════════════════════
   БАННЕР СТРАНИЦЫ РЕШЕНИЙ (.solutions-banner-block)
   Для чего: Отступ сверху заменяет .page-header который скрыт на этой странице
   Зачем: Без отступа баннер прилипает к навигации (нет .page-header как на других страницах)
   ══════════════════════════════════════════════════════════════════════════ */

.solutions-banner-block {
    /* 32px — соответствует padding-top: 32px из .page__content в оригинальном Vue SPA.
       Заменяет стандартный .page-header который скрыт на этой странице */
    padding-top: 43px;
}

@media (max-width: 1023px) {
    .solutions-banner-block {
        padding-top: 20px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   ВКЛАДКИ СЕТКИ РЕШЕНИЙ (.solutions-tabs)
   Для чего: Визуальный переключатель «По отраслям» / «По задачам»
   Зачем: В оригинале (Vue SPA) это Swiper; в WordPress заменяем чистым CSS/JS
   ══════════════════════════════════════════════════════════════════════════ */

/* Строка навигации по вкладкам */
.solutions-tabs__nav {
    display: flex;
    border: 1px solid rgba(41, 49, 57, 0.15);
    border-radius: 12px;
    overflow: hidden;
    max-width: 1290px;
    margin: 0 auto;
}

/* Кнопка вкладки */
.solutions-tabs__btn {
    flex: 1;
    padding: 16px 24px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    color: #293139;
    background: #f8f8fc;
    border: none;
    cursor: pointer;
    transition: color 0.18s ease, background-color 0.18s ease;
    line-height: 1.4;
    text-align: center;
}

/* Разделитель между вкладками */
.solutions-tabs__btn:not(:last-child) {
    border-right: 1px solid rgba(41, 49, 57, 0.15);
}

/* Активная вкладка — синий текст, белый фон */
.solutions-tabs__btn.is-active {
    color: #546bc6;
    background: #fff;
    font-weight: 600;
}

/* Hover для неактивной вкладки */
.solutions-tabs__btn:hover:not(.is-active) {
    background: #f0f0f8;
    color: #546bc6;
}

/* ══════════════════════════════════════════════════════════════════════════
   КОНТЕНТНАЯ ОБЛАСТЬ И ЛОАДЕР
   ══════════════════════════════════════════════════════════════════════════ */

/* Лоадер появляется во время AJAX-запроса */
.solutions-tabs__loader {
    padding: 60px 20px;
    text-align: center;
    color: #546bc6;
    font-size: 16px;
}

/* Текст «Решений не найдено» */
.solutions-tabs__empty {
    padding: 40px 20px;
    text-align: center;
    color: #666;
    grid-column: 1 / -1;
}

/* ══════════════════════════════════════════════════════════════════════════
   ВЫРАВНИВАНИЕ posts__items В БЛОКЕ
   Для чего: Контейнер с max-width для центровки внутри .container
   ══════════════════════════════════════════════════════════════════════════ */

.solutions-grid-block .posts__items {
    max-width: 1290px;
    margin: 0 auto;
}

/* ══════════════════════════════════════════════════════════════════════════
   БЛОК ИСТОРИЙ УСПЕХА
   Для чего: Центровка и max-width для .card-c.inverted
   ══════════════════════════════════════════════════════════════════════════ */

.success-stories-banner-block .card-c {
    max-width: 1290px;
    margin: 0 auto;
}

/* ══════════════════════════════════════════════════════════════════════════
   SOLUTIONS-BANNER — раздельный фон + иллюстрация (поле banner_illustration_image)
   Для чего: solutions-banner подключает именно этот файл (не breadcrumbs-trail.css),
             поэтому общие правила .page__header-banner--split там для этой
             страницы не грузятся — дублируем их здесь, иначе картинка рендерится
             обычным <img> в потоке документа, а не оверлеем поверх фона
   Зачем/Как: см. подробное описание того же селектора в breadcrumbs-trail.css
   ══════════════════════════════════════════════════════════════════════════ */

.page__header-banner--split {
    position: relative;
    overflow: hidden;
    padding-top: 15px !important;
}

.page__header-banner--split .page__header-banner__main {
    max-width: 50%;
    position: relative;
    z-index: 1;
}

.page__header-banner__icon--split {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 55%;
    object-fit: cover;
    object-position: top;
}

@media (max-width: 1023px) {
    .page__header-banner--split .page__header-banner__main {
        max-width: 100%;
    }

    .page__header-banner__icon--split {
        position: static;
        width: 100%;
        height: 220px;
        margin-top: 24px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   CARD-C — раздельный фон + иллюстрация (success-stories-banner, поле
   stories_illustration_image). .card-c и .card-c--split описаны подробно
   в main-page-cards.css — этот блок использует тот же .card-c, но с классом
   .inverted (фон/иллюстрация СЛЕВА, текст справа с отступом) — здесь только
   зеркальный вариант позиционирования иллюстрации
   ══════════════════════════════════════════════════════════════════════════ */

.card-c.card-c--split {
    position: relative;
    overflow: hidden;
}

.card-c--split .card-c__text-container {
    max-width: 55%;
    position: relative;
    z-index: 1;
}

.card-c__icon--split {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 50%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
}

.card-c.inverted.card-c--split .card-c__icon--split {
    left: 0;
    right: auto;
}

.card-c:not(.inverted).card-c--split .card-c__icon--split {
    right: 0;
    left: auto;
}

@media (max-width: 767px) {
    .card-c--split .card-c__text-container {
        max-width: 100%;
    }

    .card-c__icon--split {
        display: none;
    }
}