/* ============================================================
   vologdavezdehod.ru — внутренние страницы: модели, политика, 404
   Подключать после tokens.css → base.css → main.css. Хексы не пишем.
   Разделы: 1 общее (крошки) · 2 первый экран модели · 3 кому подойдёт ·
   4 характеристики · 5 опции · 6 комплект · 7 галерея · 8 доставка ·
   9 другие модели · 10 политика · 11 404
   ============================================================ */

/* ---------- 1. Общее ---------- */
/* .photo--nook рисует виньетку абсолютом, но сам .photo не позиционирован — на внутренних страницах закрепляем */
.photo { position: relative; }
/* <picture> — блочный с авто-высотой, из-за него img height:100% не срабатывает у кадров не 4:3 */
.photo picture { height: 100%; }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--c-text-dim); }
.crumbs li { display: flex; align-items: center; gap: var(--sp-2); }
.crumbs li + li::before { content: "/"; color: var(--c-steel-light); }
.crumbs a { color: var(--c-text-muted); transition: color var(--dur-base); }
.crumbs a:hover { color: var(--c-text); }
.crumbs [aria-current] { color: var(--c-text); }

/* ---------- 2. Первый экран модели ---------- */
.mhero { position: relative; overflow: hidden; isolation: isolate; }
.mhero__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); padding-block: clamp(1.25rem, 1rem + 1.5vw, 2.5rem) clamp(2rem, 1rem + 3vw, 4rem); }
@media (min-width: 820px) {
  .mhero__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(2rem, 1rem + 3vw, 4rem); padding-block: var(--sp-6) var(--sp-7); min-height: calc(82svh - var(--header-h)); }
}
.mhero__copy { display: grid; gap: var(--sp-4); align-content: center; }
@media (max-width: 819px) {
  .mhero__copy { display: contents; }
  .mhero__crumbs { order: 1; } .mhero__chips { order: 2; } .mhero__title { order: 3; } .mhero__media { order: 4; margin-block: var(--sp-2); }
  .mhero__lead { order: 5; } .mhero__pricebox { order: 6; } .mhero__actions { order: 7; } .mhero__note { order: 8; }
}
.mhero__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.mhero__title { font-size: clamp(2.25rem, 1.2rem + 3.8vw, 4.25rem); max-width: 16ch; line-height: var(--lh-tight); }
.mhero__title .accent { display: inline-block; }
.mhero__lead { max-width: 54ch; }
.mhero__pricebox { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); }
.mhero__pricebox .model__price .price { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); }
.mhero__pricenote { font-size: var(--fs-sm); color: var(--c-text-muted); max-width: 24ch; line-height: 1.35; }
.mhero__pricenote b { color: var(--c-text); font-weight: var(--fw-bold); white-space: nowrap; }
.mhero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.mhero__actions .btn { flex: 1 1 12rem; }
@media (min-width: 560px) { .mhero__actions .btn { flex: 0 0 auto; } }
.mhero__note { font-size: var(--fs-xs); color: var(--c-text-dim); display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.mhero__note::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-success); box-shadow: 0 0 8px var(--c-success); }
.mhero__note a { color: var(--c-text-muted); }
.mhero__note a:hover { color: var(--c-text); }
.mhero__media { position: relative; min-width: 0; }
.mhero__media .photo { box-shadow: var(--shadow-2); border-radius: var(--r-3); }
.mhero__media::before { content: ""; position: absolute; left: 8%; right: 8%; bottom: -1px; height: 2px; z-index: 1; background: linear-gradient(90deg, transparent, var(--c-accent), transparent); opacity: 0.8; }
.mhero__corner { position: absolute; width: 14px; height: 14px; border: 2px solid var(--c-accent); opacity: 0.8; z-index: 2; pointer-events: none; }
.mhero__corner.tl { top: -6px; left: -6px; border-right: 0; border-bottom: 0; }
.mhero__corner.br { bottom: -6px; right: -6px; border-left: 0; border-top: 0; }

/* ---------- 3. Кому подойдёт ---------- */
.fit__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
@media (min-width: 820px) { .fit__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; } }
.fit__text { display: grid; gap: var(--sp-4); max-width: 62ch; font-size: var(--fs-lg); line-height: 1.5; }
.fit__text p + p { margin: 0; }
.fit__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.fit__tiles .tile { min-height: 6rem; }
.fit__tiles .tile__value { font-size: clamp(1.125rem, 0.9rem + 1vw, 1.75rem); overflow-wrap: normal; hyphens: manual; -webkit-hyphens: manual; }

/* ---------- 4. Характеристики ---------- */
.spec__scroll.compare__scroll { overflow-x: visible; }
.spec .ctable { min-width: 0; table-layout: fixed; }
.spec .ctable colgroup col:first-child { width: 38%; }
@media (min-width: 560px) { .spec .ctable colgroup col:first-child { width: 34%; } }
.spec .ctable th[scope="row"] { position: static; box-shadow: none; font-size: var(--fs-sm); }
.spec .ctable .group th { font-size: var(--fs-2xs); padding-block: var(--sp-2); }
.spec .ctable td.best { box-shadow: inset 3px 0 0 var(--c-accent); }
.spec__foot { display: flex; align-items: flex-start; gap: var(--sp-3); margin-top: var(--sp-4); padding: var(--sp-4) var(--sp-5); background: var(--c-surface); border: var(--border); border-left: 3px solid var(--c-accent); border-radius: var(--r-2); color: var(--c-text-muted); font-size: var(--fs-sm); }
.spec__foot svg { width: 20px; height: 20px; flex: none; color: var(--c-accent); margin-top: 0.1em; }
.spec__foot b { color: var(--c-text); white-space: nowrap; }
.spec__cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sp-3); margin-top: var(--sp-5); color: var(--c-text-muted); }
.spec__cta .link { color: var(--c-text); font-family: var(--ff-display); font-weight: var(--fw-display-light); font-size: var(--fs-lg); text-decoration: none; }
.spec__cta .link:hover { color: var(--c-accent); }

/* ---------- 5. Опции ---------- */
.options__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
@media (min-width: 560px) { .options__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ocard-opt { display: grid; gap: var(--sp-3); align-content: start; }
.ocard-opt__t { font-family: var(--ff-body); font-weight: var(--fw-bold); font-size: var(--fs-lg); text-transform: none; letter-spacing: 0; line-height: var(--lh-snug); }
.ocard-opt__price { font-family: var(--ff-display); font-weight: var(--fw-display); font-size: var(--fs-2xl); line-height: 1; color: var(--c-accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ocard-opt__price .cur { font-weight: var(--fw-display-light); font-size: 0.6em; margin-left: 0.15em; opacity: 0.8; }
.ocard-opt p { color: var(--c-text-muted); font-size: var(--fs-sm); }
.options__note { margin-top: var(--sp-5); color: var(--c-text-muted); max-width: 64ch; }

/* ---------- 6. Что в комплекте ---------- */
.kit { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
@media (min-width: 560px) { .kit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .kit--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kit li { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4); background: var(--c-surface); border: var(--border); border-radius: var(--r-2); line-height: 1.4; transition: border-color var(--dur-base) var(--ease-out); }
.kit li:hover { border-color: var(--c-border-strong); }
.kit li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 0.55em; background: var(--c-accent); transform: rotate(45deg); box-shadow: 0 0 8px rgba(242, 107, 29, 0.5); }
.kit__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-4); }
.kit__head .model__price { align-self: center; }

/* ---------- 7. Галерея ---------- */
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); grid-auto-flow: dense; }
@media (min-width: 820px) { .gallery { gap: var(--sp-4); } .gallery--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .gallery--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gallery__item { min-width: 0; }
.gallery__item .photo { height: 100%; box-shadow: var(--shadow-1); }
.gallery__item--tall { grid-row: span 2; }
.gallery__item--tall .photo { aspect-ratio: auto; }
.gallery__item--wide { grid-column: span 2; }
.gallery__item--wide .photo { aspect-ratio: auto; }
@media (max-width: 559px) { .gallery__item--wide .photo { aspect-ratio: 2 / 1; } }
.gallery__foot { margin-top: var(--sp-4); font-size: var(--fs-xs); color: var(--c-text-dim); }

/* ---------- 8. Доставка кратко ---------- */
.dlv { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
@media (min-width: 820px) { .dlv { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; } }
.dlv__text { display: grid; gap: var(--sp-4); max-width: 60ch; }
.dlv__text p { color: var(--c-text-muted); }
.dlv__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); }
.dlv__actions .btn { flex: 1 1 11rem; }
@media (min-width: 560px) { .dlv__actions .btn { flex: 0 0 auto; } }
.dlv__card { display: grid; gap: var(--sp-3); padding: var(--sp-5); background: var(--c-bg-deep); border: var(--border); border-radius: var(--r-2); background-image: var(--grid); background-size: 32px 32px; }
.dlv__card .tile { background: var(--c-surface); }
.dlv__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.dlv__ways { display: grid; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--c-text-muted); }
.dlv__ways b { color: var(--c-text); }
.dlv__ways li { display: flex; gap: var(--sp-3); }
.dlv__ways li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 0.6em; background: var(--c-accent); transform: rotate(45deg); }

/* ---------- 9. Другие модели ---------- */
.others { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
@media (min-width: 560px) { .others { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); } }
.ocard { display: grid; grid-template-rows: auto 1fr; padding: 0; overflow: hidden; }
.ocard .photo { border-radius: 0; }
.ocard__body { display: grid; gap: var(--sp-3); align-content: start; padding: clamp(1.125rem, 1rem + 0.8vw, 1.75rem); }
.ocard__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2) var(--sp-4); }
.ocard__name { font-size: var(--fs-2xl); line-height: 1; }
.ocard__price { font-family: var(--ff-display); font-weight: var(--fw-display-light); font-size: var(--fs-xl); color: var(--c-accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ocard p { color: var(--c-text-muted); font-size: var(--fs-sm); }
.ocard__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); }
.ocard__actions .btn { flex: 1 1 10rem; }
@media (min-width: 560px) { .ocard__actions .btn { flex: 0 0 auto; } }
.others__all { margin-top: var(--sp-5); display: flex; justify-content: center; }

/* Форма на странице модели: имя модели показываем всегда */
.lead-form__model:not([hidden]) { display: block; }

/* ---------- 10. Политика ---------- */
.doc-head { padding-block: clamp(2rem, 1rem + 3vw, 4rem) 0; }
.doc-head .crumbs { margin-bottom: var(--sp-5); }
.doc-head h1 { font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem); max-width: 22ch; }
.doc-head__date { display: block; margin-top: var(--sp-4); }
.doc { max-width: 72ch; padding-block: clamp(2rem, 1rem + 3vw, 4rem) var(--section-y); }
.doc h2 { font-size: var(--fs-xl); margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); margin-bottom: var(--sp-3); padding-top: var(--sp-4); border-top: var(--border); }
.doc h2:first-of-type { margin-top: var(--sp-2); }
.doc p, .doc li { color: var(--c-text); line-height: 1.6; }
.doc p + p, .doc ul + p, .doc p + ul { margin-top: var(--sp-3); }
.doc ul { display: grid; gap: var(--sp-2); padding-left: 1.25em; list-style: disc; margin-top: var(--sp-3); }
.doc li::marker { color: var(--c-accent); }
.doc a.link { overflow-wrap: anywhere; }
.doc__contacts { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); padding: var(--sp-4) var(--sp-5); background: var(--c-surface); border: var(--border); border-left: 3px solid var(--c-accent); border-radius: var(--r-2); font-style: normal; }
.doc__contacts a { color: var(--c-text); font-weight: var(--fw-bold); }
.doc__contacts a:hover { color: var(--c-accent); }
.doc__back { margin-top: var(--sp-6); display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ---------- 11. 404 ---------- */
.nf { position: relative; overflow: hidden; isolation: isolate; min-height: calc(100svh - var(--header-h-mobile)); display: grid; place-items: center; text-align: center; padding-block: var(--section-y); }
@media (min-width: 820px) { .nf { min-height: calc(100svh - var(--header-h)); } }
.nf__in { display: grid; justify-items: center; gap: var(--sp-4); max-width: 40rem; }
.nf__code { font-family: var(--ff-display); font-weight: var(--fw-display); font-size: clamp(7rem, 3rem + 24vw, 20rem); line-height: 0.9; letter-spacing: -0.02em; color: var(--c-accent); text-shadow: 0 0 48px rgba(242, 107, 29, 0.35); font-variant-numeric: tabular-nums; }
.nf h1 { font-size: var(--fs-2xl); }
.nf__text { color: var(--c-text-muted); max-width: 44ch; }
.nf__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-2); }
.nf__actions .btn { flex: 1 1 12rem; }
@media (min-width: 560px) { .nf__actions .btn { flex: 0 0 auto; } }
.nf__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); color: var(--c-text-dim); }
.nf__links a { color: var(--c-text-muted); }
.nf__links a:hover { color: var(--c-accent); }