/*
 * Стили блоков «Истории успеха» (stories-page-banner, stories-grid)
 *
 * Для чего: CSS для классов, которых нет в itv-compiled.css или которые там
 *           привязаны к Vue scoped-атрибутам ([data-v-*]) и не работают в WordPress
 * Зачем: Блоки воспроизводят дизайн Vue SPA страницы case-studies без Vue-рантайма
 * Когда: Подключается через enqueue_style в acf-blocks.php при рендере обоих блоков
 */

/* ══════════════════════════════════════════════════════════════════════════
   БАННЕР (stories-page-banner-block)
   Для чего: Верхняя часть лэйаута — H1 + слоган
   ══════════════════════════════════════════════════════════════════════════ */

.stories-page-banner-block {
    /* Отступ сверху как у .page--with-right-sidebar_top в итоговом дизайне */
    padding-top: 43px;
}

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

/* ══════════════════════════════════════════════════════════════════════════
   СЕТКА (stories-grid-block) — ширины колонок
   Для чего: В itv-compiled.css ширины заданы через .page--with-right-sidebar .page__content
             (требует предка с этим классом). Мы задаём напрямую от .stories-grid-block.
   ══════════════════════════════════════════════════════════════════════════ */

.stories-grid-block .page__content {
    width: 67%;
    min-width: 0;
}

.stories-grid-block .page__sidebar {
    position: relative;
    width: 33%;
    height: auto;
    align-self: stretch;
    overflow: visible;
}

@media (max-width: 1023px) {
    /* На мобайле sidebar идёт сверху (column-reverse по умолчанию из бандла) */
    .stories-grid-block .page__content {
        width: 100%;
    }
    .stories-grid-block .page__sidebar {
        width: 100%;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   ТЕГИ КАТЕГОРИЙ (.stories-tag-*)
   Для чего: Плашки отрасли на карточке — «Ритейл», «Транспорт» и т.д.
   Зачем: Оригинальный .tag-item[data-v-920ef7bd] в itv-compiled.css не работает
          в WordPress — Vue scoped-атрибут отсутствует. Воспроизводим стиль без него.
   Источник стиля: .tag-item[data-v-920ef7bd]{color:#4c565f;font-size:16px;
     font-weight:500;padding:8px 10px;border-radius:4px;background:#f0f2fa}
   ══════════════════════════════════════════════════════════════════════════ */

.stories-tag-container {
    display: flex;
    align-items: center;
    border-radius: 4px;
    gap: 6px;
    flex-wrap: wrap;
}

.stories-tag-item {
    color: #4c565f;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    letter-spacing: .2px;
    display: flex;
    flex-shrink: 0;
    padding: 4px 10px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    line-height: normal;
    background: #f0f2fa;
}

/* ══════════════════════════════════════════════════════════════════════════
   ПУСТОЕ СОСТОЯНИЕ И ЛОАДЕР
   ══════════════════════════════════════════════════════════════════════════ */

.stories-empty {
    padding: 40px 20px;
    text-align: center;
    color: #666;
    grid-column: 1 / -1;
    width: 100%;
}

.stories-loader {
    padding: 40px 20px;
    text-align: center;
    color: #546bc6;
    font-size: 16px;
    width: 100%;
}

/* ══════════════════════════════════════════════════════════════════════════
   КНОПКА «ПОКАЗАТЬ ЕЩЁ»
   Для чего: Центровка под сеткой карточек
   ══════════════════════════════════════════════════════════════════════════ */

.stories-load-more {
    width: 100%;
    justify-content: center;
}

/* ══════════════════════════════════════════════════════════════════════════
   ФИЛЬТР-SIDEBAR: видимость заголовка и счётчиков на десктопе
   Для чего: В itv-compiled.css .filter-case-studies__filter-title{display:none}
             и .filter-case-studies__count{display:none} — мобильные override'ы.
             На десктопе (>1024px) заголовок и счётчики видны.
   ══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {
    .stories-grid-block .filter-case-studies__filter-title {
        display: block;
    }

    .stories-grid-block .filter-case-studies__count {
        display: block;
    }

    /* На десктопе список вертикальный (переопределяем flex-direction:row из бандла) */
    .stories-grid-block .filter-case-studies__groups {
        flex-direction: column;
        overflow-x: visible;
        white-space: normal;
        gap: 20px;
    }

    .stories-grid-block .filter-case-studies li {
        flex: unset;
    }

    /* Ссылки фильтра на десктопе — без border-pill (мобильный стиль из бандла) */
    .stories-grid-block .filter-case-studies__item {
        white-space: normal;
        border: none;
        padding: 0;
        border-radius: 0;
        font-size: 16px;
        color: #293139;
    }

    .stories-grid-block .filter-case-studies__item:hover {
        border: none;
        color: #546bc6;
        background: transparent;
    }

    .stories-grid-block .filter-case-studies__item--active,
    .stories-grid-block .filter-case-studies__item:active,
    .stories-grid-block .filter-case-studies__item:focus {
        border: none !important;
        background-color: transparent !important;
        color: #546bc6 !important;
    }

    /* Отступ фильтра от верха — совпадает с началом карточек */
    .stories-grid-block .filter-case-studies {
        margin-top: 0;
    }
}

/**
 * Баннер детальной страницы истории успеха (story-hero) — светлый вариант «split»
 *
 * Для чего: привести баннер истории к оригиналу ITV — светлый бежевый фон,
 *           тёмный текст слева, фото справа с плавным переходом (fade) в фон
 * Зачем: раньше фото клалось на весь фон с тёмной темой (белый текст) —
 *        не соответствовало оригиналу; теперь как в product-hero, но со
 *        светлым фоном баннера и мягким левым краем фото
 */
.story-hero-block .page__header-banner {
    background-color: #f3f0ea; /* тёплый светлый фон, как на оригинале */
}
.story-hero-block .page__header-banner__icon--split {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%);
    mask-image: linear-gradient(to right, transparent 0, #000 22%);
}