/* Оформление сайта 1. Общие стили в static/css/main.css. */
:root {
  --accent: var(--blue);
  --header-offset: 96px;   /* высота большой шапки: на столько отступаем при переходе по ссылке-якорю */
}
.section, .hero { scroll-margin-top: var(--header-offset); }

/* ---------- Шапка: большая наверху, компактная при прокрутке (класс ставит static/site-1/site.js) ---------- */
.site-header { transition: box-shadow .3s ease; }
.site-header .header-inner { padding-top: 14px; padding-bottom: 14px; transition: padding .3s ease; }
.site-header .logo { font-size: 1.125rem; transition: font-size .3s ease; }
.site-header.is-compact { box-shadow: 0 4px 18px rgba(0, 0, 0, .3); }
.site-header.is-compact .header-inner { padding-top: 4px; padding-bottom: 4px; }
.site-header.is-compact .logo { font-size: 1rem; }

/* Меню на телефоне плавно раскрывается и закрывается */
@media (max-width: 767.98px) {
  .js .main-nav,
  .js .main-nav.is-open {
    display: block;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    visibility: hidden;   /* закрытое меню не ловит Tab */
    transition: max-height .25s ease-out, opacity .2s ease-out, visibility 0s .25s;
  }
  .js .main-nav.is-open {
    max-height: 24rem;
    opacity: 1;
    visibility: visible;
    transition: max-height .3s ease-out, opacity .2s ease-out, visibility 0s;
  }
}

/* ---------- Первый экран ---------- */
/* Фото проявляется из синего фона и чуть «отъезжает» назад. Класс is-loaded ставит onload в шаблоне. Без JS фото видно сразу. */
/* Люди и флаг на фото справа: на узком экране показываем правую часть кадра */
.hero-photo img { object-position: 80% 50%; }
.js .hero-photo img {
  opacity: 0;
  transform: scale(1.06);
  transition: opacity .8s ease-out, transform 2.4s ease-out;
}
.js .hero-photo img.is-loaded { opacity: 1; transform: none; }

/* Заголовок, сумма и кнопки поднимаются по очереди */
.hero-inner > * { animation: s1-rise .6s ease-out both; }
.hero-inner > :nth-child(2) { animation-delay: .1s; }
.hero-inner > :nth-child(3) { animation-delay: .2s; }
.hero-inner > :nth-child(4) { animation-delay: .3s; }
.hero-inner > :nth-child(5) { animation-delay: .4s; }
.hero-inner > :nth-child(6) { animation-delay: .5s; }
@keyframes s1-rise {
  from { opacity: 0; transform: translateY(16px); }
}

/* Цифры одной ширины, чтобы суммы не «прыгали», пока считаются */
.hero-amount-value, .pay-value, .card-number { font-variant-numeric: tabular-nums; }

/* ---------- Появление блоков при прокрутке (классы ставит static/site-1/site.js) ----------
   После появления скрипт снимает класс reveal, и дальше работают обычные стили (например, наведение). */
.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease-out, transform .6s ease-out;
  transition-delay: var(--reveal-delay, 0s);
}
.reveal-ready .reveal.is-visible { opacity: 1; transform: none; }

/* Красная черта под заголовком раздела прорисовывается слева направо */
.section-title {
  border-bottom: 0;
  background: linear-gradient(var(--red), var(--red)) left bottom / 100% 4px no-repeat;
  padding-bottom: 14px;
}
.reveal-ready .section-title.reveal {
  background-size: 0 4px;
  transition: opacity .6s ease-out, transform .6s ease-out, background-size .8s ease-out .3s;
}
.reveal-ready .section-title.reveal.is-visible { background-size: 100% 4px; }

/* Кружки с номерами шагов «выскакивают» после появления шага */
.reveal-ready .step.reveal::before { transform: scale(.4); opacity: 0; transition: transform .4s cubic-bezier(.3, 1.6, .5, 1) .3s, opacity .3s ease .3s; }
.reveal-ready .step.reveal.is-visible::before { transform: none; opacity: 1; }

/* ---------- Наведение мышью (только на компьютере) ---------- */
@media (hover: hover) and (pointer: fine) {
  .btn { transition: transform .15s ease, background-color .15s, box-shadow .15s; }
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(200, 16, 46, .35); }

  /* Карточки слегка приподнимаются */
  .card, .pay-card { transition: transform .25s ease, box-shadow .25s ease; }
  .card:hover, .pay-card:hover { transform: translateY(-4px); box-shadow: var(--card-shadow-hover); }
  .card-illus img { transition: transform .6s ease; }
  .card-illus:hover img { transform: scale(1.05); }

  /* Пункты меню: красная черта снизу при наведении */
  .main-nav a { position: relative; }
  .main-nav a::after {
    content: "";
    position: absolute;
    left: 10px; right: 10px; bottom: 8px;
    height: 2px;
    background: var(--red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
  }
  .main-nav a:hover::after, .main-nav a:focus-visible::after { transform: scaleX(1); }
}

/* ---------- Блок-картинка на всю ширину экрана с короткой подписью ---------- */
.photo-band {
  position: relative;
  overflow: hidden;
  min-height: 340px;
  display: flex;
  align-items: flex-end;
  background: var(--header-bg);
  color: #fff;
}
.photo-band picture { position: absolute; inset: 0; }
.photo-band img { width: 100%; height: 100%; object-fit: cover; }
/* Какую часть фото показывать при обрезке: люди на обоих фото правее центра */
.photo-band-svoi img { object-position: 70% 60%; }
.photo-band-sopr img { object-position: 70% 45%; }
.photo-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(27, 42, 73, .92), rgba(27, 42, 73, .35) 60%, rgba(27, 42, 73, .1));
}
.photo-band-text { position: relative; z-index: 1; padding-top: 48px; padding-bottom: 40px; }
.photo-band-text .photo-band-title { font-size: 2rem; font-weight: 800; line-height: 1.15; margin-bottom: .5rem; max-width: 18em; }
.photo-band-text p { max-width: 36em; font-size: 1.125rem; }
.photo-band .btn { margin-top: 8px; }
/* При появлении фото медленно «отъезжает», а подпись поднимается */
.reveal-ready .photo-band.reveal { opacity: 1; transform: none; }
.reveal-ready .photo-band.reveal img { transform: scale(1.12); transition: transform 1.8s ease-out; }
.reveal-ready .photo-band.reveal .photo-band-text { opacity: 0; transform: translateY(24px); transition: opacity .7s ease-out .3s, transform .7s ease-out .3s; }
.reveal-ready .photo-band.reveal.is-visible img,
.reveal-ready .photo-band.reveal.is-visible .photo-band-text { opacity: 1; transform: none; }

/* ---------- «Ваше желание»: фигура без фона рядом с текстом ---------- */
.split { display: grid; gap: 24px; }
.split-figure img { width: 280px; margin: 0 auto; }
.split .cards { grid-template-columns: 1fr; }
.section-dark .section-lead { color: #fff; }

/* ---------- Планшет и ПК ---------- */
@media (min-width: 768px) {
  .site-header .header-inner { padding-top: 22px; padding-bottom: 22px; }
  .site-header .logo { font-size: 1.5rem; }
  .site-header.is-compact .header-inner { padding-top: 6px; padding-bottom: 6px; }
  .site-header.is-compact .logo { font-size: 1.25rem; }
  :root { --header-offset: 104px; }

  .photo-band { min-height: clamp(420px, 62vh, 640px); }
  .photo-band-text .photo-band-title { font-size: 3rem; }
  .photo-band-text { padding-bottom: 64px; }
}

/* Планшет: меню во второй строке шапки — запас для якорей больше */
@media (min-width: 768px) and (max-width: 1023px) {
  :root { --header-offset: 160px; }
}

@media (min-width: 1024px) {
  /* Направления службы: строки «картинка + текст», картинка то слева, то справа */
  .cards-4.napr-rows { grid-template-columns: 1fr; gap: 32px; }
  .napr-rows .card-illus { display: grid; grid-template-columns: 7fr 5fr; }
  .napr-rows .card-illus-body { align-self: center; }
  .napr-rows .card-illus:nth-child(even) picture { order: 2; }
  .napr-rows .card-illus img { aspect-ratio: 16 / 9; height: 100%; }
  .napr-rows .card-illus-body { padding: 40px 48px; }
  .napr-rows .card-heading { font-size: 2rem; }

  /* «Ваше желание»: фигура по пояс слева во всю высоту блока, голова выходит за верхний край,
     низ картинки стоит на нижнем краю. Заголовок и карточки справа. */
  #mesta .container { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 48px; }
  #mesta .split { display: contents; }
  #mesta .section-title { grid-column: 2; grid-row: 1; justify-self: start; }
  #mesta .split > div:not(.split-figure) { grid-column: 2; grid-row: 2; }
  .split-figure {
    grid-column: 1; grid-row: 1 / 3;
    position: relative; z-index: 1;
    margin: calc(-80px - 72px) 0 -80px;   /* 80 — отступ раздела, 72 — насколько голова выходит вверх */
  }
  .split-figure picture { position: absolute; inset: 0; }
  /* Картинка прижата к нижнему краю и к тексту; если колонка узкая, плечо уходит за левый край, как на contract.mos.ru */
  .split-figure img {
    position: absolute; right: 0; bottom: 0;
    height: 100%; width: auto;
    max-width: calc(100% + 40px);   /* на узком экране не даём лицу уйти за край: картинка уменьшается */
    object-fit: contain; object-position: right bottom;
  }
}

@media (min-width: 1200px) {
  /* Страница шире, как на contract.mos.ru */
  .container { max-width: 1440px; padding: 0 40px; }

  /* Вопросы: заголовок слева и остаётся на месте при прокрутке, вопросы справа */
  #voprosy .container { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; align-items: start; }
  #voprosy .section-title { position: sticky; top: calc(var(--header-offset) + 16px); justify-self: start; }
}

/* Широкий экран: фигура во всю высоту блока, голова выходит за верхний край, плечо может уйти за левый край */
@media (min-width: 1280px) {
  .split-figure img { max-width: none; }
}

/* Карточка «Другой регион» в разделе выплат: синяя полоса вместо красной */
.pay-card-any { border-top-color: var(--heading); display: flex; flex-direction: column; }
.pay-card-any .btn { margin-top: auto; align-self: flex-start; }
.pay-card-any .pay-extra { margin-bottom: 24px; }
@media (min-width: 1024px) {
  .pay-grid-places { grid-template-columns: repeat(3, 1fr); }
}