@layer pages {
  /* Посадочная метода (treatments/show, макет A_Method) */

  /* Герой (вариант Б): надзаголовок и H1 во всю ширину карточки, под ними текст | фото 4:3 */
  /* gap карточки задан свойством, а не через --gap: переменная унаследовалась бы в .stack и .chip-row внутри */
  .method-hero { padding: 44px; display: flex; flex-direction: column; gap: 24px; }
  /* Шапка — контейнер: заголовок подстраивается под ширину карточки (cqi), а не экрана */
  .method-hero__head { --gap: 14px; container-type: inline-size; min-width: 0; }
  /* На десктопе 54px в строку; длинное слово — перенос по слогам (lang="ru" у <html>) */
  .method-hero__title { font-size: clamp(30px, 9.4cqi, 54px); hyphens: auto; -webkit-hyphens: auto; }
  .method-hero__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 40px;
    align-items: start;
  }
  .method-hero__text { min-width: 0; }
  .method-hero__media { --ratio: 4 / 3; }
  .method-hero__price { display: flex; align-items: baseline; gap: 10px; }
  .method-hero__price b { font-size: 26px; }
  .method-hero__photo { border-radius: 20px; }
  .method-hero .placeholder { border-radius: 20px; }

  /* «Как проходит лечение»: карточка шага */
  .method-step { padding: 26px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
  .method-step__title { font-size: 19px; line-height: 1.3; overflow-wrap: break-word; hyphens: auto; }
  /* Пять шагов в ряд (ЭВЛК): карточки уже, поэтому плотнее */
  .method-step--dense { padding: 22px 18px; }
  .method-step--dense .method-step__title { font-size: 17px; }

  /* «Виды»: карточки без минимальной высоты */
  .method-kind { min-height: 0; }

  /* «Чем удобен метод» | «Что важно знать» — одинаковой высоты */
  .method-notes { align-items: stretch; }
  .method-cautions { padding: 32px; display: flex; flex-direction: column; gap: 14px; }
  .method-cautions > strong:first-child { margin: 0; font-size: 22px; line-height: 1.3; }
  .method-cautions ul { margin: 0; display: flex; flex-direction: column; gap: 8px; color: var(--ink); }

  /* Призыв: голубая плашка */
  .method-cta {
    padding: 36px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }
  .method-cta__text { display: flex; flex-direction: column; gap: 6px; max-width: 560px; }

  /* Статья врача: отделена линией от карточек выше */
  .method-article { --block-gap: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
  .method-article__head { display: flex; flex-direction: column; gap: 14px; max-width: 680px; }

  /* Телефон: поля карточек 20px, фото героя под текстом и кнопками, между ними 24px */
  @media (max-width: 820px) {
    .method-hero { padding: 20px; }
    .method-hero__body { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .method-cautions, .method-cta { padding: 20px; }
  }
}