/**
 * Vanilla Blocks - core CSS
 * Общий фундамент, который нужен на каждой фронтенд-странице.
 */

:root {
    /* Цвета из памятки */
    --vb-color-bg: #fff;
    --vb-color-btn-text: #fff;
    --vb-color-gray: #EEF1F2;
    --vb-color-dgray: #D4DEE8;
    --vb-color-heading: #000;
    --vb-color-text: #3B4450;
    --vb-color-success: #0e8420;
    --vb-color-error: #c7162b;

    /* Отступы Desktop */
    --vb-block-padding-y: 3vw;
    --vb-block-padding-x: 7vw;
    --vb-gap: 40px;
    --vb-card-l-padding: 34px;
    --vb-card-m-padding: 28px;
    --vb-btn-l-padding: 22px 40px;
    --vb-btn-m-padding: 18px 32px;
    --vb-btn-s-padding: 9px 22px;

    /* Скругления */
    --vb-radius-btn: 100px;
    --vb-radius-block: 4px;
    --vb-radius-form: 4px;
}

/* Mobile breakpoint (<1200px) */
@media (max-width: 1199px) {
    :root {
        --vb-block-padding-y: 70px;
        --vb-block-padding-x: 5%;
        --vb-gap: 30px;
        --vb-card-l-padding: 30px;
        --vb-card-m-padding: 24px;
        --vb-btn-l-padding: 20px 32px;
        --vb-btn-m-padding: 16px 28px;
    }
}

/* ========================================
   БАЗОВЫЕ СТИЛИ
   ======================================== */

.vb-slider__nav::before,
.vb-modal__close::before,
.vb-faq__plus::before {
    line-height: 1;
}

.vb-has-block-bg {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    isolation: isolate;
}

.vb-has-block-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: var(--vb-block-bg-color, transparent);
    background-image:
        linear-gradient(rgba(0, 0, 0, var(--vb-block-bg-overlay, 0)), rgba(0, 0, 0, var(--vb-block-bg-overlay, 0))),
        var(--vb-block-bg-image, none);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.vb-has-block-bg > * {
    position: relative;
    z-index: 1;
}

.vb-section {
    padding: var(--vb-block-padding-y) var(--vb-block-padding-x);
    font-family: var(--vb-font-family, inherit);
    font-size: var(--vb-font-size, inherit);
    color: var(--vb-color-text);
    background: var(--vb-color-bg);
}

/* Принудительно наследуем шрифт для всех элементов внутри,
   чтобы перебить дефолтные стили Vanilla Framework (h1, h2, input и т.д.) */
.vb-section h1,
.vb-section h2,
.vb-section h3,
.vb-section h4,
.vb-section h5,
.vb-section h6 {
    font-family: var(--vb-font-family, inherit) !important;
    color: var(--vb-color-heading);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.vb-section h1 {
    font-size: var(--vb-font-h1, 48px);
}

.vb-section h2 {
    font-size: var(--vb-font-h2, 36px);
}

.vb-section h3 {
    font-size: var(--vb-font-h3, 24px);
}

/* Mobile headers */
@media (max-width: 768px) {
    .vb-section h1 {
        font-size: calc(var(--vb-font-h1, 48px) * 0.7);
    }

    .vb-section h2 {
        font-size: calc(var(--vb-font-h2, 36px) * 0.75);
    }

    .vb-section h3 {
        font-size: calc(var(--vb-font-h3, 24px) * 0.8);
    }
}

.vb-section p,
.vb-section span,
.vb-section a,
.vb-section button,
.vb-section input,
.vb-section textarea,
.vb-slider,
.vb-modal,
.vb-qa {
    font-family: var(--vb-font-family, inherit) !important;
}

/* Глобальный line-height для текста */
.vb-section p,
.vb-section li {
    line-height: 1.5;
}

/* Убираем подчеркивание у всех ссылок */
.vb-section a {
    text-decoration: none;
}

.vb-section a:hover {
    text-decoration: none;
}

/* На всякий случай: убираем подчеркивание во всех внутренних компонентах плагина */
.vb-section a,
.vb-section a:hover,
.vb-modal a,
.vb-modal a:hover,
.vb-lightbox a,
.vb-lightbox a:hover,
.vb-consent a,
.vb-consent a:hover,
.vb-contact-item__value a,
.vb-contact-item__value a:hover,
.vb-slider a:hover {
    text-decoration: none !important;
}

/* Ссылка-кнопка (подробнее) */
.vb-link,
.vb-btn-link {
    text-decoration: none !important;
    color: var(--vb-color-heading, #000);
    transition: color 0.3s ease;
}

.vb-link:hover,
.vb-btn-link:hover {
    color: var(--vb-color-secondary);
    text-decoration: none !important;
}

.vb-section--alt {
    background: var(--vb-color-gray);
}

.vb-section--dark {
    background: var(--vb-color-dgray);
    color: var(--vb-color-text);
}

.vb-section--gradient {
    background: var(--vb-gradient);
    color: #fff;
}

.vb-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

.vb-section-header {
    text-align: center;
    margin-bottom: var(--vb-gap);
}

.vb-section-title {
    font-size: var(--vb-font-h2);
    font-weight: 700;
    color: var(--vb-color-heading, #000);
    /*
     * Клиентский запрос: убрать отступ между заголовком и подзаголовком
     * во всех блоках (как в «Наши работы»).
     */
    margin: 0;
}

.vb-section--dark .vb-section-title,
.vb-section--gradient .vb-section-title {
    color: #fff;
}

.vb-section-subtitle {
    font-size: var(--vb-font-size, inherit);
    max-width: 600px;
    margin: 0 auto;

    line-height: 1.5;
}

/* Без отступа между заголовком и подзаголовком */
.vb-section-header--no-gap .vb-section-title {
    margin-bottom: 0;
}


/* Кнопки */
.vb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: var(--vb-btn-m-padding);
    font-family: var(--vb-font-family, inherit);
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none !important;
    border: none;
    border-radius: var(--vb-radius-btn);
    cursor: pointer;
    transition: all 0.3s ease;
}

.vb-section a.vb-btn,
.vb-section a.vb-btn:hover,
.vb-section a.vb-btn:focus,
.vb-section a.vb-btn:focus-visible,
.vb-section a.vb-btn:active,
.vb-modal a.vb-btn,
.vb-modal a.vb-btn:hover,
.vb-modal a.vb-btn:focus,
.vb-modal a.vb-btn:focus-visible,
.vb-modal a.vb-btn:active {
    text-decoration: none !important;
}

/* Размер M для кнопок */
.vb-btn--m {
    padding: var(--vb-btn-m-padding);
    font-size: 0.875rem;
}

.vb-btn--primary {
    background: var(--vb-color-accent);
    color: var(--vb-color-btn-text) !important;
}

.vb-btn--primary:hover {
    background: var(--vb-color-accent);
    color: var(--vb-color-btn-text) !important;
    filter: brightness(0.92);
    transform: translateY(-2px);
}

.vb-btn--accent {
    background: var(--vb-gradient);
    color: var(--vb-color-btn-text) !important;
    box-shadow: 0 10px 24px rgba(7, 51, 153, 0.18);
}

.vb-btn--accent:hover {
    color: var(--vb-color-btn-text) !important;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(7, 51, 153, 0.22);
}

.vb-btn--success {
    background: var(--vb-color-success);
    color: var(--vb-color-btn-text);
}

.vb-btn--secondary,
.vb-btn--outline {
    background: transparent;
    border: 1px solid var(--vb-color-primary);
    color: var(--vb-color-heading, #000) !important;
}

.vb-btn--secondary:hover,
.vb-btn--outline:hover {
    background: var(--vb-color-primary) !important;
    color: #fff !important;
}

.vb-btn--white {
    background: var(--vb-color-bg, #fff);
    color: var(--vb-color-heading, #000) !important;
}

/* Карточки */
.vb-card {
    background: var(--vb-color-bg);
    border-radius: var(--vb-radius-block);
    padding: var(--vb-card-l-padding);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.vb-card--m {
    padding: var(--vb-card-m-padding);
}

/* Поля форм */
.vb-input,
.vb-textarea,
.vb-select {
    border-radius: var(--vb-radius-form);
    border: 1px solid var(--vb-color-dgray);
    padding: 12px 16px;
    font-family: var(--vb-font-family, inherit);
    font-size: 1rem;
    color: var(--vb-color-text);
    background: var(--vb-color-bg);
    transition: border-color 0.3s ease;
}

.vb-input:focus,
.vb-textarea:focus,
.vb-select:focus {
    outline: none;
    border-color: var(--vb-color-primary);
}

.vb-toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--vb-color-secondary);
    color: #fff;
    padding: 1rem 2rem;
    border-radius: var(--vb-radius);
    z-index: 10000;
    opacity: 0;
    transition: all 0.3s;
}

.vb-toast.active {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.vb-toast--success {
    background: var(--vb-color-success);
}

.vb-toast--error {
    background: var(--vb-color-error, #c7162b);
}

/* ========================================
   АНИМАЦИИ
   ======================================== */

.vb-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.vb-animate.animated {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 768px) {
        .vb-section {
            padding: var(--vb-block-padding-y) var(--vb-block-padding-x);
        }

        .vb-section-title {
            font-size: calc(var(--vb-font-h2) * 0.75);
        }
}

.vb-icon {
    display: inline-block;
    width: var(--vb-icon-size, 1em);
    height: var(--vb-icon-size, 1em);
    color: currentColor;
    fill: currentColor;
    vertical-align: -0.125em;
    flex: 0 0 auto;
}

.vb-icon use {
    pointer-events: none;
}

.vb-icon-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--vb-icon-size, 1em);
    height: var(--vb-icon-size, 1em);
    line-height: 1;
    color: currentColor;
    vertical-align: -0.125em;
}

.vb-icon-inline .vb-icon {
    width: 100%;
    height: 100%;
}

.vb-slider__nav--icon-pack::before,
.vb-modal__close--icon-pack::before {
    content: none !important;
}

.vb-slider__nav-icon {
    --vb-icon-size: 22px;
    display: block;
}

.vb-slider__nav--prev .vb-slider__nav-icon,
.vb-slider__nav--next .vb-slider__nav-icon {
    margin: 0;
}

.vb-lightbox__close--icon-pack {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.vb-lightbox__close-icon {
    --vb-icon-size: 24px;
}

.vb-gallery__overlay .vb-gallery__zoom-icon.vb-icon {
    --vb-icon-size: 48px;
    color: #fff;
    filter: none;
}

.vb-gallery-carousel__view-icon.vb-icon {
    width: 22px;
    height: 22px;
}

.vb-gallery-carousel__button-icon.vb-icon {
    width: 14px;
    height: 14px;
}

.vb-contact-item__icon .vb-icon,
.vb-contact-item__svg {
    width: 32px;
    height: 32px;
    color: var(--vb-color-heading, #000);
}

.vb-feature__svg {
    width: 40px;
    height: 40px;
}

.vb-faq__plus {
    display: flex;
    align-items: center;
    justify-content: center;
}

.vb-faq__icon {
    width: 28px;
    height: 28px;
}

.vb-faq__icon--minus {
    display: none;
}

.vb-faq__item.active .vb-faq__icon--plus {
    display: none;
}

.vb-faq__item.active .vb-faq__icon--minus {
    display: inline-block;
}

.vb-modal__close-icon {
    --vb-icon-size: 20px;
}