/* ==========================================================================
   Cup'D — мобильная версия по макетам «… — mobile 390».

   Раньше мобильная собиралась как сжатый десктоп, и выглядела рублено.
   В Figma у мобильной свои композиции: выноски — список строк, цифры
   сохраняют наложение, карточка локации стоит под картой и т. д.
   Файл подключается последним, поэтому переопределяет всё остальное.
   ========================================================================== */

@media (max-width: 767px) {

  /* --- Общее -------------------------------------------------------------
     В макете заголовки и лиды секций отступают от края экрана на 58 px,
     а не прижимаются к гутеру. От контейнера (390 − 32) это ~11.7 %. */

  .stations__title,
  .stations__lead,
  .design__title,
  .design__lead,
  .loc__title,
  .loc__lead,
  .why__title,
  .projects__head,
  .leadform__title,
  .flavors__title,
  .flavors__lead,
  .calc__lead,
  .about__title,
  .dirs__title,
  .founders__title,
  .ahero__title,
  .ahero__subtitle,
  .ahero__body {
    margin-left: 11.7%;
  }

  .stations__lead,
  .design__lead,
  .loc__lead,
  .flavors__lead { max-width: 293px; }

  /* Кнопка под таблицей и подпись к ней тоже с отступом */
  .why__cta { margin-left: 11.7%; }

  /* --- Индивидуальная станция -------------------------------------------
     На мобильном это не сетка иконок вокруг картинки, а список строк:
     кружок 60×60 слева, подпись 16 px справа, между строками разделители.
     Станция с подписью идёт отдельным блоком ниже списка. */

  .ind {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .ind__head { order: 1; margin-left: 11.7%; width: auto; }
  .ind__col--left { order: 2; }
  .ind__col--right { order: 3; }
  .ind__station { order: 4; }
  .ind__caption { order: 5; }

  .ind__head .ind__title { font-size: 19px; }
  .ind__lead { margin-top: 18px; max-width: 321px; font-size: 12px; line-height: 1.15; }

  .ind__col {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    margin-top: 0;
  }

  .ind__col--left { margin-top: 34px; }

  .callout {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding-block: 8px;
    text-align: left;
  }

  /* Разделители между всеми строками, включая стык двух колонок */
  .ind__col--left .callout + .callout,
  .ind__col--right .callout,
  .ind__col--right { border-top: 1px solid var(--c-stroke); }
  .ind__col--right { border-top: 0; }

  .callout__icon { width: 60px; height: 60px; }

  .callout__label {
    font-size: 16px;
    line-height: 1.1;
    text-align: left;
  }

  .ind__station {
    width: 66%;
    margin: 34px auto 0;
  }

  .ind__caption { margin-top: 18px; }
  .ind__caption-title { font-size: 19px; }
  .ind__caption-text { font-size: 12px; }

  /* --- Доход в цифрах ----------------------------------------------------
     Наложение из макета сохраняем: список слева, стакан справа внахлёст,
     карточка «30 чашек» внизу слева, плашка с суммами на всю ширину. */

  .nums {
    display: block;
    aspect-ratio: 358 / 711;
    min-height: 620px;
  }

  .nums__title,
  .nums__list,
  .nums__cup,
  .nums__card,
  .nums__stats { position: absolute; }

  .nums__title {
    left: 11.7%;
    top: 5%;
    width: 74%;
    font-size: 19px;
  }

  .nums__list {
    left: 0;
    top: 16.7%;
    width: 59%;
    z-index: 3;
  }

  .nrow { gap: 8px; padding-block: 5px; }
  .nrow__icon { width: 38px; height: 38px; }
  .nrow__num { font-size: 16px; }
  .nrow__label { font-size: 11px; line-height: 1.1; }

  .nums__cup {
    left: 46%;
    top: 17%;
    width: 66%;
    z-index: 1;
  }

  .nums__glow { left: -18%; top: -4%; width: 136%; height: 106%; }
  .nums__cupframe { display: none; }

  .nums__card {
    left: -6.4%;
    top: 64%;
    width: 41%;
    z-index: 4;
    padding: 14px 10px 12px;
    transform: rotate(-8.4deg);
  }

  .nums__card-30 { font-size: 34px; }
  .nums__card-cups { font-size: 15px; }
  .nums__card-pill { font-size: 12px; padding: 6px 10px 5px; }
  .cups { margin-top: 8px; gap: 4px; }
  .cups__i { width: 22px; height: 28px; }

  .nums__stats {
    left: -4.5%;
    top: 89%;
    width: 109%;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
  }

  .nstat { gap: 8px; }
  .nstat__icon { width: 30px; height: 30px; }
  .nstat__num { font-size: 15px; }
  .nstat__label { font-size: 10px; line-height: 1.1; }
  .nstat__divider { width: 1px; height: 32px; }

  /* --- Коллекция вкусов --------------------------------------------------
     В макете 390 стаканы стоят коллажем в середине — между лидом и списком
     категорий, а не разбросаны по углам.

     Важно: абсолютные потомки считаются от padding-box контейнера, то есть
     от 390, а не от контентных 358. Поэтому все проценты ниже — от 390,
     иначе блоки уезжают вправо и текст режется краем. */

  .flavors__inner {
    position: relative;
    aspect-ratio: 390 / 885;
    min-height: 0;
  }

  .flavors__text { position: static; margin-left: 0; }

  .flavors__title {
    position: absolute;
    left: 14.87%;          /* 58 / 390 */
    top: 0;
    width: 62%;
    margin-left: 0;
    font-size: 19px;
  }

  .flavors__lead {
    position: absolute;
    left: 14.87%;
    top: 12%;              /* 106 / 885 */
    width: 81%;            /* 316 / 390 */
    max-width: none;
    margin: 0;
    font-size: 12px;
    line-height: 1.17;
  }

  .flavors__count {
    left: 62.05%;          /* 242 / 390 */
    right: auto;
    top: 1.8%;
    font-size: 60px;
    color: rgba(255, 255, 255, 0.1);
  }

  .fcats {
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    top: 68.2%;            /* 604 / 885 */
    width: auto;
    max-width: none;
    margin: 0;
  }

  .fcat { gap: 12px; padding-block: 9px; }
  .fcat__icon { width: 52px; height: 52px; }
  .fcat__icon svg { width: 32px; height: 32px; }
  .fcat__name { font-size: 16px; }
  .fcat__text { font-size: 11px; line-height: 1.15; }

  /* Все семь стаканов видимы, как в макете */
  .fphoto--3,
  .fphoto--4,
  .fphoto--6 { display: block; }

  /* В макете у фото scaleMode = FILL, то есть слот кадрирует картинку.
     Задаём и ширину, и высоту — иначе стаканы выше своих мест и наезжают
     на список категорий. Но кадрируем через contain, а не cover: стаканы
     вырезаны по контуру, и обрезанный по середине стакан на сайте
     читается как брак, даже если в Figma он обрезан так же. */
  .fphoto { object-fit: contain; object-position: center bottom; }

  .fphoto--1 { left: -1.5%  !important; top: 20.9% !important; width: 39.0% !important; height: 22.4% !important; }
  .fphoto--2 { left: 52.6%  !important; top: 20.8% !important; width: 55.4% !important; height: 33.1% !important; }
  .fphoto--3 { left: 30.8%  !important; top: 32.2% !important; width: 25.4% !important; height: 14.8% !important; }
  .fphoto--4 { left: 29.0%  !important; top: 16.9% !important; width: 30.3% !important; height: 13.0% !important; }
  .fphoto--5 { left: -10.5% !important; top: 40.9% !important; width: 34.9% !important; height: 17.7% !important; }
  .fphoto--6 { left: 21.5%  !important; top: 45.9% !important; width: 41.0% !important; height: 21.5% !important; }
  .fphoto--7 { left: 71.8%  !important; top: 49.0% !important; width: 37.2% !important; height: 18.1% !important; }

  /* --- Карта проектов ----------------------------------------------------
     В макете карточка локации стоит ПОД картой, а не над ней. */

  .mapwrap { flex-direction: column; }

  .mapstage { width: 138%; margin-left: -19%; }   /* карта шире экрана, как в макете */

  .mappin { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
  .mappin img { width: 11px; height: 11px; }

  .mapcard { padding: 18px 16px 20px; }
  .mapcard__city { font-size: 16px; }
  .mapcard__val { font-size: 13px; }

  /* --- Таблица сравнения -------------------------------------------------
     В макете ширина 358 — влезает без прокрутки, если ужать колонки. */

  .ctable__head,
  .ctable__row { min-width: 0; grid-template-columns: minmax(0, 150fr) minmax(0, 104fr) minmax(0, 104fr); }

  .ctable { overflow: visible; }
  .ctable__label { font-size: 11px; gap: 6px; padding: 10px 6px 10px 0; }
  .ctable__icon { width: 22px; height: 22px; }
  /* «Полная» / «Ограниченная» рядом с галочкой не влезают в узкую колонку —
     на мобильном ставим отметку над подписью. */
  .ctable__cell {
    flex-direction: column;
    padding: 10px 4px;
    font-size: 10px;
    gap: 4px;
    line-height: 1.1;
    word-break: break-word;
  }
  .ctable__th { padding: 10px 6px; font-size: 11px; }
  .ctable__th--own img { width: 62px; }
  .ctable__head { min-height: 72px; }
  .mark { width: 16px; height: 16px; }

  /* --- Этапы и карточки --------------------------------------------------- */

  .stages__title { font-size: 19px; }
  .stage__num { font-size: 20px; }
  .stage__title { font-size: 16px; }

  /* --- Формы -------------------------------------------------------------- */

  /* Отступ слева + width:100% давали переполнение вправо — ширину считаем
     от остатка. */
  .startform__box,
  .leadform__box {
    margin-left: 11.7%;
    width: auto;
    max-width: none;
  }

  .field input { padding: 13px 14px; font-size: 13px; }
  .lform .btn { align-self: flex-start; }

  /* --- Белая плашка «Этапы работы» --------------------------------------
     На мобильном у неё своя форма: 460×112 с полигоном из макета
     (M222 30.5 L0 0 L80 101.5 L460 112). Десктопная пропорция 1197×170
     слишком плоская — текст 19 px в неё не влезал и обрезался.
     Высоту не фиксируем: если заголовок длиннее, плашка тянется,
     а не режет текст. */

  .stages__banner,
  .presentation__banner {
    width: 117.95%;                 /* 460 / 390 */
    min-width: 0;
    min-height: 112px;
    margin-left: -7.18%;            /* -28 / 390 */
    padding: 34px 14% 22px 18.26%;  /* текст начинается на x=84, y=31 */
    aspect-ratio: auto;
    clip-path: polygon(48.26% 27.23%, 0 0, 17.39% 90.63%, 100% 100%);
  }

  /* Узкая колонка не случайно: справа плашку срезает диагональ, и длинная
     первая строка упирается в неё. В макете заголовок тоже разбит на
     короткие строки. */
  .stages__title {
    max-width: 140px;
    font-size: 19px;
    line-height: 1.16;
  }
}