/* =============================================================================
   v11 «Точки» — мобильный слой (A6). Подключается ПОСЛЕ css/app.css.
   Файл целиком живёт внутри медиазапросов: на десктопе он не меняет ничего.
   Брейкпоинты §5: 768 · 600 · 430 · 390.
   ========================================================================== */

/* ===================================== ≤950 — таблица гор перестаёт помещаться
   Настоящая таблица шире 890px: с 769 до ~950 её правые колонки срезает
   .page{overflow:clip} — колонки «Сложность» и «Когда идти» просто пропадают.
   Поэтому карточная раскладка включается раньше нижнего брейкпоинта §5. */
@media (max-width:950px){
  /* -------------------------------------------------- таблица гор → карточки
     Каждая строка — тоновое поле (§4.4 п.2: единственный способ «утопить»
     блок). Внутри — пары «параметр / значение», горизонтального скролла нет. */
  .tbl{ margin-block:var(--sp-5) 0; }
  .tbl,.tbl tbody,.tbl tr,.tbl td,.tbl tbody th{ display:block; width:100%; }
  .tbl thead{
    position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);
  }
  .tbl tr{
    background:var(--bg-2); border-top:0;
    padding:var(--sp-5); margin-bottom:var(--sp-3);
  }
  .tbl tbody tr + tr th,.tbl tbody tr + tr td{ border-top:0; }
  /* шапка карточки — имя горы; ярлык «Гора · вершина» ей не нужен */
  .tbl tbody th{
    font-size:var(--fs-t1); line-height:1.24; font-weight:500; color:var(--ink);
    white-space:normal; padding:0 0 var(--sp-3); margin-bottom:var(--sp-3);
    border-bottom:var(--hair) solid var(--line-strong);
  }
  .tbl tbody th::before{ display:none; }
  .tbl td{
    display:grid; grid-template-columns:minmax(0,9.5rem) minmax(0,1fr);
    gap:var(--sp-2) var(--sp-4); align-items:baseline; padding:var(--sp-2) 0;
  }
  .tbl td + td{ border-top:var(--hair) solid var(--line); }
  .tbl td::before{
    content:attr(data-th);
    font-family:var(--font-mono); font-weight:500; font-size:var(--fs-m1);
    line-height:1.5; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  }
  .tbl .num,.tbl .num--lead{ text-align:left; padding-right:0; }
  .tbl .num--lead{ font-size:var(--fs-t2); font-weight:500; }
  /* .todo сам красится в --bg-2: на карточке того же тона он пропал бы */
  .tbl .todo{ background:var(--surface); }
}

/* ============================================================ ≤768 — планшет
   Одна колонка уже собрана в app.css (≤880). Здесь: ритм, полоса сцены,
   таблица гор карточками, лента постов, тач-таргеты.                        */
@media (max-width:768px){
  :root{
    --sp-section:88px;   /* вместо clamp(96…192) — §5 «72–88px» */
    --sp-block:28px;
  }

  /* сцена — полоса 32svh под заголовком (порядок задан в app.css ≤880),
     цикл сборки не трогаем (его ведёт js/scene.js) */
  /* высоту сцене не задаём: на мобиле она — подложка секции 00 (inset:0) */

  /* ------------------------------------------------ 09 лента: одна колонка
     База ленты — в app.css (A5). Здесь только мобильная раскладка: один
     столбец, кадр всегда сверху, .post--wide теряет двухколоночную трактовку. */
  .feed__grid{ grid-template-columns:minmax(0,1fr); row-gap:var(--sp-6); }
  .feed__grid > .post,
  .feed__grid > .post--wide{
    grid-column:auto; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto;
    gap:var(--sp-4); border-top-color:var(--line-strong);
  }
  .post__title,
  .post--wide .post__title{
    font-family:var(--font-ui); font-weight:500; font-size:var(--fs-t1);
    line-height:1.24; letter-spacing:-.006em; max-width:none;
  }
  .post__excerpt,
  .post--wide .post__excerpt{
    font-size:var(--fs-t3); line-height:1.55; max-width:none;
  }
  /* кадр — грид-элемент карточки: без min-width:0 авто-минимум картинки
     распирает колонку и даёт горизонтальный вылет на 360 */
  .post__media,
  .post--wide .post__media{ min-width:0; max-width:100%; aspect-ratio:3 / 2; }
  .post__media--none,
  .post--wide .post__media--none{ aspect-ratio:16 / 5; }
  .post--wide .post__body{ align-content:start; gap:var(--sp-3); padding-block:0; }
  .post__link{ align-self:start; }

  /* ------------------------------------------------- тач-таргеты и фокус */
  .menu a,.q summary{ min-height:48px; }
  .menu ol{ gap:var(--sp-2) var(--sp-5); }
  .navbtn{ min-width:48px; padding-inline:var(--sp-3); }
  .foot__links a,.attrib summary{
    display:inline-flex; align-items:center; min-height:44px;
  }
  /* подчёркивание .link считается от края бокса — у растянутого до 44px
     тач-таргета его надо вернуть под строку */
  .foot__links a.link{ background-position:0 calc(50% + .66em); }
  .foot__links{ gap:var(--sp-1); }
  /* обводка фокуса не должна обрезаться соседними overflow:clip */
  :focus-visible{ outline-width:2px; outline-offset:2px; }
}

/* ============================================ ≤600 — крупный телефон/ландшафт */
@media (max-width:600px){
  :root{ --sp-section:80px; }
  .sec__head{ margin-bottom:var(--sp-6); }
  .feed__grid .post{ padding-block:var(--sp-5); }
  .tbl td{ grid-template-columns:minmax(0,8.5rem) minmax(0,1fr); }
}

/* ========================================================= ≤430 — телефон */
@media (max-width:430px){
  :root{
    --sp-section:72px;
    --fs-d1:36px;        /* Unbounded: три строки H1 на 391–430 */
  }
  /* высоту сцене не задаём: подложка растягивается по всей секции */
  .hero h1{ max-width:none; }

  /* пара «параметр / значение» встаёт в столбик: ярлыки вроде
     «Тропа (официальный вход)» в узкой колонке рвались на три строки */
  .tbl tr{ padding:var(--sp-4); }
  .tbl td{ display:block; padding:var(--sp-3) 0 var(--sp-2); }
  .tbl td::before{ display:block; margin-bottom:2px; }
  .tbl tbody th{ font-size:var(--fs-t2); }

  .feed__grid > .post{ gap:var(--sp-3); }
  .cta{ gap:var(--sp-4); }
  .btn{ width:100%; }          /* тач-таргет на всю колонку */
}

/* ====================================== ≤390 — базовый iPhone и уже (360) */
@media (max-width:390px){
  /* на 360–390 то же H1 в три строки требует 32px: геометрический гротеск
     Unbounded на ~25 % шире антиквы, которая стояла здесь до правки владельца */
  :root{ --sp-block:24px; --fs-d1:32px; }
  .field{ padding:var(--sp-5) var(--sp-4); }
  .q summary{ gap:var(--sp-3); }
  .q__t{ max-width:none; }
}

/* Тач-таргеты, пропущенные в первом проходе (замер QA):
   сноски-звёздочки были 12×21, логотип 186×23.7 — обе ниже порога. */
@media (max-width:880px){
  a.ref{ display:inline-block; min-width:24px; min-height:24px; text-align:center; }
  /* НЕ inline-flex: он схлопывает пробел между инлайновыми частями логотипа
     («Корееведы в полях» превращалось в «Кореевёдыв полях»).
     Высоту добираем паддингом, разметка и пробелы не трогаются. */
  .brand{ display:inline-block; padding-block:calc((44px - 1.2em) / 2); }
}