/* Главная по макету v1 (docs/design/src/v1.html): заголовок по центру, форма поиска в рамке, полки по 4 в ряд (на телефоне — списком),
   плашка вместо пустой полки объявлений, подвал. Подключается после page-home.css и переопределяет его. */

/* ---------- Первый экран ---------- */
html[data-skin] .page-seo-intro { padding: 44px 0 8px; text-align: center; }
html[data-skin] .page-seo-intro h1 { max-width: none; margin: 0 0 8px; font-size: 40px; font-weight: 700; line-height: 1.15; letter-spacing: -.015em; text-wrap: balance; }
html[data-skin] .page-seo-intro .section-lead { max-width: 620px; margin: 0 auto 24px; color: var(--sk-muted); font-size: 16px; }
/* рамка формы поиска, вкладка, «Показать N» — общий css/search-block.css (03.11) */

/* ---------- Полки: 4 в ряд ---------- */
html[data-skin] .home-shelf { margin-top: 36px; }
html[data-skin] .home-shelf-title { font-size: 22px; font-weight: 600; }
html[data-skin] a.home-shelf-all.site-text-btn { color: var(--sk-accent); font-weight: 500; }
html[data-skin] a.home-shelf-all.site-text-btn:hover { color: var(--sk-accent-h); text-decoration: underline; }
html[data-skin] .home-shelf-track { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
html[data-skin] .home-shelf .lc.lc--tile { border: 1px solid var(--sk-line); border-radius: 12px; overflow: hidden; background: #fff; }
html[data-skin] .home-shelf .lc.lc--tile > :not(.lc-ph) { padding-left: 14px; padding-right: 14px; }
html[data-skin] .home-shelf .lc.lc--tile .lc-ph { margin-bottom: 10px; }
html[data-skin] .home-shelf .lc.lc--tile > :last-child { padding-bottom: 14px; }

/* ---------- Объявления на главной (js/home-obv.js) ---------- */
html[data-skin] #homeObvSlot { box-sizing: border-box; max-width: var(--sk-wrap); margin: 36px auto 0; padding: 0 var(--sk-gut); }
html[data-skin] #homeObvSlot[hidden] { display: none; }
.hv-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.hv-head h2 { margin: 0; font-size: 22px; font-weight: 600; }
.hv-head a { color: var(--sk-accent); font-size: 14px; font-weight: 500; text-decoration: none; }
.hv-head a:hover { text-decoration: underline; }
.hv-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.hv-card { display: block; border: 1px solid var(--sk-line); border-radius: 12px; overflow: hidden; background: #fff; color: var(--sk-ink); text-decoration: none; }
.hv-ph { position: relative; aspect-ratio: 4 / 3; background: linear-gradient(160deg, #eceff3, #d5dae1); }
.hv-ph svg, .hv-ph img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hv-ph img { object-fit: cover; }
.hv-ph .noph { position: absolute; inset: 0; }
.hv-ph .noph__ic { position: static; width: 34%; height: auto; }
.hv-cb { padding: 12px 14px 14px; }
.hv-cb h3 { margin: 0; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
/* имя объявления (запчасть: «Фара для Toyota Camry XV70 (2017–2024)») — не больше 2 строк, дальше «…» (02.11) */
.hv-cb h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.hv-m { color: var(--sk-muted); font-size: 14px; margin: 2px 0 8px; }
.hv-p { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.hv-p b { font-size: 20px; font-weight: 700; }
.hv-disc { font-style: normal; padding: 0 5px; border-radius: 999px; background: #c62828; color: #fff; font-size: 12px; font-weight: 700; }
.hv-p span { font-size: 13px; color: var(--sk-muted); }
.hv-note { display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid var(--sk-line); border-radius: 14px; background: var(--sk-soft); padding: 22px 24px; }
.hv-note h2 { margin: 0 0 4px; font-size: 22px; font-weight: 600; }
.hv-note p { margin: 0; color: var(--sk-muted); }
.hv-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 28px; border-radius: 8px; background: var(--sk-accent); color: #fff; font-size: 16px; font-weight: 600; text-decoration: none; }
.hv-btn:hover { background: var(--sk-accent-h); }

/* ---------- Подвал ---------- */
html[data-skin] .ft { margin-top: 48px; border-top: 1px solid var(--sk-line); background: var(--sk-soft); padding: 32px 0 24px; font-size: 14px; color: var(--sk-muted); }
html[data-skin] .ft > .container { box-sizing: border-box; max-width: var(--sk-wrap); margin: 0 auto; padding: 0 var(--sk-gut); }
.ft-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 24px; }
.ft h4 { margin: 0 0 8px; color: var(--sk-ink); font-size: 14px; }
.ft a { display: block; padding: 2px 0; color: inherit; text-decoration: none; }
.ft a:hover { color: var(--sk-accent); }
.ft-lg { font-size: 22px; font-weight: 700; color: var(--sk-accent); margin-bottom: 6px; }
.ft-cp { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--sk-line); font-size: 13px; }

/* ---------- Монитор поуже и телефон ---------- */
@media (max-width: 1000px) {
  html[data-skin] .home-shelf-track, .hv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  html[data-skin] .page-seo-intro { padding-top: 24px; }
  html[data-skin] .page-seo-intro h1 { font-size: 28px; }
  html[data-skin] .page-seo-intro .section-lead { font-size: 15px; margin-bottom: 18px; }
  /* полки возвращаются — списком */
  html[data-skin] .home-shelf:not(.home-shelf--watching) { display: block; margin-top: 28px; }
  html[data-skin] .home-shelf-track { grid-template-columns: minmax(0, 1fr); gap: 0; border: 1px solid var(--sk-line); border-radius: 12px; overflow: hidden; }
  html[data-skin] .home-shelf .lc.lc--row { padding: 10px 12px; border-bottom: 1px solid var(--sk-line); }
  html[data-skin] .home-shelf .lc.lc--row:last-child { border-bottom: 0; }
  .hv-grid { grid-template-columns: minmax(0, 1fr); gap: 0; border: 1px solid var(--sk-line); border-radius: 12px; overflow: hidden; }
  .hv-card { display: grid; grid-template-columns: 116px minmax(0, 1fr); border: 0; border-radius: 0; border-bottom: 1px solid var(--sk-line); }
  .hv-card:last-child { border-bottom: 0; }
  .hv-ph { aspect-ratio: auto; min-height: 92px; }
  .hv-cb { padding: 10px 12px; }
  .hv-p { flex-direction: column; gap: 0; }
  .hv-p b { font-size: 18px; }
  .hv-note { flex-direction: column; align-items: stretch; padding: 18px 16px; gap: 14px; }
  .hv-btn { width: 100%; }
  .ft-cols { grid-template-columns: 1fr 1fr; }
  .ft-cols > div:first-child { grid-column: 1 / -1; }
}