/************************************************************
  Мобильная адаптация блока кейсов (слайдер + модалка)
  Подключать после cases.css
************************************************************/


/* ===== ПЛАНШЕТЫ И НЕБОЛЬШИЕ НОУТЫ (≤ 1024px) ===== */
@media (max-width: 1024px) {

  /* окно слайдера — меньше боковые отступы */
  .section.section--cases .cases-slider {
    padding: 24px 40px;
  }

  .section.section--cases .cases-slider__viewport {
    padding: 32px 12px;
    margin: -8px -12px;
  }

  .section.section--cases .cases-slider__track {
    gap: 18px;
  }

  /* две карточки в ряд, чуть ниже по высоте */
  .section.section--cases .case-card {
    flex: 0 0 calc(50% - 12px);
    height: 280px;
  }

  .section.section--cases .case-card__overlay {
    padding: 18px 16px 16px;
  }

  .section.section--cases .case-card h3 {
    font-size: 17px;
  }

  .section.section--cases .case-card p {
    font-size: 13px;
  }

  .section.section--cases .case-card ul {
    font-size: 12px;
  }

  /* модалка — чуть уже */
  .case-modal {
    padding: 24px 12px;
  }

  .case-modal__dialog {
    max-width: 880px;
  }

  .case-modal__body {
    min-height: 380px;
  }

  .case-modal__content {
    padding: 24px 20px 20px;
  }
}


/* ===== СМАРТФОНЫ / ПЛАНШЕТЫ ВЕРТИКАЛЬНО (≤ 768px) ===== */
@media (max-width: 768px) {

  /* показываем стрелки и оставляем JS-навигацию на мобильных */
  .section.section--cases .cases-slider__btn {
    display: inline-flex;
  }

  /* окно слайдера растягиваем почти на всю ширину */
  .section.section--cases .cases-slider {
    padding: 16px 0;
    position: relative; /* чтобы, если нужно, позиционировать кнопки внутри */
  }

  .section.section--cases .cases-slider__viewport {
    padding: 24px 8px;
    margin: -8px -8px;

    /* ключевое: горизонтальный скролл / свайп */
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    touch-action: pan-x;
  }

  .section.section--cases .cases-slider__viewport::-webkit-scrollbar {
    display: none;
  }

  .section.section--cases .cases-slider__track {
    display: flex;
    gap: 16px;
  }

  /* одна крупная карточка, удобно свайпать */
  .section.section--cases .case-card {
    flex: 0 0 85%;
    max-width: 380px;
    height: 260px;
    margin: 0 auto;
    scroll-snap-align: start;
  }

  .section.section--cases .case-card__overlay {
    padding: 16px 14px 14px;
  }

  .section.section--cases .case-card h3 {
    font-size: 16px;
  }

  .section.section--cases .case-card p {
    font-size: 13px;
  }

  .section.section--cases .case-card ul {
    font-size: 12px;
  }

  /* модалка: одна колонка, контент под картинкой */
  .case-modal {
    padding: 20px 10px;
  }

  .case-modal__dialog {
    width: 100%;
    max-width: 520px;
    border-radius: 22px;
  }

  .case-modal__body {
    display: flex;           /* перебиваем grid */
    flex-direction: column;
    min-height: auto;
  }

  .case-modal__image {
    min-height: 220px;
  }

  .case-modal__content {
    padding: 20px 18px 18px;
  }

  .case-modal__title {
    font-size: 20px;
  }

  .case-modal__meta {
    font-size: 13px;
  }

  .case-modal__text {
    font-size: 13px;
  }

  /* кнопки вниз модалки — в столбик, на полную ширину */
  .case-modal__actions {
    margin-top: 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .case-modal__btn-primary,
  .case-modal__btn-secondary {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 768px) {

  /* ... твой существующий код ... */

  /* Оверлей модалки: скролл внутри модального окна */
  .case-modal {
    padding: 20px 10px;
    overflow-y: auto;              /* даём модалке скролл */
    -webkit-overflow-scrolling: touch; /* нормальный скролл на iOS */
    align-items: flex-start;       /* чтобы диалог начинался сверху, а не по центру */
  }

  /* Диалог: ограничиваем по высоте экрана и даём флекс-колонку */
  .case-modal__dialog {
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 40px); /* высота экрана минус паддинги оверлея */
    display: flex;
    flex-direction: column;
  }

  /* Тело модалки — именно здесь будет прокрутка контента */
  .case-modal__body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Кнопки остаются внизу тела, до них можно докрутить */
  .case-modal__actions {
    margin-top: 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
}


/* ===== МАЛЕНЬКИЕ СМАРТФОНЫ (≤ 480px) ===== */
@media (max-width: 480px) {

  .section.section--cases .cases-slider__viewport {
    padding: 20px 4px;
    margin: -6px -4px;
  }

  .section.section--cases .cases-slider__track {
    gap: 14px;
  }

  .section.section--cases .case-card {
    flex: 0 0 90%;
    max-width: none;
    height: 230px;
  }

  .section.section--cases .case-card__overlay {
    padding: 14px 12px 12px;
  }

  .section.section--cases .case-card h3 {
    font-size: 15px;
  }

  .section.section--cases .case-card p,
  .section.section--cases .case-card ul {
    font-size: 12px;
  }
  
  @media (max-width: 480px) {

  /* ... твой существующий код ... */

  .case-modal {
    padding: 16px 8px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    align-items: flex-start;
  }

  .case-modal__dialog {
    max-width: 100%;
    max-height: calc(100vh - 32px);
  }

  .case-modal__body {
    overflow-y: auto;
  }
}


  /* модалка почти на всю ширину, меньше отступы */
  .case-modal {
    padding: 16px 8px;
  }

  .case-modal__dialog {
    max-width: 100%;
    border-radius: 20px;
  }

  .case-modal__content {
    padding: 16px 14px 14px;
  }

  .case-modal__eyebrow {
    font-size: 12px;
  }

  .case-modal__title {
    font-size: 18px;
  }

  .case-modal__meta,
  .case-modal__text {
    font-size: 12px;
  }

  .case-modal__close {
    width: 30px;
    height: 30px;
  }

  .case-modal__close-line {
    width: 14px;
  }
}


/* ===== СОВСЕМ УЗКИЕ ЭКРАНЫ (≤ 360px) ===== */
@media (max-width: 360px) {

  .section.section--cases .case-card {
    height: 210px;
  }

  .section.section--cases .case-card h3 {
    font-size: 14px;
  }

  .section.section--cases .case-card p,
  .section.section--cases .case-card ul {
    font-size: 11px;
  }

  .case-modal__title {
    font-size: 17px;
  }

  .case-modal__text {
    font-size: 11px;
  }

  .case-modal__btn-primary,
  .case-modal__btn-secondary {
    font-size: 13px;
    padding: 9px 14px;
  }
}
/* ==== ФИКС СВАЙПА И КНОПКИ "НАЗАД" НА МОБИЛЬНЫХ ==== */
@media (max-width: 768px) {

  /* трек: все карточки в одну линию, есть горизонтальное переполнение */
  .section.section--cases .cases-slider__track {
    display: flex;
    flex-wrap: nowrap;            /* критично: не даём переноситься на новую строку */
    gap: 16px;                    /* дублируем на всякий случай */
  }

  /* карточки: фиксированная ширина + реальный отступ, без auto-центровки */
  .section.section--cases .case-card {
    flex: 0 0 85%;
    max-width: 85%;
    margin: 0 8px;                /* вместо margin: 0 auto; */
    scroll-snap-align: start;
  }

  /* сам вьюпорт — оставляем нативный скролл/свайп */
  .section.section--cases .cases-slider__viewport {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    touch-action: pan-x;
  }

  /* стрелки: гарантируем, что они поверх и кликабельны */
  .section.section--cases .cases-slider__btn {
    display: inline-flex;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    pointer-events: auto;
  }

  .section.section--cases .cases-slider__btn--prev {
    left: 8px;
  }

  .section.section--cases .cases-slider__btn--next {
    right: 8px;
  }
}

/* на совсем маленьких — чуть уже карточка */
@media (max-width: 480px) {
  .section.section--cases .case-card {
    flex: 0 0 90%;
    max-width: 90%;
    margin: 0 6px;
  }
}
/* ==== МОБИЛЬНЫЙ ФИКС СВАЙПА ДЛЯ СЛАЙДЕРА КЕЙСОВ ==== */
@media (max-width: 768px) {

  /* 1. Делаем вьюпорт реально прокручиваемым и разрешаем горизонтальный свайп */
  .section.section--cases .cases-slider__viewport {
    overflow-x: auto !important;          /* перебиваем возможный overflow-x: hidden */
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;    /* инерция на iOS */
    overscroll-behavior-x: contain;       /* чтобы страница не дёргалась */
    touch-action: pan-x !important;       /* разрешаем горизонтальные жесты */
  }

  /* 2. Трек — одна горизонтальная лента без переноса */
  .section.section--cases .cases-slider__track {
    display: flex !important;
    flex-wrap: nowrap !important;
  }

  /* 3. Карточки — фиксированная ширина, чтобы было реальное переполнение */
  .section.section--cases .case-card {
    flex: 0 0 85%;
    max-width: 85%;
    margin: 0 8px;                        /* чтобы трек был шире экрана */
  }
}
/* ==== ФИКС МОБИЛЬНОГО СВАЙПА ДЛЯ СЛАЙДЕРА КЕЙСОВ ==== */
@media (max-width: 768px) {

  /* окно слайдера */
  .section.section--cases .cases-slider {
    padding: 16px 0 !important;
    position: relative;
  }

  /* Вьюпорт: делаем горизонтально прокручиваемым и разрешаем свайп в обе стороны */
  .section.section--cases .cases-slider__viewport {
    overflow-x: auto !important;          /* перебиваем возможный overflow-x: hidden */
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;    /* инерционный скролл на iOS */
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;        /* аккуратное "прилипание" карточек */
    padding: 24px 12px;
    margin: 0 -12px;
    touch-action: pan-x !important;       /* браузер явно разрешает горизонтальные жесты */
  }

  /* Трек: одна горизонтальная лента */
  .section.section--cases .cases-slider__track {
    display: flex !important;
    flex-wrap: nowrap !important;         /* НЕ даём карточкам переноситься на новую строку */
    gap: 16px;
  }

  /* Карточки: фиксированная ширина, чтобы было реальное переполнение */
  .section.section--cases .case-card {
    flex: 0 0 82%;
    max-width: 82%;
    margin: 0 8px !important;            /* вместо margin: 0 auto; */
    scroll-snap-align: start;
  }

  /* Стрелки: возвращаем на мобилках и не даём им перекрывать свайп полностью */
  .section.section--cases .cases-slider__btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 40px;
    height: 40px;
  }

  .section.section--cases .cases-slider__btn--prev {
    left: 4px;
  }

  .section.section--cases .cases-slider__btn--next {
    right: 4px;
  }
}

/* на совсем маленьких — можно чуть сузить карточки */
@media (max-width: 480px) {
  .section.section--cases .case-card {
    flex: 0 0 88%;
    max-width: 88%;
    margin: 0 6px !important;
  }
}