/* Отзывы и статьи банковского направления: вид взят из макета Astry
   (prototype_astra_v_bank/editorial.css). Наши отзывы и статьи мы верстали
   сами, не дожидаясь макета, — теперь её вид заменяет самоделку.

   Что взято у неё целиком: сводка отзывов акцентной плашкой, карточки
   в две колонки с инициалом вместо аватара, сетка статей со скруглением
   и картинкой 16:10, читальная панель статьи и три карточки перехода внизу.

   🔴 Чего в этом файле нет и не будет, хотя у неё это есть:
   - пустых состояний (`editorial-empty`): у нас пустого раздела не бывает —
     без записей страницы нет вовсе, адрес отвечает 404;
   - подписей «демонстрационный отзыв» и «локальная иллюстрация для макета»:
     у нас на странице настоящие слова дилера, а не проверочные данные.
   Про эти два правила она знать не могла — они наши.

   Цвета только переменными темы, отступы кратны восьми. */

/* --- общая шапка редакционных страниц --- */
.editorial-heading { min-width: 0; }
.editorial-heading h1 { max-width: 20ch; }
.editorial-heading > p { margin-top: 24px; font-size: 1.125rem; color: var(--muted); }

/* --- отзывы --- */
.review-intro { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: center; gap: 64px; padding-block: 16px 32px; }
.review-summary { padding: 32px; border-radius: 32px; color: var(--paper); background: var(--accent); box-shadow: var(--shadow-raised); }
.review-average { display: flex; gap: 16px; align-items: baseline; margin-block: 8px; }
.review-average strong { font-size: 4rem; line-height: 1.1; font-weight: 600; }
.review-summary-bottom { display: grid; gap: 8px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--paper); }
.review-summary-bottom strong { font-size: 1.25rem; }

.review-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.review-card { padding: 32px; min-width: 0; }
.review-card-header { display: flex; justify-content: space-between; gap: 24px; align-items: start; }
.review-person { display: flex; align-items: center; gap: 16px; min-width: 0; }
/* Инициал вместо фотографии: первая буква имени, которое дал дилер.
   Ничего выдуманного здесь нет — это то же имя, что и в заголовке */
.review-avatar { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; background: var(--tint); color: var(--accent); border-radius: 16px; font-size: 1.25rem; font-weight: 600; }
.review-meta { margin-top: 8px; color: var(--muted); }
.review-score { display: flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 600; white-space: nowrap; }
.review-score svg { width: 24px; height: 24px; }
.review-text { margin-top: 24px; line-height: 1.75; overflow-wrap: anywhere; }
.review-more summary { min-height: 48px; width: fit-content; padding-block: 8px; margin-top: 8px; color: var(--accent); font-weight: 600; }
.review-more p { margin-top: 24px; }
/* Два разных снимка отзыва: сам покупатель и его машина */
.review-card img { display: block; width: 100%; max-width: 100%; height: auto; margin-top: 24px; border-radius: 24px; }

.editorial-contact { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: center; padding: 48px; border-radius: 32px; background: var(--tint); }
.editorial-contact p { margin-top: 24px; color: var(--muted); }
.editorial-contact .eyebrow { margin-bottom: 16px; }

/* --- статьи --- */
.editorial-intro { display: flex; justify-content: space-between; align-items: center; gap: 48px; padding: 48px; }
.editorial-symbol { display: grid; place-items: center; width: 80px; height: 80px; border-radius: 24px; color: var(--accent); background: var(--tint); }
.editorial-symbol svg { width: 40px; height: 40px; }
.editorial-intro-symbol { width: 160px; height: 160px; flex-shrink: 0; border-radius: 40px; }
.editorial-intro-symbol svg { width: 80px; height: 80px; stroke-width: 1; }
.editorial-count { margin-bottom: 24px; }
.journal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.journal-card { min-width: 0; overflow: hidden; border-radius: 24px; display: flex; flex-direction: column; }
.journal-image { display: block; min-height: 48px; }
.journal-image img { width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: cover; }
.journal-placeholder { display: grid; place-items: center; aspect-ratio: 16 / 10; color: var(--accent); background: var(--tint); }
.journal-placeholder svg { width: 48px; height: 48px; }
.journal-card-body { display: flex; flex-direction: column; flex: 1; gap: 16px; padding: 24px; }
.journal-card h2 { font-size: 1.5rem; }
.journal-card h2 a { display: inline-flex; align-items: center; min-height: 48px; }
.journal-card p, .journal-card time { color: var(--muted); }
.journal-card .text-link { margin-top: auto; justify-content: start; }

/* --- сама статья --- */
.article-heading { max-width: 1000px; margin: 16px auto 40px; }
.article-heading h1 { max-width: 26ch; }
.article-meta { display: flex; flex-wrap: wrap; gap: 16px 32px; margin-top: 24px; color: var(--muted); }
.article-heading > p { margin-top: 24px; font-size: 1.125rem; color: var(--muted); }
.article-cover { margin-bottom: 32px; }
.article-cover img { width: 100%; aspect-ratio: 16 / 9; height: auto; max-height: 640px; object-fit: cover; border-radius: 32px; }
.article-reading { max-width: 896px; margin-inline: auto; padding: 48px 64px; }
.article-prose { max-width: 68ch; font-size: 1.125rem; line-height: 1.8; overflow-wrap: anywhere; }
.article-prose p + p { margin-top: 24px; }
.editorial-next-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.editorial-next { display: grid; grid-template-rows: auto 1fr auto; gap: 24px; padding: 32px; border-radius: 24px; }
.editorial-next .text-link { justify-content: start; }
.editorial-next:hover, .journal-card:has(a:hover) { box-shadow: var(--shadow-raised); }

@media (max-width: 1100px) {
  .review-intro { gap: 32px; }
  .review-card-header { flex-direction: column; gap: 16px; }
  .editorial-contact { grid-template-columns: 1fr; gap: 32px; }
  .editorial-contact .button { justify-self: start; }
}
@media (max-width: 800px) {
  .review-intro, .review-grid { grid-template-columns: 1fr; }
  .journal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editorial-next-grid { grid-template-columns: 1fr; }
  .editorial-intro-symbol { display: none; }
  .article-reading { padding: 32px; }
}
@media (max-width: 540px) {
  .review-intro { padding-block: 0 8px; gap: 24px; }
  .review-summary, .review-card, .editorial-intro, .editorial-next { padding: 24px; border-radius: 24px; }
  .editorial-heading > p, .article-heading > p { font-size: 1rem; }
  .editorial-contact { padding: 24px; border-radius: 24px; }
  .editorial-contact .button { width: 100%; }
  .journal-grid { grid-template-columns: 1fr; }
  .article-heading { margin-block: 0 32px; }
  .article-cover img { border-radius: 24px; }
  .article-reading { padding: 24px; border-radius: 24px; }
  .article-prose { font-size: 1rem; }
}