@layer layout {
  /* .wrap в макетах: 1312px вместе с полями 32px (16px на мобильном); с viewport-fit=cover — не меньше выреза экрана */
  .container {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
  }

  /* Глубокая страница (layouts/deep): дерево разделов 260px | контент.
     Ниже 820px дерево уходит в выдвижное меню. */
  .deep {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
    padding: 28px 0 104px;
  }
  .deep__main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--main-gap, 40px);
  }

  /* Тело статьи 680px | оглавление 220px (.art в макетах) */
  .with-toc {
    display: grid;
    grid-template-columns: minmax(0, 680px) 220px;
    gap: 48px;
    align-items: start;
  }

  /* Шапка страницы внутри .deep__main: kicker, h1, lead, мета */
  .page-head {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 760px;
  }

  /* Секции главной (.sec / .band / .sec-h в макетах) */
  .section { padding-block: 96px; }
  .section--band { background: var(--surface); }
  .section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 36px;
  }
  .section-head--flush { margin-bottom: 0; }

  /* Секция внутри глубокой страницы: заголовок и содержимое столбиком */
  .block {
    display: flex;
    flex-direction: column;
    gap: var(--block-gap, 24px);
  }

  /* Сетки: фиксированное число колонок (.g2/.g3/.g4) или auto-fit c --min */
  .grid { display: grid; gap: var(--gap, 24px); }
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid--fit { grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 380px), 100%), 1fr)); }

  /* Ряд «ещё» (.rail в макетах): «Читайте также», «Результаты», «Похожие случаи».
     4 карточки — 2×2, а не 3 + 1; на телефоне — лента с прокруткой вбок (ниже) */
  .rail:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .stack { display: flex; flex-direction: column; gap: var(--gap, 20px); }
  .cluster { display: flex; flex-wrap: wrap; gap: var(--gap, 12px); align-items: center; }

  @media (max-width: 820px) {
    .deep {
      grid-template-columns: minmax(0, 1fr);
      gap: 0;
      padding: 16px 0 56px;
    }
    .deep__aside { display: none; }
    .deep__main { gap: var(--main-gap-mobile, 28px); }
    .with-toc { grid-template-columns: minmax(0, 1fr); gap: 0; }

    .section { padding-block: 56px; }
    .section-head {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 24px;
    }
    .section-head--flush { margin-bottom: 0; }

    .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
    .grid--mobile-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

    /* Лента до краёв экрана: следующая карточка видна краем, полосы прокрутки нет */
    .rail {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      margin-inline: calc(-1 * max(var(--gutter), env(safe-area-inset-left))) calc(-1 * max(var(--gutter), env(safe-area-inset-right)));
      padding: 4px max(var(--gutter), env(safe-area-inset-right)) 14px max(var(--gutter), env(safe-area-inset-left));
      scroll-padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
    }
    .rail::-webkit-scrollbar { display: none; }
    .rail > * { flex: 0 0 80%; min-width: 0; scroll-snap-align: start; }

    /* Ряд кнопок → столбик на всю ширину (.stack-m в макетах) */
    .cluster--stack-mobile { flex-direction: column; align-items: stretch; }
  }
}