/* Home page specific overrides — центрирование "героя" и CTA  */

/* === HERO (верхний блок с заголовком) === */
.home-hero.container{
  display: grid;
  place-items: center;
  text-align: center;
  margin: 40px auto 24px;
  padding: 32px min(40px, 3vw);
  /* аккуратная "плитка" подложка, как в site.css */
  background: var(--tile-grad);
  border: 1px solid var(--tile-border);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
  max-width: 1200px; /* уже общей контейнерной ширины, чтобы строки были ровнее */
}

.home-hero__title{
  font-family: "Oswald", sans-serif;
  margin: 0 0 8px;
  font-size: clamp(28px, 3.2vw, 44px);
  color: var(--brand-red-dark);
  line-height: 1.15;
}
@supports (text-wrap: balance){
  .home-hero__title{ text-wrap: balance; }
}

.home-hero__subtitle{
  margin: 0;
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.6;
  color: var(--muted);
  max-width: 1200px;          /* расширяем, чтобы не ломалось слишком рано */
}
@supports (text-wrap: balance){
  .home-hero__subtitle{ text-wrap: balance; }
}

/* === CTA (бордовая плашка "Хотите поделиться материалами?") === */
.call-to-action{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40px auto 0;
  padding: 24px min(32px, 3vw);
  max-width: 1200px;           /* центрируем и ограничиваем ширину блока */
  border-radius: 12px;
  background: var(--brand-red-dark);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.05);
}
.cta-inner{
  text-align: center;
  max-width: 880px;            /* читаемая ширина текста внутри */
  margin: 0 auto;
}
.call-to-action h2{
  margin: 0 0 12px;
  color: var(--brass);
}
.call-to-action p{
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.6;
}
.call-to-action .button{
  margin-top: 20px;
}

/* чтобы колонночная сетка не "влиялась" на CTA */
.masonry-grid + .call-to-action{ break-inside: avoid; }

/* === Адаптив === */
@media (max-width: 900px){
  .home-hero.container,
  .call-to-action{ max-width: 100%; }
}
/* Уменьшаем межстрочный интервал в тексте "О дивизии" */
.about-content p{
  line-height: 1.45;   /* было ~1.8, стало компактнее */
}

/* Чуть больше воздуха на узких экранах для читабельности */
@media (max-width: 700px){
  .about-content p{ line-height: 1.55; }
}