@import url("./common.css");

/*
  Mobile «Поддержка» — макет Figma:
  https://www.figma.com/design/Mg3zYwflvOEthD9cV95EYQ/Umbrent--сайт---Copy-?node-id=1114-3805
  fileKey Mg3zYwflvOEthD9cV95EYQ · фрейм 1114:3805 «ответы на вопросы» (375×808 @ y=886).
  Узлы в разметке: 1114:361 фон, 1114:2892 blend, 1114:3801 подзаголовок hero.
*/

.mobile-page.mobile-support {
  position: relative;
  overflow-x: hidden;
  background: #4975d7;
  /*
    Якорь 520 (layout-band): пока открыт /mobile/support при vw→520+, не раздувать UI сильнее масштаба 520/375 —
    совпадает с порогом редиректа на десктоп в index.js.
  */
  --mobile-layout-band-max-mq: 1.3866666667;
  --mobile-support-ui-mq: min(var(--mobile-mq), var(--mobile-layout-band-max-mq));
  --mobile-support-section-height: calc(408px * var(--mobile-support-ui-mq));
  --mobile-support-canvas-pull-up: calc(15px * var(--mobile-support-ui-mq));
}

@supports (overflow-x: clip) {
  .mobile-page.mobile-support {
    overflow-x: clip;
  }
}

/*
  Слои как в mobile about (hero-bg-gradient-fon < Blend Group < контент hero):
  иначе blend не ложится между фоном и текстом/маскотом.

  Figma 484:409 «Поддержка 2» → фон 1144:967: фон героя — это не плоский
  диагональный градиент, а живой композит (синяя база + мягкое белое свечение
  посередине + лёгкий лайт-блю flux). Раньше я заменил исходную PNG на
  linear-gradient(120deg …), и из-за этого визуально появился характерный
  диагональный шов и розово-белая полоса в нижнем-левом углу — на фрейме её
  нет. Возвращаем фон как точный экспорт группы «фон» из Figma («support-hero-fon.png»):
    - база #4975d7 (на случай fallback / поверх неё блендится PNG со свечением);
    - PNG рисуется во всю ширину контейнера, поверх — group 25 (.support-hero-bg-blend-group-25)
      добавляет векторный завиток поверх растрового фона.
  Файл — это ровно тот скриншот фона из Figma, который шёл в чат.
*/
.mobile-page.mobile-support > .support-hero-bg-gradient-fon {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(1078px * var(--mobile-mq));
  z-index: 1;
  pointer-events: none;
  background-color: #4975d7;
  /* Путь относительно /static/mobile/support.css — надёжнее абсолютного /static/… при прокси/подпути */
  background-image: url("images/support-hero-fon.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
  opacity: 1;
}

/* 1114:2892 Blend Group 25 (mobile «Поддержка») — ширина 375, SVG/PNG сдвинут внутри */
.mobile-page.mobile-support > .support-hero-bg-blend-group-25 {
  position: absolute;
  left: 0;
  top: calc(190px * var(--mobile-mq));
  width: 100%;
  height: calc(820.278076171875px * var(--mobile-mq));
  overflow: hidden;
  /*
    Выше фона FAQ (5), ниже контента hero (7): завиток из макета заходит на .faq
    (как blend на about поверх промо-фона). pointer-events: none — клики по FAQ не режем.
  */
  z-index: 6;
  pointer-events: none;
  isolation: isolate;
  opacity: 1;
}

/*
  initStaticImagesFadeIn: .umbrent-img-wrap > .umbrent-img-twin > (ph + img).
  Оба img absolute — twin без высоты схлопывается, left/top считаются не от блока blend.
*/
.mobile-page.mobile-support > .support-hero-bg-blend-group-25 > .umbrent-img-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.mobile-page.mobile-support > .support-hero-bg-blend-group-25 .umbrent-img-wrap > .umbrent-img-twin {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  line-height: 0;
  isolation: isolate;
}

.mobile-page.mobile-support > .support-hero-bg-blend-group-25 .umbrent-img-twin > img {
  position: absolute;
  left: calc(-86px * var(--mobile-mq));
  top: 0;
  width: calc(604.22802734375px * var(--mobile-mq));
  height: calc(820.278076171875px * var(--mobile-mq));
  max-width: none;
  object-fit: fill;
  object-position: top left;
  display: block;
}

html main.page.mobile-support .support-hero-bg-blend-group-25 .umbrent-img-twin > img.umbrent-img-ph {
  z-index: 0;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

html main.page.mobile-support .support-hero-bg-blend-group-25 .umbrent-img-twin > img:not(.umbrent-img-ph) {
  z-index: 2;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.mobile-support .support-hero-section {
  position: relative;
  z-index: 7;
  /* Нельзя смешивать overflow-x: hidden с visible по Y — в браузере Y станет auto и секция начнёт скроллиться */
  overflow: hidden;
  min-height: calc(886px * var(--mobile-mq));
  height: calc(886px * var(--mobile-mq));
  background: transparent;
}

.mobile-support .support-page-canvas {
  position: relative;
  z-index: 7;
  height: calc(886px * var(--mobile-mq));
  min-height: calc(886px * var(--mobile-mq));
  padding: 0;
}

/* Шапка — те же токены, что common.css (--mobile-header-*) */
.mobile-support .site-header {
  position: absolute;
  left: var(--mobile-header-x);
  top: var(--mobile-header-y);
  z-index: 3;
}

.mobile-support .support-hero {
  position: absolute;
  left: 0;
  top: calc(138px * var(--mobile-mq));
  width: 100%;
  height: calc(731.321533203125px * var(--mobile-mq));
}

.mobile-support .support-hero-title {
  position: absolute;
  left: calc(25px * var(--mobile-mq));
  top: 0;
  width: calc(235px * var(--mobile-mq));
  margin: 0;
  color: #fff;
  text-transform: uppercase;
  font-size: calc(32px * var(--mobile-mq));
  font-weight: 700;
  line-height: calc(34px * var(--mobile-mq));
  letter-spacing: var(--ls-hero-title);
  text-shadow: 0 calc(6px * var(--mobile-mq)) calc(14.9px * var(--mobile-mq)) rgba(57, 106, 213, 0.44);
  font-synthesis: none;
}

/* Figma 1114:3801: Poppins Regular 16 / 1.2, #FAFAFA, 250×80.
   Figma bbox top = 138px, но из-за разницы метрик шрифта в Figma vs браузере
   визуальный отступ от последней строки заголовка получается ~12px больше,
   чем в макете. Сдвигаем bbox до 126px, чтобы визуальный gap совпал с Figma. */
.mobile-support .support-hero-subtitle {
  position: absolute;
  left: calc(25px * var(--mobile-mq));
  top: calc(138px * var(--mobile-mq));
  width: calc(250px * var(--mobile-mq));
  margin: 0;
  padding: 0;
  color: #fafafa;
  font-size: calc(16px * var(--mobile-mq));
  font-weight: 400;
  line-height: calc(16px * 1.2 * var(--mobile-mq));
  letter-spacing: var(--ls-hero-subtitle);
  font-synthesis: none;
}

.mobile-support .support-hero-visual {
  position: absolute;
  left: 0;
  top: calc(179.321533203125px * var(--mobile-mq));
  width: 100%;
  height: calc(552px * var(--mobile-mq));
}

.mobile-support .support-hero-mascot {
  position: absolute;
  inset: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.mobile-support .support-hero-mascot > .umbrent-img-twin,
.mobile-support .support-hero-mascot > .umbrent-img-wrap {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.mobile-support .support-hero-mascot > .umbrent-img-wrap > .umbrent-img-twin {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  line-height: 0;
  overflow: hidden;
}

/*
  Растр 375×552, в макете «увеличение» 147.2% по ширине при высоте кадра = высоте визуала (552×mq).
  Проценты от ширины twin ломаются при --mobile-mq cap (ширина визуала > 375×mq): бокс 147.2%×100%
  перестаёт совпадать по аспекту с PNG — маскот визуально «сжимается». Фиксируем стороны в mq (375×1.472=552).
*/
html main.page.mobile-support .support-hero-mascot .umbrent-img-twin > img.umbrent-img-ph {
  position: absolute;
  inset: unset;
  left: -22.4%;
  top: 0;
  width: calc(552px * var(--mobile-mq));
  height: calc(552px * var(--mobile-mq));
  max-width: none;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}

html main.page.mobile-support .support-hero-mascot .umbrent-img-twin > img.support-hero-mascot-image,
html main.page.mobile-support .support-hero-mascot .umbrent-img-twin > img.support-hero-mascot-image.umbrent-media-fade:not(.umbrent-img-ph) {
  position: absolute;
  left: -22.4%;
  top: 0;
  width: calc(552px * var(--mobile-mq));
  height: calc(552px * var(--mobile-mq));
  max-width: none;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  transform: translate3d(0, 0, 0);
}

.mobile-support .support-hero-ribbon {
  display: none;
}

.mobile-support .support-hero-shadow {
  position: absolute;
  left: calc(164.74072265625px * var(--mobile-mq));
  top: calc(604.512451171875px * var(--mobile-mq));
  width: calc(194.72840881347656px * var(--mobile-mq));
  height: calc(45.758506774902344px * var(--mobile-mq));
}

.mobile-support .support-hero-shadow > .umbrent-img-twin {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}

/*
  static-images-fade: финал в twin с position:relative + translateZ(0) — ломает fill в маленькой тени.
*/
html main.page.mobile-support .support-hero-shadow > .umbrent-img-twin > img:not(.umbrent-img-ph) {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
  display: block;
  transform: translate3d(0, 0, 0);
}

/* Figma 484:409: «ответы на вопросы» y=886 — без отрицательного margin (как в about не поднимаем) */
.mobile-support .faq {
  position: relative;
  margin-top: 0;
  min-height: 0;
  height: auto;
  border-radius: calc(40px * var(--mobile-mq)) calc(40px * var(--mobile-mq)) 0 0;
  background: #bcd1ff;
  z-index: 5;
  box-shadow: var(--mobile-section-top-shadow);
  width: 100%;
  min-width: 0;
  overflow-x: clip;
}

/* Figma 1114:3805: отступ сверху до заголовка 26px; под заголовком до списка ~11.75px (1114:3806 → 1181:696) */
.mobile-support .faq-canvas {
  padding: calc(26px * var(--mobile-mq)) var(--mobile-faq-pad-x) calc((72px + 90px) * var(--mobile-mq));
  box-sizing: border-box;
  min-width: 0;
}

/* Figma 1114:3806: Poppins Bold 28px, lh 56px, tracking -0.2px, uppercase */
.mobile-support .faq-title {
  margin: 0 0 calc(11.75px * var(--mobile-mq));
  color: #fff;
  text-align: center;
  font-size: calc(28px * var(--mobile-mq));
  font-weight: 700;
  line-height: calc(56px * var(--mobile-mq));
  letter-spacing: var(--ls-faq-title);
  text-transform: uppercase;
  font-synthesis: none;
}

.mobile-support .faq-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(16px * var(--mobile-mq));
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.mobile-support .faq-item {
  width: 100%;
  max-width: calc(339px * var(--mobile-mq));
  margin-inline: auto;
  /* min-height 75 + выравнивание строки закрытой карточки: faq-accordion.css; вертикальный padding у карточки — только через open */
  padding: 0 calc(16px * var(--mobile-mq)) 0 calc(15px * var(--mobile-mq));
  box-sizing: border-box;
  border: 0;
  border-radius: calc(20px * var(--mobile-mq));
  background: #fff;
  box-shadow: none;
  transition: transform var(--interactive-duration) var(--interactive-ease), filter calc(0.2s * var(--umbrent-motion-factor, 1.5)) ease,
    opacity calc(0.2s * var(--umbrent-motion-factor, 1.5)) ease, box-shadow calc(0.2s * var(--umbrent-motion-factor, 1.5)) ease;
}

.mobile-support .faq-item-text {
  text-align: left;
}

.mobile-support .faq-item img {
  width: calc(24px * var(--mobile-mq));
  height: calc(24px * var(--mobile-mq));
}

.mobile-support .support {
  position: relative;
  margin-top: calc(-90px * var(--mobile-support-ui-mq));
  height: var(--mobile-support-section-height);
  border-radius: calc(40px * var(--mobile-support-ui-mq)) calc(40px * var(--mobile-support-ui-mq)) 0 0;
  background: linear-gradient(90deg, #4975d7 18.75%, #85a3e8 95.67%);
  z-index: 8;
  box-shadow: var(--mobile-section-top-shadow);
}

.mobile-support .support-canvas {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: calc(100% + var(--mobile-support-canvas-pull-up));
  margin: calc(-1 * var(--mobile-support-canvas-pull-up)) auto 0;
  box-sizing: border-box;
}

/*
  Figma 1096:10840 (тг → текст «Напишите нам в поддержку…»):
  Poppins SemiBold (wght 600) 16/1.3, центрирован, white. Слово «Telegram»
  выделено жирнее (Bold/700) через <strong> в шаблоне. До правки тут стояло
  font-weight 400 + line-height 1.2 — текст выглядел тоньше и плотнее макета.
*/
.mobile-support .support-canvas p {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(54px * var(--mobile-support-ui-mq));
  /* 375…520: как vw/375; тексты не шире канвы и не упираются в поля */
  width: min(calc(336px * var(--mobile-support-ui-mq)), calc(100% - calc(24px * var(--mobile-support-ui-mq))));
  max-width: calc(100% - calc(24px * var(--mobile-support-ui-mq)));
  min-width: 0;
  margin: 0;
  box-sizing: border-box;
  text-align: center;
  color: #fff;
  font-size: calc(16px * var(--mobile-support-ui-mq));
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--ls-none);
  font-synthesis: none;
}

.mobile-support .support-canvas strong {
  font-weight: 700;
}

.mobile-support .tg-btn {
  position: absolute;
  left: 50%;
  top: calc(132px * var(--mobile-support-ui-mq));
  transform: translateX(-50%);
  display: block;
  width: calc(61px * var(--mobile-support-ui-mq));
  height: calc(61px * var(--mobile-support-ui-mq));
  border-radius: 50%;
  overflow: hidden;
  transform-origin: center center;
  box-shadow: none;
  transition: transform var(--tg-flight-duration) var(--tg-flight-ease), filter calc(0.2s * var(--umbrent-motion-factor, 1.5)) ease, opacity calc(0.2s * var(--umbrent-motion-factor, 1.5)) ease;
}

/* От низа иконки Telegram до верха футера — 40px (было ~27px при -188px). */
.mobile-support .footer {
  position: relative;
  margin-top: calc(-175px * var(--mobile-support-ui-mq));
  min-height: 0;
  height: auto;
  z-index: 9;
}

.mobile-support .faq-item:hover {
  filter: brightness(1.03);
  box-shadow: var(--btn-surface-hover-shadow);
}
.mobile-support .faq-item:active {
  transform: translateY(var(--interactive-press-translate-y));
  box-shadow: var(--btn-surface-active-shadow);
  filter: brightness(0.99);
}

/* Явные размеры × --mobile-support-ui-mq: иначе intrinsic 61px из SVG/HTML ломает масштаб при width/height 100% */
.mobile-support .tg-btn img {
  display: block;
  width: calc(61px * var(--mobile-support-ui-mq));
  height: calc(61px * var(--mobile-support-ui-mq));
  max-width: none;
  object-fit: contain;
  transform-origin: center center;
  transition: transform var(--tg-flight-duration) var(--tg-flight-ease), filter calc(0.2s * var(--umbrent-motion-factor, 1.5)) ease;
}

.mobile-support .tg-btn:hover {
  filter: brightness(1.12);
  transform: translate(-50%, calc(-8px * var(--mobile-support-ui-mq)));
}

.mobile-support .tg-btn:active:not(.tg-plane--flying) {
  filter: brightness(1.02);
}

.mobile-support .tg-btn:active:not(.tg-plane--flying) img {
  transform: translate(calc(-11px * var(--mobile-support-ui-mq)), calc(10px * var(--mobile-support-ui-mq)))
    scale(0.92);
}