/* kovbasyuk — глобальные визуальные правила (ТЗ п.3).
 *
 * Загружается после main.css, чтобы переопределить его локальные правила.
 * Три задачи:
 *   1. Одинаковые отступы между блоками: 3см (ПК) / 1см (моб).
 *   2. Единый стиль заголовков всех блоков (шрифт + размер + начертание).
 *   3. Логотип в шапке и подвале в одном размере на ПК и моб.
 */

/* --- 1. ЕДИНЫЕ ОТСТУПЫ МЕЖДУ БЛОКАМИ ------------------------------------ */

/* Все верхнеуровневые секции: <section class="…"> внутри контента.
 * Значение 3cm/1cm по ТЗ.  !important нужен потому что main.css
 * содержит per-block padding с высокими специфичностями.
 */
body:not(.wp-admin) main > section,
body:not(.wp-admin) main > .section,
body:not(.wp-admin) > section,
body:not(.wp-admin) > .section,
.first,
.about-company, .before-after, .calc-banner, .calc-price, .catalog,
.certificates, .clear, .clear-talk, .clients-choose, .company, .consultation,
.contacts, .deadlines, .delivery, .discount, .download-price, .examples,
.faq, .geography, .get-consultation, .house, .articles, .land,
.our-team, .our-values, .our-works, .partners, .portfolio, .price,
.products, .products-2, .quiz, .reasons, .reply, .report, .reviews,
.reviews2, .seo, .service2, .services, .side-banner, .stati,
.team, .text, .video-block, .warranty, .works, .work-steps {
    padding-top: 3cm !important;
    padding-bottom: 3cm !important;
}

/* Хлебные крошки, header/footer, фиксированные UI-элементы — не растягиваем */
.breadcrumbs, .header, .footer,
.to-top, .side-fixed-links, .calc-banner.md-calc-banner-fixed {
    padding-top: initial !important;
    padding-bottom: initial !important;
}

@media (max-width: 768px) {
    body:not(.wp-admin) main > section,
    body:not(.wp-admin) main > .section,
    body:not(.wp-admin) > section,
    body:not(.wp-admin) > .section,
    .first,
    .about-company, .before-after, .calc-banner, .calc-price, .catalog,
    .certificates, .clear, .clear-talk, .clients-choose, .company, .consultation,
    .contacts, .deadlines, .delivery, .discount, .download-price, .examples,
    .faq, .geography, .get-consultation, .house, .articles, .land,
    .our-team, .our-values, .our-works, .partners, .portfolio, .price,
    .products, .products-2, .quiz, .reasons, .reply, .report, .reviews,
    .reviews2, .seo, .service2, .services, .side-banner, .stati,
    .team, .text, .video-block, .warranty, .works, .work-steps {
        padding-top: 1cm !important;
        padding-bottom: 1cm !important;
    }
}

/* --- 2. ЕДИНЫЙ СТИЛЬ ЗАГОЛОВКОВ БЛОКОВ ---------------------------------
 * Основа: fobiy.net — сдержанный размер, средний вес, чёрный, левое
 * выравнивание в шапке блока. Оставляем text-align:center для тех
 * блоков, где по вёрстке заголовок стоит по центру (calc-banner, first).
 */

.md-main-title,
h1.md-main-title,
h2.md-main-title,
h3.md-main-title,
.md-main-title b {
    font-family: inherit;
    font-size: clamp(24px, 2.4vw, 40px) !important;
    line-height: 1.25 !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    color: #1c1c1c;
    /* text-align оставляем как задано в конкретном блоке (у большинства center) */
}

/* Внутри <b> заголовков — не делаем сверх-жирным */
.md-main-title b {
    font-weight: 600 !important;
}

/* На мобильной версии — чуть плотнее */
@media (max-width: 699px) {
    .md-main-title,
    h1.md-main-title,
    h2.md-main-title,
    h3.md-main-title {
        font-size: clamp(20px, 5.6vw, 28px) !important;
        line-height: 1.3 !important;
    }
}

/* --- 3. ЛОГОТИП В ШАПКЕ И ПОДВАЛЕ (одинаковый размер, адаптив) --------- */
.header__logo,
.footer__logo {
    display: inline-flex;
    align-items: center;
}

.header__logo a,
.footer__logo a {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

/* Логотип: фиксированный размер вне зависимости от контейнера */
.header__logo img,
.footer__logo img {
    display: block;
    max-height: 60px;
    width: auto;
    object-fit: contain;
}

/* Моб — компактнее */
@media (max-width: 699px) {
    .header__logo img,
    .footer__logo img {
        max-height: 46px;
    }
}

/* --- 4. ШАПКА: моб-версия ----------------------------------------------- */

/* На моб показать иконки соцсетей (включая Telegram).
 * Текст «Я онлайн, пишите» на моб прячем — только иконки. */
@media (max-width: 768px) {
    .header__social {
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        margin-left: auto;
    }
    .header__social p {
        display: none; /* убираем «Я онлайн, пишите» — экономим место */
    }
    .header__social .social-links {
        display: inline-flex;
        gap: 8px;
    }
    .header__social .social-links a {
        display: inline-flex;
        width: 32px;
        height: 32px;
    }
    .header__social .social-links a img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /* Убрать подчёркивание под «Запис на консультацію» на моб */
    .header__contacts .call-back.md-line-dashed::after,
    .header__contacts .md-line-dashed::after {
        display: none !important;
    }
}

/* --- 4b. МОБ-ШАПКА: только лого + бургер (ТЗ) --------------------------- */
/* Всё остальное (языки, Telegram, «Запись на консультацию») JS переносит
 * внутрь .header__nav — открывается по клику на бургер.
 * Логотип + бургер центрируются в шапке как единая пара с отступами от краёв. */
@media (max-width: 768px) {
    .header__top .wrapper {
        display: flex !important;
        align-items: center;
        justify-content: center !important;   /* оба элемента по центру, парой */
        gap: 22px;
        padding-inline: 20px !important;      /* дышат от краёв экрана */
        padding-block: 10px !important;
    }
    /* В шапке остаются только лого и бургер */
    .header__top .header__text,
    .header__top .header__address,
    .header__top .header__download,
    .header__top .header__social,
    .header__top .header__contacts,
    .header__top .header__lang {
        display: none !important;
    }
    .header__top .header__logo,
    .header__top .header__btn-wrap {
        flex: 0 0 auto;
        margin: 0 !important;
    }
    /* Убираем текст "Меню сайту" на моб — оставляем чистую иконку */
    .header__top .header__btn-wrap p {
        display: none !important;
    }

    /* ---- Редизайн бургера: круглая кнопка 44×44 с мягким washom -----
     * VARIANCE 4 / MOTION 3 — сдержанно, без novelty-эффектов.
     * Три линии: верх/низ одной длины, средняя короче (лёгкая асимметрия).
     * При открытии — плавный морф в X, средняя линия исчезает. */
    .header__btn-wrap {
        display: inline-flex !important;
        align-items: center;
    }
    .header__btn {
        width: 44px !important;
        height: 44px !important;
        border-radius: 50%;
        background: rgba(181, 117, 79, 0.08);
        border: 1px solid rgba(181, 117, 79, 0.22);
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        position: relative;
        cursor: pointer;
        transition: background .25s ease, border-color .25s ease, transform .18s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .header__btn:hover {
        background: rgba(181, 117, 79, 0.14);
        border-color: rgba(181, 117, 79, 0.35);
    }
    .header__btn:active {
        transform: scale(0.94);
    }
    .header__btn.open {
        background: rgba(181, 117, 79, 0.16);
        border-color: rgba(181, 117, 79, 0.35);
    }
    /* Линии — центрируем внутри круглой кнопки */
    .header__btn span {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        width: 20px !important;
        height: 2px !important;
        background-color: var(--main-color, #b5754f) !important;
        border-radius: 2px !important;
        transition: transform .35s cubic-bezier(.16,1,.3,1),
                    opacity .2s ease,
                    width .35s cubic-bezier(.16,1,.3,1) !important;
    }
    .header__btn span:first-child {
        transform: translate(-50%, calc(-50% - 6px));
    }
    .header__btn span:nth-child(2) {
        width: 13px !important;  /* короче — тонкая асимметрия */
        transform: translate(-50%, -50%);
        opacity: 1;
    }
    .header__btn span:last-child {
        transform: translate(-50%, calc(-50% + 6px));
        width: 20px !important;
    }
    /* Открытое состояние — аккуратный X */
    .header__btn.open span:first-child {
        transform: translate(-50%, -50%) rotate(45deg) !important;
        width: 20px !important;
    }
    .header__btn.open span:nth-child(2) {
        opacity: 0;
        width: 20px !important;
    }
    .header__btn.open span:last-child {
        transform: translate(-50%, -50%) rotate(-45deg) !important;
        width: 20px !important;
    }

    @media (prefers-reduced-motion: reduce) {
        .header__btn,
        .header__btn span {
            transition: none !important;
        }
    }

    /* ============================================================
     * Внутри развёрнутого меню — редизайн (design-taste-frontend).
     * VARIANCE 4 / MOTION 3 / DENSITY 3.
     * Приоритеты:
     *   - Sentence case вместо ALL CAPS (тёплее, менее «клинически»).
     *   - Пункты меню — вертикальный стек с тонкими разделителями,
     *     без плавания в центре.
     *   - Небольшой брендовый акцент сверху вместо пустоты.
     *   - Низ страницы: primary CTA (полноширинный пилл) + компактная
     *     строка с языком и Telegram.
     *   - Плавный staggered fade-in по открытию (respect reduced-motion).
     * ============================================================ */

    /* Контейнер: пункты вверху, extras внизу — не center-float. */
    .header__nav {
        padding-top: 88px !important;
        padding-bottom: 24px !important;
        background: #F5F8F9 !important;
        overflow-y: auto !important;
    }
    .header__nav .wrapper {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        min-height: calc(100dvh - 120px);
        gap: 24px;
        padding-inline: 24px !important;
        overflow: visible !important;
        width: 100% !important;
    }
    .header__nav .nav-wrap {
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        border-bottom: none !important;
    }
    /* Небольшой акцент сверху меню — маленькая полоска в фирменном цвете */
    .header__nav .nav-wrap::before {
        content: "";
        display: block;
        width: 36px;
        height: 2px;
        border-radius: 2px;
        background: var(--main-color, #b5754f);
        opacity: 0.5;
        margin: 0 auto 20px;
    }

    /* --- Пункты меню --- */
    .header__nav .nav {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }
    .header__nav .nav > .nav-item {
        width: 100% !important;
        text-align: center !important;
        padding: 0 !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(28, 28, 28, 0.06);
        opacity: 0;
        animation: kovNavItemIn .5s cubic-bezier(.16,1,.3,1) forwards;
    }
    .header__nav .nav > .nav-item:last-child { border-bottom: none; }
    /* Staggered entry */
    .header__nav .nav > .nav-item:nth-child(1) { animation-delay: .08s; }
    .header__nav .nav > .nav-item:nth-child(2) { animation-delay: .14s; }
    .header__nav .nav > .nav-item:nth-child(3) { animation-delay: .20s; }
    .header__nav .nav > .nav-item:nth-child(4) { animation-delay: .26s; }
    .header__nav .nav > .nav-item:nth-child(5) { animation-delay: .32s; }
    .header__nav .nav > .nav-item:nth-child(6) { animation-delay: .38s; }
    .header__nav .nav > .nav-item:nth-child(7) { animation-delay: .44s; }
    .header__nav .nav > .nav-item:nth-child(8) { animation-delay: .50s; }
    .header__nav .nav > .nav-item:nth-child(n+9) { animation-delay: .56s; }

    .header__nav .nav > .nav-item a {
        display: block !important;
        text-align: center !important;
        text-transform: none !important;   /* убираем ALL CAPS — sentence case */
        font-size: 17px !important;
        font-weight: 500 !important;
        letter-spacing: 0 !important;
        line-height: 1.4 !important;
        color: #1c1c1c !important;
        padding: 15px 8px !important;
        transition: color .25s ease, background-color .25s ease !important;
    }
    .header__nav .nav > .nav-item a:hover,
    .header__nav .nav > .nav-item.current-menu-item > a,
    .header__nav .nav > .nav-item.current_page_item > a {
        color: var(--main-color, #b5754f) !important;
        background: rgba(181, 117, 79, 0.045) !important;
    }
    .header__nav .nav > .nav-item.dropdown-item::after {
        display: none !important;
    }

    /* --- Низ меню: CTA + строка lang/telegram --- */
    .header__nav .header__mobile-extras {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "cta cta"
            "lang tg";
        column-gap: 0;
        row-gap: 20px;
        align-items: center;
        margin: 0 !important;
        padding-top: 24px !important;
        border-top: 1px solid rgba(28, 28, 28, 0.08);
        opacity: 0;
        animation: kovNavItemIn .5s cubic-bezier(.16,1,.3,1) forwards;
        animation-delay: .62s;
    }

    /* CTA — Запис на консультацію: полноширинный пилл в фирменном цвете */
    .header__nav .header__mobile-extras .call-back {
        grid-area: cta;
        display: block;
        width: 100%;
        text-align: center;
        background: var(--main-color, #b5754f);
        color: #ffffff !important;
        font-weight: 500 !important;
        font-size: 16px !important;
        line-height: 1 !important;
        padding: 15px 24px !important;
        border-radius: 999px;
        text-decoration: none !important;
        letter-spacing: .01em;
        transition: filter .25s ease, transform .15s ease;
        cursor: pointer;
        border: none;
        box-shadow: 0 4px 16px rgba(181, 117, 79, 0.22);
    }
    .header__nav .header__mobile-extras .call-back:hover { filter: brightness(1.06); }
    .header__nav .header__mobile-extras .call-back:active { transform: scale(0.98); }
    .header__nav .header__mobile-extras .call-back::after,
    .header__nav .header__mobile-extras .call-back::before { display: none !important; }

    /* Языки — левая колонка, справа тонкая разделительная линия */
    .header__nav .header__mobile-extras .header__lang {
        grid-area: lang;
        display: inline-flex !important;
        justify-content: center;
        align-items: center;
        justify-self: stretch;
        margin: 0 !important;
        padding-right: 16px;
        border-right: 1px solid rgba(28, 28, 28, 0.10);
        min-height: 24px;
    }
    .header__nav .header__mobile-extras .header__lang ul {
        display: inline-flex; gap: 10px; margin: 0; padding: 0; list-style: none;
        font-size: 14px; line-height: 1;
    }
    .header__nav .header__mobile-extras .header__lang li + li::before {
        content: "|"; color: rgba(28,28,28,.22); margin-right: 10px;
    }
    .header__nav .header__mobile-extras .header__lang a {
        text-transform: uppercase; text-decoration: none;
        color: #6a6a6a; padding: 0; letter-spacing: .04em; font-weight: 500;
        transition: color .2s ease;
    }
    .header__nav .header__mobile-extras .header__lang a:hover { color: var(--main-color, #b5754f); }
    .header__nav .header__mobile-extras .header__lang .current-lang a {
        color: var(--main-color, #b5754f); font-weight: 700;
    }

    /* Telegram (соцсети) — правая колонка, слева от разделителя */
    .header__nav .header__mobile-extras .header__social {
        grid-area: tg;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        justify-self: stretch;
        padding-left: 16px;
        margin: 0 !important;
        min-height: 24px;
    }
    .header__nav .header__mobile-extras .header__social p { display: none; }
    .header__nav .header__mobile-extras .header__social .social-links {
        display: inline-flex; gap: 8px;
    }
    .header__nav .header__mobile-extras .header__social .social-links a {
        width: 22px !important;
        height: 22px !important;
        display: inline-flex; align-items: center; justify-content: center;
        border-radius: 0; background: transparent !important;
        opacity: .82;
        transition: opacity .2s ease;
    }
    .header__nav .header__mobile-extras .header__social .social-links a:hover { opacity: 1; }
    .header__nav .header__mobile-extras .header__social .social-links a img {
        width: 22px !important;
        height: 22px !important;
        object-fit: contain; display: block;
    }
}

@keyframes kovNavItemIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    .header__nav .nav > .nav-item,
    .header__nav .header__mobile-extras {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* --- 4b2. Шапка (ПК): «Я онлайн, пишіть» + Telegram → плотный стек ------
 * По ТЗ клиента: два элемента слишком разнесены и pulse-точка слева
 * не читается как статус, только шумит. Оставляем чистый компактный стек. */
@media (min-width: 769px) {
    .header__social {
        width: auto !important;
        min-width: 0 !important;
        padding-left: 0 !important;
        gap: 6px;
        flex-shrink: 0;
    }
    .header__social p {
        margin-bottom: 4px !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
        letter-spacing: 0.02em !important;
        text-align: center;
        white-space: nowrap !important;   /* «Я онлайн, пишіть» строго в одну строку */
    }
    /* Убираем оранжевые pulse-точки слева от «Я онлайн, пишіть» — шум */
    .header__social p::before,
    .header__social p::after {
        display: none !important;
    }
    /* Компактный Telegram-круг */
    .header__social .social-links a {
        width: 30px !important;
        height: 30px !important;
        margin: 0 !important;
    }
    .header__social .social-links a img {
        width: 60% !important;
        height: 60% !important;
    }
}

/* --- 4b3. Шапка (ПК): собственный тёмный backdrop под всеми элементами ---
 * Раньше рассчитывали на скрим от `.first::after`, но он локальный и не
 * гарантирует контраст на любом фото (светлые волосы = «Запис на
 * консультацію» исчезает). Даём шапке свой прозрачный dark wash — ровный
 * ~90px slot на любой странице. Читается везде, не мешает hero-photo. */
@media (min-width: 769px) {
    .header {
        position: relative;
        z-index: 10;
    }
    .header .header__top {
        position: relative;
        z-index: 2;
    }
    .header .header__top::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -8px;
        bottom: 0;
        background: linear-gradient(180deg,
            rgba(20, 14, 8, 0.45) 0%,
            rgba(20, 14, 8, 0.30) 50%,
            rgba(20, 14, 8, 0.10) 85%,
            rgba(20, 14, 8, 0.00) 100%);
        z-index: -1;
        pointer-events: none;
    }
    /* Убираем дублирующийся top-скрим на hero — теперь работает шапочный */
    .first.md-dark-bg::after {
        display: none;
    }
    /* «Запис на консультацію» — форсим полный контраст и dashed
     * подчёркивание в фирменном clay для акцента */
    .header.md-white-header .header__contacts .call-back,
    .header.md-white-header .header__contacts a {
        color: #ffffff !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    }
    .header.md-white-header .header__contacts .call-back.md-line-dashed::after,
    .header.md-white-header .header__contacts .md-line-dashed::after {
        border-color: rgba(255, 255, 255, 0.85);
    }
    /* Тоже страхуем контраст для остальных надписей в шапке на любом фото */
    .header.md-white-header .header__lang,
    .header.md-white-header .header__lang a,
    .header.md-white-header .header__social p,
    .header.md-white-header .header__contacts p,
    .header.md-white-header .header__logo p,
    .header.md-white-header .header__address {
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    }
    /* Адрес «Сімейна та парна терапія / онлайн та очно в Києві» — белый на скриме */
    .header.md-white-header .header__address {
        color: #ffffff;
    }
}

/* --- 4c. Блок «Запишіться на консультацію» и main-popup: --------------
 * заголовок на тёмной фотографии — принудительно белый.
 * .md-main-title из секции 2 задаёт #1c1c1c, что на тёмном фоне не читается. */
.get-consultation__title,
.get-consultation__title.md-main-title,
.main-popup__title,
.main-popup__title.md-main-title,
.consultation__title,
.consultation__title.md-main-title {
    color: #ffffff !important;
}
.get-consultation__title b,
.get-consultation__title.md-main-title b,
.main-popup__title b,
.main-popup__title.md-main-title b {
    color: #ffffff !important;
}
/* Описание под заголовком — на всякий случай тоже светлое */
.get-consultation__container .form-text,
.main-popup__text {
    color: rgba(255,255,255,0.9) !important;
}

/* --- 4d. Плавающая правая колонка (side-fixed-links) — прячем на моб -----
 * На мобильном она превращается в некрасивую вертикальную пилюлю у
 * правого края и мешает контенту. На ПК оставляем как есть. */
@media (max-width: 768px) {
    .side-fixed-links,
    .to-top {
        display: none !important;
    }
}

/* --- 4e. HERO (главная) — editorial редизайн ---------------------------
 * design-taste-frontend, dials 5/3/3 (calm, trust-first, psychology).
 * Проблемы прежнего hero:
 *   - Заголовок по центру над busy-фото (низкий контраст).
 *   - Шапка md-white-header со светлым фото — «Запис на консультацію»
 *     и другие пункты растворялись.
 *   - Оранжевая CTA-пилюля непропорционально большая.
 *   - Мелкая подпись «домовимося про час…» болталась сбоку.
 *
 * Решения:
 *   - Двойной скрим: сверху (для шапки) + слева (сцена для текста).
 *   - Лево-выровненный контент, макс. 640px — асимметричный editorial.
 *   - Заголовок: клампованный размер, weight 400, letter-spacing -0.01em.
 *   - CTA: пилюля обычной высоты (16px 32px), soft shadow.
 *   - Подпись — inline рядом, компактная, muted.
 *   - Staggered fade-in при загрузке (respect reduced-motion).
 * ------------------------------------------------------------------- */

.first.md-dark-bg {
    position: relative;
    color: #ffffff;
}
/* Тёмный скрим слева — сцена для текста */
.first.md-dark-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(90deg,
        rgba(20, 14, 8, 0.55) 0%,
        rgba(20, 14, 8, 0.40) 25%,
        rgba(20, 14, 8, 0.15) 50%,
        rgba(20, 14, 8, 0.00) 70%);
}
/* Тёмный скрим сверху — читаемость шапки на любом фото */
.first.md-dark-bg::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 180px;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(20, 14, 8, 0.40) 0%,
        rgba(20, 14, 8, 0.18) 40%,
        rgba(20, 14, 8, 0.00) 100%);
}
/* Контент выше скримов. Не трогаем .first__bg (там photo с position:absolute
 * и z-index:-1 из main.css) — иначе она перестанет позиционироваться. */
.first.md-dark-bg .first__content {
    position: relative;
    z-index: 3;
}

/* ----- Контентная часть — лево-aligned editorial ----- */
.first.md-first-style-2 .first__content {
    max-width: 640px;
    margin: 0 !important;
    text-align: left !important;
    padding-top: 5vw;
    padding-bottom: 5vw;
}

/* Заголовок */
.first.md-first-style-2 .first__title {
    width: auto !important;
    max-width: 640px !important;
    text-align: left !important;
    font-size: clamp(30px, 3.2vw, 58px) !important;
    line-height: 1.14 !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 22px !important;
    color: #ffffff;
}
.first.md-first-style-2 .first__title b {
    font-weight: 600 !important;
}

/* Подзаголовок */
.first.md-first-style-2 .first__text {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    margin-bottom: 34px !important;
    max-width: 560px !important;
}
.first.md-first-style-2 .first__text p {
    width: 100% !important;
    max-width: none !important;
    font-size: clamp(16px, 1.1vw, 19px) !important;
    line-height: 1.55 !important;
    font-weight: 400 !important;
    letter-spacing: 0.005em !important;
    color: rgba(255, 255, 255, 0.92) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
}
/* Убираем оранжевые pulsing dots — визуальный шум */
.first.md-first-style-2 .first__text .dots {
    display: none !important;
}

/* Bullets (список плюсиков, если есть) — компактнее */
.first.md-first-style-2 .first__bullets {
    max-width: 560px !important;
    margin-bottom: 32px !important;
    gap: 20px;
    flex-wrap: wrap;
}
.first.md-first-style-2 .first__bullets .bullets-item p {
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 14px !important;
}

/* Кнопки — компактная пилюля + inline microcopy */
.first.md-first-style-2 .first__buttons {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 18px 22px;
    margin-top: 8px;
}
.first.md-first-style-2 .first__buttons-btn {
    margin-right: 0 !important;
    padding: 16px 30px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    border-radius: 999px !important;
    height: auto !important;
    width: auto !important;
    max-width: max-content !important;
    box-shadow: 0 10px 30px rgba(181, 117, 79, 0.30);
    transition: transform .15s ease, filter .25s ease, box-shadow .25s ease !important;
    letter-spacing: 0 !important;
}
.first.md-first-style-2 .first__buttons-btn:hover {
    filter: brightness(1.06);
    box-shadow: 0 14px 36px rgba(181, 117, 79, 0.40);
}
.first.md-first-style-2 .first__buttons-btn:active {
    transform: scale(0.98);
}
.first.md-first-style-2 .first__buttons-btn img,
.first.md-first-style-2 .first__buttons-btn svg {
    width: 16px !important;
    height: 16px !important;
    margin-left: 10px;
}

/* Мелкая подпись рядом с CTA */
.first.md-first-style-2 .first__buttons-text {
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px;
    max-width: 280px;
    color: rgba(255, 255, 255, 0.82);
}
.first.md-first-style-2 .first__buttons-text::before,
.first.md-first-style-2 .first__buttons-text::after {
    display: none !important;
}
.first.md-first-style-2 .first__buttons-text svg,
.first.md-first-style-2 .first__buttons-text img {
    width: 20px !important;
    height: 20px !important;
    margin-bottom: 0 !important;
    opacity: .78;
    flex-shrink: 0;
}
.first.md-first-style-2 .first__buttons-text svg path,
.first.md-first-style-2 .first__buttons-text img path {
    fill: rgba(255, 255, 255, 0.82) !important;
}
.first.md-first-style-2 .first__buttons-text p {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
}

/* ----- Мобильная адаптация ----- */
@media (max-width: 768px) {
    .first.md-first-style-2 .first__content {
        max-width: none;
        padding: 20px 20px 40px !important;
    }
    .first.md-first-style-2 .first__title {
        font-size: clamp(26px, 6.5vw, 34px) !important;
        line-height: 1.2 !important;
        margin-bottom: 16px !important;
    }
    .first.md-first-style-2 .first__text p {
        font-size: 15px !important;
        line-height: 1.5 !important;
    }
    .first.md-first-style-2 .first__buttons {
        flex-direction: column;
        align-items: stretch !important;
        gap: 14px;
    }
    .first.md-first-style-2 .first__buttons-btn {
        max-width: none !important;
        width: 100% !important;
        padding: 15px 24px !important;
        justify-content: center !important;
    }
    .first.md-first-style-2 .first__buttons-text {
        justify-content: center;
        text-align: center;
        margin: 0 auto;
    }
    /* На моб делаем скрим сильнее по всей высоте */
    .first.md-dark-bg::before {
        background: linear-gradient(180deg,
            rgba(20, 14, 8, 0.45) 0%,
            rgba(20, 14, 8, 0.30) 40%,
            rgba(20, 14, 8, 0.55) 100%);
    }
}

/* ----- Мотion: staggered entry ----- */
@media (prefers-reduced-motion: no-preference) {
    .first.md-first-style-2 .first__title {
        animation: kovHeroFadeIn .8s cubic-bezier(.16, 1, .3, 1) both;
    }
    .first.md-first-style-2 .first__text {
        animation: kovHeroFadeIn .8s cubic-bezier(.16, 1, .3, 1) both;
        animation-delay: .12s;
    }
    .first.md-first-style-2 .first__bullets {
        animation: kovHeroFadeIn .8s cubic-bezier(.16, 1, .3, 1) both;
        animation-delay: .20s;
    }
    .first.md-first-style-2 .first__buttons {
        animation: kovHeroFadeIn .8s cubic-bezier(.16, 1, .3, 1) both;
        animation-delay: .28s;
    }
}
@keyframes kovHeroFadeIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- 4f. Полировка главной (design-taste-frontend, redesign-preserve) --
 * Задача: сохранить посыл, не перегружать, читаемо на моб.
 * Убираем визуальный шум, унифицируем card corners и spacing. */

/* CTA кнопки: убираем «blick»-полосу — она читается как глюк/loading */
.md-main-color-btn::after,
.md-main-color-btn::before {
    display: none !important;
}
.md-main-color-btn {
    overflow: hidden;
    transition: background-color .25s ease, padding .2s ease, box-shadow .25s ease, transform .15s ease !important;
}
.md-main-color-btn:hover {
    box-shadow: 0 8px 24px rgba(181, 117, 79, 0.28);
}
.md-main-color-btn:active {
    transform: scale(0.99);
}

/* Промо-карточки блока «Робота з парою» — унифицированные скругления,
 * тонкое пружинистое поведение */
.promotions__item {
    border-radius: 20px !important;
    overflow: hidden;
    transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease !important;
}
.promotions__item:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px rgba(28, 28, 28, 0.10);
}
.promotions__item p {
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.2 !important;
}
.promotions__item .content-btn {
    font-weight: 500 !important;
}

/* FAQ / clear-talk pill cards: смягчаем тень и радиус для editorial-look */
.clear__item, .faq__item, .questions__item {
    border-radius: 16px !important;
    transition: box-shadow .25s ease, transform .2s ease;
}
.clear__item:hover, .faq__item:hover, .questions__item:hover {
    box-shadow: 0 8px 24px rgba(28, 28, 28, 0.06);
}

/* Форма записи (низ страницы): текст-CTA внутри dark-popup — pill CTA */
.consultation__form .form-btn.md-main-color-btn,
.get-consultation__form .form-btn.md-main-color-btn {
    border-radius: 999px !important;
    box-shadow: 0 8px 24px rgba(181, 117, 79, 0.32);
}

/* Slider dots — компактнее и в фирменном тоне */
.swiper-pagination-bullet {
    opacity: 0.35 !important;
    transition: opacity .25s ease, transform .25s ease !important;
}
.swiper-pagination-bullet-active {
    opacity: 1 !important;
    transform: scale(1.15);
    background: var(--main-color, #b5754f) !important;
}

/* Кнопки-стрелки slider (‹ ›) — softer background */
.swiper-button-prev, .swiper-button-next,
.slider-prev-btn, .slider-next-btn {
    background: rgba(181, 117, 79, 0.85) !important;
    transition: background .25s ease, transform .2s ease !important;
}
.swiper-button-prev:hover, .swiper-button-next:hover,
.slider-prev-btn:hover, .slider-next-btn:hover {
    background: var(--main-color, #b5754f) !important;
    transform: scale(1.05);
}

/* --- 6. КАТАЛОГ: правильные картинки книг (ТЗ п.10) --------------------- */
/* Книги — вертикальные обложки. cover обрезает их сверху/снизу.
 * Меняем на contain — обложка целиком помещается в квадрат карточки. */
.catalog__item .item-slider .swiper-container .swiper-slide img,
.catalog__item .item-slider img,
.catalogs__item img,
.catalog__item img.item-slider__img,
.item-slider .swiper-slide img {
    -o-object-fit: contain !important;
    object-fit: contain !important;
    background: #fff;
}

/* --- 5. ГЛАВНАЯ: карточки discount — текст видно сразу ----------------- */
/* По ТЗ п.8: раньше описание проявлялось только по hover через .promotions__item-blur.
 * Показываем его сразу, чтобы контент был читаем без наведения. */
.promotions__item-blur {
    opacity: 1 !important;
}

/* --- 8. БЛОК ЦЕН products-2 (ТЗ п.3) ----------------------------------- */

/* Табы растягиваются на всю ширину блока — не важно сколько их (2, 3, 4).
 * Раньше .filters-item имел width: 14.58vw и оставлял пустое место справа. */
.products .filters__slider .swiper-wrapper {
    display: flex !important;
    width: 100% !important;
    transform: none !important;
    gap: 12px;
}
.products .filters__slider .swiper-container {
    overflow: visible !important;
}
.products .filters__slider .swiper-slide {
    flex: 1 1 0 !important;
    width: auto !important;
}
.products .filters__slider .filters-item {
    width: 100% !important;
    box-sizing: border-box;
}

/* Скрываем нужные для слайдера кнопки, когда все табы уже видны */
@media (min-width: 769px) {
    .products .filters__slider .slider-prev-btn,
    .products .filters__slider .slider-next-btn {
        display: none;
    }
}

/* Тема: светлая (для клиента — установить ACF-поле theme=light). */
.products.products--light {
    color: #1c1c1c;
}
.products.products--light .products__bg {
    background: #f5f8f9 !important;
}
.products.products--light .products__title,
.products.products--light .info-title,
.products.products--light .info-list li,
.products.products--light .info-price,
.products.products--light .info-price .price,
.products.products--light .info-price .price div {
    color: #1c1c1c !important;
}
.products.products--light .filters-item {
    background: #ffffff;
    color: #1c1c1c;
}
.products.products--light .filters-item.active {
    background: var(--main-color);
    color: #ffffff;
}
.products.products--light .order-btn.md-main-color-btn {
    background: var(--main-color);
    color: #ffffff;
}
.products.products--light .free-call-btn {
    background: transparent;
    color: #1c1c1c;
    border: 1px solid rgba(0,0,0,.15);
}

/* Тема: тёмная — оставляем как раньше (по умолчанию). */
.products.products--dark {
    color: #ffffff;
}

/* --- 8b. КАРТОЧКИ УСЛУГ service2 (ТЗ п.3, блок «Стоимость и формат») --- */

/* Карточки растягиваются на всю ширину контейнера независимо от количества (2, 3, 4). */
.services .services__container .container-flex {
    display: flex !important;
    flex-wrap: wrap;
    gap: 1.5vw;
    margin: 0 !important;
}
.services .services__container .container-flex .services__item {
    flex: 1 1 220px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
}

/* Тема: светлая (клиенту в ACF поставить theme=light). */
.services.services--light .services__item {
    background: #f5f8f9;
    color: #1c1c1c;
}
.services.services--light .services__item .item-img::after {
    background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.85) 60%) !important;
    opacity: 1 !important;
}
.services.services--light .services__item .item-title,
.services.services--light .services__item .item-text,
.services.services--light .services__item .item-content * {
    color: #1c1c1c !important;
}
.services.services--light .services__item .item-bottom__link.md-main-color-btn {
    background: var(--main-color);
    color: #ffffff !important;
}

/* Мобильная — карточки полной ширины, вертикально. */
@media (max-width: 768px) {
    .services .services__container .container-flex .services__item {
        flex: 1 1 100%;
    }
}

/* --- 9. РЕКЛАМНЫЕ БАННЕРЫ В СТАТЬЯХ (ТЗ п.5) --------------------------- */

/* Убираем «низ» баннера — там раньше висела 2-я картинка. */
.calc-banner.md-calc-banner-small .calc-banner__container {
    padding-bottom: 2.34375vw !important;
}
.calc-banner.md-calc-banner-small .calc-banner__img {
    display: none !important;
}

/* Мобильная: показать оба баннера в теле статьи. Порядок:
 *   1-й (calc-banner-small)  — перед вторым параграфом (переносит JS).
 *   2-й (side-banner)         — в конце содержимого (переносит JS).
 * CSS убирает display:none и перестраивает под mobile-первого */
@media (max-width: 768px) {
    .articles-typical__side {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
    }
    .articles-typical__container {
        display: block !important;
    }
    .articles-typical__side .calc-banner.md-calc-banner-small,
    .articles-typical__side .side-banner {
        width: 100% !important;
        margin: 16px 0 !important;
    }
}

/* --- 7. КОНТАКТЫ (ТЗ п.11) --------------------------------------------- */
/* Убираем блок с фото офиса — на ПК и моб. */
.contacts__images {
    display: none !important;
}

/* Карта — на всю оставшуюся ширину рядом с блоком info. */
.contacts__container {
    justify-content: flex-start !important;
    gap: 3vw;
}
.contacts__address {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
}
.contacts__address .map-container,
.contacts__address iframe {
    width: 100% !important;
    height: 36vw !important;
    min-height: 420px;
    border-radius: 12px;
}

@media (max-width: 768px) {
    .contacts__container {
        flex-direction: column;
        gap: 2vw;
    }
    .contacts__address .map-container,
    .contacts__address iframe {
        height: 60vw !important;
        min-height: 260px;
    }
}

/* --- 10. СТРАНИЦА АВТОРА /author/evhenii/ (ТЗ п.14) --------------------- */
.author-hero .wrapper { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.author-hero__grid {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 48px;
    align-items: start;
}
.author-hero__photo {
    width: 240px; height: 240px;
    border-radius: 50%; overflow: hidden;
    box-shadow: 0 4px 32px rgba(0,0,0,.08);
    background: #f5f8f9;
}
.author-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.author-hero__name {
    text-align: left !important;
    margin: 0 0 8px !important;
    color: #1c1c1c;
}
.author-hero__title {
    color: var(--main-color, #b5754f);
    font-size: 18px; font-weight: 500;
    text-transform: uppercase; letter-spacing: .06em;
    margin-bottom: 24px;
}
.author-hero__bio p { font-size: 16px; line-height: 1.65; color: #333; margin-bottom: 12px; }
.author-hero__socials { margin-top: 20px; display: flex; gap: 16px; }
.author-hero__socials a {
    display: inline-flex; align-items: center; padding: 8px 18px;
    border: 1px solid rgba(0,0,0,.15); border-radius: 22px;
    color: #1c1c1c; text-decoration: none; font-size: 14px;
    transition: .2s;
}
.author-hero__socials a:hover { background: var(--main-color, #b5754f); color: #fff; border-color: transparent; }

.author-education .wrapper { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.author-education__list {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px; list-style: none; padding: 0; margin: 24px 0 0;
}
.author-education__list li {
    background: #f5f8f9; padding: 16px 20px; border-radius: 12px;
    border-left: 3px solid var(--main-color, #b5754f);
    font-size: 15px; line-height: 1.5; color: #1c1c1c;
}

.author-posts .wrapper { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.author-posts__grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px; margin-top: 32px;
}
.author-posts__card {
    display: block; background: #fff; border-radius: 12px;
    overflow: hidden; text-decoration: none; color: inherit;
    box-shadow: 0 2px 16px rgba(0,0,0,.05); transition: transform .2s, box-shadow .2s;
}
.author-posts__card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(0,0,0,.1); }
.author-posts__thumb img { width: 100%; height: 180px; object-fit: cover; display: block; }
.author-posts__title { font-size: 17px; line-height: 1.35; margin: 16px 20px 10px; color: #1c1c1c; }
.author-posts__excerpt { font-size: 14px; line-height: 1.5; color: #666; margin: 0 20px 20px; }

@media (max-width: 768px) {
    .author-hero__grid { grid-template-columns: 1fr; text-align: center; gap: 24px; }
    .author-hero__photo { margin: 0 auto; width: 180px; height: 180px; }
    .author-hero__name { text-align: center !important; }
    .author-hero__socials { justify-content: center; }
}