/* Раскладка хаба ДДУ «что случилось с квартирой» (page-ddu-hub.php).
 *
 * Тот же приём, что у страницы разбора (razbor-page.css): компонентный слой и токены
 * (dh-*) — в dh-design-system.css, он грузится первым; здесь только раскладка, и вся
 * она ОГРАНИЧЕНА .hub-root — имена общие (.page, .hero, .path, .split), без корня они
 * пересеклись бы с правилами темы и Kadence. Значения — токенами --dh-*, не хардкодом
 * (.design-sync/conventions.md, раздел «Идиома»).
 */

/* Контейнер колонки — на корне страницы, не на оболочке .dh-wrap (в ней общие шапка и
   подвал; контейнер на оболочке сдвигал знак шапки — см. razbor-chrome-scope.spec.js). */
.hub-root{max-width:var(--dh-content-max);margin-inline:auto;padding-inline:var(--dh-space-2xl)}
@media (max-width:1100px){.hub-root{padding-inline:var(--dh-space-lg)}}
@media (max-width:768px){.hub-root{padding-inline:var(--dh-space-md)}}
.hub-root .page{max-width:1100px;margin:0 auto;padding:var(--dh-space-xl) 0 120px}

/* Первый экран: заголовок + три карточки выбора. Карточки — главное действие страницы,
   поэтому стоят в первом экране и на 1440, и на 390 (на мобиле — столбиком). */
.hub-root .hero{padding:var(--dh-space-2xl) 0 var(--dh-space-xl)}
.hub-root .hero h1{margin:14px 0 var(--dh-space-md);font-size:clamp(30px,4.2vw,50px);line-height:1.08;letter-spacing:-.035em;font-weight:var(--dh-weight-black);text-wrap:balance;max-width:22ch}
.hub-root .hero__sub{margin:0;font-size:19px;line-height:1.5;color:var(--dh-text-2);max-width:56ch;text-wrap:pretty}
.hub-root .choice{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--dh-space-md);margin-top:var(--dh-space-xl)}
.hub-root .choice__card{display:flex;flex-direction:column;gap:var(--dh-space-sm);padding:var(--dh-space-lg);background:var(--dh-surface);border:1px solid var(--dh-border);border-radius:var(--dh-radius-lg);color:var(--dh-text);text-decoration:none;transition:border-color var(--dh-dur-state) var(--dh-ease),background-color var(--dh-dur-state) var(--dh-ease)}
@media (hover:hover){.hub-root .choice__card:hover{border-color:var(--dh-blue-400);background:var(--dh-surface-strong);text-decoration:none;color:var(--dh-text)}}
.hub-root .choice__title{font-size:19px;font-weight:var(--dh-weight-bold);line-height:1.25}
.hub-root .choice__desc{font-size:var(--dh-body-sm);line-height:1.5;color:var(--dh-text-3)}
.hub-root .choice__meta{margin-top:auto;padding-top:var(--dh-space-sm);font-size:var(--dh-body-sm);font-weight:var(--dh-weight-bold);color:var(--dh-blue-300)}
.hub-root .choice__meta::after{content:' →'}
.hub-root .trust{margin:var(--dh-space-lg) 0 0;font-size:var(--dh-body-sm);color:var(--dh-text-3)}

/* Секции ситуаций. scroll-margin — чтобы якорь из карточки выбора не прятал заголовок
   под липкой шапкой (dh-nav: 64 px на десктопе). */
.hub-root section{padding:var(--dh-space-2xl) 0;border-top:1px solid var(--dh-border);scroll-margin-top:72px}
.hub-root .sec__eyebrow{font-size:12.5px;letter-spacing:var(--dh-tracking-eyebrow);text-transform:uppercase;color:var(--dh-text-4);font-weight:var(--dh-weight-bold);margin:0 0 10px}
.hub-root h2.sec{margin:0 0 var(--dh-space-md);font-size:clamp(24px,2.6vw,32px);letter-spacing:-.025em;font-weight:var(--dh-weight-bold)}
.hub-root .lead{margin:0 0 var(--dh-space-lg);font-size:17px;line-height:1.6;color:var(--dh-text-2);max-width:var(--dh-measure)}

/* Путь «претензия → иск»: два шага с номером, как .step у страницы разбора. */
.hub-root .path{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--dh-space-xl)}
.hub-root .path__step{border-top:2px solid var(--dh-blue);padding-top:var(--dh-space-md)}
.hub-root .path__num{display:block;font-size:13px;letter-spacing:.1em;color:var(--dh-glyph-lt);font-weight:var(--dh-weight-bold);margin-bottom:10px}
.hub-root .path__step h3{margin:0 0 8px;font-size:20px;font-weight:var(--dh-weight-bold)}
.hub-root .path__step p{margin:0 0 var(--dh-space-sm);font-size:15px;line-height:1.6;color:var(--dh-text-3)}
.hub-root .path__ctas{display:flex;gap:var(--dh-space-md);flex-wrap:wrap;margin-top:var(--dh-space-md)}
.hub-root .path__more{margin-top:var(--dh-space-md)}

.hub-root .split{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,1fr);gap:var(--dh-space-xl);align-items:start}
.hub-root .facts{margin:0;padding-left:1.1em;display:grid;gap:10px;font-size:15px;line-height:1.55;color:var(--dh-text-2)}
.hub-root .note{margin:var(--dh-space-md) 0 0;font-size:var(--dh-body-sm);color:var(--dh-text-3)}
.hub-root .contact__ctas{display:grid;gap:var(--dh-space-sm);margin-top:var(--dh-space-md)}

.hub-root .limits{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--dh-space-lg)}
.hub-root .limits div{border-left:2px solid var(--dh-border-strong);padding-left:var(--dh-space-md)}
.hub-root .limits h3{margin:0 0 6px;font-size:15px;font-weight:var(--dh-weight-bold)}
.hub-root .limits p{margin:0;font-size:13.5px;line-height:1.5;color:var(--dh-text-3)}
.hub-root .disclaimer{margin-top:var(--dh-space-xl);font-size:13px;line-height:1.55;color:var(--dh-text-4);max-width:72ch}

.hub-root a{color:var(--dh-blue-300);text-decoration:none}
/* :not(.dh-btn) — иначе (0,2,1) перебил бы цвет текста кнопок (0,2,0): голубой на оранжевом при наведении. */
.hub-root a:not(.dh-btn):hover{color:var(--dh-blue-200);text-decoration:underline}
/* Ссылка в сплошном тексте отличается не только цветом (WCAG 1.4.1) — подчёркивание. */
.hub-root p a:not(.dh-btn){text-decoration:underline;text-underline-offset:3px}

@media (max-width:860px){
.hub-root .choice,.hub-root .path,.hub-root .split{grid-template-columns:minmax(0,1fr)}
.hub-root .hero{padding:var(--dh-space-sm) 0 var(--dh-space-lg)}
.hub-root .page{padding:var(--dh-space-md) 0 96px}
.hub-root .choice{gap:var(--dh-space-sm);margin-top:var(--dh-space-lg)}
.hub-root section{padding:var(--dh-space-xl) 0}
}
@media (max-width:480px){
.hub-root .hero__sub{font-size:17px}
.hub-root .choice__card{padding:var(--dh-space-md);gap:6px}
.hub-root .choice__title{font-size:17px}
.hub-root .path__ctas .dh-btn{width:100%}
}

/* ВОЗВРАТ СИСТЕМНЫХ ЦВЕТОВ поверх Kadence: тема красит h1–h3 и ссылки своими правилами
   с большей специфичностью (тот же дефект, что пойман WCAG-аудитом страницы разбора
   15.09.2026: тёмные заголовки на тёмном фоне, голубой текст на оранжевой кнопке). */
.hub-root h1,
.hub-root h2,
.hub-root h3{color:var(--dh-text)}
.hub-root .dh-card--warning .dh-card__title{color:var(--dh-cta-300)}
.hub-root .dh-btn--primary{color:var(--dh-on-cta)}
.hub-root .dh-btn--outline{color:var(--dh-text)}
.hub-root a.dh-btn{text-decoration:none}
.hub-root [hidden]{display:none !important}