/* === RESPONSIVE.CSS === */
/* assets/css/responsive.css */
/* НАЗНАЧЕНИЕ: Адаптация под планшет и телефон */
/* СВЯЗИ: tokens.css, layout.css, sections.css, calculator.css */
/* РАЗМЕР: ~250 строк */

/* Мобильная версия - не уменьшенный десктоп: плавающие карточки
   становятся обычными, сетки разворачиваются в колонку, линия
   времени встает вертикально. Порядок чтения задается разметкой,
   поэтому order здесь почти не нужен. */

/* ==========================================================
   ДО 1200px
   ========================================================== */

@media (max-width: 1300px) {
  .brand-text small { display: none; }
  .head-cta { padding-inline: var(--s5); }
}

/* ==========================================================
   ДО 1180px - планшет
   Порог выбран по факту: ниже этой ширины восемь пунктов
   навигации начинают наезжать на кнопку в шапке.
   ========================================================== */

@media (max-width: 1180px) {

  /* Навигация в шапке не помещается: уходит в выдвижное меню. */
  .nav { display: none; }
  .burger { display: inline-grid; }
  .head-cta { display: none; }

  .hero { min-height: auto; padding-top: 116px; }

  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s7);
    padding-bottom: var(--s7);
  }

  /* Карточки перестают плавать и встают в ряд под текстом. */
  .hero-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .hero-scroll { display: none; }

  .about-grid,
  .infra-split,
  .loc-visual,
  .form-inner { grid-template-columns: minmax(0, 1fr); }

  .about-shot { aspect-ratio: 16 / 10; }

  /* Два кадра локации встают друг под друга и остаются одной
     пропорции - так они читаются как пара, а не как разные блоки. */
  .loc-visual { grid-template-columns: minmax(0, 1fr); }

  .hungary { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }

  .entry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .entry-text { grid-column: 1 / -1; }

  /* Линия времени встает вертикально: четыре колонки на планшете
     режут заголовки по одному слову. */
  .tl { grid-template-columns: minmax(0, 1fr); gap: 0; }

  .tl-step { padding: 0 0 var(--s6) var(--s6); }

  .tl-step::before {
    top: 6px;
    bottom: 0;
    left: 5px;
    right: auto;
    width: 1px;
    height: auto;
  }

  .tl-step:last-child::before { bottom: auto; height: 0; }
  .tl-dot { top: 2px; }

  /* Галерея остается в три колонки: кадры вертикальные, и на планшете
     они не мельчают до нечитаемого. */
}

/* ==========================================================
   ДО 760px - телефон
   ========================================================== */

@media (max-width: 760px) {

  html { scroll-padding-top: 84px; }

  .site-head { padding-block: var(--s4); }
  .site-head.stuck { padding-block: var(--s3); }

  /* Вертикальный кадр героя вместо горизонтального. */
  .hero-media .d-only { display: none; }
  .hero-media .m-only { display: block; }

  /* Затемнение плотнее, чем на десктопе, и на всю высоту: там текст
     лежит в левой трети поверх темной части кадра, а здесь идет
     через весь экран и попадает на светлое небо. Боковой слой на
     узком экране бесполезен - его роль берет верхний. */
  .hero-media::after {
    background: linear-gradient(to top,
      rgba(12, 11, 2, .97) 0%,
      rgba(12, 11, 2, .88) 38%,
      rgba(12, 11, 2, .70) 66%,
      rgba(12, 11, 2, .52) 100%);
  }

  .hero { padding-top: 104px; }
  .hero-copy .lede { margin-top: var(--s5); }
  .hero-actions { margin-top: var(--s6); }
  .hero-actions .btn { width: 100%; }

  .hero-cards { grid-template-columns: minmax(0, 1fr); }

  /* Метрики по две в ряд: четыре колонки на 390px дают
     по одному символу в строке. */
  .hero-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s4); }

  .sec-head { margin-bottom: var(--s7); }

  .fact-grid, .ways-grid { gap: var(--s6); margin-top: var(--s7); }

  /* Ступень лестницы в две строки: подпись и цена не помещаются
     в один ряд вместе с полосой. */
  .rung {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'when price' 'bar bar';
    gap: var(--s2) var(--s4);
  }

  .rung-when  { grid-area: when; }
  .rung-price { grid-area: price; font-size: 19px; }
  .rung-bar   { grid-area: bar; }

  .entry-grid { grid-template-columns: minmax(0, 1fr); }

  .infra-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* На телефоне две колонки: вертикальный кадр даже в половину
     ширины остается крупнее, чем горизонтальный во всю. */
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .form-row { grid-template-columns: minmax(0, 1fr); gap: 0; }

  .calc-switch { grid-template-columns: minmax(0, 1fr); }
  .calc-results { grid-template-columns: minmax(0, 1fr); }

  .foot-top { grid-template-columns: minmax(0, 1fr); gap: var(--s7); }

  /* -- Читаемость кадров --
     Пропорция подобрана под сам кадр, а не выбрана красивой: исходник
     вертикальный, 4:5. Горизонтальные 16:10 и 4:3 срезали у него и
     крышу, и вход, оставляя полосу фасада. 3:4 почти совпадает с
     исходником, поэтому здание видно целиком. */
  .about-shot { aspect-ratio: 3 / 4; }

  /* Подпись к кадру на узком экране закрывала середину фасада.
     Делаем ее еще компактнее - это метка, а не блок. */
  .float-card { padding: 9px 12px; }
  .float-card b { font-size: 18px; }
  .float-card span { font-size: 10px; letter-spacing: .09em; }
  .loc-badge b { font-size: 15px; }

  /* Тег облета не помещался в строку и уезжал за правый край кадра.
     Разворачиваем в две строки и ограничиваем ширину. */
  .flyover-tag {
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding: 8px 12px;
    max-width: calc(100% - 28px);
  }

  /* Пояснительный текст на телефоне читают на ходу и на солнце,
     поэтому он крупнее и контрастнее: ink-55 давал 5.2:1 на ivory,
     ink-70 дает 9.1:1. */
  .note { font-size: 15px; }
  .on-light .note { color: var(--ink-70); }
  .cap { font-size: 13.5px; }

  /* Два дисклеймера были 12 и 12.5px. Оба снимают обещание доходности
     и предупреждают об обработке данных - ровно тот текст, который
     нельзя прятать мелким шрифтом. На телефоне поднимаем до 13.5px. */
  .hc-note,
  .form-note { font-size: 13.5px; line-height: 1.55; }

  /* Липкий призыв появляется только на телефоне. */
  .sticky-cta { display: block; }

  /* Кнопка висит поверх текста, и без подложки строка под ней читалась
     как обрезанная. Градиент показывает, что это слой над контентом,
     а не конец страницы. */
  .sticky-cta::before {
    content: '';
    position: absolute;
    inset: -28px -16px -16px;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(to top, rgba(12, 11, 2, .94), rgba(12, 11, 2, 0));
  }

  /* Под липкой кнопкой нужен воздух, иначе она накрывает подвал. */
  .site-foot { padding-bottom: calc(var(--s8) + 56px); }
}

/* ==========================================================
   ДО 420px
   ========================================================== */

@media (max-width: 420px) {
  .hero-metrics { grid-template-columns: minmax(0, 1fr); }
  .hc-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .infra-grid { grid-template-columns: minmax(0, 1fr); }
  .times { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================
   КРУПНЫЕ ЭКРАНЫ
   ========================================================== */

@media (min-width: 1600px) {
  :root { --wrap: 1440px; }
}