/* Первый экран. Сетка на всю ширину окна: поля | боковая колонка 150 | основная | поля.
   Боковая карточка сцены (шаг 4) займёт поля + боковую колонку и уйдёт за левый край без хаков. */
.hero {
  --hero-side: 150px;
  --hero-gap: 20px;
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--page-gutter), 1fr)
    [side-start] calc(var(--hero-side) + var(--hero-gap))
    [main-start] minmax(0, calc(var(--page-max) - 2 * var(--page-gutter) - var(--hero-side) - var(--hero-gap))) [main-end]
    minmax(var(--page-gutter), 1fr) [full-end];
  grid-template-rows: auto;
  row-gap: 34px;
  padding-block: calc(var(--nav-h, 72px) + 44px) 0;   /* шапка закреплена и места не держит (nav.css) — отступ под неё здесь */
  align-items: start;
}
.hero > * { min-width: 0; }

/* Ряд 1: бейдж и заголовок */
.hero-badge {
  grid-column: side-start;
  margin-inline-end: var(--hero-gap);
  align-self: center;                     /* шар по центру двух строк заголовка */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  text-align: center;
  line-height: 1.3;
  color: var(--muted);
}
.hero-badge .badge-text { position: absolute; top: 100%; left: 0; right: 0; margin-top: 10px; } /* подпись не сдвигает центр шара */
.globe {
  --globe: 136px;
  width: var(--globe); height: var(--globe);
  border-radius: 50%;
  background: var(--bg-soft);            /* заглушка, пока не загрузились контуры */
  display: block;
}
.globe canvas { width: 100%; height: 100%; border-radius: 50%; }

.hero-title {
  grid-column: main-start;
  max-width: 24ch;
  line-height: 1.08;
}

@media (max-width: 980px) {
  .hero {
    grid-template-columns: [full-start] var(--page-gutter) [side-start main-start] minmax(0, 1fr) [main-end] var(--page-gutter) [full-end];
    row-gap: 20px;
    padding-top: calc(var(--nav-h, 64px) + 28px);
  }
  .hero-badge { flex-direction: row-reverse; justify-content: flex-start; align-items: center; margin-inline-end: 0; text-align: right; }
  .hero-badge .badge-text { position: static; margin-top: 0; }
  .globe { --globe: 56px; }
  .hero-title { max-width: none; }
}

/* Ряд 2: сцена — зелёная карточка слева (поля + боковая колонка), сцена «процесс» в основной колонке */
.hero-card {
  grid-column: full-start / main-start;
  grid-row: 2;
  margin-inline-end: var(--hero-gap);
  padding: 22px 16px 20px var(--page-gutter);
  border-radius: 0 var(--r-xl) var(--r-xl) 0;
  background: var(--sage);
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 36px;
  min-width: 0;
}
/* П4 (21.09): вместо трёх пустых кружков — марка ЭПЦ на месте аватара (решение № 5: фото позже, тогда сюда <img> той же формы),
   под именем роли — что делает менеджер, внизу — когда отвечает. Карточка заполнена, дыры в четверть экрана нет. */
.hero-card .avatar { width: 44px; height: 44px; color: var(--ink); }
.hero-card .avatar use { --bg: var(--sage); }   /* вырез марки в цвет карточки */
.hero-card .lbl { display: flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 13.5px; font-weight: 700; }
.hero-card .lbl .icon { width: 11px; height: 11px; stroke-width: 1.8; }
.hero-card .who { margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--ink-2); max-width: 20ch; }
.hero-card .when { font-size: 12px; line-height: 1.35; color: var(--ink-2); }

/* Сцена «процесс» в основной колонке — styles/scene.css */

@media (max-width: 980px) {
  .hero-card {
    grid-column: full-start / main-end;
    justify-self: start;
    width: max-content; max-width: 100%;
    display: grid; grid-template-columns: auto 1fr; gap: 0 14px; align-items: center; align-self: start;   /* марка | роль и срок ответа */
    padding: 14px 24px 14px var(--page-gutter);
    margin-inline-end: 0;
  }
  .hero-card > div { display: contents; }
  .hero-card .avatar { grid-row: 1 / 3; width: 40px; height: 40px; }
  .hero-card .lbl { margin-top: 0; align-self: end; }
  .hero-card .who { display: none; }          /* на телефоне — марка, роль и срок ответа; про этапы расскажет сцена */
  .hero-card .when { grid-column: 2; align-self: start; margin-top: 3px; }
  .hero-badge { grid-row: 1; }
  .hero-title { grid-row: 2; }
  .hero-card { grid-row: 3; }
}

/* Ряд 3: тезис и кнопки */
.hero-foot {
  grid-column: main-start;
  grid-row: 3;
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: 20px;
  align-items: end;
  margin-top: -12px;
}
.tagline { font-size: 12.5px; line-height: 1.35; color: var(--ink-2); }
.tagline b { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12px; margin-bottom: 2px; }
.tagline b .icon { width: 10px; height: 10px; fill: currentColor; stroke: none; }
.tagline .for { margin-top: 8px; max-width: 70ch; font-size: var(--text-sm); line-height: 1.45; color: var(--ink-2); }   /* П4: врезка про аудиторию — из угла сцены сюда, под сцену */
.actions { display: flex; gap: 10px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.actions .note { font-size: 12.5px; color: var(--muted); margin-right: 6px; }

@media (max-width: 1100px) {
  .hero-foot { grid-template-columns: 1fr; margin-top: 0; }   /* кнопки не переносятся по одной */
  .actions { justify-content: flex-start; }
}
@media (max-width: 980px) {
  .hero-foot { grid-row: 5; }
}
@media (max-width: 560px) {
  .actions .btn { flex: 1 1 auto; justify-content: center; }
  .actions .note { flex-basis: 100%; margin: 0; }
}