/* ══════════════════════════════════════════════════════
   SEVEN v2 — адаптив. Все брейкпоинты собраны здесь.
   ══════════════════════════════════════════════════════ */

/* ═══ ПЛАНШЕТ И НИЖЕ ═══ */
@media (max-width: 1024px) {
  .rail a span { display: none; }

  .region__lead { max-width: 100%; }
  .region__sub { max-width: 100%; }

  /* колонка описания уходит под заголовок — но grid-row задан в sections.css
     жёстко единицей на всех троих, поэтому ряд нужно переназначить явно,
     иначе описание ложится поверх заголовка в той же ячейке */
  .dir {
    grid-template-columns: minmax(96px, auto) minmax(0, 1fr);
    row-gap: 10px;
  }
  .dir__title { grid-row: 1; grid-column: 2; }
  .dir__desc  { grid-row: 2; grid-column: 2; max-width: 46ch; }
  .dir__orn { display: none; }
}


/* ═══ 02 РЕГИОН НА ПЛАНШЕТЕ И ТЕЛЕФОНЕ ═══
   на широком десктопном кадре (1672×941) cover под узкий/высокий вьюпорт
   обрезает по бокам так сильно, что видна только одна вершина — не вопрос
   background-position, серия «где именно 22vh/30%/68%» это подтвердила.
   Меняем сам файл на кроп 700×941, снятый с тех же исходных пикселей, но
   по ширине впритык к обеим вершинам — тогда cover обрезает запас вокруг
   них, а не сами вершины */
@media (max-width: 1024px) {
  .region__photo {
    background-image: url('../img/elbrus-duotone-tall.jpg');
    background-position: center center;
  }
}


/* ═══ ПРОЦЕСС: ВЕРТИКАЛЬНАЯ ЛЕНТА ═══ */
@media (max-width: 860px) {
  /* ── 04 работа: управление каруселью ──
     .work__nav теперь отдельный блок под лентой на всех ширинах — здесь
     только его внутренняя раскладка для узкого экрана */
  .work__nav { justify-content: space-between; }
  /* счётчик к левому краю, обе стрелки вместе к правому: в исходном порядке
     (стрелка — счётчик — стрелка) они на всю ширину экрана расползались по
     углам и переставали читаться как одна пара */
  .work__count { order: -1; margin-right: auto; }
  /* номер внутри карточки дублировал бы счётчик ленты в паре сантиметров
     от него — на узком экране хватает одного */
  .work__idx { display: none; }

  .sec--pin { padding: var(--pad) 0; }

  .proc {
    height: auto;
    min-height: 100svh;
    overflow: visible;
    gap: clamp(24px, 4vh, 40px);
  }

  .proc__steps {
    flex-direction: column;
    width: auto;
    gap: clamp(22px, 4vh, 40px);
    padding-left: calc(var(--pad) + 26px);
    padding-right: var(--pad);
  }

  .step {
    width: auto;
    padding-top: 0;
  }
  /* на мобилке карточки не едут по горизонтали — у каждого пункта
     свой статичный ромб-маркер рядом с текстом, бегущий маркер линии не нужен */
  .step::before {
    content: "";
    position: absolute;
    left: -26px; top: 6px;
    width: 9px; height: 9px;
    border: 1px solid var(--orange);
    background: var(--bg);
    transform: rotate(45deg);
  }

  /* линия прогресса становится вертикальной */
  .proc__line {
    left: calc(var(--pad) + 4px);
    right: auto;
    top: 0;
    bottom: 0;
    width: 2px;
    height: auto;
    background: var(--hair);
  }
  .proc__line i {
    width: 100%;
    height: 0;
  }
  .proc__line i::after { display: none; }
}


/* ═══ ТЕЛЕФОН ═══ */
@media (max-width: 640px) {

  /* индикатор мешает на узком экране */
  .rail { display: none; }

  /* ── 01 пролог ── */
  .hud { letter-spacing: .22em; font-size: 9px; }
  /* та же нижняя линия, что у hud--bl (нальчик) — scroll-hint на мобилке
     скрыт, поднимать координаты над ним больше не нужно */
  .hud--tr { top: auto; bottom: calc(var(--pad) + 8px); right: calc(var(--pad) + 8px); }
  /* верх-справа освободился, когда координаты уехали вниз — est. 2026 встаёт туда,
     а не пропадает */
  .hud--br { top: calc(var(--pad) + 8px); bottom: auto; right: calc(var(--pad) + 8px); }
  /* 21vw впритык доходил до рамки .frame — логотипу нужен воздух по бокам */
  .hero__mark, .hero__ghost { font-size: 19vw; }
  .scroll-hint { display: none; }

  /* ── 06 условия ── */
  /* justify-content:flex-start и часть отступа уже общие для всех ширин
     (sections.css) — на телефоне контент почти всегда выше экрана, добавляем
     сверху ещё немного воздуха, раз колонки цены и текста встают одна
     под другой сплошным столбцом, а не рядом */
  #s6 { padding-top: calc(var(--pad) + 1vh); }

  .offer { grid-template-columns: 1fr; gap: clamp(24px, 4vh, 40px); }
  /* 19vw мерили под цифру в одиночку — тут в той же строке ещё «от» и «₽»,
     на 320px вместе они шире контента и знак валюты уезжает за край */
  .offer__sum { font-size: min(15vw, 13vh); }
  .offer__body { gap: clamp(20px, 3vh, 32px); }
  .offer__lead { max-width: none; }
  /* компаунд-селектор — иначе .facts{grid-template-columns:1fr 1fr} ниже
     в этом же блоке (правило для фактов Эльбруса на 02) выигрывает по
     порядку каскада при равной специфичности одного класса */
  .facts.offer__facts { grid-template-columns: 1fr; }

  /* лента в потоке, её порядок и ритм вокруг (gap на #s6) заданы в
     sections.css для всех ширин сразу — здесь остаётся только то, что
     специфично для телефона */
  .offer__ticker {
    /* на мобиле лента — не фоновая подпись, а полноценная полоса: с 10px
       она читалась сплюснутой ниткой */
    padding: clamp(13px, 2.2vh, 20px) 0;
  }

  /* ── 02 регион ── */
  .region { grid-template-rows: minmax(0, 1fr) auto; gap: 14px; }
  /* портретный кроп (см. брейкпоинт 1024px выше) уже держит обе вершины
     в кадре при простом center center — здесь только усиливаем скрим:
     узкий текст в 3-4 строки перекрывает больше кадра по высоте */
  .region__scrim { background: linear-gradient(180deg, rgba(28,26,23,0) 0%, rgba(28,26,23,.15) 40%, rgba(28,26,23,.72) 100%); }
  .region__lead { font-size: clamp(21px, 6.4vw, 30px); }
  .facts { grid-template-columns: 1fr 1fr; }

  /* ── 03 направления ── */
  /* в одну колонку: номер, под ним заголовок, под ним описание */
  .dir { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .dir__n     { grid-row: 1; grid-column: 1; letter-spacing: .3em; }
  .dir__title { grid-row: 2; grid-column: 1; }
  .dir__desc  { grid-row: 3; grid-column: 1; max-width: none; }
  .dir__orn { display: none; }
  .dir:hover { padding-left: 0; }

  /* ── 04 работа ── */
  /* на десктопной позиции (по центру высоты, right:-4vw) цифра обрезалась
     кадром и читалась как случайный светлый прямоугольник, а не как «7» —
     переносим ниже и внутрь, чтобы влезала целиком */
  .work__num { right: 6vw; top: auto; bottom: 6vh; transform: none; width: 32vh; height: auto; opacity: .07; }
  /* кейс в одну колонку: скриншот сверху, описание под ним.
     minmax(0,…) обязателен — иначе картинка 1280px распирает колонку наружу */
  .work__case { grid-template-columns: minmax(0, 1fr); gap: clamp(18px, 3vh, 28px); }
  /* width:100%;height:auto растил картинку вместе с шириной колонки — на
     широких телефонах (около 640px, ещё в один столбец) естественная высота
     по соотношению сторон (42% высоты экрана) читалась как слишком крупная.
     Жёсткий height:30vh это чинил, но на узких экранах контейнер уже, чем
     высота предполагает, и cover обрезал бока — часть шапки скриншота
     терялась. height:auto + max-height обрезает только там, где реально
     нужно (на широких), а на узких показывает картинку целиком */
  .work__shot img { height: auto; max-height: 280px; object-fit: cover; }

  /* ── 07 контакты ── */
  /* лабиринт на телефоне не читается ни как схема, ни как узнаваемая печать
     (пробовали оба) — прячем совсем и строим экран заново вокруг одного
     решительного CTA, а не вокруг картинки. Прячем только сам SVG, не весь
     .lab__field — .lab__grid (приглашение и кнопки) физически вложен в него,
     display:none на контейнере унёс бы их вместе с картинкой */
  .lab__field {
    display: block;
    position: static;
    /* margin:0 auto нужен десктопу, чтобы центрировать поле лабиринта по его
       пропорции; здесь же auto-поля у flex-элемента отменяют растяжение и
       ужимали ленту контактов по содержимому, отрывая её от края экрана */
    margin: 0;
    width: auto;
    height: auto;
    aspect-ratio: auto;
    flex: none;
  }
  .lab__svg { display: none; }

  .lab {
    position: relative;
    gap: 0;
    justify-content: center;
  }
  .lab__top { text-align: left; gap: 18px; }

  /* на плите слоган — главный текст экрана, а не подпись к лабиринту:
     десктопные 15px здесь читались бы служебной строкой */
  .lab__slogan {
    font-size: clamp(27px, 8.4vw, 38px);
    line-height: 1.12;
    letter-spacing: -.01em;
  }

  /* сан-сериф вместо курсива слогана — приглашение не должно спорить
     с ним по стилю, это разные по весу реплики */
  .lab__invite {
    display: block;
    margin: 30px 0 24px;
    font-family: var(--ff);
    font-weight: 300;
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: .02em;
    color: var(--dim);
    max-width: 30ch;
  }

  /* десктопная .lab__grid — position:absolute;inset:0 (контакты садятся в
     коридоры лабиринта); без явного сброса это утекало и сюда, укладывая
     блок абсолютным слоем поверх заголовка и цифры */
  .lab__grid { position: static; inset: auto; display: block; }
  /* «seven» — подпись центра лабиринта, без самого лабиринта не нужна */
  .lab__center { display: none; }

  /* контакты — сплошные строки во всю ширину, а не короткие подписи:
     разделённые волосяной линией, они читаются единой лентой действий */
  .lab__c {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 17px 0;
    /* десктоп сажает контакты в ячейки лабиринта через place-self; Chrome
       применяет justify-self и в блочном потоке, так что без сброса строки
       съезжали вправо и ужимались по содержимому вместо ширины ленты */
    place-self: auto;
    border: 0;
    border-top: 1px solid var(--hair);
    font-size: 12px;
    letter-spacing: .14em;
    white-space: normal;
    color: var(--fg);
  }
  .lab__c:active i { transform: translate(2px, -2px); }

  /* Telegram — главное действие: та же строка списка, но залитая оранжевым
     и уходящая за правый край экрана. Ритм списка не ломает, но мимо неё не
     проскочишь. Срез угла — язык кнопки с первого экрана */
  .lab__c--tg {
    margin: 0 calc(-1 * var(--pad-r)) 0 0;
    padding: 21px var(--pad-r) 21px 22px;
    border-top: 0;
    background: var(--orange);
    color: var(--asphalt);
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 18px 100%);
  }
  /* стрелка везде оранжевая — на самой оранжевой ленте она бы пропала */
  .lab__c--tg i { font-size: 16px; color: var(--asphalt); }
  /* тот же базовый .lab__c:hover тянет текст кнопки к почти белому и на
     оранжевой заливке — не пропадает, но и не задумано так; закрепляем
     асфальт */
  .lab__c--tg:hover, .lab__c--tg:active { color: var(--asphalt); }

  /* десктоп отодвигает эти две от края поля, чтобы текст не лёг на линию
     лабиринта; лабиринта тут нет, а отступ сдвигал строки внутрь ленты */
  .lab__c--inst, .lab__c--mail { padding-left: 0; padding-right: 0; }
  .lab__c--mail { border-bottom: 1px solid var(--hair); }

  /* гигантская «07» — тот же приём, что «7» на экране 05: заполняет низ
     экрана и возвращает связь «07 = SEVEN» вместо пустоты, которая раньше
     оставалась после короткого списка контактов. Контуром, а не заливкой:
     единственная сплошная масса на экране — строка Telegram, и спорить с
     ней за внимание цифра не должна. Часть обычного потока, а не приколота
     к низу: на очень высоких экранах абсолютный bottom отрывался зазором */
  .lab__num {
    display: block;
    margin: clamp(20px, 4vh, 48px) calc(-1 * var(--pad-r)) 0 -4vw;
    text-align: center;
    font-size: 44vw;
    font-weight: 600;
    line-height: .72;
    letter-spacing: -.04em;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 119, 0, .38);
    pointer-events: none;
    user-select: none;
  }

  .lab__bottom { margin-top: clamp(16px, 3vh, 34px); }
}


/* ═══ ОЧЕНЬ УЗКИЕ ЭКРАНЫ ═══ */
@media (max-width: 380px) {
  /* кегль PRECISION здесь не режем: надпись вертикальная, её держит
     min(14.5vw, 8vh) выше — узость экрана ей уже не мешает */
  .hud--tl span { letter-spacing: .16em; }
  .facts { grid-template-columns: 1fr; }

  .lab__invite { font-size: 13px; }
  /* @SEVEN_SITES с разрядкой .14em не влезал в 320 и рвался на две строки —
     строка ленты должна оставаться одной строкой */
  .lab__c { font-size: 11px; letter-spacing: .08em; }
  .lab__c--tg { font-size: 12px; padding: 19px var(--pad-r) 19px 18px; }
}


/* ═══ НИЗКИЕ ЭКРАНЫ В ЛАНДШАФТЕ ═══ */
@media (max-height: 520px) and (orientation: landscape) {
  .hero__mark, .hero__ghost { font-size: 17vh; }
  .scroll-hint { display: none; }
  .work__num { display: none; }
}