/* ============================================================
   381 /velux-dakraam-vervangen/ — первый экран и секция формы.
   Подключается из inc/enqueue.php (plaza_vervangen_redesign_css, приоритет 20)
   только под шаблоном templates/page-replace.php. Версия — от filemtime.

   Источник — assets/css/lp/lp-plaatsen-hero.css (страница 259): та же карточка героя,
   те же узлы, те же значения. ДУБЛИРОВАНИЕ СОЗНАТЕЛЬНОЕ, решение архитектора (PLAN.md п.2):
   259 уже сдана и проверена живьём, вынос в общий файл потребовал бы её перепроверки.

   ⚠⚠ ГЛАВНОЕ ОТЛИЧИЕ ОТ 259, ради которого файл нельзя копировать построчно:
   на 259 герой обслуживают ДВА файла — lp-plaatsen.css (база) + lp-plaatsen-hero.css
   (надстройка), а на 381 первый НЕ подключается (inc/enqueue.php:160-162 гейтит его по
   page-placement.php / page-appointment.php). Класса .section-banner-plaatsen нет в
   application.css НИ РАЗУ (замер grep по origin/main) ⇒ всё, что 259 берёт из базы,
   здесь надо либо перенести, либо доказать, что своё правило это уже закрывает.
   Ревизия всех семи базовых правил (список dp-vervang-critic §4):

   | lp-plaatsen.css      | что даёт на 259                     | на 381                                    |
   |----------------------|-------------------------------------|-------------------------------------------|
   | :145-148 .dkrp-i-text padding 20/20    | вертикальные падинги | НЕ нужно: свои padding и на >=768, и на <=767 |
   | :156-159 p max-width 489, lh 1.2       | типографика абзаца   | ПЕРЕНЕСЕНО (секция B, «абзацы лида»)          |
   | :175-177 ul font-size 16               | размер списка        | ПЕРЕНЕСЕНО (в своё правило .dkrp-i-lead ul)   |
   | :178-182 li padding-left 16, mb 8      | отступы пунктов      | НЕ нужно: своё li даёт padding-left 23 + li+li 8 |
   | :100-103 (<=767) h1 clamp 24..32       | мобильный H1         | НЕ нужно: своё мобильное правило даёт 26px    |
   | :110-112 (<=767) ul margin-bottom 0    | низ списка           | НЕ нужно: своё ul даёт margin 8px 0 0         |
   | :114-116 (<=767) .dkrp-i-image 56.25vw | высота фото          | НЕ нужно: своё мобильное правило даёт 200px   |

   ⚠ Что из эталона НЕ переносится (перезамер конкурентов по origin/main):
   - `.dkrp-i-lead li::before{content:none}` — гасил розовый маркер lp-plaatsen.css:183;
     на 381 этого файла нет, а в application.css правил на li внутри .dkrp-i-text-content
     нет вовсе. Правило на несуществующего конкурента = мусор;
   - `:not(.lichtkoepel-installation)` в цепочке фото — конкурент (lp-plaatsen.css:151)
     тоже жил в незагружаемом файле, лихткупеля на 381 нет;
   - префикс `.placement-main` в секции C заменён на `.info-main`: у 381 главный узел
     `<main class="main info-main">` (application.css:17114 — те же #f7f7f7 и padding-top:28px,
     что у .placement-main:16391, т.е. фон-контекст карточки совпадает с эталоном).

   ⚠ Конкурент у секции C тоже другой: не `.dakraam-vervang-form`, а
   `.section-top-list__form.framed` (application.css:17512+) — со своим color:#fff,
   height:439px и margin-bottom:-80px. Разбор — в секции C ниже.
   custom.css из конкурентов вычеркнут: ни одного правила на section-title / section-top-list /
   info-main / dkrp-i-* / dakraam-calc (замер dp-vervang-critic §11).
   ============================================================ */


/* ============================================================
   B. HERO — карточка 56/44, десктоп (порт с 259)
   ============================================================ */

.section-banner-plaatsen .container .dkrp-window-installation.in-cart {
    background: #fff;
    border: 1px solid #e6e6e6;
    overflow: hidden;
    align-items: stretch;
}

@media (min-width: 768px) {
    /* application.css:22275-22277 ставит row-reverse; при DOM-порядке текст→фото
       это давало фото слева. Нужен явный row. */
    .section-banner-plaatsen .container .dkrp-window-installation.in-cart {
        flex-direction: row;
    }

    /* application.css:22384+ даёт .dkrp-i-text flex-grow:1 и падинги 90/50 —
       колонка сама не станет 56%, ширину задаём явно. Это же правило закрывает
       базовое lp-plaatsen.css:145-148 (padding 20/20), которого на 381 нет. */
    .section-banner-plaatsen .container .dkrp-window-installation.in-cart .dkrp-i-text {
        flex: 0 0 56%;
        width: 56%;
        max-width: 56%;
        height: auto;
        margin: 0;
        padding: 40px;
        gap: 0;
        align-items: center;
        justify-content: center;
    }

    /* application.css:22287-22290 → width:430px; здесь — 44% колонкой на всю высоту */
    .section-banner-plaatsen .container .dkrp-window-installation.in-cart .dkrp-i-image {
        flex: 0 0 44%;
        width: 44%;
        max-width: 44%;
        min-width: 0;
        min-height: 460px;
        height: auto;
        position: relative;
        background: #f6f6f6;
    }

    /* (0,4,1) против application.css:22372-22380 (0,1,1) — своих конкурентов у 381 больше
       нет (lp-plaatsen.css:151 не грузится, потому и :not(.lichtkoepel-installation) снят).
       position:absolute вместо height:100%: родитель держит height:auto,
       и процентная высота там не разрешилась бы. */
    .section-banner-plaatsen .container .dkrp-window-installation.in-cart .dkrp-i-image img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 60%;
    }
}

.section-banner-plaatsen .container .dkrp-window-installation.in-cart .dkrp-i-text-content {
    flex: 1 1 auto;
    min-width: 0;
}

/* --- H1 --- (0,4,1); на 381 конкурентов у него нет вовсе (lp-plaatsen.css:137 не грузится),
   но значения оставлены эталонными: application.css:900 даёт h1 36px, и без явного правила
   первый экран разошёлся бы с 259 по размеру заголовка. */
.section-banner-plaatsen .container .dkrp-window-installation.in-cart .dkrp-i-text-content h1 {
    margin: 0 0 8px;
    font-family: "Gilroy";
    font-size: 40px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #3a3a3a;
}

/* --- лид ---
   ⚠ wpautop снят (functions.php, remove_filter('the_content','wpautop')) ⇒ текст поля
   приезжает как есть, <p> не создаётся.
   ⚠ white-space:pre-line — пара с правилом ul{white-space:normal} ниже. Замер поля
   replace_descr на живой 381 (29.08): в нём ТОЛЬКО <ul> из трёх <li>, переводов строк
   вне списка сейчас нет, т.е. pre-line сегодня ни на что не влияет и стоит на будущее —
   ровно так же, как в placement_descr на 259, где абзацы разделены CRLF, а не <p>.
   Снимать его в одиночку нельзя: пара нужна целиком (см. комментарий у ul). */
.section-banner-plaatsen .container .dkrp-window-installation.in-cart .dkrp-i-lead {
    margin: 20px 0 24px;
    white-space: pre-line;
    max-width: 520px;
    font-family: "Gilroy";
    font-size: 17px;
    line-height: 1.6;
    color: #616161;
}

.section-banner-plaatsen .container .dkrp-window-installation.in-cart .dkrp-i-lead strong {
    color: #3a3a3a;
    font-weight: 700;
}

/* --- абзацы лида (перенос базового lp-plaatsen.css:156-159) ---
   Сегодня <p> в replace_descr нет, но поле правится из админки, и первый же абзац
   попал бы под application.css:22437 (max-width:328px, color #616161) и :22328
   (line-height:2) — колонка лида схлопнулась бы вдвое. На 259 от этого защищает база,
   которой здесь нет. Цепочка (0,5,1) — выше обоих конкурентов (0,3,1)/(0,2,1). */
.section-banner-plaatsen .container .dkrp-window-installation.in-cart .dkrp-i-lead p {
    max-width: 489px;
    line-height: 1.2;
}

/* --- галочки списка ---
   ⚠⚠ ОБЯЗАТЕЛЬНЫЙ СПУТНИК pre-line выше. Замер replace_descr (29.08): между <ul> и <li>
   и между самими <li> стоят перевод строки + пробел + таб (" \t<li>"). Под pre-line эти
   переводы отрисовались бы пустыми строками внутри списка — white-space:normal их гасит.
   font-size:16px — перенос базового lp-plaatsen.css:175-177: без него список унаследовал бы
   17px от .dkrp-i-lead и разошёлся с эталоном.
   Геометрия не выдумана: иконка checkmark-green.svg — 15x12 по её viewBox, отступ под
   текст 15 + 8 = 23px, где 8px — шаг, уже принятый в этом файле (gap строки доверия,
   margin-bottom у h1). Вертикаль: строка 16px * 1.6 = 25.6px, иконка 12px ⇒ ~7px до верха.
   list-style:none + свой отступ закрывают и базовое lp-plaatsen.css:178-182 (padding-left:16). */
.section-banner-plaatsen .container .dkrp-window-installation.in-cart .dkrp-i-lead ul {
    white-space: normal;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    font-size: 16px;
}

.section-banner-plaatsen .container .dkrp-window-installation.in-cart .dkrp-i-lead li {
    position: relative;
    padding-left: 23px;
    background: url('../../../images/icons/checkmark-green.svg') no-repeat 0 7px;
    background-size: 15px 12px;
}

.section-banner-plaatsen .container .dkrp-window-installation.in-cart .dkrp-i-lead li + li {
    margin-top: 8px;
}

/* --- кнопки первого экрана ---
   Геометрия совпадает с сайтовым .btn (application.css:8039-8051): h52 (там 48),
   min-width 176, radius 0. Класс свой, не .btn — чтобы не тянуть его варианты
   и мобильное правило .in-cart .btn.btn-filled{width:100%} (application.css:22320). */
.section-banner-plaatsen .container .dkrp-window-installation.in-cart .dkrp-i-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.section-banner-plaatsen .container .dkrp-window-installation.in-cart .dkrp-i-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    min-width: 176px;
    max-width: 100%;
    padding: 0 24px;
    border: 1px solid #ff0083;
    border-radius: 0;
    font-family: "Gilroy";
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: .2s linear;
}

.section-banner-plaatsen .container .dkrp-window-installation.in-cart .dkrp-i-cta--primary {
    background: #ff0083;
    color: #fff;
}

.section-banner-plaatsen .container .dkrp-window-installation.in-cart .dkrp-i-cta--primary:hover {
    background: #d1006d;
    border-color: #d1006d;
    color: #fff;
}

.section-banner-plaatsen .container .dkrp-window-installation.in-cart .dkrp-i-cta--ghost {
    background: transparent;
    color: #ff0083;
}

.section-banner-plaatsen .container .dkrp-window-installation.in-cart .dkrp-i-cta--ghost:hover {
    background: #ff0083;
    color: #fff;
}

/* Видимого фокуса на сайте нет ни у одного элемента (grep по application.css = 0
   вхождений :focus-visible). Закрываем локально, только для этих двух кнопок. */
.section-banner-plaatsen .container .dkrp-window-installation.in-cart .dkrp-i-cta:focus-visible {
    outline: 2px solid #46569a;
    outline-offset: 2px;
}

/* --- строка доверия --- */
.section-banner-plaatsen .container .dkrp-window-installation.in-cart .dkrp-i-trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 26px;
    padding-top: 20px;
    border-top: 1px solid #e6e6e6;
    font-family: "Gilroy";
    font-size: 14px;
    line-height: 1.4;
    color: #616161;
}

.section-banner-plaatsen .container .dkrp-window-installation.in-cart .dkrp-i-trust > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.section-banner-plaatsen .container .dkrp-window-installation.in-cart .dkrp-i-trust strong {
    color: #3a3a3a;
    font-weight: 700;
}

.section-banner-plaatsen .container .dkrp-window-installation.in-cart .dkrp-i-trust .dkrp-i-google {
    height: 16px;
    width: auto;
}

.section-banner-plaatsen .container .dkrp-window-installation.in-cart .dkrp-i-stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.section-banner-plaatsen .container .dkrp-window-installation.in-cart .dkrp-i-stars img {
    height: 13px;
    width: auto;
}


/* ============================================================
   C. Секция формы — только обёртка, внутрь маунта не лезем.
   Конкурент здесь другой, чем на 259: секция несёт классы
   .section-top-list__form.framed (application.css:17512-17520).
   ============================================================ */

/* Ровный фон вместо прозрачного (#f6f6f6 — тот же, что даёт секции формы на 259).
   ⚠⚠ ПОЧЕМУ ГРАДИЕНТ, А НЕ background-color. У секции стоит margin-bottom:-80px
   (application.css:17517-17520), которым она НАЕЗЖАЕТ на следующую .section-text-center,
   а та компенсирует это padding-top:150px (:17839). Плюс сама секция position:relative
   (:17513), т.е. рисуется ПОВЕРХ следующей. Сплошная заливка вылезла бы серой полосой
   на 80px внутрь белой секции (замер живой 381 29.08 @1280: низ секции 1430, верх
   следующей 1350 — ровно 80px перекрытия, и низ карточки калькулятора уже сегодня
   лежит поверх белого фона).
   linear-gradient той же краски с высотой calc(100% - 80px) обрывает фон ровно там,
   где начинается следующая секция. Альтернативы отвергнуты: обнулить margin-bottom —
   правка раскладки НИЖЕ героя (запрет владельца «минимально менять лейаут»);
   обёртка ВОКРУГ секции — разрывает сиблинг-селекторы :17839 и :17848.
   ⚠ Секция обязана остаться прямым соседом .section.section-text-center — см. коммент
   в templates/page-replace.php над этим div. */
.info-main .section-top-list__form.framed {
    background: linear-gradient(#f6f6f6, #f6f6f6) top center / 100% calc(100% - 80px) no-repeat;
}

/* Вертикальные отступы полосы формы — как на 259 (там их даёт lp-plaatsen.css:16
   .dakraam-vervang-form .container{padding:20px 0 50px}). Снизу 130, а не 50: 80px из них
   съедает наезд следующей секции (см. выше), под калькулятором остаётся ровно 50px серого,
   как у эталона. padding-block, а не шортканд: горизонтальные 15px у .container
   (application.css:1200) — общие для сайта, их не трогаем ни на одной ширине, поэтому
   отдельного мобильного правила padding-inline (как на 259) здесь не нужно. */
.info-main .section-top-list__form.framed .container {
    padding-block: 20px 130px;
}

/* Якорь CTA под фиксированной шапкой. Значения — по высоте .header-spacer
   (application.css:8272+: 184 / 148 / 130), те же, что уже стоят у #calculator на 259. */
#calculator {
    scroll-margin-top: 190px;
}

/* Заголовок блока формы. Тег h2 (семантика: без него на странице скачок h1 -> h3), и вместе
   с тегом на узел прилетает чужая типографика заголовков из application.css: font-weight 500
   и line-height 1.1 (:869), margin-top 20px (:882), font-size 30px (:904) — возвращаем
   прежний вид (размер и интерлиньяж НАСЛЕДУЕМ от body, жирность как у strong).
   ⚠⚠ color здесь ОБЯЗАТЕЛЕН и на 259 его нет: там контейнер формы .dakraam-vervang-form
   цвет не объявляет вовсе, а тут секция несёт .section-top-list__form{color:#fff}
   (application.css:17512) — без явного цвета заголовок был бы БЕЛЫМ на светло-сером.
   ⚠ Не через color:inherit — наследовался бы тот же #fff.
   margin-bottom/display/text-align на 259 даёт база lp-plaatsen.css:20-24, которой здесь
   нет, поэтому они объявлены явно. Цепочка (0,4,0) — с запасом над конкурентами. */
.info-main .section-top-list__form.framed .container .vervang-title {
    display: block;
    margin: 0 0 20px;
    font-size: inherit;
    line-height: inherit;
    font-weight: 700;
    text-align: center;
    color: #3a3a3a;
}

/* Подзаголовок блока формы. Типографика — та же, что у лида (17/1.6/#616161);
   max-width 768px = ширина самого маунта калькулятора (inc/shortcodes.php:830),
   чтобы строка не была шире того, что под ней.
   ⚠ color — по той же причине, что у заголовка выше: гасим #fff из application.css:17512. */
.info-main .section-top-list__form.framed .dkrp-i-formsub {
    display: block;
    max-width: 768px;
    margin: 0 auto 20px;
    font-family: "Gilroy";
    font-size: 17px;
    line-height: 1.6;
    color: #616161;
    text-align: center;
}

/* Карточка калькулятора — панель сайта: белая, рамка 1px, радиус 10px, без тяжёлой тени.
   ⚠⚠ !important здесь ВЫНУЖДЕННЫЙ, а не небрежность. Маунт стилизован ИНЛАЙН-АТРИБУТОМ
   style="" (inc/shortcodes.php:829-830): background rgba(255,255,255,.92),
   border-radius 15px, box-shadow 0 4px 30px rgba(0,0,0,.06). Атрибут не перебивается
   никакой специфичностью селектора — только !important. Файл shortcodes.php нарядом не
   правится (он общий с page-placement и lichtkoepel), поэтому давим отсюда.
   border !important НЕ нужен: рамку атрибут не объявляет вовсе.
   ⛔ Внутрь маунта (#embed-calculator, любые dk-*, лоадер) — ни одного селектора. */
.info-main .dakraam-calc-mount {
    background: #fff !important;
    border: 1px solid #e6e6e6;
    border-radius: 10px !important;
    box-shadow: none !important;
}


/* ============================================================
   D. span.section-title -> h3: гасим прилетевшую типографику
   ============================================================ */

/* ⚠ Замер (dp-vervang-critic §7): из тега h3 на .section-title реально прилетает РОВНО ОДНО
   правило — application.css:882 .h1,.h2,.h3,h1,h2,h3{margin-top:20px;margin-bottom:10px}
   (селектор h3 = (0,0,1); font-size 24px из :908 и font-weight 500 из :869 бьёт сам
   .section-title (0,1,0), :9685). margin-top не перебит НИЧЕМ ⇒ без этого правила +20px
   в каждой из 11 секций страницы. Цепочка (0,2,2) — выше любых контекстных правил темы. */
main.info-main h3.section-title {
    margin-top: 0;
}

/* margin-bottom:10px из :882 перебит контекстными правилами во всех секциях 381
   (:16573 29px, :16901 29px, :17142 10px, :17200 12px, :17313 60px), КРОМЕ .section-table:
   там :17384 задаёт только text-align. Раньше у span'а нижнего отступа не было — возвращаем.
   (0,2,1) > (0,2,0) чужого правила и > (0,0,1) базового. */
.info-main .section-table h3.section-title {
    margin-bottom: 0;
}


/* ============================================================
   E. Мобильная ветка (порт с 259)
   ============================================================ */

@media (max-width: 991px) {
    #calculator {
        scroll-margin-top: 155px;
    }
}

@media (max-width: 767px) {
    #calculator {
        scroll-margin-top: 135px;
    }

    .section-banner-plaatsen .container .dkrp-window-installation.in-cart {
        flex-direction: column-reverse;
    }

    .section-banner-plaatsen .container .dkrp-window-installation.in-cart .dkrp-i-image {
        width: 100%;
        max-width: none;
        height: 200px;
        min-height: 200px;
        position: relative;
        background: #f6f6f6;
    }

    .section-banner-plaatsen .container .dkrp-window-installation.in-cart .dkrp-i-image img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 60%;
    }

    /* Закрывает и базовое lp-plaatsen.css:88-94, которого на 381 нет: там мобильному
       .dkrp-i-text даются белый фон, width:calc(100% - 30px), margin-top:-40px и розовая
       полоска border-top. Фон здесь не нужен — карточка .in-cart уже белая (секция B),
       а ширину и отступы задаём сами. */
    .section-banner-plaatsen .container .dkrp-window-installation.in-cart .dkrp-i-text {
        width: 100%;
        max-width: none;
        min-height: 0;
        height: auto;
        margin: 0;
        padding: 20px 16px 24px;
        gap: 0;
        text-align: left;
    }

    .section-banner-plaatsen .container .dkrp-window-installation.in-cart .dkrp-i-text-content h1 {
        font-size: 26px;
        line-height: 1.15;
        margin: 0 0 8px;
    }

    .section-banner-plaatsen .container .dkrp-window-installation.in-cart .dkrp-i-lead {
        margin: 14px 0 20px;
        font-size: 15px;
    }

    .section-banner-plaatsen .container .dkrp-window-installation.in-cart .dkrp-i-cta {
        width: 100%;
    }

    .section-banner-plaatsen .container .dkrp-window-installation.in-cart .dkrp-i-trust {
        gap: 10px 20px;
    }
}