/* Хаб модели · 23.10 (аудит UX): первый экран — H1, ключевые цифры, действия; фото сбоку, не hero; темы с ответом в плитке.
   Только токены ядра (site.css): цвета/радиусы меняются вместе с дизайн-системой. */
.hubtop{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s1) var(--s6);align-items:start}
.hubtop .eyebrow{margin-top:4px}
.hubtop h1{margin:6px 0 10px}
.hubtop .model-tagline{max-width:68ch;color:var(--ink2)}
@media (min-width:980px){.hubtop.has-ph{grid-template-columns:minmax(0,1fr) 400px}}

/* ключевые цифры модели (из «Сильных сторон»: значение + сравнение с классом) */
.hub-specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2);list-style:none;padding:0;margin:var(--s3) 0 10px}
@media (min-width:640px){.hub-specs{grid-template-columns:repeat(4,minmax(0,1fr))}}
.hub-specs li{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:10px var(--s3);min-width:0}
.hub-specs a{display:block;color:inherit;text-decoration:none}.hub-specs li:has(a):hover{border-color:var(--acc)}
.hub-specs b{display:block;font:700 21px/1.15 var(--fh);color:var(--ink);overflow-wrap:anywhere}
.hub-specs span{display:block;font-size:var(--fs-0);color:var(--ink2);line-height:1.3}
.hub-specs small{display:block;font-size:12px;color:var(--ok);line-height:1.3;margin-top:2px}

.hub-meta{margin:2px 0 6px;font-size:14px}
.hub-act{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s3) 0 var(--s1)}
.hub-act .btn{min-height:44px;padding:0 var(--s4);font-size:var(--fs-1)}
.hub-act .gar{order:-1}.hub-act .gar[aria-pressed="true"]{background:var(--ok)}
.hub-act2{display:contents}
@media (max-width:599px){.hub-act>.btn{flex:1 1 100%}.hub-act2{display:flex;flex-wrap:wrap;gap:6px;width:100%}
  .hub-act2 .btn{flex:1 1 auto;min-height:40px;padding:0 12px;font-size:14px}}
.hubtop .tabs{margin-top:10px}

/* фото в шапке — колонка 400 px (только ≥980 px, см. .only-d ниже) */
.hubtop-ph{margin:var(--s2) 0 0}
.hubtop-ph img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}

/* темы модели группами; ответ — прямо в плитке */
.hub-topics .sec-h{margin-bottom:4px}
.ht-grp{margin-top:var(--s4)}
.ht-grp h3{font:600 13px/1.3 var(--ff);text-transform:uppercase;letter-spacing:.06em;color:var(--ink3);margin:0 0 var(--s2)}
.ht-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
@media (min-width:760px){.ht-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1120px){.ht-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ht{display:flex;gap:10px;align-items:flex-start;padding:var(--s3);border:1px solid var(--line);border-radius:var(--r);background:var(--card);
  color:var(--ink);min-width:0;transition:border-color .15s,box-shadow .15s,transform .15s}
a.ht:hover{text-decoration:none;border-color:var(--acc);box-shadow:var(--sh2);transform:translateY(-1px)}
.ht .qi{flex:none}
.ht-t{display:flex;flex-direction:column;min-width:0;gap:1px}
.ht-t b{font-weight:650;font-size:var(--fs-1);line-height:1.25}
.ht-t em{font:700 18px/1.2 var(--fh);font-style:normal;color:var(--acc);overflow-wrap:anywhere}
.ht-t small{font-size:12px;color:var(--ink3);line-height:1.3}
.ht.off{background:var(--bg2);border-style:dashed;color:var(--ink3)}
.ht.off .qi{background:var(--bg3);color:var(--ink3)}
@media (max-width:519px){.ht{flex-direction:column;gap:6px;padding:10px}.ht-t em{font-size:17px}}
.hub-more{margin:var(--s4) 0 0;font-size:var(--fs-1)}

/* фото: на десктопе — в шапке, на мобайле — после тем (первый экран — ответы, а не картинка) */
@media (max-width:979px){.only-d{display:none}}
@media (min-width:980px){.only-m{display:none}}
.hub-ph-m{margin:var(--s4) 0 0}.hub-ph-m img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;max-height:240px}