/*
 * Лендинг продукта — стиль «Сайт» (wp): вид jataka.expert (тема lptheme на проде).
 * Источник значений — скил jataka-wp-design reference.md; ссылки вида main:NNNN (prod main.min.css) и style:NNNN (prod style.css).
 * Идея: белая страница с плашками внутри колонки 970 — кремовая шапка с обложкой в смещённой золотой рамке
 * (как фото на «О нас»), лавандовая шапка блока над серым полем у анкеты (.title-bg + .single-lesson),
 * кнопка .btn-simple с двойной рамкой. Точечный орнамент decor.svg — один раз, под лидом.
 * Отступления от прода ради контраста (правило 5 брифа): текст кнопки #413e59 вместо белого (белый на #cba783 = 2.24),
 * цена #413e59 вместо золота (золото на #fcf9f6 = 2.13), hover кнопки — заливка #e3c5a7 (как .btn:hover) вместо opacity .8.
 * Подключается после landing-site.css; все правила — под body.ls-style-wp.
 */
body.ls-style-wp {
    --ls-text: #413e59;          /* body main:2206 */
    --ls-head: #413e59;          /* h1–h6 Philosopher 400 main:2326 */
    --ls-gold: #cba783;          /* золото main:2223 */
    --ls-btn: #cba783;           /* .btn-simple style:1726 */
    --ls-btn-hover: #e3c5a7;     /* .btn:hover main:3497 — светлее */
    --ls-btn-fg: #413e59;
    --ls-head-bg: #fcf9f6;       /* кремовый блок main:7785 */
    --ls-page: #ffffff;          /* html/body main:2198 */
    --ls-card: #fbfbfb;          /* серое поле .single-lesson main:7731 */
    --ls-second: #413e59;        /* вторичного цвета в теме нет */
    --ls-meta: #413e59;
    --ls-line: #eae9ec;          /* линии main:2494, .form-group input main:17664 */
    --ls-field: #ffffff;
    --ls-r: 0;
    --ls-btn-r: 0;
    --wp-lav: #f3f2f8;           /* .title-bg main:2659 */
    --wp-lav-bar: #b6b4c8;       /* .quote-3 main:2981 */
    --wp-no: #f4f3f9;            /* .condition.not-allow main:9717 */
    --wp-no-bar: #b3afd0;
    --ls-serif: 'Philosopher', Georgia, 'Times New Roman', serif;
    --ls-sans: 'Noto Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    background: var(--ls-page);
}

body.ls-style-wp .ls-wrap { max-width: 970px; padding: 0 15px; }   /* .container ≤1224: 970, поля 15 (main:19971, :25507) */

/* ── Шапка: кремовая плашка внутри колонки ─────────────── */
body.ls-style-wp .ls-hero { background: none; border: 0; padding: 30px 0 0; }
body.ls-style-wp .ls-hero__in {
    background: var(--ls-head-bg);
    padding: 30px 15px 40px;
    gap: 30px;
    flex-direction: column-reverse;   /* как на /consultation/…: на телефоне сначала текст, потом картинка */
    width: calc(100% - 30px);
    max-width: 940px;
    margin: 0 auto;
}
body.ls-style-wp .ls-title {
    font-size: 24px;                   /* .title-lg ≤767 main:24167 */
    line-height: 30px;
    margin: 0 0 15px;
}
body.ls-style-wp .ls-lead { color: var(--ls-text); font-size: 14px; line-height: 21px; margin: 0; }
body.ls-style-wp .ls-lead::after {     /* точечный орнамент decor.svg 32×14 */
    content: '';
    display: block;
    width: 32px;
    height: 14px;
    margin: 20px 0;
    background: url('data:image/svg+xml,%3Csvg width="32" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M.95 8.46c-.22 0-.47-.08-.67-.25-.2-.2-.28-.45-.28-.7 0-.25.08-.48.25-.67.39-.39 1-.36 1.37-.03.2.22.31.45.31.7a.958.958 0 01-.98.95zM24.64 7.51c0-.53.45-.98.98-.98s.95.45.95.98-.42.95-.95.95c-.54 0-.98-.42-.98-.95zM19.71 7.51c0-.53.45-.98.98-.98s.95.45.95.98-.42.95-.95.95-.98-.42-.98-.95zM14.78 7.51c0-.53.42-.98.98-.98.53 0 .95.45.95.98s-.42.95-.95.95c-.56 0-.98-.42-.98-.95zM9.85 7.51c0-.53.42-.98.95-.98.56 0 .98.45.98.98s-.42.95-.98.95c-.53 0-.95-.42-.95-.95zM4.93 7.51c0-.53.42-.98.95-.98.56 0 .98.45.98.98s-.42.95-.98.95c-.53 0-.95-.42-.95-.95zM30.51 8.46c-.25 0-.5-.08-.67-.28-.2-.17-.28-.42-.28-.67 0-.25.08-.5.28-.67.34-.36 1.01-.36 1.37 0 .17.17.28.39.28.67 0 .25-.11.5-.31.7-.19.16-.42.25-.67.25z" fill="%23413E59"/%3E%3Cpath d="M8.34 2.86c-.25 0-.47-.11-.67-.28a.92.92 0 01-.28-.7c0-.25.08-.47.25-.67.37-.34 1.01-.36 1.37 0 .2.2.31.42.31.67 0 .28-.11.5-.31.7-.16.17-.42.28-.67.28zM17.25 1.88c0-.53.42-.95.95-.95s.98.42.98.95c0 .56-.45.98-.98.98s-.95-.42-.95-.98zM12.32 1.88c0-.53.42-.95.95-.95s.98.42.98.95c0 .56-.45.98-.98.98s-.95-.42-.95-.98zM23.12 2.86c-.22 0-.47-.11-.67-.28-.2-.17-.28-.42-.28-.7 0-.22.08-.47.28-.67.34-.34.98-.36 1.34 0 .19.2.31.45.31.67 0 .25-.11.5-.28.7-.19.17-.42.28-.7.28zM8.34 13.86c-.25 0-.47-.11-.67-.28a.92.92 0 01-.28-.7c0-.25.08-.47.25-.67.37-.34 1.01-.36 1.37 0 .2.2.31.42.31.67 0 .28-.11.5-.31.7-.16.17-.42.28-.67.28zM17.25 12.88c0-.53.42-.95.95-.95s.98.42.98.95c0 .56-.45.98-.98.98s-.95-.42-.95-.98zM12.32 12.88c0-.53.42-.95.95-.95s.98.42.98.95c0 .56-.45.98-.98.98s-.95-.42-.95-.98zM23.12 13.86c-.22 0-.47-.11-.67-.28-.2-.17-.28-.42-.28-.7 0-.22.08-.47.28-.67.34-.34.98-.36 1.34 0 .19.2.31.45.31.67 0 .25-.11.5-.28.7-.19.17-.42.28-.7.28z" fill="%23CBA783"/%3E%3C/svg%3E') no-repeat;
}
body.ls-style-wp .ls-facts li,
body.ls-style-wp .ls-list li {
    position: relative;
    padding: 0 0 0 20px;               /* ul.styled main:2393-2440 */
    margin: 0 0 10px;
    color: var(--ls-text);
}
body.ls-style-wp .ls-facts li::before,
body.ls-style-wp .ls-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;                          /* 8px у 22px строки; у 21px — 7 */
    width: 8px;
    height: 8px;
    border: 0;
    border-radius: 50%;
    background: var(--ls-gold);
    transform: none;
}
body.ls-style-wp .ls-facts li:last-child, body.ls-style-wp .ls-list li:last-child { margin-bottom: 0; }

/* Обложка: прямоугольная, рамка 1px золотом, смещённая на 15px вверх и влево (.teacher-block .image-wrapper:before main:7771). */
body.ls-style-wp .ls-hero__media {
    position: relative;
    width: fit-content;
    max-width: calc(100% - 15px);
    margin: 15px auto 0;
    text-align: left;
}
body.ls-style-wp .ls-hero__media::before {
    content: '';
    position: absolute;
    top: -15px;
    left: -15px;
    width: 100%;
    height: 100%;
    border: 1px solid var(--ls-gold);
    pointer-events: none;
}
body.ls-style-wp .ls-hero__img {
    position: relative;
    display: block;
    width: 220px;
    max-width: 100%;
    max-height: none;
    box-shadow: none;
}

/* ── Разделы ───────────────────────────────────────────── */
body.ls-style-wp .ls-sec { padding: 50px 0 0; }        /* .section ≤767 — 50 (main:24251) */
body.ls-style-wp .ls-h2 { font-size: 20px; line-height: 26px; margin: 0 0 20px; }  /* .title-md ≤992 main:20360 */
body.ls-style-wp .ls-sec p { margin: 0 0 15px; }
body.ls-style-wp .ls-sec--text p:last-child { margin-bottom: 0; }
body.ls-style-wp .ls-list { list-style: none; padding: 0; }

/* Цитата — .quote-3: лавандовый фон, полоса #b6b4c8; текст как .quote-2 (Philosopher italic 20/26). */
body.ls-style-wp .ls-quote {
    padding: 25px 28px;                /* .title-bg main:2659 */
    background: var(--wp-lav);
    border-left: 2px solid var(--wp-lav-bar);
    font-size: 20px;
    line-height: 26px;
    color: var(--ls-text);
}
body.ls-style-wp .ls-sec .ls-quote p:last-of-type { margin-bottom: 0; }
body.ls-style-wp .ls-quote__cite { margin-top: 15px; font-size: 14px; line-height: 21px; color: var(--ls-text); }

/* Картинка — прямоугольная, тень .shadow img (style:2195). */
body.ls-style-wp .ls-figure { text-align: left; }
body.ls-style-wp .ls-figure img { display: block; box-shadow: 1px 4px 14px rgba(0, 0, 0, .25); }
body.ls-style-wp .ls-figure figcaption { margin-top: 15px; font-size: 14px; line-height: 21px; color: var(--ls-text); }

/* ── Цена — .price-block: кремовый, padding 30; цифра Philosopher 28 ── */
body.ls-style-wp .ls-price {
    padding: 30px;
    background: var(--ls-head-bg);
    color: var(--ls-text);
}
body.ls-style-wp .ls-price__total { font-family: var(--ls-serif); font-size: 41px; line-height: 44px; }   /* .title-lg 41/44 */

/* ── Анкета: лавандовая шапка блока над серым полем ───── */
body.ls-style-wp .ls-card { background: var(--ls-card); border: 0; padding: 0; width: calc(100% - 30px); max-width: 940px; margin: 0 auto; }
body.ls-style-wp .ls-group { margin: 0; padding: 0 15px 10px; }
body.ls-style-wp .ls-group > legend.ls-h2 {
    float: left;                       /* легенда во всю ширину набора полей */
    width: calc(100% + 30px);
    margin: 0 -15px 25px;
    padding: 20px 15px;
    background: var(--wp-lav);
    font-size: 20px;                   /* .accordeon_title Philosopher 20/26 main:14073 */
    line-height: 26px;
}
body.ls-style-wp .ls-group > legend + * { clear: both; }
body.ls-style-wp .ls-field { margin: 0 0 20px; }
body.ls-style-wp .ls-label {
    margin: 0 0 6px;
    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
    color: var(--ls-text);
}
body.ls-style-wp .ls-hint { color: var(--ls-text); font-size: 13px; }
body.ls-style-wp .ls-input {
    min-height: 46px;
    padding: 11px;                     /* .consultation input main:9224 */
    border: 1px solid var(--ls-line);  /* .form-group input main:17664 */
    border-bottom-color: var(--ls-gold);/* нижняя золотая линия — глобальный input main:4053 */
    background: var(--ls-field);
    font-weight: 400;
}
body.ls-style-wp .ls-input:focus {
    border-color: var(--ls-text);
    outline: 1px solid var(--ls-text);
    outline-offset: 0;
}
body.ls-style-wp .ls-check input { accent-color: var(--ls-gold); }
body.ls-style-wp .ls-row, body.ls-style-wp .ls-row--short { column-gap: 30px; }   /* 2 × 15 — отступ сетки */

/* Ошибка: рамка поля чернилами + сообщение плашкой «нельзя» (.condition.not-allow main:9717). */
body.ls-style-wp .ls-field--error .ls-label { color: var(--ls-text); }
body.ls-style-wp .ls-field--error .ls-input,
body.ls-style-wp .ls-field--error.ls-field--check .ls-check { border-color: var(--ls-text); box-shadow: none; }
body.ls-style-wp .ls-sec .ls-field__msg {
    margin: 0;
    padding: 6px 10px;
    background: var(--wp-no);
    border-left: 2px solid var(--wp-no-bar);
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
    color: var(--ls-text);
}

/* «Форма устарела» — .condition.allow: кремовый + полоса слева 2px золотом. */
body.ls-style-wp .ls-alert {
    margin: 30px 15px 0;
    padding: 15px 20px;
    background: var(--ls-head-bg);
    border: 0;
    border-left: 2px solid var(--ls-gold);
}

/* ── Кнопка — .btn-simple: заливка золотом, высота 55, двойная рамка (1px с отступом 3px) ── */
body.ls-style-wp .ls-sec--buy { padding-top: 40px; }
body.ls-style-wp .ls-btn {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 55px;
    padding: 12px 24px;
    border: 0;
    background: var(--ls-btn);
    box-shadow: none;
    outline: 1px solid var(--ls-gold);
    outline-offset: 3px;
    color: var(--ls-btn-fg);
    font-family: var(--ls-serif);
    font-size: 22px;                   /* кнопки блоков главной: 22 bold (style:2686) */
    line-height: 26px;
    font-weight: 700;
    letter-spacing: .2px;
    transition: background-color .2s ease;
}
body.ls-style-wp .ls-btn:hover { background: var(--ls-btn-hover); }
body.ls-style-wp .ls-btn:focus-visible {
    background: var(--ls-btn-hover);
    outline: 2px solid var(--ls-text);
    outline-offset: 3px;
}
body.ls-style-wp .ls-btn:active { background: var(--ls-btn-hover); }

/* ── 768+ (брейкпоинт темы 767/768) ───────────────────── */
@media (min-width: 576px) and (max-width: 767px) {
    body.ls-style-wp .ls-title { font-size: 24px; line-height: 30px; }
}
@media (min-width: 768px) {
    body.ls-style-wp { --ls-end: 96px; }           /* .section 96 */
    body.ls-style-wp .ls-hero { padding: 35px 0 0; }   /* #site-inner-content padding-top 35 (main:2494) */
    body.ls-style-wp .ls-hero__in { padding: 60px; gap: 45px; }   /* .consult-banner padding 60 (main:13695) */
    body.ls-style-wp .ls-hero__text { font-size: 16px; }
    body.ls-style-wp .ls-hero__media { margin: 15px auto 0; }
    body.ls-style-wp .ls-hero__img { width: 260px; }
    body.ls-style-wp .ls-title { font-size: 41px; line-height: 44px; margin-bottom: 20px; }   /* .title-lg main:2336 */
    body.ls-style-wp .ls-lead { font-size: 16px; line-height: 22px; }
    body.ls-style-wp .ls-sec { padding-top: 60px; }
    body.ls-style-wp .ls-h2 { font-size: 20px; line-height: 26px; }
    body.ls-style-wp .ls-sec--text .ls-wrap > p,
    body.ls-style-wp .ls-sec--list .ls-list { max-width: 58.333%; }   /* .col-md-7 */
    body.ls-style-wp .ls-group { padding: 0 28px 10px; }
    body.ls-style-wp .ls-group > legend.ls-h2 { width: calc(100% + 56px); margin: 0 -28px 30px; padding: 25px 28px; }
    body.ls-style-wp .ls-btn { display: block; width: 280px; }   /* max-width 280 style:2686 */
}
/* 768–992: контейнер bootstrap 720 (+ поля 15) — шапка ещё колонкой, чтобы заголовок 41 не ломался в 3 строки. */
@media (min-width: 768px) and (max-width: 992px) {
    body.ls-style-wp .ls-wrap { max-width: 750px; }
    body.ls-style-wp .ls-hero__in, body.ls-style-wp .ls-card { max-width: 720px; }
}
@media (min-width: 993px) {
    body.ls-style-wp .ls-hero__in {
        flex-direction: row;
        align-items: center;
        gap: 60px;                                  /* .gap-1 style:2421 */
    }
    body.ls-style-wp .ls-hero__text { flex: 1 1 auto; order: 1; }
    body.ls-style-wp .ls-hero__media { order: 2; flex: 0 0 auto; margin: 15px 0 0 15px; }
    body.ls-style-wp .ls-h2 { font-size: 28px; line-height: 34px; margin-bottom: 30px; }   /* .title-md main:2342 */
    body.ls-style-wp .ls-hero__img { width: 300px; }
}

@media (prefers-reduced-motion: reduce) {
    body.ls-style-wp .ls-btn { transition: none; }
}

/* ── Ссылка к анкете в шапке и панель внизу на телефоне (задача 18): .btn-simple — золото, текст чернилами, двойная рамка ── */
body.ls-style-wp .ls-cta {
    min-height: 55px;
    margin: 30px 0 0 4px;              /* 4px — место под рамку со смещением 3px */
    padding: 12px 30px;
    background: var(--ls-btn);
    box-shadow: none;
    outline: 1px solid var(--ls-gold);
    outline-offset: 3px;
    color: var(--ls-btn-fg);
    font: 700 20px/26px var(--ls-serif);
}
body.ls-style-wp .ls-cta:hover { background: var(--ls-btn-hover); }
body.ls-style-wp .ls-cta:focus-visible { background: var(--ls-btn-hover); outline: 2px solid var(--ls-text); outline-offset: 3px; }
@media (max-width: 767px) {
    body.ls-style-wp .ls-price { padding: 20px 15px; }
    body.ls-style-wp .ls-price__total { font-size: 24px; line-height: 30px; }   /* .title-lg на ≤767 — 24/30 */
    body.ls-style-wp .ls-bar:not([hidden]) { background: var(--ls-page); border-top: 1px solid var(--ls-line); padding-top: 12px; }
}
body.ls-style-wp .ls-bar__price { font: 400 18px/22px var(--ls-serif); color: var(--ls-text); }
body.ls-style-wp .ls-bar__btn {
    min-height: 46px;
    margin: 4px;
    padding: 8px 18px;
    outline: 1px solid var(--ls-gold);
    outline-offset: 3px;
    font: 700 18px/22px var(--ls-serif);
}
body.ls-style-wp .ls-bar__btn:focus-visible { outline: 2px solid var(--ls-text); outline-offset: 3px; }

/* Сводка заказа (28.10): кнопка ближе к сводке — одно действие; подпись ниже двойной рамки кнопки (:before, отступ 3px). */
body.ls-style-wp .ls-sec--price + .ls-sec--buy { padding-top: 24px; }
body.ls-style-wp .ls-main .ls-sec .ls-after { margin-top: 18px; }

/* Колонка чтения (владелец 28.10: «текст не на ширину блока, фото по центру»): заголовок, абзацы, список, цитата и фото —
   одной колонкой по центру; ширина — .col-md-8 сетки темы (было .col-md-7 только у абзацев — текст обрывался посередине страницы). Вертикальные фото — по центру колонки. На телефоне — как было. */
@media (min-width: 768px) {
    body.ls-style-wp { --ls-col: 66.667%; }
    body.ls-style-wp .ls-main :is(.ls-sec--text, .ls-sec--list, .ls-sec--quote, .ls-sec--image) > .ls-wrap > *,
    body.ls-style-wp .ls-sec--text .ls-wrap > p, body.ls-style-wp .ls-sec--list .ls-list { max-width: var(--ls-col); margin-left: auto; margin-right: auto; }
    body.ls-style-wp .ls-figure { text-align: center; }
    body.ls-style-wp .ls-figure img { margin-left: auto; margin-right: auto; }
}
