/* =============================================================================
   CM-DESIGN — слой редизайна блоков (UX/UI), программа «перебор всех
   блоков всех страниц». Файл cm-design.css (ранее cm-redesign-2026.css — год
   убран 2026-06-30). Отдельный файл, грузится ПОСЛЕ main-custom (handle
   main-old, см. functions/enqueues.php) → правила-оверрайды бьют легаси по
   порядку каскада. Минификация не требуется: подключается как есть, cache-bust
   через ?ver=filemtime, gzip отдаёт nginx.

   Правила:
   - каждый блок = отдельная секция «БЛОК N», скоуп под уникальный класс блока;
   - только фирменная палитра (DESIGN_SYSTEM.md);
   - mobile-first.

   Источник истины правок этого слоя — ЭТОТ файл (не main-custom).
   ============================================================================= */


/* =============================================================================
   БЛОК 1 — Услуги: block-services-zabor.php
   Разметка ПЕРЕПИСАНА под структуру утверждённого демо (sz-card/sz-media/sz-body/
   sz-title+sz-arr/sz-specs/sz-foot/sz-prow/sz-price[from+num+unit]/sz-term/sz-cta).
   CSS перенесён из демо tasks/services-zabor-ux/services-zabor-final-demo.html
   практически дословно, scoped под .sz-services. Контейнерные запросы (@container)
   работают, т.к. .sz-services = container-type:inline-size (ширину даёт .container
   темы: 1220 → 1360 ≥1400 → 1600 ≥1650). Вариант кнопки = белая + жёлтая рамка.
   Зигзаг флагмана по рядам через .sz-row--rev. Не пересекается с другими блоками.
   ============================================================================= */
.sz-services {
    /* ширину/центровку/лестницу 1220→1360(≥1400)→1600(≥1650) даёт класс .landing-block
       (main-custom.css 7941-7972, !important) - как у всех landing-блоков сайта. Свою
       лестницу не дублируем (единый источник ширины). Тут только серый фон-секция. */
    /* серая подложка-секция убрана (правка по проду: серый фон читался как лишний
       блок + давал лишний вертикальный отступ сверху/снизу - см. #15/#16/#17).
       Белые панели .szb лежат прямо на фоне страницы; ширину и нижний отступ блока
       даёт .landing-block (margin-bottom:50px - общий ритм всех landing-блоков). */
    background: transparent;
    padding: 0;
    --ink: #15181d;
    --ink-2: #3c424c;
    --ink-mut: #646b78; /* затемнён до WCAG AA: ~5.4:1 на белом (было #7b828d ~3.9:1, Lighthouse #18) */
    --line: #e7e8e6;
    --line-soft: #f0f1ef;
    --paper: #fff;
    --blue: #5c6c84;
    --red: #9a1200;
    --red-dk: #6e0d00;
    --yellow: #FFC709;
    --yellow-dk: #eeb800;
    --yellow-soft: #fff8da;
    --r-card: 16px;
    --r-in: 10px;
    --sh-1: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 1px rgba(16, 24, 40, .04);
    --sh-2: 0 22px 44px -18px rgba(16, 24, 40, .30);
    --ease: cubic-bezier(.22, .61, .36, 1);
}

/* Белая подложка-панель на каждую секцию (заборы / ворота), как в демо.
   container-type → @container-запросы карточек меряют ширину панели. */
.sz-services .szb {
    container-type: inline-size;
    background: var(--paper);
    border-radius: 14px;
    margin: 0 0 22px;
    padding: 22px 20px 6px;
    box-shadow: var(--sh-1);
}
.sz-services .szb:last-child {
    margin-bottom: 0;
}

/* H2 блока + подсветка города серо-синим («в» вне span) */
.sz-services .szb-h2 {
    /* размер/гарнитуру/вес H2 полностью отдаём стандарту темы (.landing-block h2 +
       critical-home.css:252 → 'Gotham Pro Bold' 700, 30px ≥769 / 22px ≤768), чтобы
       заголовок новых блоков совпадал с прочими H2 темы на всех разрешениях.
       Тут — только специфика блока: uppercase, отступ, цвет, акцент города. */
    text-transform: uppercase;
    letter-spacing: .005em;
    margin: 0 0 18px;
    color: var(--ink);
}
.sz-services .szb-h2 .city {
    color: var(--blue);
}

@media (max-width: 768px) {
    .sz-services .szb-h2 {
        /* размер заголовка на мобайле = тема (h2 → 22px); тут держим только отступ блока */
        margin: 0 0 16px !important;
    }
    .sz-services .sz-title {
        font-size: 18px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        margin: 0 !important;
    }
}

/* Ряд: мобайл 1 колонка */
.sz-services .sz-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.sz-services .sz-sat {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
@container (min-width: 600px) {
    /* grid-auto-rows:1fr — спутники в 2 колонки равной высоты уже с 600px (а не с 900px),
       чтобы цена/кнопка соседних карточек выравнивались по низу и не «скакали» */
    .sz-services .sz-sat { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; }
    .sz-services .sz-card--wide { grid-column: 1 / -1; }
}
/* раскладка «как на десктопе» (флагман + спутники в ряд) включается уже на
   планшетах: iPad Pro portrait даёт контейнер .szb ~944px (#21/#22). */
@container (min-width: 900px) {
    .sz-services .sz-row { grid-template-columns: 1.18fr 1fr; align-items: stretch; }
    .sz-services .sz-row--rev { grid-template-columns: 1fr 1.18fr; }
    .sz-services .sz-row--rev .sz-card--flagship { order: 2; }
    .sz-services .sz-row--rev .sz-sat { order: 1; }
    .sz-services .sz-sat { grid-auto-rows: 1fr; }
    .sz-services .sz-card--flagship .sz-media { min-height: 500px; }
    .sz-services .sz-card--sat .sz-media { min-height: 280px; }
}

/* Карточка */
.sz-services .sz-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    overflow: hidden;
    box-shadow: var(--sh-1);
    transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.sz-services .sz-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--sh-2);
    border-color: #cfd2cf;
}

/* Медиа */
.sz-services .sz-media {
    position: relative;
    flex: 1 1 auto;
    min-height: 150px;
    overflow: hidden;
    background: #e9eaec;
}
.sz-services .sz-card--flagship .sz-media { min-height: 280px; }
.sz-services .sz-card--wide .sz-media { min-height: 172px; }
.sz-services .sz-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .65s var(--ease);
}
.sz-services .sz-card:hover .sz-media img { transform: scale(1.06); }
.sz-services .sz-media::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 34%;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .10));
    opacity: .7;
    pointer-events: none;
}

/* Тело */
.sz-services .sz-body {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    padding: 14px 16px 16px;
    gap: 12px;
}
.sz-services .sz-card--flagship .sz-body { padding: 16px 20px 18px; gap: 14px; }

/* Заголовок-ссылка + бордовая стрелка + stretched-link */
.sz-services .sz-title {
    margin: 0;
    font: 700 18px/1.25 'Gotham Pro Bold', Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .005em;
    /* строка заголовка: текст-ссылка (обрезается до 2 строк) + стрелка ВНЕ ссылки —
       всегда видна, не уходит под обрезку. min-height резервирует 2 строки → карточки
       не «скачут». Сам clamp перенесён на .sz-title a (ниже). */
    display: flex;
    align-items: flex-start;
    gap: .3em;
    min-height: 2.5em;
}
.sz-services .sz-title a {
    /* clamp текста до 2 строк (полный текст остаётся в DOM для SEO). overflow:hidden
       тут НЕ режет stretched-link ::after — его containing block .sz-card, предок ссылки */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1 1 auto;
    min-width: 0;
    color: var(--ink);
    background-image: linear-gradient(var(--red), var(--red));
    background-size: 0 2px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size .3s var(--ease), color .15s;
}
.sz-services .sz-card:hover .sz-title a { background-size: 100% 2px; }
.sz-services .sz-title a:focus-visible {
    outline: 3px solid var(--red);
    outline-offset: 3px;
    border-radius: 3px;
}
/* вся карточка кликабельна → детальная (stretched link). ВАЖНО: оверлей строго
   внутри .sz-card (.sz-card .sz-title a::after), иначе растянется за карточку */
.sz-services .sz-card .sz-title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}
.sz-services .sz-arr {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    color: var(--red);
    margin-top: .14em; /* выровнять стрелку по первой строке заголовка */
    transition: transform .2s var(--ease);
}
.sz-services .sz-arr svg { display: block; width: .92em; height: .92em; }
.sz-services .sz-card:hover .sz-arr { transform: translateX(4px); }

/* Список характеристик (флагман) */
.sz-services .sz-specs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.sz-services .sz-specs li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    font-size: 13px;
    padding: 6px 0;
    border-bottom: 1px solid var(--line-soft);
}
.sz-services .sz-specs li:last-child { border-bottom: 0; }
.sz-services .sz-specs .k { color: var(--ink-mut); white-space: nowrap; }
.sz-services .sz-specs .v { color: var(--ink); font-weight: 600; text-align: right; }

/* Подвал: цена + срок, ниже CTA */
.sz-services .sz-foot {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sz-services .sz-prow {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.sz-services .sz-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-variant-numeric: tabular-nums lining-nums;
}
.sz-services .sz-price .from { font-size: 12px; color: var(--ink-mut); }
.sz-services .sz-price .num {
    font: 700 29px/1 Roboto, Helvetica, Arial, sans-serif;
    color: var(--red);
    letter-spacing: -.01em;
}
.sz-services .sz-price .unit { font-size: 12.5px; color: var(--ink-mut); font-weight: 500; }
.sz-services .sz-term {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.15;
    text-align: right;
}
.sz-services .sz-term .from { font-size: 11px; color: var(--ink-mut); }
.sz-services .sz-term .v {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}

/* CTA — белая + жёлтая рамка 2px, тёмный текст, жёлтая иконка, поверх stretched-link */
.sz-services .sz-cta {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 46px;
    padding: 0 18px;
    font: 500 15.5px/1 Roboto, Helvetica, Arial, sans-serif;
    cursor: pointer;
    color: #1a1d22;
    background: #fff;
    border: 2px solid var(--yellow);
    border-radius: var(--r-in);
    transition: background .15s var(--ease), transform .08s var(--ease);
}
.sz-services .sz-cta:hover { background: var(--yellow-soft); }
.sz-services .sz-cta:active { transform: scale(.985); }
.sz-services .sz-cta:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.sz-services .sz-cta__ic { flex: 0 0 auto; width: 20px; height: 20px; transition: none; }

/* =============================================================================
   БЛОК 2 — Расцветки: block-colors.php
   Чистый перенос стилей блока расцветок (.service_colors / .service_color / .sc-*)
   из main-custom.css (+ .min) БЕЗ смены разметки (режим §3.9 «без смены разметки»).
   Порядок правил сохранён 1:1 с источником: A) старая база «ЧАСТЬ 3» → B) блок
   service-colors-ux → C) fullentry-оверрайды h2 — т.к. B намеренно перебивает A по
   каскаду (min-height / overlay / font-weight). Общие правила расцеплены: .video__title /
   .landing-block h2 / обычный .fullentry h2 остались в main-custom, сюда унесён только
   .service_colors__title. Фикс контраста бейджа «скоро»: #8a8a8a/#bcbcbc (вне палитры,
   ≈3.5:1) → #5c6c84 (брендовый серо-синий, ≈5.4:1, WCAG AA).
   ============================================================================= */

/* --- A. Старая база расцветок (перенос из main-custom «ЧАСТЬ 3», расцеплено с .video__title) --- */
.service_colors_container{position:relative}
.service_colors__title{margin:30px 0;padding:0;display:block;font-family:GothamProBlack,Roboto,Helvetica,Arial,Sans-Serif;font-size:5vw;text-transform:uppercase}
.service_colors__card_header{cursor:pointer}
.service_colors__card_header_title{font-size:1.1rem;margin-right:30px;font-weight:500;line-height:1.2}
.service_colors__card_header_ico{position:absolute;right:30px;top:18px}
.service_color{margin-bottom:30px;text-align:center}
.service_color__image{width:100%;height:auto;min-height:100px;position:relative}
.service_color__info{margin-top:4px}
.service_color__info_title{font-size:14px;font-weight:600}
.service_color__info_description{font-size:14px}
a.service_color:hover .service_color__image::before{content:'Смотреть примеры';color:#fff;text-align:center;padding-top:32px;display:block;position:absolute;width:100%}
.service_colors__title_help{width:24px;position:absolute;right:15px;font-size:24px;color:#9a1200;top:4px;margin:0;padding:0;height:24px;line-height:0;white-space:nowrap}
@media(min-width:380px){
    .service_colors__title{font-size:5vw}
}
@media(min-width:576px){
    .service_colors__title{font-size:30px}
}
@media(min-width:768px){
    .service_colors__card_header_title{font-size:1.25rem}
}
h3.service_colors__card_header_title{margin:0 30px 0 0;padding:0;font-size:1.1rem;line-height:1.2;font-weight:500}
@media(min-width:768px){h3.service_colors__card_header_title{font-size:1.25rem}}

/* --- B. service-colors-ux (перенос из main-custom 8163-8249; бейдж «скоро» приведён к AA) --- */
/* ============================================================
   service-colors-ux: блок расцветок (Подход 5: карточка «цвет+подпись
   в одном блоке» + бейдж-счётчик кейсов + текстуры по пути) + описание
   покрытия в попапе под «i» + ширина карточки 08 в «Этапах работы».
   Mobile-first, фирменная палитра. Лук как на centermk.ru/palitra.
   PHP-разметку правим в block-colors.php (не в этом файле).
   ============================================================ */

/* --- Сетка свотчей 3/4/6 (display:contents склеивает все .row в одну grid) --- */
.service_colors{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.service_colors .row{display:contents;}
.service_colors .col{flex:none;max-width:none;width:auto;min-width:0;padding:0;margin:0;} /* min-width:0 - чтобы интринсик картинки/nowrap не распирал колонку (горизонт. переполнение на мобильных) */
@media(min-width:576px){.service_colors{grid-template-columns:repeat(4,1fr);gap:16px;}}
@media(min-width:992px){.service_colors{grid-template-columns:repeat(6,1fr);}}

/* --- Карточка «цвет+подпись в одном блоке» (Подход 5) --- */
.service_color{display:flex;flex-direction:column;height:100%;margin:0;text-align:left;
  background:#fff;border:1px solid #e8e8e8;border-radius:14px;overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.06);color:inherit;text-decoration:none;
  transition:transform .2s ease,box-shadow .2s ease;}
a.service_color{cursor:pointer;}
div.service_color{cursor:default;}
a.service_color:hover,a.service_color:focus-visible{
  transform:translateY(-4px);box-shadow:0 14px 26px rgba(0,0,0,.15);
  text-decoration:none;color:inherit;}

/* --- Цветовая зона: текстура/цвет 16:10. img абсолютом (иначе интринсик тянет высоту);
   гасим протёкшее v3-правило min-height:100px/height:auto, высоту даёт только aspect-ratio --- */
.service_color__image{position:relative;width:100%;aspect-ratio:16/10;min-height:0;height:auto;
  border:none;border-radius:0;box-shadow:none;overflow:hidden;}
.service_color__image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}

/* --- Подпись слева под цветом --- */
.service_color__info{padding:9px 11px 11px;margin:0;min-width:0;}
.service_color__info_title{font-family:Roboto,Helvetica,Arial,sans-serif;
  font-size:12px;line-height:1.25;color:#1a1a1a;letter-spacing:.01em;margin-bottom:1px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.service_color__info_description{font-family:Roboto,Helvetica,Arial,sans-serif;
  font-size:11px;line-height:1.25;color:#5c6c84;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media(min-width:576px){.service_color__info_title{font-size:13px;}.service_color__info_description{font-size:12px;}}

/* --- Бейдж-affordance в углу цвета: число кейсов (видно без hover) или «скоро» --- */
.sc-badge{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;gap:4px;
  background:#fff;border-radius:999px;padding:3px 9px 3px 7px;box-shadow:0 2px 7px rgba(0,0,0,.22);
  font-family:Roboto,Helvetica,Arial,sans-serif;font-size:11.5px;font-weight:700;color:#1a1a1a;line-height:1;}
.sc-badge__ic{display:inline-flex;font-size:14px;color:#5c6c84;}
.sc-badge--soon{color:#5c6c84;font-weight:600;padding:4px 10px 4px 8px;}
.sc-badge--soon .sc-dot{width:8px;height:8px;border-radius:50%;background:#5c6c84;display:block;}

/* старые overlay-капсулы/«Смотреть примеры» прежних итераций - снять ПОЛНОСТЬЮ,
   включая :hover/:focus (перебиваем правило main-old/main-custom.css:7451 по специфичности+порядку) */
a.service_color .service_color__image::before,
a.service_color:hover .service_color__image::before,
a.service_color:focus .service_color__image::before,
a.service_color:focus-visible .service_color__image::before,
a.service_color .service_color__image::after{content:none;display:none;}

/* --- Иконка «i» в заголовке группы (внутри h3, в строке с названием) --- */
.service_colors__card_header_title .sc-info{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;
  margin:-6px 0 -6px 6px;padding:6px;border:0;background:transparent;color:#5c6c84;
  font-size:17px;line-height:0;cursor:pointer;}
.service_colors__card_header_title .sc-info:hover{color:#3f4c61;}

/* --- Попап описания: аккуратный поповер у иконки «i» (десктоп - hover, тач - tap).
   Десктоп шире (≤460px), заголовок выделен и «липкий» при скролле. --- */
.sc-pop{position:fixed;top:0;left:0;z-index:2000;max-width:340px;width:max-content;
  background:#fff;border:1px solid #e6e6e6;border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.18);padding:13px 15px;
  opacity:0;visibility:hidden;transform:translateY(4px);pointer-events:none;
  transition:opacity .15s ease,transform .15s ease,visibility .15s ease;}
.sc-pop.show{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}
@media(min-width:768px){.sc-pop{max-width:520px;}}
.sc-pop__arrow{position:absolute;width:12px;height:12px;background:#fff;
  border-left:1px solid #e6e6e6;border-top:1px solid #e6e6e6;}
.sc-pop__x{display:none;position:absolute;top:6px;right:6px;width:30px;height:30px;border:0;
  border-radius:50%;background:#f1f1ee;color:#1a1a1a;font-size:15px;line-height:1;cursor:pointer;}
.sc-pop--touch .sc-pop__x{display:inline-flex;align-items:center;justify-content:center;}
.sc-pop--touch .sc-pop__inner{padding-right:26px;}
.sc-pop__inner{max-height:60vh;overflow:auto;font-family:Roboto,Helvetica,Arial,sans-serif;
  font-size:13px;line-height:1.45;color:#3a3a3a;}
.sc-pop__inner .sc-desc__title{position:sticky;top:0;z-index:1;background:#fff;
  font-family:Roboto,Helvetica,Arial,sans-serif;
  font-size:15px;line-height:1.3;color:#1a1a1a;margin:0 0 9px;padding:0 0 8px;border-bottom:2px solid #9a1200;}
.sc-pop__inner p{margin:0 0 .5em;}
.sc-pop__inner p:last-child{margin-bottom:0;}
@media(prefers-reduced-motion:reduce){.sc-pop{transition:none;}}

/* --- «?»-подсказка над заголовком расцветок (Bootstrap-tooltip из block-colors.php +
   js/main.js) приводим к виду попапа описания .sc-pop: белая карточка вместо чёрного
   пузыря. Тултип в теме один; оверрайд держится по специфичности .tooltip .tooltip-inner. --- */
.tooltip.show { opacity: 1; }
.tooltip .tooltip-inner {
  max-width: 300px; padding: 11px 14px; text-align: left;
  background: #fff; color: #3a3a3a;
  border: 1px solid #e6e6e6; border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  font-family: Roboto, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 1.45;
}
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before { border-top-color: #fff; }
.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before { border-bottom-color: #fff; }
.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before { border-left-color: #fff; }
.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before { border-right-color: #fff; }

/* --- C. fullentry-оверрайды заголовка расцветок (расцеплено с обычным .fullentry h2) --- */
.fullentry .entry-content h2.service_colors__title {
    margin: 50px 0 24px; padding: 0; display: block;
    font-family: GothamProBlack, Roboto, Helvetica, Arial, Sans-Serif;
    text-transform: uppercase; font-size: 30px; line-height: 1.2; color: #1a1a1a;
}
@media (max-width: 991px) {
    .fullentry .entry-content h2.service_colors__title { font-size: 24px; margin: 40px 0 20px; }
}
@media (max-width: 768px) {
    .fullentry .entry-content h2.service_colors__title { font-size: 20px; margin: 32px 0 16px; }
}