/* Главная в новом дизайне (2026-10-19): тело страницы в видах А «Тихий», Б «Витрина», В «Табло» по макету
   project-memory/design/2026-10-19-redesign/ (функции home() в a-quiet / b-showcase / c-board).
   Всё под html[data-skin] (атрибут ставит js/skin.js всегда, по умолчанию А; старого вида нет).
   Токены (--sk-*) — css/skins/{a,b,c}.css; шапка — base.css; карточка машины — css/lot-card.css.
   Разметка: index.html (форма поиска переезжает под заголовок — js/home-skin.js).
   Телефон (≤ 760 px): полок нет (кроме «Недавно осмотрели» — списком), дальше «Кто мы и как это работает».
   Порядок: каркас → форма → полки → блок «как это работает» → услуги → контакты → подвал → Б → В → телефон. */

/* ---------- Каркас ---------- */
html[data-skin] .page-seo-intro > .container,
html[data-skin] .skin-home-how > .container,
html[data-skin] #services > .container,
html[data-skin] #contact > .container,
html[data-skin] .footer > .container {
  box-sizing: border-box;
  max-width: var(--sk-wrap);
  margin: 0 auto;
  padding: 0 var(--sk-gut);
}
html[data-skin] .page-seo-intro h1,
html[data-skin] #homeHow h2,
html[data-skin] #services h2,
html[data-skin] #contact h2,
html[data-skin] .home-shelf-title {
  font-family: var(--sk-font);
  color: var(--sk-ink);
  letter-spacing: -0.01em;
  text-transform: none;
}

/* Заголовок и подзаголовок */
html[data-skin] .page-seo-intro {
  padding: 56px 0 0;
  background: transparent;
  border-bottom: 0;
}
html[data-skin] .page-seo-intro h1 {
  max-width: 18ch;
  margin: 0 0 14px;
  font-size: 44px;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
html[data-skin] .page-seo-intro .section-lead {
  max-width: 62ch;
  margin: 0 0 28px;
  color: var(--sk-muted);
  font: 400 15px/1.45 var(--sk-font);
}
html[data-skin] .skin-home-facts {
  flex-wrap: wrap;
  gap: 12px 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
html[data-skin] .skin-home-facts li { display: flex; flex-direction: column; margin: 0; }
html[data-skin] .skin-home-facts b { font-weight: 700; }

/* Форма поиска — общий блок главной и поиска США: css/search-block.css (03.11) */

/* ---------- Полки (монитор): новая карточка из js/lot-card ---------- */
html[data-skin] .home-shelves-section { padding: 0; background: none; }
html[data-skin] .home-shelves {
  box-sizing: border-box;
  max-width: var(--sk-wrap);
  padding: 0 var(--sk-gut);
  gap: 0;
}
html[data-skin] .home-shelf { margin: 44px 0 0; }
html[data-skin] .home-shelf-head { align-items: baseline; margin: 0 0 14px; }
html[data-skin] .home-shelf-title {
  display: block;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
}
html[data-skin] .home-shelf-count {
  margin-left: 10px;
  color: var(--sk-muted);
  font: 400 14px/1 var(--sk-font);
  letter-spacing: 0;
}
html[data-skin] a.home-shelf-all.site-text-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--sk-muted);
  font: 400 14px/1.3 var(--sk-font);
  letter-spacing: 0;
  text-transform: none;
}
html[data-skin] a.home-shelf-all.site-text-btn::after { content: " ›"; position: static; height: auto; background: none; }
html[data-skin] a.home-shelf-all.site-text-btn:hover { color: var(--sk-ink); }
html[data-skin] .home-shelf-scroller { overflow: visible; margin: 0; padding: 0; }
html[data-skin] .home-shelf-track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
html[data-skin] .home-shelf-page { display: contents; }
html[data-skin] .home-shelf-dots { display: none; }

/* ---------- «Кто мы и как это работает» (телефон; у В — колонка справа) ---------- */
html[data-skin] .skin-home-how { padding: 40px 0 0; }
html[data-skin] #homeHow h2 { margin: 0 0 10px; font-size: 22px; font-weight: 600; line-height: 1.2; }
html[data-skin] .skin-home-how__about { margin: 0 0 18px; color: var(--sk-muted); font: 400 15px/1.5 var(--sk-font); }
html[data-skin] .skin-home-how__steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: how;
  font: 400 15px/1.45 var(--sk-font);
}
html[data-skin] .skin-home-how__steps li {
  position: relative;
  margin: 0;
  padding: 12px 0 12px 40px;
  border-top: 1px solid var(--sk-line);
  counter-increment: how;
}
html[data-skin] .skin-home-how__steps li::before {
  content: counter(how);
  position: absolute;
  left: 0;
  top: 11px;
  width: 26px;
  height: 26px;
  border: 1px solid var(--sk-ink);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 600 13px/1 var(--sk-font);
}
html[data-skin] .skin-home-facts--how {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 6px 0 0;
  padding: 14px 0;
  border-top: 1px solid var(--sk-ink);
  border-bottom: 1px solid var(--sk-line);
}
html[data-skin] .skin-home-facts--how b { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
html[data-skin] .skin-home-facts--how span { color: var(--sk-muted); font: 400 12px/1.3 var(--sk-font); }
html[data-skin] .skin-home-how__prices { margin: 18px 0 0; }
html[data-skin] .skin-home-how__prices h3 {
  margin: 0 0 4px;
  color: var(--sk-muted);
  font: 600 12px/1.3 var(--sk-font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
html[data-skin] .skin-home-how__prices a {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--sk-line);
  color: var(--sk-ink);
  font: 400 15px/1.3 var(--sk-font);
  text-decoration: none;
}
html[data-skin] .skin-home-how__prices a b { font-weight: 600; letter-spacing: 0.06em; }
html[data-skin] .skin-home-how__prices a > span { font-weight: 600; white-space: nowrap; }

/* ---------- Услуги ---------- */
html[data-skin] #services { padding: 64px 0 0; background: none; }
html[data-skin] #services h2 { margin: 0 0 16px; font-size: 22px; font-weight: 600; line-height: 1.2; text-align: left; }
html[data-skin] #services .services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin: 0;
  padding: 0;
}
html[data-skin] #services .service {
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 0;
  padding: 14px 0 0;
  border: 0;
  border-top: 1px solid var(--sk-ink);
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--sk-ink);
  font-family: var(--sk-font);
}
html[data-skin] #services .service::before,
html[data-skin] #services .service::after { display: none; }
html[data-skin] #services .service-icon { display: none; }
html[data-skin] #services .service-body { padding: 0; margin: 0; }
html[data-skin] #services .service h3 {
  margin: 0;
  color: var(--sk-muted);
  font: 600 12px/1.3 var(--sk-font);
  letter-spacing: 0.12em;
}
html[data-skin] #services .service-subtitle { margin: 6px 0; color: var(--sk-ink); font: 600 17px/1.3 var(--sk-font); }
html[data-skin] #services .service-tagline { margin: 0 0 12px; color: var(--sk-muted); font: 400 14px/1.45 var(--sk-font); }
html[data-skin] #services .service-footer { margin: auto 0 0; padding: 0; border: 0; background: none; }
html[data-skin] #services .service-price-badge {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--sk-ink);
  font-family: var(--sk-font);
  text-align: left;
  cursor: pointer;
}
html[data-skin] #services .service-price-copy { display: inline-flex; gap: 4px; align-items: baseline; }
html[data-skin] #services .service-price-from,
html[data-skin] #services .service-price-amount { color: var(--sk-ink); font: 600 15px/1.3 var(--sk-font); letter-spacing: 0; text-transform: none; }
html[data-skin] #services .service-price-cta { color: var(--sk-muted); font: 400 13px/1.3 var(--sk-font); letter-spacing: 0; text-transform: none; }
html[data-skin] #services .service-price-badge:hover .service-price-cta { color: var(--sk-ink); }

/* ---------- Контакты ---------- */
html[data-skin] #contact { padding: 64px 0 0; background: none; }
html[data-skin] #contact h2 { margin: 0 0 16px; font-size: 22px; font-weight: 600; line-height: 1.2; text-align: left; }
html[data-skin] #contact .contact-info {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, max-content));
  gap: 4px 48px;
  max-width: none;
  margin: 0;
  padding: 14px 0 0;
  border: 0;
  border-top: 1px solid var(--sk-ink);
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-align: left;
  font: 400 15px/1.5 var(--sk-font);
  color: var(--sk-ink);
}
html[data-skin] #contact .contact-info h3 {
  grid-column: 1 / -1;
  margin: 0 0 4px;
  color: var(--sk-muted);
  font: 600 12px/1.3 var(--sk-font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
html[data-skin] #contact .contact-info p { margin: 0; color: var(--sk-ink); font: inherit; }
html[data-skin] #contact .contact-link { color: var(--sk-ink); font-weight: 500; text-decoration: none; }
html[data-skin] #contact .contact-link:hover { color: var(--sk-accent); }

/* ---------- Подвал ---------- */
html[data-skin] .footer {
  margin: 72px 0 0;
  padding: 28px 0 36px;
  border-top: 1px solid var(--sk-line);
  background: var(--sk-page-bg);
  color: var(--sk-muted);
  font: 400 14px/1.5 var(--sk-font);
  text-align: left;
}
html[data-skin] .footer > .container { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; }
html[data-skin] .footer p { margin: 0; color: inherit; font: inherit; }
html[data-skin] .footer p.logo { flex-basis: 100%; margin: 0 0 4px; color: var(--sk-ink); }
html[data-skin] .footer .footer-link { color: inherit; font: inherit; text-decoration: none; letter-spacing: 0; text-transform: none; }
html[data-skin] .footer .footer-link:hover { color: var(--sk-ink); }

/* =================== Б «Витрина»: тёмный первый экран, карточки с тенью =================== */

/* =================== В «Табло»: плотно, полки слева, услуги/как это работает/контакты справа =================== */

/* VIN и лот у вида В — в поиске шапки */

/* Боковые коробки: как это работает · услуги · контакты */

/* =================== Узкий монитор: полка — лента с прокруткой =================== */
@media (max-width: 1100px) and (min-width: 761px) {
  html[data-skin] .home-shelf-scroller { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
  html[data-skin] .home-shelf-track { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(200px, 30%); padding-bottom: 8px; }
  html[data-skin] .home-shelf-track .lc { scroll-snap-align: start; }
}

/* Монитор: блок «как это работает» — только у вида В (в колонке); у А и Б на мониторе — полки */
@media (min-width: 761px) {
  html[data-skin="a"] #homeHow{ display: none; }
}

/* =================== Телефон (≤ 760 px): полок нет, вместо них «Кто мы и как это работает» =================== */
@media (max-width: 760px) {
  /* Из полок на телефоне — только «Недавно осмотрели» (списком), первым блоком после поиска */
  html[data-skin] .home-shelf:not(.home-shelf--watching) { display: none; }

  html[data-skin] .page-seo-intro { padding-top: 28px; }
  html[data-skin] .page-seo-intro h1 { font-size: 30px; }
  html[data-skin] .page-seo-intro .section-lead { margin-bottom: 20px; font-size: 14px; }

  html[data-skin] .skin-home-how { padding-top: 34px; }
  html[data-skin] #services,
  html[data-skin] #contact { padding-top: 40px; }
  html[data-skin] #services .services { grid-template-columns: 1fr; gap: 24px; }
  html[data-skin] #contact .contact-info { grid-template-columns: 1fr; }
  html[data-skin] .footer { margin-top: 48px; }

  /* Б на телефоне */

  /* В на телефоне: коробки одна под другой */

}

/* =================== «Недавно осмотрели» (js/home-watching.js): первая, крупнее, отдельным блоком =================== */
html[data-skin] .home-shelf--watching { order: -1; }
html[data-skin] .home-watch-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
/* До «Все» — только первые 4 (сильнее правил раскладки карточки у видов) */
html[data-skin] .home-shelf--watching:not(.is-open) .home-watch-more { display: none !important; }
html[data-skin] .home-watch-all {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sk-muted);
  font: 400 14px/1.3 var(--sk-font);
  cursor: pointer;
  white-space: nowrap;
}
html[data-skin] .home-watch-all:hover { color: var(--sk-ink); }
html[data-skin] .home-watch-all:focus-visible { outline: 2px solid var(--sk-ink); outline-offset: 2px; }
html[data-skin] .home-shelf--watching .lc-tag--done { background: var(--sk-ink); color: #fff; }
html[data-skin] .home-shelf--watching .lc.is-ended .lc-img { filter: grayscale(0.5); opacity: 0.85; }
html[data-skin] .home-shelf--watching .lc-ended { color: var(--sk-muted); font-weight: 500; }

/* А: светло-серая подложка во всю ширину колонки */
html[data-skin="a"] .home-shelf--watching { margin-top: 36px; padding: 20px 24px 24px; border-radius: 8px; background: var(--sk-soft); }
html[data-skin="a"] .home-shelf--watching .home-shelf-head { border-bottom: 1px solid var(--sk-ink); padding-bottom: 10px; margin-bottom: 18px; }
/* Б: белая карточка с тенью на сером */

/* В: панель с синей полосой сверху */

@media (max-width: 1100px) and (min-width: 761px) {
  html[data-skin] .home-watch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}

/* Телефон: список вниз (карточка-строка), 4 машины + «Все» — одной общей карточкой */
@media (max-width: 760px) {
  html[data-skin] .home-shelves { padding: 0 var(--sk-gut); }
  html[data-skin] .home-shelf--watching { margin-top: 28px; }
  html[data-skin] .home-watch-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  html[data-skin] .home-shelf--watching .home-shelf-title { font-size: 20px; }
  html[data-skin="a"] .home-shelf--watching { padding: 14px 14px 4px; }
  html[data-skin="a"] .home-shelf--watching .home-shelf-head { margin-bottom: 0; }
  html[data-skin="a"] .home-shelf--watching .lc.lc--row:last-child,
  html[data-skin="a"] .home-shelf--watching:not(.is-open) .lc.lc--row:nth-child(4) { border-bottom: 0; }
  /* Б: строка у Б — большая фото-карточка; здесь — компактный список, как у А и В */

  html[data-skin] .home-shelf--watching .lc--row .lc-tag { right: 4px; top: auto; bottom: 4px; padding: 1px 6px; font-size: 10px; white-space: nowrap; }
}