/* ---------------------------------------------------------------------
   Типовые блоки страниц (модуль «Страницы»).

   Базовая раскладка: тема сайта может перекрыть любой класс своим файлом
   themes/<тема>/css/blocks.css или заменить шаблон блока целиком.
   Цвета берутся из переменных — так тема меняет палитру, не трогая разметку.
   --------------------------------------------------------------------- */

:root {
  --pb-ink: #1c1d21;
  --pb-ink-soft: #5f6368;
  --pb-line: #e1e3e8;
  --pb-bg-soft: #f4f5f7;
  --pb-accent: #2a3c90;
  --pb-accent-ink: #fff;
  --pb-dark: #212121;
  --pb-radius: 10px;
  --pb-gap: 24px;
}

/* Воздух вокруг секции симметричный. Раньше весь отступ был снизу, и
   заголовок следующего блока упирался в предыдущий — особенно заметно
   под тёмным первым экраном. */
.pb { padding: 76px 0; }

/* Блок, примыкающий к предыдущему по смыслу (марки и виды работ, работы
   и отзывы): стык поджимается с обеих сторон, чтобы пара читалась как
   одно целое, а не как два разных раздела. */
.pb--tight { padding-top: 40px; }
.pb:has(+ .pb--tight) { padding-bottom: 40px; }

@media (max-width: 760px) {
  .pb { padding: 48px 0; }
  .pb--tight { padding-top: 28px; }
  .pb:has(+ .pb--tight) { padding-bottom: 28px; }
}

/* Боковые поля берём из той же переменной, что и .container: иначе блоки
   и обычные секции расходятся по краям, и на телефоне это заметно. */
.pb__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--gutter, 24px);
}
.pb__container--narrow { max-width: 820px; }

.pb__head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: baseline;
  justify-content: space-between;
}

.pb__title {
  margin: 0 0 16px;
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.2;
  color: var(--pb-ink);
}

/* Мелкая строка над заголовком: «Шаг 1 · выберите марку». Поясняет, что
   происходит в секции, и не спорит с самим заголовком. */
.pb__eyebrow {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pb-accent);
}
.pb__head .pb__title { margin-bottom: 0; }

.pb__lead {
  margin: 0 0 24px;
  max-width: 70ch;
  font-size: 18px;
  line-height: 1.6;
  color: var(--pb-ink-soft);
}

.pb__more { font-weight: 600; text-decoration: none; }

/* --- кнопки ---------------------------------------------------------- */

.pb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 6px;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.pb-btn--primary { background: var(--pb-accent); color: var(--pb-accent-ink); }
.pb-btn--light { background: #fff; color: var(--pb-accent); }

/* --- первый экран ---------------------------------------------------- */

.pb--hero {
  position: relative;
  padding: 64px 0;
  background: var(--pb-dark);
  color: #fff;
}
.pb-hero__media { position: absolute; inset: 0; overflow: hidden; }
.pb-hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .35; }

.pb-hero__inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: flex-start;
}
.pb-hero__main { flex: 999 1 480px; min-width: 0; }

.pb-hero__badge {
  display: inline-block;
  margin: 0 0 16px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  font-size: 14px;
}
.pb-hero__title {
  margin: 0 0 16px;
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.1;
}
.pb-hero__lead {
  margin: 0 0 24px;
  max-width: 60ch;
  font-size: 19px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .82);
}

.pb-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.pb-facts__item {
  padding: 16px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .08);
}
.pb-facts__item strong { display: block; }
.pb-facts__item span { font-size: 14px; color: rgba(255, 255, 255, .72); }

/* --- форма заявки ---------------------------------------------------- */

.pb-form {
  flex: 1 1 340px;
  min-width: 0;
  padding: 24px;
  border-radius: var(--pb-radius);
  background: #fff;
  color: var(--pb-ink);
}
.pb-form__title { margin: 0 0 16px; font-size: 20px; font-weight: 700; }
.pb-form__field { display: block; margin-bottom: 14px; }
.pb-form__field > span {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
}
.pb-form__field input,
.pb-form__field textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #c9cdd6;
  border-radius: 6px;
  font: inherit;
  font-size: 16px;   /* меньше 16px — телефон приближает страницу при фокусе */
}
.pb-form .pb-btn { width: 100%; }
.pb-form__note { margin: 12px 0 0; font-size: 13px; color: var(--pb-ink-soft); }

/* ловушка для ботов: человек поля не видит, экранный диктор его пропускает */
.pb-form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.pb-form--inline { display: grid; gap: 12px; align-content: start; }

/* --- карточки -------------------------------------------------------- */

.pb-grid {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pb-grid--cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.pb-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--pb-line);
  border-radius: var(--pb-radius);
  background: #fff;
}
.pb-card__title { margin: 0; font-size: 19px; line-height: 1.3; }
.pb-card__title a { color: inherit; text-decoration: none; }
.pb-card__text { margin: 0; color: var(--pb-ink-soft); line-height: 1.55; }
.pb-card__price {
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 1px solid #eef0f3;
  font-weight: 700;
}

/* --- таблица цен ----------------------------------------------------- */

.pb-prices { width: 100%; border-collapse: collapse; }
.pb-prices__group-title {
  padding: 20px 0 8px;
  text-align: left;
  font-size: 17px;
  color: var(--pb-accent);
}
.pb-prices td {
  padding: 12px 0;
  border-bottom: 1px solid var(--pb-line);
  vertical-align: top;
}
.pb-prices__value { text-align: right; white-space: nowrap; font-weight: 600; }
.pb-prices__note { margin: 16px 0 24px; font-size: 14px; color: var(--pb-ink-soft); }

/* --- этапы ----------------------------------------------------------- */

.pb-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.pb-steps__item {
  display: flex;
  gap: 14px;
  padding: 24px;
  border-radius: var(--pb-radius);
  background: var(--pb-bg-soft);
}
.pb-steps__num { font-size: 28px; font-weight: 800; color: var(--pb-accent); }
.pb-steps__title { margin: 0 0 6px; font-size: 17px; }
.pb-steps__text { margin: 0; color: var(--pb-ink-soft); line-height: 1.5; }

/* --- вопросы --------------------------------------------------------- */

.pb-faq__item { border-bottom: 1px solid var(--pb-line); padding: 18px 0; }
.pb-faq__q {
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.pb-faq__q::-webkit-details-marker { display: none; }
.pb-faq__q::after { content: ' +'; color: var(--pb-accent); }
.pb-faq__item[open] .pb-faq__q::after { content: ' −'; }
.pb-faq__a { margin-top: 10px; line-height: 1.6; color: #3c4043; }

/* --- призыв ---------------------------------------------------------- */

.pb--cta { padding: 0; }
.pb-cta__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
  justify-content: space-between;
  padding: 40px 24px;
  border-radius: 14px;
  background: var(--pb-accent);
  color: #fff;
}
.pb-cta__main { flex: 999 1 420px; min-width: 0; }
.pb-cta__title { margin: 0 0 8px; font-size: clamp(22px, 2.6vw, 32px); }
.pb-cta__lead { margin: 0 0 16px; color: rgba(255, 255, 255, .85); }
.pb-cta__phone {
  display: inline-block;
  margin-right: 16px;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
}
.pb--cta .pb-form { flex: 1 1 320px; }

/* --- текст ----------------------------------------------------------- */

.pb-prose { line-height: 1.7; }
.pb-prose > * + * { margin-top: 1em; }
.pb-prose h2, .pb-prose h3 { line-height: 1.25; }
.pb-prose img { max-width: 100%; height: auto; }
.pb-prose table { width: 100%; border-collapse: collapse; }
.pb-prose td, .pb-prose th { padding: 10px; border: 1px solid var(--pb-line); }

/* Базовый стиль снимает маркеры со всех списков — в тексте страницы они
   нужны, иначе перечисление читается сплошняком, а нумерация пропадает. */
.pb-prose ul, .pb-prose ol { padding-left: 24px; }
.pb-prose ul { list-style: disc; }
.pb-prose ol { list-style: decimal; }
.pb-prose li + li { margin-top: .4em; }
.pb-prose li::marker { font-weight: 600; }

/* --- галерея --------------------------------------------------------- */

.pb-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pb-gallery figure { margin: 0; }
.pb-gallery img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 8px;
}
.pb-gallery figcaption {
  margin-top: 8px;
  font-size: 14px;
  color: var(--pb-ink-soft);
}

/* --- контакты -------------------------------------------------------- */

.pb-contacts { display: flex; flex-wrap: wrap; gap: 32px; }
.pb-contacts__list {
  flex: 1 1 300px;
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pb-contacts__title { margin: 0 0 8px; font-size: 17px; }
.pb-contacts__address { margin: 0 0 6px; line-height: 1.5; }
.pb-contacts__phone { font-size: 20px; font-weight: 700; text-decoration: none; }
.pb-contacts__hours { margin: 6px 0 0; color: var(--pb-ink-soft); }
.pb-contacts__map {
  flex: 999 1 420px;
  min-height: 320px;
  border-radius: var(--pb-radius);
  background: var(--pb-bg-soft);
}

/* --- лента новостей и статей ----------------------------------------- */

.pb-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.pb-tabs__item {
  padding: 10px 16px;
  border: 1px solid var(--pb-line);
  border-radius: 999px;
  color: inherit;
  text-decoration: none;
}
.pb-tabs__item.is-active {
  border-color: var(--pb-accent);
  background: var(--pb-accent);
  color: var(--pb-accent-ink);
}

.pb-card--feed { padding: 0; overflow: hidden; }
.pb-card--feed > :not(.pb-card__cover) { margin-left: 20px; margin-right: 20px; }
.pb-card--feed > :last-child { margin-bottom: 20px; }

.pb-card__cover { display: block; }
.pb-card__cover img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.pb-card__date {
  display: block;
  margin-top: 16px;
  font-size: 14px;
  color: var(--pb-ink-soft);
}

.pb-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 32px;
}
.pb-pager__link,
.pb-pager__cur {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--pb-line);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
}
.pb-pager__cur {
  border-color: var(--pb-accent);
  background: var(--pb-accent);
  color: var(--pb-accent-ink);
}
.pb-pager__gap {
  min-width: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--pb-ink-soft);
}

/* --- блоки каталога на странице -------------------------------------- */

.pb-dirs .pb-card__text,
.pb-items .pb-card__text { color: var(--pb-ink-soft); }

.pb-card--item { padding: 0; overflow: hidden; }
.pb-card--item > :not(.pb-card__cover) { margin-left: 20px; margin-right: 20px; }
.pb-card--item > :last-child { margin-bottom: 20px; }

.pb-card__price {
  margin: 12px 0 0;
  font-size: 18px;
  font-weight: 700;
}

/* --- раздел каталога: подбор, сортировка, подразделы ----------------- */

.cat {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--pb-gap);
  align-items: start;
}
/* раздел без подбора занимает всю ширину */
.cat__main:only-child { grid-column: 1 / -1; }

.cat__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--pb-line);
}
.cat__total { margin: 0; color: var(--pb-ink-soft); }
/* на странице поиска строка счётчика идёт сразу за формой */
.cat-search ~ .cat__total { margin-top: 20px; }

.cat__sorts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cat__sort {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed var(--pb-line);
}
.cat__sort.is-active {
  font-weight: 700;
  border-bottom-color: transparent;
}

.cat-filter {
  padding: 20px;
  border: 1px solid var(--pb-line);
  border-radius: var(--pb-radius);
  background: var(--pb-bg-soft);
}
.cat-filter__title {
  margin: 0 0 16px;
  font-size: 17px;
  font-weight: 700;
}
.cat-filter__group {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}
.cat-filter__legend {
  padding: 0;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--pb-ink-soft);
}
.cat-filter__check {
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 32px;
  cursor: pointer;
}
.cat-filter__range { display: flex; gap: 8px; }
.cat-filter__range input {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--pb-line);
  border-radius: 6px;
  background: #fff;
  font: inherit;
}
.cat-filter__reset {
  display: inline-block;
  margin-left: 12px;
  color: var(--pb-ink-soft);
}

.pb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pb-chips--lead { margin-bottom: 24px; }
.pb-chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--pb-line);
  border-radius: 999px;
  background: #fff;
  color: inherit;
  text-decoration: none;
}
.pb-chip:hover { border-color: var(--pb-accent); }
/* подраздел без адреса: показываем, но вести некуда */
.pb-chip--off { color: var(--pb-ink-soft); border-style: dashed; }

/* --- поиск по каталогу ----------------------------------------------- */

.cat-search { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-search input {
  flex: 1 1 260px;
  min-width: 0;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--pb-line);
  border-radius: 6px;
  font: inherit;
}

/* --- цена в карточке позиции ----------------------------------------- */

.price {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  margin: 0;
}
.price__now { font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; }
.price__was { color: var(--pb-ink-soft); }
.price__unit { color: var(--pb-ink-soft); }

/* --- страница материала ---------------------------------------------- */

.pb-article__title {
  margin: 16px 0;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.15;
}
.pb-article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0 0 24px;
  font-size: 14px;
  color: var(--pb-ink-soft);
}
.pb-article__lead {
  margin: 0 0 24px;
  font-size: 19px;
  line-height: 1.6;
}
.pb-article__cover { margin: 0 0 24px; }
.pb-article__cover img {
  width: 100%;
  height: auto;
  border-radius: var(--pb-radius);
}

/* --- телефон --------------------------------------------------------- */

@media (max-width: 900px) {
  /* колонка в 260px съела бы половину ширины списка, поэтому на узком
     экране подбор встаёт под список: позиции видно сразу, а он остаётся
     под рукой */
  .cat { grid-template-columns: minmax(0, 1fr); }
  .cat__aside { order: 2; }
  .cat__main { order: 1; }
}

@media (max-width: 640px) {
  .pb { padding: 36px 0; }
  .pb-cta__inner { padding: 28px 20px; }
  .pb-steps__item { padding: 20px; }
  .pb-card { padding: 20px; }
  .cat__bar { gap: 8px; }
}

/* --- автопарк --------------------------------------------------------- */

.pb--fleet .fleet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px 40px;
  padding: 36px 40px;
  border-radius: var(--pb-radius);
  background: var(--pb-accent);
  color: var(--pb-accent-ink);
}
.fleet__main { flex: 1 1 520px; min-width: 0; }
.fleet__eyebrow {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}
.fleet__title { margin: 0; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2; color: #fff; }
.fleet__list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px 28px;
}
.fleet__list li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.fleet__check { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; color: rgba(255, 255, 255, .8); }
.fleet__actions { flex: 0 1 300px; display: flex; flex-direction: column; gap: 12px; }

@media (max-width: 760px) {
  .pb--fleet .fleet { padding: 26px 20px; }
  .fleet__actions { flex: 1 1 100%; }
}

/* карта: до нажатия — заглушка, после — виджет во всю рамку */
.pb-contacts__map {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 320px;
  padding: 24px;
  border-radius: var(--pb-radius);
  background: var(--pb-bg-soft);
  border: 1px solid var(--pb-line);
}
.pb-contacts__map.is-loaded { padding: 0; min-height: 0; overflow: hidden; }
.pb-contacts__map iframe { width: 100%; height: 360px; display: block; border: 0; }
.pb-contacts__map a { color: var(--pb-accent); }