/**
 * Промокартка «Акція BASIS» у каталогах (wst-cat-promo.js)
 *
 * Блоки:
 * - .wst-promo-basis — картка; геометрія, фон і типографіка — як у картки «Підписка»
 *   (склад банерів у app_layout app 12: .ban-subscribe, p.septial-text, a.ban-button).
 *   Стилі продубльовано тут з обмеженням класом картки: у каталозі калькулятора
 *   (app 16) складу банерів і його стилів немає.
 * - h3: звичайний текст 300, BASIS і «до −15%» — 600 (у Neris на сайті лише 300 і 600,
 *   а h3 теми вже 600 — інакше виділення не було б видно)
 *
 * Залежності: змінні теми --primary, --title-inverse
 * Використовується в: templates/gridbox/index.php (сторінки-списки, разом з wst-cat-promo.js)
 *
 * Історія змін:
 * - 2026-11-02: Магазин — розмір як у банерів; синя вся картка — лише калькулятор (.wst-promo-basis--full)
 * - 2026-11-02: Синя вся картка (без сірої підкладки карток калькулятора), внутрішній блок — на всю картку
 * - 2026-11-02: Створено
 */

/* Магазин: як банери «Послуги»/«Підписка» — синій блок у межах фото-області картки;
   висоту дає загальне правило банерів магазину (.in-cat .ba-blog-post-image { height: var(--prodHeight) }) */
.product-category .ba-blog-post.wst-promo-basis {
    opacity: 1 !important;
}
.wst-promo-basis > .ba-blog-post-image {
    display: flex !important;
    flex-direction: column;
    box-sizing: border-box;
    padding: 20px 0 30px 20px;
    background: var(--primary);
    border-radius: 10px;
}

/* Калькулятор (--full, клас ставить JS): синя вся картка на всю висоту ряду.
   У карток калькулятора є власна сіра підкладка з відступом — прибираємо її, внутрішній
   блок заповнює картку. Висоту ставить JS (min-height = висота сусідньої картки товару).
   html body — щоб перебити правила карток Gridbox і банерів. */
html body .product-category .ba-blog-post.wst-promo-basis--full {
    display: flex !important;
    flex-direction: column;
    box-sizing: border-box;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: var(--primary) !important;
    box-shadow: none !important;
    overflow: hidden;
    opacity: 1 !important;
}

html body .product-category .ba-blog-post.in-cat.wst-promo-basis--full > .ba-blog-post-image {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    box-sizing: border-box;
    width: 100% !important;
    height: auto !important;
    min-height: 0;
    margin: 0 !important;
    padding: 24px 20px 30px 24px;
    background: transparent !important;
    border-radius: 0 !important;
}

.wst-promo-basis p.septial-text {
    margin: 0;
    color: var(--title-inverse);
    font-family: Neris;
    font-size: 14px;
    line-height: 18px;
    font-weight: 600;
    opacity: 0.7;
}

.wst-promo-basis h3 {
    max-width: 218px;
    margin: 20px 30px 20px 0 !important;
    color: var(--title-inverse);
    font-family: Neris;
    font-size: 20px;
    line-height: 26px;
    font-weight: 300;
    text-align: left;
}

.wst-promo-basis h3 strong {
    font-weight: 600;
}

.wst-promo-basis p.wst-promo-text {
    margin: 0 20px 20px 0;
    color: var(--title-inverse);
    font-family: Montserrat;
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
}

.wst-promo-basis a.ban-button {
    position: relative !important;
    display: flex;
    width: fit-content;
    margin-top: auto;
    color: var(--title-inverse);
    background-color: rgba(39, 71, 161, 0);
    border: 1px solid #fff;
    border-radius: 100px;
    padding: 14px 27px 16px;
    font-family: Neris;
    font-size: 14px;
    line-height: 18px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.5s ease-in-out !important;
}

.wst-promo-basis a.ban-button:hover {
    background: #fff;
    color: #26489e;
}