/* brand.css — бренд-страница (хаб). Переиспользует base.css (.hero/.mcard/.facts/.answer/.toc/.q/.u/.tscroll). */

/* .vinform/.vinput/.vbtn (decode-форма) вынесены в base.css — общий компонент */

/* счётчик у заголовков (N моделей) */
.cnt{display:inline-block;font-family:var(--mono);font-size:.55em;font-weight:500;color:var(--red);border:1px solid var(--line);padding:2px 7px;vertical-align:middle;margin-left:6px}

/* заголовок группы типа ТС (мультитиповые бренды) */
.mgroup{font-family:var(--sans);font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;margin:26px 0 12px;display:flex;align-items:center;gap:8px;color:var(--txt)}

/* адаптивная сетка моделей */
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin:14px 0}
.mcard-yr{font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap}

/* список ссылок (recalls intent) */
.linklist{list-style:none;padding:0;margin:14px 0;display:grid;gap:3px}
.linklist a{display:block;padding:11px 15px;border:1px solid var(--line);background:var(--panel);color:var(--txt);text-decoration:none;font-family:var(--sans);font-weight:600;font-size:14px;transition:border-color .15s,background .15s,color .15s}
.linklist a:hover{border-color:var(--red);background:var(--panel2);color:var(--red2)}

/* ---- адаптив ---- */
@media(max-width:760px){
  .mgrid{grid-template-columns:1fr 1fr;gap:8px}
}
@media(max-width:430px){
  .mgrid{grid-template-columns:1fr}
}

/* ===== хаб всех брендов (/brand/) ===== */
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:8px;margin:14px 0}
.bgrid.feat{grid-template-columns:repeat(auto-fill,minmax(195px,1fr))}
.bcard{display:flex;flex-direction:column;gap:3px;border:1px solid var(--line);background:var(--panel);padding:13px 15px;text-decoration:none;transition:border-color .15s,background .15s}
.bcard:hover{border-color:var(--red);background:var(--panel2)}
.bcard-name{font-family:var(--sans);font-weight:700;font-size:15px;color:var(--txt)}
.bcard:hover .bcard-name{color:var(--red2)}
.bcard-n{font-family:var(--mono);font-size:11px;color:var(--muted)}
.bgrid.feat .bcard{padding:18px}
.bgrid.feat .bcard-name{font-size:17px}

.howto{margin:14px 0;padding-left:20px;display:grid;gap:8px}
.howto li{font-family:var(--serif);font-size:16px;color:var(--muted);line-height:1.5}
.howto li b{color:var(--txt);font-family:var(--sans)}
.mono{font-family:var(--mono);font-size:.92em;color:var(--red2)}

@media(max-width:760px){ .bgrid,.bgrid.feat{grid-template-columns:1fr 1fr} }
@media(max-width:430px){ .bgrid,.bgrid.feat{grid-template-columns:1fr} }

/* ===== главная (VIN decoder лендинг) ===== */
.hero-home{padding-bottom:14px}
.hero-home .wrap{display:block}              /* убрать grid 180px|1fr от бренд/модели — он зажимал герой в левую колонку */
.home-hero{max-width:880px;margin:0;text-align:left;padding:6px 0 6px}  /* слева и широко, как на других страницах */
.home-hero .tags{justify-content:flex-start}
.home-hero h1{margin:10px 0}
.home-hero .dek{margin:0;max-width:62ch}
/* юр/инфо-страницы — читаемая колонка, прижата ВЛЕВО (единый редакц. стиль сайта) */
.article.legal{max-width:820px;margin:0}

/* ===== генератор виджета ===== */
.wgen{display:grid;grid-template-columns:300px 1fr;gap:24px;margin:18px 0 8px;align-items:start}
.wgen-ctl{display:flex;flex-direction:column;gap:16px;border:1px solid var(--line);background:var(--panel);padding:18px}
.wg-row{display:flex;flex-direction:column;gap:7px}
.wg-row label{font-family:var(--sans);font-weight:800;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.wg-acc{display:flex;align-items:center;gap:10px}
.wg-acc input[type=color]{width:46px;height:38px;border:1px solid var(--line2);background:none;padding:2px;cursor:pointer}
.wg-acc code,.wg-rng code{font-family:var(--mono);font-size:13px;color:var(--txt)}
.wg-swatches{display:flex;gap:8px;flex-wrap:wrap}
.wg-swatches button{width:26px;height:26px;border:1px solid var(--line2);cursor:pointer;padding:0;border-radius:2px}
.wg-swatches button:hover{border-color:#fff}
.wg-rng{display:flex;align-items:center;gap:12px}
.wg-rng input[type=range]{flex:1;accent-color:var(--red)}
.wgen-prev{border:1px solid var(--line);background:#0e0e10;padding:24px;display:flex;flex-direction:column;gap:14px;min-height:210px}
.wg-prev-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
#wPreviewHost{display:flex;justify-content:center}
.wg-code{margin-top:18px;border:1px solid var(--line);background:var(--panel)}
.wg-code-h{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid var(--line);font-family:var(--sans);font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
#wCode{width:100%;border:none;background:#0a0a0b;color:var(--txt);font-family:var(--mono);font-size:12.5px;padding:13px 14px;resize:vertical;line-height:1.5;outline:none}
@media(max-width:760px){.wgen{grid-template-columns:1fr}}
/* .vinform.big (+ .vinput/.vbtn) вынесены в base.css — общий компонент */
.trust{margin-top:14px;font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.04em}
.trust b{color:var(--txt)}
/* license-plate воронка: state-select в hero-форме + честная микрокопия/дисклеймер */
.plstate{flex:0 0 auto;min-width:150px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px}
.vinform.big .plstate{font-size:15px;letter-spacing:0;text-transform:none;padding-right:40px}
.plmicro{margin-top:14px;font-size:13.5px;color:rgba(255,255,255,.95);max-width:640px;line-height:1.5}
.affdisc{margin-top:7px;font-size:11.5px;color:rgba(255,255,255,.6);max-width:640px;line-height:1.45}
.rail .vinbox .plstate{font-size:13px;letter-spacing:0;text-transform:none;padding-right:34px;background-position:right 11px center}
.getgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(225px,1fr));gap:10px;margin:16px 0}
.getcard{border:1px solid var(--line);background:var(--panel);padding:15px 16px;display:flex;flex-direction:column;gap:4px;text-decoration:none;transition:border-color .15s,background .15s}
a.getcard:hover{border-color:var(--red);background:var(--panel2)}
.getcard b{font-family:var(--sans);font-size:15px;color:var(--txt);display:flex;align-items:center;gap:6px}
a.getcard:hover b{color:var(--red2)}
a.getcard b::after{content:'→';margin-left:auto;opacity:0;transform:translateX(-4px);color:var(--red2);font-weight:700;transition:opacity .15s,transform .15s}
a.getcard:hover b::after{opacity:1;transform:none}
.getcard span{font-family:var(--serif);font-size:14px;color:var(--muted);line-height:1.4}
.morelink{color:var(--red2);font-weight:700;text-decoration:none}
.morelink:hover{text-decoration:underline}

@media(max-width:760px){
  .getgrid{grid-template-columns:1fr 1fr}
  /* home-hero — НЕ флекс (иначе бренд/модель reorder из base.css кидает форму выше H1).
     Блочный = DOM-порядок: теги → H1 → описание → форма → микрокопия. */
  .home-hero{display:block!important;text-align:left}
  .home-hero .tags{order:0;margin:0 0 12px}
  .home-hero h1,.home-hero .dek{order:0}
  .home-hero .tags,.home-hero .dek{margin-left:0}
  /* form-страницы (vin-check, license-plate): быстрые ссылки ВНИЗ под описание — как в стикерах.
     catch-all order:4 на остальных детях защищает форму/микрокопию от прыжка наверх. */
  .home-hero.qlinks-bottom{display:flex!important;flex-direction:column}
  .home-hero.qlinks-bottom > *{order:4}
  .home-hero.qlinks-bottom h1{order:1}
  .home-hero.qlinks-bottom .dek{order:2}
  .home-hero.qlinks-bottom .tags{order:3;margin:16px 0 0}
  .vinform.big{flex-direction:column}
  .vinform.big .plstate{padding-right:40px}
}
@media(max-width:430px){ .getgrid{grid-template-columns:1fr} }

/* .reportbtn / .finehint вынесены в base.css (общий компонент, нужен и на window-sticker) */

/* VIN decode результат — breakdown с подсветкой */
.vinbreak{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:14px 0}
.vb-cell{border:1px solid var(--line);background:var(--panel);padding:10px 8px;text-align:center}
.vb-pos{font-family:var(--mono);font-size:10px;color:var(--muted)}
.vb-chars{font-family:var(--mono);font-size:17px;font-weight:700;color:var(--red2);letter-spacing:1px;margin:4px 0;word-break:break-all}
.vb-sec{font-family:var(--sans);font-size:11px;font-weight:700;text-transform:uppercase;color:var(--txt)}
.vb-mean{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.3}
/* key-value decode таблица */
.article section table th{text-align:left;color:var(--muted);font-weight:600;white-space:nowrap;padding-right:18px;vertical-align:top}
@media(max-width:600px){ .vinbreak{grid-template-columns:repeat(3,1fr)} }