/*
 * responsive-fix.css — адаптивная верстка для «Анкета ГС (МС)» 1.3.5
 *
 * Приложение: Angular + PrimeNG + Tailwind (префикс gs-). На десктопе анкета —
 * два столбца: форма (.display-content) и колонка шагов (.side-part, 256px)
 * внутри .main-container (flex-row). На узких экранах ряд не переносится:
 * форма обрезается слева, шаги уходят вправо за край (горизонтальный скролл).
 *
 * Десктоп (> 1024px) НЕ меняется. Ниже 1024px:
 *   - ряд превращается в один столбец;
 *   - список шагов поднимается НАД формой (форма первого шага очень длинная,
 *     поэтому шаги-навигация должны быть сверху и доступны) и становится
 *     горизонтальной прокручиваемой лентой компактных чипов;
 *   - форма растягивается на всю ширину.
 * Всё через max-width media queries + !important, чтобы перебить
 * component-styles Angular (селекторы .class[_ngcontent-…], без !important).
 */

/* ================= Планшеты и телефоны (<= 1024px) ================= */
@media (max-width: 1024px) {
  /* Меньше боковых полей страницы (было 20px 40px) */
  .main-page {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Ряд «форма + шаги» -> вертикальный стек */
  .main-container {
    flex-direction: column !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Форма — во всю ширину, ниже ленты шагов */
  .main-container > .display-content {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Колонка шагов — во всю ширину, НАД формой */
  .main-container > .side-part {
    order: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 0 20px 0 !important;
  }
  .side-part [class*="gs-w-["] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Шаги -> горизонтальная прокручиваемая лента */
  .side-part gs-stepper {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 10px !important;
    padding-bottom: 10px !important;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  /* Все чипы шагов — ОДИНАКОВОГО размера. Ширину фиксируем на обёртке
     (прямой ребёнок gs-stepper), высоту — на самой карточке .step. */
  .side-part gs-stepper > * {
    flex: 0 0 232px !important;
    width: 232px !important;
    scroll-snap-align: start;
  }
  .side-part gs-candidate-step {
    display: block !important;
    width: 100% !important;
  }
  .side-part .step {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 144px !important;      /* единая высота для всех карточек */
    overflow: hidden !important;
  }
  /* Заголовок шага — максимум 2 строки, чтобы высота не «прыгала» */
  .side-part .step .title {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  /* вертикальный соединитель между шагами в ленте не нужен */
  .side-part .step .line {
    display: none !important;
  }

  /* Страница не должна ехать по горизонтали */
  html, body { overflow-x: hidden !important; }
  .main-container, .main-container * { max-width: 100%; }
}

/* ================= Телефоны (<= 640px) ================= */
@media (max-width: 640px) {
  .main-page {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Заголовок «Анкета» и кнопки «Сохранить черновик / Печать» перестают
     накладываться друг на друга — переносим кнопки под заголовок */
  gs-my-profile-header .gs-flex.gs-justify-between.gs-items-center {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    height: auto !important;
  }

  /* Двухколоночные группы полей (Фамилия/Имя и т.п.) -> один столбец */
  .display-content [class*="gs-grid-cols-2"] {
    grid-template-columns: 1fr !important;
  }
}