/* Кредит, выкуп, отзывы и статьи в первом варианте оформления.

   🔴 Отдельный файл, а не дописка в styles.css: тот и так на 925 строк,
   и третья часть задания будет его переверстывать. Новое кладём туда,
   где его видно.

   Цвета только переменными темы: --line, --muted, --surface-soft, --brand
   объявлены во всех трёх палитрах (theme-a, theme-b, theme-c). Отступы
   кратны восьми — новый файл должен быть по конституции с первого дня. */

/* --- кредит --- */
.credit-form .field { margin-bottom: 16px; }
.credit-answer { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--surface-soft); }
.credit-answer .price { margin: 8px 0 16px; }
.credit-answer .price-list div { padding: 8px 0; border-bottom: 1px solid var(--line); }
.credit-answer .price-list div:last-child { border-bottom: 0; font-weight: 600; }
.credit-answer .text-link { display: inline-flex; align-items: center; min-height: 48px; }

/* --- выкуп --- */
.buyout-section .timeline li { padding-bottom: 24px; }
.buyout-section .timeline strong { display: block; margin-bottom: 8px; }

/* --- отзывы --- */
.reviews-list { display: grid; gap: 24px; max-width: 960px; }
.review-card { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-small); }
.review-card__head { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.review-card__head h2 { margin: 0; font-size: 1.25rem; }
.review-card__rating { margin: 0; padding: 8px 16px; border-radius: var(--radius-small); background: var(--surface-soft); white-space: nowrap; }
.review-card p { max-width: 72ch; }
/* Длинный отзыв свёрнут обычным details: он работает без JavaScript */
.review-more summary { display: inline-flex; align-items: center; min-height: 48px; color: var(--brand); cursor: pointer; }
.review-more p { margin-top: 16px; }
/* Два разных снимка отзыва: машина покупателя и он сам */
.review-photo, .review-client-photo { display: block; width: 100%; max-width: 480px; height: auto; margin-top: 16px; border-radius: var(--radius-small); }

/* --- статьи --- */
.article-grid .article-card__image img { display: block; width: 100%; height: auto; aspect-ratio: 1.6; object-fit: cover; }
.article-card h2, .article-card h3 { margin: 8px 0; font-size: 1.25rem; }
.article-card .text-link { display: inline-flex; align-items: center; min-height: 48px; }
.article { max-width: 760px; }
.article__image { display: block; width: 100%; height: auto; margin-bottom: 24px; border-radius: var(--radius-small); }
.article__text { font-size: 1.125rem; line-height: 1.75; }
.article__text p + p { margin-top: 24px; }
.article-next .callout .text-link { display: inline-flex; align-items: center; min-height: 48px; margin-right: 16px; }

@media (max-width: 900px) {
  .reviews-list { gap: 16px; }
  .review-card { padding: 16px; }
  .review-card__head { flex-direction: column; gap: 8px; }
}

/* --- главная по макету Астры ---------------------------------------------
   Переносится геометрия и ограничения строк; палитра остаётся своей —
   у старой вёрстки их три (theme-a, theme-b, theme-c), и ни один цвет
   здесь не назван прямо.

   Сетка останавливается на 1760: без предела на 2560 строка растягивается
   на две с лишним тысячи пикселей, и карточка перестаёт читаться как целое. */
.page-home { --frame: 1760px; --gutter: 64px; }
.page-home .container { width: min(var(--frame), calc(100% - var(--gutter) * 2)); padding-inline: 0; }

/* Ограничения колонок: это ограничение строки, а не уменьшение шрифта */
.page-home .hero__copy p { max-width: 48ch; }
.page-home .hero__copy h1 { max-width: 22ch; }
.page-home .service-tile p, .page-home .service-text { max-width: 42ch; }
.page-home .process-step p, .page-home .process-section p { max-width: 34ch; }
.page-home .section__head p { max-width: 68ch; }

/* Карточки каталога: зазор 32 на всех ширинах, четыре в ряд на широких */
.page-home .car-grid { gap: 32px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 1600px) {
  .page-home .car-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1599px) { .page-home { --gutter: 48px; } }
@media (max-width: 1279px) { .page-home { --gutter: 32px; } }
@media (max-width: 1000px) {
  .page-home .car-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}
@media (max-width: 720px) {
  .page-home { --gutter: 16px; }
  .page-home .car-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

/* Фоны от края до края: части главной — отдельные горизонтальные пространства,
   а не одна колонка на белом поле. Полоса красит свой фон, растягивает его
   тенью и обрезает её по вертикали: без обрезки тень расширяет область
   прокрутки и на каждой ширине появляется боковая полоса. */
.page-home .band { position: relative; }
.page-home .band--soft, .page-home .band--accent { padding-block: 48px; }
.page-home .band--soft {
  background: var(--surface-soft);
  box-shadow: 0 0 0 100vmax var(--surface-soft);
  clip-path: inset(0 -100vmax);
}
.page-home .band--accent {
  background: var(--brand);
  box-shadow: 0 0 0 100vmax var(--brand);
  clip-path: inset(0 -100vmax);
}
.page-home .band--accent, .page-home .band--accent span,
.page-home .band--accent strong { color: var(--surface); }

/* Пункты нативного списка: свои отступы браузера у них не кратны восьми
   (1 и 2 пикселя). Задаём свои — шаг восемь и палец попадает точнее */
.public-site option { padding: 8px; }