/*
  meow_responsive.css — единая система адаптивности KonniePaw.

  Подключается из meow.css сразу после meow_theme.css.
  Правила живут в @layer base (токены) и @layer utilities (хелперы),
  поэтому НЕ перебивают слои pages/games. Утилиты opt-in (через классы),
  так что добавление файла не меняет внешний вид существующих страниц.

  ─────────────────────────────────────────────────────────────────────
  КАНОНИЧЕСКИЕ БРЕЙКПОИНТЫ ПО ШИРИНЕ (CSS не умеет переменные внутри @media,
  поэтому это — справочные константы; везде используем ровно эти значения).

    xs  малый телефон   <= 360px      @media (max-width: 360px)
    sm  телефон         <= 480px      @media (max-width: 480px)
    md  фаблет          <= 600px      @media (max-width: 600px)
    lg  планшет-портрет <= 768px      @media (max-width: 768px) / (min-width: 769px)
    xl  планшет         <= 1024px     @media (max-width: 1024px) / (min-width: 1025px)
    xxl ноутбук         <= 1280px     @media (max-width: 1280px) / (min-width: 1281px)
    wide большой экран   > 1680px      @media (min-width: 1681px)

  Парность +1 (768/769, 1024/1025, 1280/1281) убирает двойное срабатывание
  смежных правил. Migration-mapping старых значений:
    380->360; 460/520->480; 560/700/720/760->600 или 768; 900->1024 (навбар);
    1050/1080/1100->1024; 1200/1240/1360->1280; 1540->1680.

  БАКЕТЫ ПО ФОРМАТУ / СООТНОШЕНИЮ СТОРОН (применять ВМЕСТЕ с шириной):

    tall-portrait (9:16, 9:20)  @media (max-aspect-ratio: 9/16)
    portrait (4:5, 3:4)         @media (max-aspect-ratio: 4/5)
    square ~1:1 (складные)      @media (min-aspect-ratio: 4/5) and (max-aspect-ratio: 5/4)
    landscape                   @media (min-aspect-ratio: 5/4)
    ultrawide 21:9              @media (min-aspect-ratio: 21/9)
    телефон-ландшафт            @media (max-height: 480px) and (orientation: landscape)
    тач-устройство              @media (hover: none) and (pointer: coarse)
  ─────────────────────────────────────────────────────────────────────
*/

@layer base {
  :root {
    /* Флюид-типографика — clamp(min, предпочт, max). Использовать на заголовках/герое. */
    --kp-fs-sm: clamp(13px, 2.6vw, 15px);
    --kp-fs-md: clamp(15px, 3.2vw, 18px);
    --kp-fs-lg: clamp(20px, 5vw, 30px);
    --kp-fs-xl: clamp(26px, 7vw, 44px);

    /* Контейнер: боковые отступы тянутся с шириной экрана. */
    --kp-gutter: clamp(12px, 4vw, 28px);
    --kp-max: 1120px;
  }

  /* Глобальная страховка от горизонтального переполнения на узких экранах.
     Лёгкая и безопасная: не ломает layout, лишь гасит случайный выход за вьюпорт. */
  @media (max-width: 768px) {
    html,
    body {
      overflow-x: clip; /* clip keeps sticky working */
    }
  }
}

@layer utilities {
  /* Центрирующий контейнер с адаптивными полями. Заменяет ad-hoc width:min(...). */
  .kp-container {
    width: min(100% - 2 * var(--kp-gutter), var(--kp-max));
    margin-inline: auto;
  }
  .kp-container-wide { --kp-max: 1440px; }
  .kp-container-narrow { --kp-max: 760px; }

  /* Сетки, схлопывающиеся в одну колонку на телефонах/планшетах-портрете.
     Базово — автозаполнение по ширине (reflow без жёсткого слома). */
  .kp-stack-md,
  .kp-stack-lg {
    display: grid;
    gap: var(--kp-gutter, 16px);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  }
  @media (max-width: 600px) {
    .kp-stack-md { grid-template-columns: 1fr; }
  }
  @media (max-width: 768px) {
    .kp-stack-lg { grid-template-columns: 1fr; }
  }

  /* Фикс №1 от переполнения: длинные слова/URL переносятся, элемент не толкает вьюпорт. */
  .kp-no-overflow {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Обёртка с фиксированным соотношением сторон для медиа/canvas. */
  .kp-aspect {
    width: 100%;
    aspect-ratio: var(--kp-ar, 16 / 9);
  }
  .kp-aspect > :is(img, video, canvas, iframe) {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* Горизонтальный скролл для широких таблиц/рядов (как .meow-scroll-x). */
  .kp-scroll-x {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Гарантия тач-целей для .kp-* интерактива на сенсорных экранах. */
  @media (hover: none) and (pointer: coarse) {
    .kp-container :is(button, a.kp-btn, .kp-tap) {
      min-height: 44px;
    }
  }
}