/* article.css — стили страниц блога поверх style.css.
 *
 * Статьи размечены классами старого шаблона (bg-white, p-8, mb-8, rounded-xl,
 * shadow-sm). В дизайне v2 они ничего не значат, поэтому блоки шли без фона и
 * отступов и слипались в одну простыню. Здесь задаём их поведение и заодно
 * лечим пропорции картинок: атрибут height у <img> при ширине 100% растягивал
 * кадр по вертикали.
 *
 * Подключается в каждой статье /blog/*.php ПОСЛЕ style.css.
 * При правках бампать ?v=N в подключении (иначе кеш).
 */

/* ---- Блоки-карточки статьи ---- */
.prose .bg-white { background: #fff; }
.prose .bg-gray-50 { background: #f8fafc; }
.prose .bg-green-50 { background: #f0fdf4; }
.prose .bg-red-50 { background: #fef2f2; }
.prose .bg-blue-50 { background: #eff6ff; }
.prose .bg-yellow-50 { background: #fefce8; }

.prose .p-8 { padding: 32px; }
.prose .p-6 { padding: 24px; }
.prose .p-5 { padding: 20px; }
.prose .p-4 { padding: 16px; }
.prose .pb-6 { padding-bottom: 24px; }
.prose .pb-5 { padding-bottom: 20px; }

.prose .mb-8 { margin-bottom: 32px; }
.prose .mb-6 { margin-bottom: 24px; }
.prose .mb-5 { margin-bottom: 20px; }
.prose .mb-4 { margin-bottom: 16px; }
.prose .mb-3 { margin-bottom: 12px; }
.prose .mb-2 { margin-bottom: 8px; }
.prose .mt-8 { margin-top: 32px; }
.prose .mt-6 { margin-top: 24px; }
.prose .mt-4 { margin-top: 16px; }

.prose .rounded-xl { border-radius: 18px; }
.prose .rounded-lg { border-radius: 12px; }
.prose .shadow-sm { box-shadow: 0 2px 14px rgba(16, 24, 40, .06); }

.prose .space-y-6 > * + * { margin-top: 24px; }
.prose .space-y-3 > * + * { margin-top: 14px; }
.prose .space-y-2 > * + * { margin-top: 10px; }

/* Заголовок внутри карточки не должен отрывать её верх лишним отступом */
.prose .bg-white > h2:first-child,
.prose .bg-white > h3:first-child,
.prose .bg-gray-50 > h3:first-child,
.prose .bg-green-50 > h3:first-child,
.prose .bg-red-50 > h3:first-child { margin-top: 0; }

/* Карточка в карточке: в части статей весь текст обёрнут в .bg-white, а внутри
 * лежат такие же блоки. Пока классы были пустыми, вложенность не читалась;
 * теперь гасим внутренние, чтобы не было рамки в рамке. */
.prose .bg-white .bg-white {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 22px;
}

/* ---- Цветные врезки ---- */
.emergency-box { background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); border-left: 4px solid #ef4444; }
.tip-box { background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%); border-left: 4px solid #22c55e; }
.warning-box { background: #fefce8; border-left: 4px solid #eab308; }

/* Шаги 1-2-3: кружок с номером не должен сплющиваться */
.prose .step-number {
  width: 36px; height: 36px; min-width: 36px; flex: 0 0 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-weight: 700; color: #fff;
}

/* ---- Картинки ---- */
/* Высоту считает браузер по ширине: атрибут height иначе растягивает кадр */
.prose img, .page-hero img { height: auto; }
.prose .article-img, .prose .article-image { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 4px 15px rgba(0, 0, 0, .1); }
.prose figure { margin: 32px 0; }
.prose figure img { display: block; width: 100%; height: auto; }
.prose figure figcaption { font-size: 14px; color: #6b7280; margin-top: 10px; }
/* object-cover в старой разметке резал кадр по фиксированной высоте h-64 */
.prose img[class*="object-cover"] { object-fit: cover; }

/* ---- Таблицы ---- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 18px; }
.table-wrap table { min-width: 520px; margin-bottom: 0; }

/* ---- Кнопки CTA ---- */
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 760px) {
  .prose .p-8 { padding: 22px; }
  .prose .p-6 { padding: 18px; }
  .cta-row { flex-direction: column; }
  /* иначе длинный номер телефона уезжает за правый край экрана */
  .callout .btn, .cta-row .btn {
    display: flex; width: 100%; justify-content: center;
    font-size: 15px; padding-left: 14px; padding-right: 14px;
  }
  .callout .btn + .btn { margin-top: 10px; }
}

/* ---- Сайдбар статьи ---- */
/* Карточки лежат в обёртке .space-y-6, а gap задан у самого <aside> — поэтому
 * блоки слипались. Делаем обёртку такой же колонкой с зазором. */
.content-grid > aside > div { display: flex; flex-direction: column; gap: 22px; }
.content-grid aside .info-card { padding: 26px; }
.content-grid aside .info-card h3 { margin: 0 0 12px; }
/* Списки услуг и статей: без маркеров, со стрелкой на расстоянии от текста */
.content-grid aside .info-card ul { list-style: none; padding-left: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.content-grid aside .info-card li { margin: 0; }
.content-grid aside .info-card li a { display: inline-flex; align-items: baseline; gap: 8px; text-decoration: none; }
.content-grid aside .info-card li a:hover { text-decoration: underline; }
/* Кнопка записи в карточке — настоящая кнопка, а не строка текста */
.content-grid aside .info-card .btn { width: 100%; justify-content: center; margin-bottom: 12px; }
.content-grid aside .info-card .card-phone { display: block; text-align: center; font-size: 14px; }