/* Модуль «Узкие экраны»: главная на планшете (до 1100) и телефоне (до 760) — по скринам владельца с iPad и iPhone (31.10).
   Макетов ниже первого экрана нет: блоки встают друг под друга, ряды карточек на телефоне листаются вбок.
   Подключается последним — правила 1920/1440 остаются в своих модулях. */

/* фоновая надпись GameWiki при прокрутке уезжает вбок — по горизонтали обрезаем, вниз под карточки по-прежнему заходит */
.kb { overflow-x: clip; }

/* первый экран: карточки забирают место у текста — на 1280 убираем «Призману», на 1100 и «Новости» (как в макете «hero 720») */
@media (max-width: 1280px) { .card.prismana { display: none; } }
@media (max-width: 1100px) {
  .card.news { display: none; }
  .intro-copy .hello, .intro-copy .desc { max-width: none; }
}

/* Анилог: полоса над карточками — переносится, если не влезает (режимы не обрезаются) */
@media (max-width: 1440px) {
  .alog-bar { flex-wrap: wrap; height: auto; min-height: 64px; row-gap: 8px; padding-top: 8px; padding-bottom: 8px; }
  .alog-mode { margin-left: 0; }
}

@media (max-width: 1100px) {
  /* заголовки секций */
  .hub-head { padding: 0 24px; }
  .hub-head h2 { flex: 1; min-width: 0; font-size: 28px; }
  .hub-head time { font-size: 18px; }

  /* «Все важные события»: баннер — Пухлея меньше и правее, текст не под ней */
  .hub-ban { padding: 40px 40px 28px; }
  .hub-txt { max-width: calc(100% - 300px); }
  .hub-txt h3 { font-size: 48px; }
  .hub-pet { right: 90px; top: -30px; width: 200px; height: 287px; }
  .hub-pet .shadow { left: 30px; top: 268px; width: 150px; }

  /* ряд «Идут сейчас»: карточки, квадраты и строки — друг под другом */
  .hub-labels .hub-label + .hub-label { display: none; }
  .hub-labels .hub-label:first-child { grid-column: 1 / -1; padding-left: 24px; }
  .hub-row { display: flex; flex-direction: column; gap: 24px; height: auto; }
  .hub-cards { height: 340px; }
  .hub-sq { flex-direction: row; justify-self: auto; gap: 24px; height: 200px; }
  .hub-ava { width: auto; height: 100%; aspect-ratio: 1; flex: none; }
  .hub-lines { gap: 16px; }
  .hub-lines::before { content: "Скоро в календаре"; padding: 8px 0 0 24px; font: 600 13px/1 var(--font); letter-spacing: .04em; text-transform: uppercase; color: #6c6c84; }
  .hub-line { flex: none; height: 96px; }

  /* Анилог: блок с фильтрами сверху во всю ширину, карточки под ним */
  .cards .alog, .cards .alog-side { grid-column: 1 / -1; }
  .cards .alog { height: auto; min-height: 380px; }   /* фильтры целиком: высота по содержимому */
  .alog-side .alog-bar { order: 1; }   /* листалка и режимы — под карточками (слово владельца 31.10) */

  /* база знаний: две колонки, баннер «Предметы» — во всю ширину */
  .kb-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kb-groups > :last-child { grid-column: 1 / -1; min-height: 520px; }
  .kb-label { padding-left: 24px; }

  /* баннеры инструментов: два в ряд, третий — во всю ширину */
  .tools > * { grid-column: span 6; }
  .tools > :last-child { grid-column: 1 / -1; }

  /* подвал: логотип с описанием — строкой сверху, три колонки ссылок под ним */
  .foot-logo { grid-column: 1 / -1; }
  .foot-logo p { max-width: 520px; }
  .foot-col { grid-column: span 4; }
}

@media (max-width: 760px) {
  /* поля секций — как у первого экрана на телефоне */
  .dash, .kb, .cards, .feed, .faq { padding-left: 16px; padding-right: 16px; }
  .hub, .tools { padding-left: 16px; padding-right: 16px; }
  .dash, .cards, .kb, .tools, .feed, .faq { gap: 16px; }

  .hub-head { height: auto; min-height: 56px; padding: 0 8px; flex-wrap: wrap; gap: 8px 12px; }
  .hub-head h2 { font-size: 26px; line-height: 1.15; text-box: none; }
  .hub-head h2 img { width: 52px; height: 52px; margin: -14px 0 -14px -8px; }
  .hub-head time { flex: none; font-size: 16px; }
  .feed .hub-head a { font-size: 16px; }

  /* «Что нового» — плитки в одну колонку */
  .d-tile, .d-stack { grid-column: 1 / -1; }
  .d-stack { grid-template-rows: none; grid-auto-rows: auto; gap: 16px; }

  /* баннер событий: без Пухлеи и вертикальной надписи, текст на всю ширину */
  .hub-ban { height: auto; min-height: 300px; padding: 28px 24px 24px; gap: 24px; border-radius: calc(32px * var(--sq)); }
  .hub-pet, .hub-tag { display: none; }
  .hub-txt { width: auto; max-width: 100%; gap: 20px; }
  .hub-txt h3 { font-size: 36px; }
  .hub-txt p { font-size: 16px; line-height: 1.35; text-box: none; }
  .hub-next { width: 100%; }

  /* карточки «Идут сейчас» листаются вбок */
  .hub-labels .hub-label:first-child, .hub-lines::before { padding-left: 8px; }
  .hub-cards { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; gap: 16px; height: 360px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .hub-cards::-webkit-scrollbar { display: none; }
  .hub-cards > * { scroll-snap-align: start; }
  .hub-sq { height: auto; gap: 16px; }
  .hub-ava { flex: 1; width: auto; height: auto; }
  .hub-line { height: 88px; gap: 12px; }
  .hub-line .when { width: 92px; }

  /* Анилог: фильтры сверху, карточки по две */
  .cards .alog { min-height: 360px; }
  .alog-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards .alog-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .alog-bar { gap: 6px; padding-left: 8px; padding-right: 8px; }

  /* база знаний — одна колонка */
  .kb-groups { grid-template-columns: 1fr; gap: 16px; }
  .kb-groups > :last-child { min-height: 0; }
  .kb-label { padding-left: 8px; }

  /* баннеры инструментов — один под другим, пониже */
  .tools > *, .tools > :last-child { grid-column: 1 / -1; height: 240px; }

  /* новости — одна колонка */
  .feed-list { grid-template-columns: 1fr; gap: 16px; }
  .feed-card .cover { height: 200px; }

  /* подвал — всё в одну колонку (правило планшета «по 4 колонки» здесь не действует) */
  .foot-logo, .foot-col { grid-column: 1 / -1; }
}

/* телефон: скругления как у строк «Бой» в базе знаний (слово владельца 31.10) — плашка 24, вложенная картинка или плитка с полем 6 — 18.
   Рамка первого экрана — отдельно (26 до 720, base.css) */
@media (max-width: 760px) {
  .hub-ban, .hub-card, .hub-ava, .alog, .feed-card, .foot-in, .kb-mode, .kb-ban-top, .kb-zone, .nav-drop.all .all-art, .ph,
  .a-hero, .a-widget, .a-embed, .a-text figure:not(.flat) img { border-radius: calc(24px * var(--sq)); }
  .hub-tag { border-radius: 0 calc(24px * var(--sq)) calc(24px * var(--sq)) 0; }
  .feed-card .cover, .hub-ava.pic .full, .hub-ava.whos .in { border-radius: calc(18px * var(--sq)); }
}