/* Блок «Истории» — эталонная статичная вёрстка по макету.
   Две серые боковые карточки + широкая зелёная центральная. */

.st-section { background: #f5f7f3; padding: 150px 0 74px; font-family: 'Manrope', system-ui, sans-serif; }
.st-wrap { max-width: 1300px; margin: 0 auto; padding: 0 24px; }

.st-row { display: flex; align-items: stretch; gap: 24px; }
.st-grid { display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 24px; }
.st-grid-rest { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 24px; }

.st-card { border-radius: 24px; box-sizing: border-box; height: 470px; }

/* Боковые серые карточки — той же высоты, что центральная */
.st-side {
  flex: 1 1 0;
  background: #eeeeee;
  padding: 30px 30px 28px;
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

/* Центральная зелёная — шире */
.st-center {
  flex: 1.75 1 0;
  background: #a3e043;
  border-radius: 28px;
  padding: 30px 34px 28px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

/* Теги */
.st-card-tags { display: flex; gap: 8px; flex-wrap: nowrap; }
.st-tag {
  font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
  padding: 6px 13px; border-radius: 22px; background: #dedede; color: #3a3a3a; white-space: nowrap;
}

/* Фото */
.st-card-media { background: linear-gradient(135deg, #d9ded3 0%, #c2cab6 100%); overflow: hidden; }
.st-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-media-round { width: 240px; height: 240px; border-radius: 50%; margin: 22px auto 20px; flex: none; }
.st-media-rect { width: 240px; height: 100%; border-radius: 20px; flex: none; }

/* Заголовки — шрифтом сайта, меньше */
.st-card-title { font-family: 'Inter Tight', sans-serif; font-weight: 800; color: #1b1b1b; margin: 0; line-height: 1.2; }
.st-side .st-card-title { font-size: 19px; }
.st-center .st-card-title { font-size: 28px; line-height: 1.12; }

/* Центральная — фото слева (на всю высоту), текст справа */
.st-center-inner { display: flex; gap: 32px; align-items: stretch; margin: 14px 0 6px; flex: 1; min-height: 0; }
.st-center-body { display: flex; flex-direction: column; }
.st-card-desc { color: #2b3a1c; font-size: 14px; line-height: 1.5; margin: 14px 0 20px; max-width: 34ch; }
.st-card-more {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 10px;
  background: #26331d; color: #fff; padding: 11px 26px; border-radius: 30px;
  font-weight: 600; font-size: 15px; text-decoration: none;
}
.st-card-more:hover { background: #1a2413; color: #fff; }
.st-arrow-i { font-size: 18px; }

/* Автор — всегда прижат к низу карточки (ровно у всех) */
.st-card-author { display: flex; align-items: center; gap: 11px; margin-top: auto; padding-top: 22px; }
.st-author-right { justify-content: flex-end; }
.st-author-ava { width: 36px; height: 36px; border-radius: 50%; background: #cdd3c6; flex: none; display: inline-block; }
.st-author-name { font-size: 15px; color: #444; }
.st-center .st-author-name { color: #2b3a1c; }

/* ── Узкий десктоп/планшет: обе сетки по 2 колонки, зелёная — во всю ширину сверху.
      Порог 1240px — ниже него «эталонная» 3-колоночная раскладка не влезает
      (фикс. фото 240px не даёт колонкам сжаться). ── */
@media (max-width: 1240px) {
  .st-row { flex-direction: column; }
  .st-grid, .st-grid-rest { grid-template-columns: 1fr 1fr; }
  .st-side, .st-center { width: 100%; flex: none; align-self: stretch; }
  .st-card { height: auto; }                 /* по контенту, без обрезки */
  .st-center { order: -1; grid-column: 1 / -1; }   /* зелёная — первой и на всю ширину */
  .st-center-inner { flex-direction: column; align-items: stretch; }
  .st-center .st-card-title { font-size: 22px; }
  .st-media-round { width: 200px; height: 200px; margin: 18px auto; }
  .st-media-rect { width: 100%; max-width: 100%; height: 260px; }
  .st-card-desc { max-width: none; }
  /* нечётную последнюю карточку тянем на всю ширину — без «дыры» */
  .st-grid-rest .st-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ── Телефон: одна колонка ── */
@media (max-width: 600px) {
  .st-grid, .st-grid-rest { grid-template-columns: 1fr; }
  .st-center { grid-column: auto; }
  .st-grid-rest .st-card:last-child:nth-child(odd) { grid-column: auto; }
  .st-card { border-radius: 20px; }
  .st-media-round { width: 100%; height: 240px; border-radius: 20px; margin: 16px 0; }
}

/* ── Детальная страница истории (/live/<slug>/) ── */
.st-detail { background: #f5f7f3; padding: 130px 0 72px; min-height: 60vh; font-family: 'Manrope', system-ui, sans-serif; }
.st-detail-title { font-family: 'Inter Tight', sans-serif; }
.st-back { display: inline-block; color: #3c4a35; text-decoration: none; font-weight: 600; margin-bottom: 26px; }
.st-back:hover { color: #6aa61f; }
.st-detail-grid { display: grid; grid-template-columns: minmax(280px, 400px) 1fr; gap: 44px; align-items: start; }
.st-detail-media { border-radius: 22px; overflow: hidden; background: #000; aspect-ratio: 9 / 16; max-height: 660px; }
.st-detail-media video, .st-detail-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-detail-title { font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; color: #1b2b15; margin: 14px 0 0; line-height: 1.15; }
.st-detail-author { display: flex; align-items: center; gap: 10px; margin: 16px 0 24px; }
.st-detail-lead { font-size: 18px; font-weight: 600; color: #1b2b15; line-height: 1.5; margin: 0 0 20px; max-width: 62ch; }
.st-detail-body { color: #33421f; font-size: 16px; line-height: 1.7; max-width: 62ch; }
.st-detail-body p { margin: 0 0 16px; }
@media (max-width: 820px) {
  .st-detail-grid { grid-template-columns: 1fr; gap: 24px; }
  .st-detail-media { max-width: 360px; margin: 0 auto; width: 100%; }
}