/* ==========================================================================
   mobapp.css — страница «Мобильное приложение Roscongress» (раздел «Участникам»).
   Figma 2149:136888. База 1920. Токены base.css. Переиспользует:
   arrival.css (arr-hero, crumbs), visa.css (visa-case/list/block/group/label/
   bullets/callout). Собственные блоки: download-карточка, преимущества (2×2),
   сервис-карточка. Брейкпоинты проекта: 1920 / 1440(≤1919) / 768(≤1023) / 360(≤767).
   ========================================================================== */

/* ---------- Hero: заголовок 56/64 (по Figma, меньше стандартных 84) ---------- */
.arr-hero--app .arr-hero__title {
  margin-top: 30px;
  font: 400 56px/64px var(--font-display);
}
/* диагональная шторка снизу-слева (Figma linear-gradient 62.7°) */
.arr-hero--app .arr-hero__shade {
  background: linear-gradient(62.7deg,
      rgb(9, 30, 37) 4%,
      rgba(9, 30, 37, .45) 25%,
      rgba(9, 30, 37, .05) 55%);
}

/* ==========================================================================
   Download-карточка «Скачайте мобильное приложение»
   ========================================================================== */
.mobapp-dl { margin-top: 80px; }
.mobapp-dl__card {
  position: relative;
  overflow: hidden;
  min-height: 350px;
  padding: 40px;
  border-radius: var(--r-24);
  background: var(--c-dark);
  isolation: isolate;
}
.mobapp-dl__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.mobapp-dl__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}
/* скрим — прозрачный на десктопе, затемняет на мобиле для читаемости */
.mobapp-dl__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: transparent;
  pointer-events: none;
}
.mobapp-dl__grid {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 64px;
  height: 100%;
  min-height: 270px;
}
.mobapp-dl__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 534px;
}
.mobapp-dl__title {
  font: 400 56px/64px var(--font-display);
  text-transform: uppercase;
  color: #fff;
}
.mobapp-dl__aside {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  max-width: 751px;
  /* Figma 2149:136922: текст-столбец кончается на x1725 из 1840 — до правого края
     ~115px (40 pad + 74). Без этого space-between прижимает текст к падингу 40. */
  margin-right: 74px;
}
.mobapp-dl__text {
  font: 400 18px/1.6 var(--font-text);
  color: #fff;
}
.mobapp-dl__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 56px;
  padding: 0 24px;
  border-radius: var(--r-8);
  background: var(--c-accent);
  color: #fff;
  font: 400 16px/1.6 var(--font-text);
  transition: background-color .2s ease;
}
.mobapp-dl__btn:hover { background: #a82f16; }
.mobapp-dl__btn .icon { transition: transform .2s ease; }
.mobapp-dl__btn:hover .icon { transform: translateX(4px); }

/* ==========================================================================
   Преимущества «Оставайтесь на связи» — 2×2 тёмные карточки
   ========================================================================== */
.mobapp-adv { margin-top: 80px; }
.mobapp-adv__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 48px;
  max-width: 817px;
}
.mobapp-adv__title {
  font: 400 40px/48px var(--font-display);
  text-transform: uppercase;
  color: var(--c-text);
}
.mobapp-adv__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.mobapp-adv__card {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 33px 56px;
  border-radius: var(--r-24);
  background: var(--c-dark);
  border-top: 1px solid var(--c-line);
}
.mobapp-adv__card:nth-child(n+3) { border-bottom: 1px solid var(--c-line); }
.mobapp-adv__card--badges { justify-content: space-between; align-items: center; }
.mobapp-adv__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mobapp-adv__name {
  font: 400 32px/40px var(--font-display);
  text-transform: uppercase;
  color: #fff;
}
.mobapp-adv__text {
  font: 400 16px/1.6 var(--font-text);
  color: var(--c-bg);
}
.mobapp-adv__text a { color: var(--c-accent); text-decoration: underline; }
.mobapp-adv__text a:hover { text-decoration: none; }
.mobapp-adv__badges {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mobapp-adv__badges a { display: block; }
.mobapp-adv__badges img {
  display: block;
  width: 108px;
  height: 32px;
}

/* ==========================================================================
   Возможности приложения — 3 светлые visa-карточки + сервис-карточка
   ========================================================================== */
.mobapp-caps { margin-top: 80px; }
.mobapp-caps__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
  max-width: 817px;
}
/* три колонки вместо двух у visa-cases */
.mobapp-caps .visa-cases {
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 0;
}
/* Figma 2149:136994: заголовок y49+40, список y113 → отступ 24px. На prilozhenie
   у карточек нет visa-case__sub, поэтому спейсинг заголовок→список схлопывался в 0. */
.mobapp-caps .visa-case__title { margin-bottom: 24px; }

/* Широкая тёмная карточка «Сервисы для организации вашего участия» */
.mobapp-services {
  display: flex;
  gap: 73px;
  margin-top: 16px;
  padding: 64px;
  border-radius: var(--r-24);
  background: var(--c-dark);
}
.mobapp-services__title {
  flex: none;
  width: 539px;
  font: 400 40px/48px var(--font-display);
  text-transform: uppercase;
  color: #fff;
}
.mobapp-services__cols {
  flex: 1;
  display: flex;
  gap: 138px;
}
.mobapp-services__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mobapp-services__col li {
  position: relative;
  padding-left: 34px;
  font: 400 16px/1.6 var(--font-text);
  color: var(--c-bg);
}
.mobapp-services__col li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 7px;
  width: 10px;
  height: 10px;
  background: var(--c-accent);
  transform: rotate(45deg);
}

/* два примечания под списком идут плотнее (gap 8), чем блоки body (gap 44) */
.mobapp-meet__notes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---------- визуальные правки visa-block под эту страницу ---------- */
.mobapp-page .visa-block { margin-top: 80px; }
.mobapp-page .visa-block:last-of-type { margin-bottom: 120px; }

/* ==========================================================================
   Блок скачивания — переход 2-колонка → стек
   Порог 1799, а НЕ 1919: 2-колонка (как в макете 1920) держится, пока текст-
   столбец не начинает наезжать на телефон в коллаже. При aside 751 + отступах
   это ~1745, ставим 1799 с запасом. Отдельный медиазапрос (не в общем @1919),
   иначе на мониторе 1920 вьюпорт ~1905 попадал в стек — коллаж затемнялся и
   заголовок с текстом сваливались в столбец («блок скукурузился»). См. память
   breakpoint-1919-reality. Ниже 1799 — стек с затемнением коллажа под текст.
   ========================================================================== */
@media (max-width: 1799px) {
  .mobapp-dl__card { padding: 36px; min-height: 0; }
  .mobapp-dl__card::before {
    background: linear-gradient(180deg, rgba(9, 30, 37, .6), rgba(9, 30, 37, .82));
  }
  .mobapp-dl__grid { flex-direction: column; justify-content: flex-start; gap: 28px; min-height: 0; }
  .mobapp-dl__head, .mobapp-dl__aside { max-width: none; margin-right: 0; }
  .mobapp-dl__aside { gap: 24px; }
  .mobapp-dl__title { font-size: 44px; line-height: 50px; }
  .mobapp-dl__text { font-size: 17px; max-width: 900px; }
}

/* ==========================================================================
   ≤1440
   ========================================================================== */
@media (max-width: 1919px) {
  .arr-hero--app .arr-hero__title { margin-top: 22px; font-size: 44px; line-height: 50px; }

  .mobapp-dl { margin-top: 64px; }

  .mobapp-adv { margin-top: 64px; }
  .mobapp-adv__head { margin-bottom: 40px; }
  .mobapp-adv__title { font-size: 32px; line-height: 40px; }
  .mobapp-adv__card { padding: 28px 40px; }
  .mobapp-adv__name { font-size: 28px; line-height: 34px; }

  .mobapp-caps { margin-top: 64px; }
  .mobapp-services { margin-top: 16px; gap: 48px; padding: 48px; }
  .mobapp-services__title { width: 420px; font-size: 32px; line-height: 40px; }
  .mobapp-services__cols { gap: 64px; }

  .mobapp-page .visa-block { margin-top: 64px; }
  .mobapp-page .visa-block:last-of-type { margin-bottom: 100px; }
}

/* ==========================================================================
   ≤768
   ========================================================================== */
@media (max-width: 1023px) {
  .arr-hero--app .arr-hero__title { margin-top: 16px; font-size: 34px; line-height: 40px; }

  .mobapp-dl { margin-top: 48px; }
  .mobapp-dl__card { padding: 32px; }
  /* коллаж уводим в фон и затемняем, контент — в колонку */
  .mobapp-dl__card::before {
    background: linear-gradient(180deg, rgba(9, 30, 37, .55), rgba(9, 30, 37, .82));
  }
  .mobapp-dl__grid { flex-direction: column; gap: 32px; min-height: 0; }
  .mobapp-dl__head, .mobapp-dl__aside { max-width: none; }
  .mobapp-dl__title { font-size: 36px; line-height: 42px; }

  .mobapp-adv { margin-top: 48px; }
  .mobapp-adv__head { margin-bottom: 32px; }
  .mobapp-adv__title { font-size: 28px; line-height: 34px; }
  .mobapp-adv__grid { grid-template-columns: 1fr; }
  .mobapp-adv__card:nth-child(n+3) { border-bottom: none; }
  .mobapp-adv__card { padding: 28px 32px; }

  .mobapp-caps { margin-top: 48px; }
  .mobapp-caps .visa-cases { grid-template-columns: 1fr; gap: 20px; }
  .mobapp-services { flex-direction: column; gap: 28px; margin-top: 20px; padding: 40px; }
  .mobapp-services__title { width: auto; font-size: 28px; line-height: 34px; }
  .mobapp-services__cols { gap: 40px; }

  .mobapp-page .visa-block { margin-top: 48px; }
  .mobapp-page .visa-block:last-of-type { margin-bottom: 80px; }
}

/* ==========================================================================
   ≤360
   ========================================================================== */
@media (max-width: 767px) {
  .arr-hero--app .arr-hero__title { margin-top: 12px; font-size: 26px; line-height: 30px; }

  .mobapp-dl { margin-top: 40px; }
  .mobapp-dl__card { padding: 24px 20px; }
  .mobapp-dl__grid { gap: 24px; }
  .mobapp-dl__title { font-size: 28px; line-height: 32px; }
  .mobapp-dl__text { font-size: 16px; }
  .mobapp-dl__btn { width: 100%; }

  .mobapp-adv { margin-top: 40px; }
  .mobapp-adv__title { font-size: 24px; line-height: 30px; }
  .mobapp-adv__card { padding: 24px 20px; gap: 20px; }
  .mobapp-adv__card--badges { flex-direction: column; align-items: flex-start; }   /* столбиком — тело/бейджи по левому краю */
  .mobapp-adv__name { font-size: 24px; line-height: 30px; }

  .mobapp-caps { margin-top: 40px; }
  .mobapp-services { gap: 24px; padding: 24px 20px; }
  .mobapp-services__title { font-size: 24px; line-height: 30px; }
  .mobapp-services__cols { flex-direction: column; gap: 16px; }

  .mobapp-page .visa-block { margin-top: 40px; }
  .mobapp-page .visa-block:last-of-type { margin-bottom: 56px; }
}