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

   Секция B портирована из assets/css/lp/lp-afspraak.css (страница 1912265) — те же
   селекторы .section-banner-plaatsen .container .dkrp-window-installation.in-cart,
   на 259 узлы те же. ДУБЛИРОВАНИЕ СОЗНАТЕЛЬНОЕ, решение архитектора: 1912265 уже сдана
   и проверена живьём, вынос в общий файл потребовал бы её перепроверки, а владелец
   просил быстро — связность двух страниц дороже дублирования.
   Комментарии-обоснования из оригинала перенесены: в них записано, какое чужое правило
   какое перебивает. Конкурент у обеих страниц один и тот же — lp-plaatsen.css.

   ⚠ ЭЙБРАУ СНЯТ (решение владельца 19.08, дословно «убрать плашку с 259»): фраза
   «VELUX Montagepartner van het jaar» стоит и в placement_descr, на экране она выходила
   дважды. Плашка убрана из разметки banner.php, правила .dkrp-i-eyebrow удалены отсюда
   вместе с ней — правила на несуществующий узел мусор. Первый экран начинается сразу с H1.
   На 1912265 эйбрау остаётся: у неё своя разметка и свой файл lp-afspraak.css.

   ⚠ ЧТО НЕ ПОРТИРОВАНО: правила на h2 и h2::after (подзаголовок с розовой полоской).
   На 259 подзаголовка нет — banner.php выводит только <h1> и $text, отдельного поля
   под него в БД не существует. Сочинять текст запрещено нарядом, поэтому и правил под
   несуществующий узел здесь нет. Понадобится полоска — решение за архитектором, вешать
   её придётся на h1::after (геометрия оригинала: 60x4, radius 2, #ff0083, margin-top 20).
   ============================================================ */


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

.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%, ширину задаём явно */
    .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,5,1) — строго выше конкурента lp-plaatsen.css:150-153 (0,4,1).
       position:absolute вместо height:100%: родитель держит height:auto,
       и процентная высота там не разрешилась бы. */
    .section-banner-plaatsen .container .dkrp-window-installation.in-cart:not(.lichtkoepel-installation) .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,5,1) > lp-plaatsen.css:137 (0,3,1) */
.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 — без него интро и строка «Bereken binnen 1 minuut jouw prijs:»
   слипнутся в один абзац: в placement_descr между ними пустая строка (CRLF CRLF), а не <p>.
   Замер поля 259: 409 байт, интро + пустая строка + строка «Bereken…» + <ul> из трёх <li>. */
.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;
}

/* --- галочки списка ---
   ⚠⚠ ОБЯЗАТЕЛЬНЫЙ СПУТНИК pre-line выше. В placement_descr между <ul> и <li> и между
   самими <li> стоят CRLF + пробел + таб (замер: " \t<li>"). Под pre-line эти переводы
   строк отрисовались бы пустыми строками внутри списка — white-space:normal их гасит.
   Геометрия не выдумана: иконка checkmark-green.svg — 15x12 по её viewBox, отступ под
   текст 15 + 8 = 23px, где 8px — шаг, уже принятый в этом файле (gap строки доверия,
   margin-bottom у h1). Вертикаль: строка 17px * 1.6 = 27.2px, иконка 12px ⇒ (27.2-12)/2
   ≈ 7px до верха иконки. */
.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;
}

.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;
}

/* ⚠ ГАСИМ ЧУЖОЙ МАРКЕР. Базовая тема рисует свой поверх нашей галочки: lp-plaatsen.css:183
   .section-banner-plaatsen .dkrp-window-installation.in-cart .dkrp-i-text-content li:before —
   розовый квадрат 4x4 (#ff0083, radius 2) в позиции left 0 / top 10px, то есть ровно там же,
   где иконка. Замер на 259 живьём: два маркера в одной точке. lp-plaatsen.css править нельзя
   (общий с page-placement-lichtkoepel.php), поэтому гасим у себя.
   content: none — псевдоэлемент не генерируется вовсе; не display:none и не перекрашивание.
   Специфичность: у чужого правила 4 класса, у нашего те же плюс .container и .dkrp-i-lead —
   5 классов, оно и выигрывает. !important не нужен: атрибута style на этом узле нет
   (в отличие от маунта калькулятора ниже). */
.section-banner-plaatsen .container .dkrp-window-installation.in-cart .dkrp-i-lead li::before {
    content: none;
}

/* --- кнопки первого экрана ---
   Геометрия совпадает с сайтовым .btn (application.css:8039-8051): h52 (там 48),
   min-width 176, radius 0. Класс свой, не .btn — чтобы не тянуть его варианты
   и мобильное правило .in-cart .btn.btn-filled{width:100%}. */
.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. Секция формы — только обёртка, внутрь маунта не лезем
   ============================================================ */

/* Ровный фон вместо размытой фотоподложки.
   ⚠ Конкурентов двое и оба объявляют одно и то же: инлайн <style> шаблона
   (templates/page-placement.php:121-154) и lp-plaatsen.css:6-13, оба на голом
   .dakraam-vervang-form = (0,1,0). Инлайн-блок печатается в ТЕЛЕ документа, то есть
   после head-стилей, и при равной специфичности выиграл бы у нас по порядку — поэтому
   цепочка здесь (0,2,0), с .placement-main. Ослабишь до (0,1,0) — фотофон вернётся.
   ⚠ background-blend-mode шорткандом background не сбрасывается: конкурент ставит
   lighten, и без явного normal белый фон смешался бы с ним. */
.placement-main .dakraam-vervang-form {
    background-image: none;
    background-blend-mode: normal;
    background-color: #f6f6f6;
}

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

/* Заголовок блока формы. Тег сменён strong -> h2 (семантика: без него на странице был
   скачок h1 -> h3), и вместе с тегом на узел прилетела чужая типографика заголовков из
   application.css: font-weight 500 и line-height 1.1 (:869), margin-top 20px (:882),
   font-size 30px (:904). Ни одного из этих значений у strong не было, поэтому возвращаем
   прежний вид: размер и интерлиньяж узел НАСЛЕДОВАЛ (body 16px/24px — inherit, а не
   вписанное число, чтобы правка body не разъехалась с нами), жирность давал сам тег strong
   (UA-стиль bolder при родителе 400 = 700), верхнего отступа у inline-элемента не было.
   margin-bottom не трогаем: 20px уже задаёт классовое правило (0,3,0), оно и так бьёт
   10px из application.css. Цепочка (0,4,0) — с запасом над всеми конкурентами. */
.placement-main .dakraam-vervang-form .container .vervang-title {
    font-size: inherit;
    line-height: inherit;
    font-weight: 700;
    margin-top: 0;
}

/* Подзаголовок блока формы. Типографика — та же, что у лида (17/1.6/#616161);
   max-width 768px = ширина самого маунта калькулятора (inc/shortcodes.php:781),
   чтобы строка не была шире того, что под ней. */
.placement-main .dakraam-vervang-form .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:780-781): background rgba(255,255,255,.92),
   border-radius 15px, box-shadow 0 4px 30px rgba(0,0,0,.06). Атрибут не перебивается
   никакой специфичностью селектора — только !important. Файл shortcodes.php нарядом не
   правится (он общий с page-replace и lichtkoepel), поэтому давим отсюда.
   border !important НЕ нужен: рамку атрибут не объявляет вовсе.
   ⛔ Внутрь маунта (#embed-calculator, любые dk-*, лоадер) — ни одного селектора.
   Скругления лоадера срезает overflow:hidden самого маунта. */
.placement-main .dakraam-calc-mount {
    background: #fff !important;
    border: 1px solid #e6e6e6;
    border-radius: 10px !important;
    box-shadow: none !important;
}


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

@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:not(.lichtkoepel-installation) .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 {
        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;
    }

    /* ⚠ Боковой отступ секции формы — только на мобильном (решение владельца, перенесённое
       с 1912265: «вернуть отступ только на мобильном»). Горизонтального падинга у контейнера
       нет ни в инлайновом <style> шаблона (:133), ни в lp-plaatsen.css:16 — оба объявляют
       padding: 20px 0 50px. Замер на 390px: карточка калькулятора x=0 w=390, её рамка и
       радиус 10px срезаны вьюпортом, тогда как карточка hero выше отступ имеет (x=15 w=360).
       Возвращаем ТОЛЬКО горизонтальный: вертикальные 20/50 остаются за прежним правилом,
       поэтому padding-inline, а не шортканд padding. Цепочка (0,3,0) обязана бить обе чужие
       (0,2,0), в том числе инлайновую — та печатается в теле документа, ПОСЛЕ head-стилей,
       и при равной специфичности выиграла бы. Не ослаблять. */
    .placement-main .dakraam-vervang-form .container {
        padding-inline: 15px;
    }
}