/* ============================================================
   spirit-dv.ru — лейаут секций
   ============================================================ */

/* ---------- Герой ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: 9.5rem;
  padding-bottom: var(--s-9);
  isolation: isolate;
}

@media (min-width: 48rem) {
  .hero { padding-top: 11rem; }
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-bg);
}

.hero__grid {
  position: absolute;
  inset: -10% 0 0 0;
  height: 120%;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 78%);
          mask-image: radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 78%);
}

.hero__fade-top {
  position: absolute;
  inset: 0 0 auto 0;
  height: 11rem;
  background: linear-gradient(to bottom, var(--c-bg) 0%, rgba(245,245,242,.72) 46%, transparent 100%);
  pointer-events: none;
}

.hero__fade-bottom {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 12rem;
  background: var(--gr-fade-b);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero__title { margin-top: var(--s-6); }

.hero__lead {
  margin-top: var(--s-5);
  max-width: 44rem;
  color: var(--c-ink-body);
}

.hero__cta {
  margin-top: var(--s-7);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: center;
}

.hero__panel {
  margin-top: var(--s-9);
  width: 100%;
  text-align: left;
}

/* ---------- Панель героя ---------- */
.panel__tags { display: none; gap: var(--s-2); align-items: center; }
@media (min-width: 48rem) { .panel__tags { display: flex; } }

.panel__grid {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-4);
  background: #F8F8F5;
}

@media (min-width: 60rem) {
  .panel__grid {
    grid-template-columns: 1.35fr 0.65fr;
    padding: var(--s-5);
    gap: var(--s-5);
  }
}

.routes-card { padding: 0; overflow: hidden; }

.routes-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--c-line);
}

.routes-card__title {
  margin-top: 0.25rem;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--c-ink-strong);
}

.panel__metrics {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

@media (min-width: 60rem) {
  .panel__metrics { grid-template-columns: 1fr; }
}

.metric {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

/* ---------- Заголовок секции ---------- */
.section__head {
  max-width: 46rem;
  margin-bottom: var(--s-7);
}

/* надзаголовков больше нет — отступ сверху не нужен */
.section__head h2 { margin-top: 0; }
.section__head .lead { margin-top: var(--s-4); }

/* ---------- Сетка карточек ---------- */
.cards-grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.cards-grid .card { display: flex; flex-direction: column; gap: var(--s-3); }
.cards-grid .card h3 { margin-top: var(--s-1); }
.cards-grid .card p { color: var(--c-ink-muted); font-size: var(--fs-sm); line-height: var(--lh-relaxed); }
.cards-grid .badge { align-self: flex-start; }

/* ---------- Подвал ----------
   Сетка подвала описана в components.css: там полная лесенка
   1 → 2 → 4 колонки. Дублирующее правило отсюда убрано —
   оно всё равно перекрывалось и только путало. */