/* ============================================================================
   HE-TASK3 — первый экран главной + блок действий в карточке проекта.
   Hermes / frontend, 18.10.2026. Свёрстано по макету дизайнера
   /opt/data/content/designer/glavnaya_i_karta/ (spec.md).
   Подключается ПОСЛЕ style.css, he-mobile.css и he-fix.css.
   Блок самодостаточный: удаляется целиком, остальная вёрстка не затрагивается.
   Тексты, цифры, цены и телефоны не меняются (канон). Логотип не трогается.
   Числа — из spec.md; ничего «на глаз» не подставлялось.
   Шрифты: Montserrat (заголовки/цифры/кнопки) + Manrope (текст). Файлы — локально
   (fonts/ из макета дизайнера, SIL OFL 1.1). До заливки шрифтов работает фолбэк
   на уже стоящий Manrope/Arial — раскладка не ломается.
   ============================================================================ */

:root{
    --he-graphite:#383e42;
    --he-graphite-900:#242a2d;
    --he-graphite-700:#4a5257;
    --he-green:#3a9f45;
    --he-green-600:#2f8a3a;
    --he-paper-2:#f4f6f4;
    --he-line:#e2e6e3;
    --he-muted:#656d72; /* HE-TASK2-4: контраст 4.45 -> 4.85 на #f4f6f4 (WCAG AA) */
    --he-text:#23282b;
    --he-font-h:'Montserrat','Manrope',Arial,sans-serif;
    --he-font-t:'Manrope','Montserrat',Arial,sans-serif;
    --he-radius:14px;
    --he-radius-s:10px;
}

/* ============================================================================
   1. ПЕРВЫЙ ЭКРАН
   ============================================================================ */

/* Надзаголовок: Киров · 12+ лет · рейтинг */
.banner__eyebrow{
    margin:0 0 18px;
    display:flex;flex-wrap:wrap;align-items:center;gap:10px;
    font-family:var(--he-font-h);font-size:12.5px;font-weight:600;
    letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.78);
}
.banner__eyebrow i{width:4px;height:4px;border-radius:50%;background:var(--he-green);display:block}

/* Заголовок и лид — крупнее и с гарантированной тенью на любом кадре */
/* Герой: контент — в потоке (не absolute), иначе при добавленной плашке
   длинный заголовок уезжает вверх за край экрана. Нижняя привязка сохранена. */
.banner__container{height:auto !important; min-height:0 !important}
.banner__main{
    min-height:min(880px, calc(100svh - 75px));
    display:flex;flex-direction:column;justify-content:flex-end;overflow:visible;
}
.banner__info-block{
    position:relative !important;inset:auto !important;
    left:auto !important;right:auto !important;bottom:auto !important;
    width:100%;gap:0;padding:120px clamp(16px,4vw,110px) 34px;
}
.banner__text{max-width:780px}
.banner__title{
    font-family:var(--he-font-h);font-weight:700;
    font-size:56px;line-height:1.08;letter-spacing:-.02em;
    color:#fff;text-shadow:0 3px 24px rgba(0,0,0,.5);
}
.banner__subtitle{
    font-family:var(--he-font-t);font-weight:400;
    font-size:20px;line-height:1.55;max-width:560px;
    color:rgba(255,255,255,.9);opacity:1;
    text-shadow:0 2px 14px rgba(0,0,0,.45);
}
.banner__subtitle b{color:#fff;font-weight:600}

/* Ровно два призыва к действию — показываем и на десктопе
   (в he-mobile.css @media(min-width:992px){.banner__cta{display:none}}) */
.banner__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}

/* Кнопки действия (стили he-btn дублируются на случай иного порядка подключения) */
.he-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    min-height:56px;padding:0 28px;border:2px solid transparent;border-radius:var(--he-radius-s);
    font-family:var(--he-font-h);font-size:14px;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;line-height:1;text-align:center;text-decoration:none;
    white-space:nowrap;cursor:pointer;
    transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.he-btn--main{background:var(--he-green);color:#fff;box-shadow:0 6px 18px rgba(58,159,69,.35)}
.he-btn--main:hover{background:var(--he-green-600);color:#fff}
.he-btn--ghost{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.65)}
.he-btn--ghost:hover{background:rgba(255,255,255,.16);color:#fff}
.he-btn--outline{background:transparent;color:var(--he-graphite);border-color:var(--he-graphite)}
.he-btn--outline:hover{background:var(--he-graphite);color:#fff}

/* В hero убираем «третью кнопку» и дублирующий слайдер: по макету призывов ровно два,
   «Смотреть проекты» уже ведёт в каталог. Это и снимает наложение слайдер→кнопка. */
.banner__button{display:none !important}
.banner__slider-container--desktop{display:none !important}

/* Плашка «Внутренняя рассрочка» — главное отличие, внутри первого экрана */
.he-paybar{
    margin-top:38px;padding:20px 24px;border-radius:var(--he-radius);
    background:rgba(20,25,28,.66);border:1px solid rgba(255,255,255,.16);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"label guar" "steps steps";
    gap:16px 28px;align-items:center;color:#fff;
}
.he-paybar__label{grid-area:label;font-family:var(--he-font-h);font-weight:700;font-size:15px;line-height:1.3;color:#fff}
.he-paybar__label span{display:block;margin-top:4px;font-family:var(--he-font-t);font-weight:400;font-size:12.5px;color:rgba(255,255,255,.62);line-height:1.4}
.he-paybar__steps{
    grid-area:steps;display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:12px 10px;align-items:center;
    border-top:1px solid rgba(255,255,255,.15);padding-top:16px;
}
.he-paystep{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:0}
.he-paystep__pct{
    padding:5px 11px;border-radius:8px;text-align:center;background:var(--he-green);color:#fff;
    font-family:var(--he-font-h);font-weight:700;font-size:14px;letter-spacing:.02em;
}
.he-paystep__pct--rest{background:rgba(255,255,255,.16);color:#fff}
.he-paystep__txt{color:rgba(255,255,255,.86);font-size:13px;line-height:1.35}
.he-paybar__arrow{color:rgba(255,255,255,.45);align-self:center}
.he-paybar__guarantee{
    grid-area:guar;display:flex;flex-direction:column;justify-content:center;
    border-left:1px solid rgba(255,255,255,.16);padding-left:26px;min-height:52px;color:#fff;
}
.he-paybar__guarantee b{display:block;font-family:var(--he-font-h);font-size:26px;font-weight:800;line-height:1}
.he-paybar__guarantee span{font-size:12.5px;color:rgba(255,255,255,.68);line-height:1.4;display:block;margin-top:6px;max-width:190px}

/* Читаемость заголовка/лида на десктопе: текстовый блок шире (780px), поэтому
   затемнение слева держим плотнее, чем в he-fix.css — правый край кадра открыт. */
@media (min-width:992px){
    .banner__image::before{
        background:linear-gradient(to right,
            rgba(0,0,0,.80) 0%,
            rgba(0,0,0,.72) 32%,
            rgba(0,0,0,.56) 55%,
            rgba(0,0,0,.22) 78%,
            rgba(0,0,0,0) 100%);
    }
    .banner__title,.banner__subtitle{
        text-shadow:0 1px 3px rgba(0,0,0,.6),0 5px 20px rgba(0,0,0,.5);
    }
}

/* Читаемость заголовка/лида на планшете и телефоне: контент в потоке может
   встать на светлый участок кадра, поэтому затемнение усиливаем и добавляем тень. */
@media (max-width:991.98px){
    .banner__image::before{
        background:linear-gradient(180deg,
            rgba(0,0,0,.88) 0%,
            rgba(0,0,0,.74) 34%,
            rgba(0,0,0,.62) 62%,
            rgba(0,0,0,.92) 100%);
    }
    .banner__title,.banner__subtitle{
        text-shadow:0 1px 4px rgba(0,0,0,.7),0 6px 22px rgba(0,0,0,.55);
    }
}

/* ============================================================================
   2. БЛОК ДЕЙСТВИЙ В КАРТОЧКЕ ПРОЕКТА
   ============================================================================ */
.he-card{font-family:var(--he-font-t);color:var(--he-text)}
.he-card__head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.he-card__title{font-family:var(--he-font-h);font-size:34px;line-height:1.15;font-weight:700;color:var(--he-graphite);margin:0}
.he-tag{
    font-family:var(--he-font-h);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:var(--he-green);border:1.5px solid var(--he-green);border-radius:100px;padding:5px 12px;
}
.he-card__desc{margin:14px 0 0;color:var(--he-graphite-700);font-size:17px;line-height:1.55}

/* Пара цен: акция / обычная */
.he-pricepair{display:grid;grid-template-columns:1fr;gap:12px;margin-top:26px}
.he-price{border-radius:var(--he-radius);padding:20px 22px}
.he-price__lbl{
    display:block;font-family:var(--he-font-h);font-size:11.5px;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px;
}
.he-price__val{font-family:var(--he-font-h);font-size:40px;font-weight:800;line-height:1;letter-spacing:-.02em;white-space:nowrap}
.he-price--now{background:var(--he-graphite-900);color:#fff}
.he-price--now .he-price__lbl{color:#8fd39a}
.he-price--was{background:var(--he-paper-2);border:1px solid var(--he-line)}
.he-price--was .he-price__lbl{color:var(--he-muted)}
.he-price--was .he-price__val{color:var(--he-muted);text-decoration:line-through;text-decoration-thickness:2px}

.he-note{margin:14px 0 0;font-size:13px;line-height:1.55;color:var(--he-muted)}

/* Два действия карточки */
.he-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.he-cta .he-btn{flex:0 1 auto}

/* Чип «оплата по этапам» */
.he-stageline{margin-top:18px}
.he-chip{
    display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:100px;
    background:rgba(58,159,69,.10);border:1px solid rgba(58,159,69,.35);
    font-family:var(--he-font-h);font-size:13px;font-weight:700;color:#2c7a34;
}

/* Блок «Что входит в стоимость» */
.he-scope{margin-top:30px;border:1px solid var(--he-line);border-radius:var(--he-radius);background:#fff;overflow:hidden}
.he-scope__head{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--he-line);background:var(--he-paper-2)}
.he-scope__head h3{font-family:var(--he-font-h);font-size:19px;font-weight:700;color:var(--he-graphite);margin:0}
.he-scope__body{padding:20px 22px 4px}
.he-scope__cols{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.he-scope h4{
    margin:0 0 12px;font-family:var(--he-font-h);font-size:13px;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;color:var(--he-graphite-700);
}
.he-scope ul{list-style:none;margin:0;padding:0}
.he-scope li{position:relative;padding:7px 0 7px 26px;font-size:15px;line-height:1.5;border-bottom:1px dashed var(--he-line)}
.he-scope li:last-child{border-bottom:0}
.he-scope li::before{
    content:"";position:absolute;left:0;top:13px;width:14px;height:9px;
    border-left:2px solid var(--he-green);border-bottom:2px solid var(--he-green);transform:rotate(-45deg);
}
.he-scope .he-scope__no li::before{border:0;width:14px;height:2px;top:15px;border-radius:2px;background:var(--he-muted)}
.he-scope .he-scope__no li{color:var(--he-graphite-700)}
.he-scope__foot{
    margin:16px 0 0;padding:16px 22px;border-top:1px solid var(--he-line);
    background:var(--he-paper-2);font-size:13px;color:var(--he-muted);line-height:1.55;
}

/* Плитки характеристик (левая колонка карточки) */
.he-specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:22px}
.he-spec{border:1px solid var(--he-line);border-radius:var(--he-radius-s);padding:14px 16px;background:#fff}
.he-spec b{display:block;font-family:var(--he-font-h);font-size:19px;font-weight:700;color:var(--he-graphite);line-height:1.15}
.he-spec span{display:block;margin-top:3px;font-size:12.5px;color:var(--he-muted);text-transform:uppercase;letter-spacing:.04em}

/* ============================================================================
   3. АДАПТИВ
   ============================================================================ */
@media (max-width:1024px){
    .banner__title{font-size:42px}
    .he-card__title{font-size:28px}
}
@media (max-width:820px){
    .banner__info-block{padding-top:96px;padding-bottom:26px;padding-left:clamp(16px,4vw,24px);padding-right:clamp(16px,4vw,24px);gap:0}
    .banner__text{max-width:100%}
    .banner__title{font-size:38px;line-height:1.1}
    .banner__subtitle{font-size:18px}
    .banner__cta{gap:12px;margin-top:24px}
    .he-btn{min-height:52px;padding:0 24px}
    .he-paybar{grid-template-columns:1fr;grid-template-areas:"label" "guar" "steps";gap:14px}
    .he-paybar__guarantee{border-left:0;border-top:1px solid rgba(255,255,255,.15);padding:14px 0 0;min-height:0}
    .he-paybar__guarantee span{max-width:100%}
    .he-paybar__steps{grid-template-columns:1fr;gap:12px}
    .he-paybar__arrow{display:none}
    .he-paystep{flex-direction:row;align-items:center;gap:12px}
    .he-paystep__pct{flex:0 0 auto;min-width:62px}
    .he-price__val{font-size:34px}
}
@media (max-width:560px){
    .banner__info-block{padding-top:76px;padding-bottom:20px;padding-left:16px;padding-right:16px}
    .banner__title{font-size:30px;line-height:1.12;letter-spacing:-.015em}
    .banner__subtitle{font-size:16.5px;line-height:1.55}
    .banner__eyebrow{font-size:11.5px;gap:8px;margin-bottom:12px;display:block}
    .banner__eyebrow span{display:block;margin-top:4px}
    .banner__eyebrow i{display:none}
    .banner__cta{gap:10px}
    .banner__cta .he-btn{flex:1 1 100%}
    .he-paybar{padding:16px;gap:12px;margin-top:16px}
    .he-paybar__label{font-size:14px}
    .he-paybar__steps{padding-top:13px;gap:10px}
    .he-paystep__txt{font-size:12.5px}
    .he-paybar__guarantee b{font-size:22px}
    .he-paybar__guarantee span{font-size:12px}
    .he-card__title{font-size:23px}
    .he-pricepair{gap:12px}
    .he-price{padding:16px}
    .he-price__val{font-size:30px}
    .he-cta .he-btn{flex:1 1 100%}
    .he-scope__cols{grid-template-columns:1fr;gap:18px}
    .he-scope li{font-size:14.5px}
    .he-specs{grid-template-columns:1fr 1fr;gap:10px}
}

/* ============================================================================
   HE-TASK4 (Hermes/frontend, 18.10.2026) — блок самодостаточный, можно удалить целиком.
   Задача: карточки «Популярные проекты» на главной.
     1) Убран бейдж с процентами скидки (канон: проценты не показываем нигде).
        Цена показана парой «акция / обычная» — компактный вариант .he-pricepair
        (классы и палитра те же, что на странице проекта — he-task3.css, §2),
        поэтому третьего стиля цен не появляется: отличается только размер под карточку.
     2) Снят горизонтальный скролл на 768: причина была в строке карточки
        (.pp-element-about / .pp-element-price с white-space:nowrap внутри
        flex-md-nowrap) — контент выдавливался вправо на ~45 px. Теперь строки
        карточки переносятся, цена-пара занимает свою строку и не выходит за карточку.
   Ничего не «прячется» через overflow:hidden — источник переполнения устранён.
   ============================================================================ */

/* --- 2. Строки карточки: имя / характеристики / цена-пара друг под другом ------- */
.pp-element-content{flex-wrap:wrap}
.pp-element-about{white-space:normal;width:100%}
.pp-element-price{flex-basis:100%;width:100%;margin-top:10px;white-space:normal}

/* --- 1. Компактная цена-пара в карточке (базовые .he-price* — из he-task3.css) -- */
.he-pricepair--card{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:10px;margin-top:0;width:100%;max-width:100%;
}
.he-pricepair--card .he-price{padding:12px 14px;border-radius:var(--he-radius-s);min-width:0}
.he-pricepair--card .he-price__lbl{font-size:10.5px;margin-bottom:5px}
.he-pricepair--card .he-price__val{font-size:19px;white-space:nowrap}

@media (max-width:360px){
    .he-pricepair--card .he-price__val{font-size:18px}
}


/* ============================================================================
   HE-TASK13 (Hermes/frontend, 18.10.2026) — порядок карточки проекта на телефоне.
   Блок самодостаточный: удаляется целиком, остальная вёрстка не затрагивается.
   Тексты, цифры, цены и кегль цены НЕ меняются.

   ДО (боевой, замер): на 390/768 страница открывается слайдером, а H1 «Проект …»,
   цена и кнопки уходили ниже (H1 top=928 на 390, 1251 на 768) — клиент листал вслепую.
   ПОРЯДОК ЗАГОЛОВКОВ в DOM тоже был неверным: первым шёл H3 «Характеристики:» из левой
   колонки, H1 «Проект …» — только вторым.

   ЧТО СДЕЛАНО (в template.php): колонка с карточкой (H1, цена, кнопки, «что входит»)
   поставлена в разметке РАНЬШЕ колонки со слайдером и характеристиками -> H1 первый
   заголовок в документе на всех ширинах.
   Десктоп (>=992 px) сохраняет прежний вид: колонки остаются настоящими flex-колонками,
   а их визуальный порядок возвращает `order` (слайдер слева, карточка справа).
   Телефон/планшет (<=991 px): обёртки колонок и прозрачная обёртка .he-card гасятся
   через `display:contents`, и вложенные блоки выстраиваются в один столбец в нужном
   порядке: H1 -> цена -> пояснение -> кнопки -> чип -> СЛАЙДЕР -> характеристики ->
   «Что входит в стоимость». Порог 991.98 px совпадает с точкой переключения колонок
   Bootstrap (col-lg-*), т.е. раскладку меняем ровно там, где она и так была одноколоночной.

   Замеры и скриншоты до/после — в izmeneniya_task13.md (проверка инъекцией в DOM).
   ============================================================================ */

/* --- Десктоп (>=992 px): раскладка не меняется, только визуальный порядок колонок --- */
@media (min-width: 992px) {
    .project-detail-page .he-cardrow > .he-col-media { order: 1; }
    .project-detail-page .he-cardrow > .he-col-card  { order: 2; }
}

/* --- Телефон и планшет (<=991 px): название и цена поднимаются наверх --- */
@media (max-width: 991.98px) {
    /* один столбец; отступ по 12 px повторяет прежний внутренний отступ колонок */
    .project-detail-page .he-cardrow {
        display: flex;
        flex-direction: column;
        padding-left: 12px;
        padding-right: 12px;
    }
    /* обёртки (колонки + прозрачный .he-card) перестают занимать место —
       их дети становятся flex-элементами .he-cardrow */
    .project-detail-page .he-cardrow > .he-col-media,
    .project-detail-page .he-cardrow > .he-col-card,
    .project-detail-page .he-cardrow > .he-col-card > .he-card { display: contents; }

    .project-detail-page .he-cardrow .he-card__head  { order: 1; }
    .project-detail-page .he-cardrow .he-pricepair   { order: 2; }
    .project-detail-page .he-cardrow .he-note        { order: 3; }
    .project-detail-page .he-cardrow .he-cta         { order: 4; }
    .project-detail-page .he-cardrow .he-stageline   { order: 5; }
    .project-detail-page .he-cardrow .project-slider { order: 6; margin-top: 26px; }
    .project-detail-page .he-cardrow .project-specs  { order: 7; }
    .project-detail-page .he-cardrow .he-scope       { order: 8; }
}

/* ============================================================================
   HE-TASK14 (Hermes/frontend, 18.10.2026) — кегль цены 40 px в карточке проекта.
   Блок самодостаточный: удаляется целиком, остальная вёрстка не затрагивается.
   Тексты, цены, площади, порядок блоков и разметка (template.php) не менялись.

   ЧТО БЫЛО: пара цен стояла в 2 колонки (grid-template-columns:1fr 1fr), поэтому
   строка «10 385 000 ₽» при макетных 40 px (257,9 px) не влезала в плитку правой
   колонки col-lg-5, и кегль был понижен до 22 / 26 / 32 px. Компромисс не работал:
   уже при 22 px пара вылезала на 13,6 px при окне 992 — grid-колонки не сжимались
   ниже min-content, грид вырастал шире контейнера (документ +145 px при 992, +41 при 1200).

   ЧТО СТАЛО (вариант C дизайнера: spec.md + zamer.json, 18.10.2026):
   1) пара цен встаёт ОДНИМ столбцом на всех ширинах — базовое правило
      .he-pricepair{grid-template-columns:1fr;gap:12px} (было 1fr 1fr / 16px) —
      то же поведение, что уже было на ≤820 px;
   2) кегль возвращён к макетным 40 px (базовое .he-price__val{font-size:40px});
      на ≤820 px остаётся 34 px, на ≤560 px — 30 px, как в макете;
   3) удалены переопределения кегля 22 / 26 / 32 px (@media 992–1199 / 1200–1399 / ≥1400)
      и мёртвое правило @media (max-width:820px){.he-pricepair{grid-template-columns:1fr}}.
   Запас под самый длинный ценник каталога («Базовый простор», 10 385 000 ₽):
   74 px при 992, 149 px при 1200, 224 px при 1440. Переполнения нет ни на одной ширине.
   ============================================================================ */