/* ============================================================
   PROBLEMS — раздел «Я хочу»: посадочные по причинам обращения.
   Текстовая часть наследует типографику статьи (article-detail.css),
   здесь только список-перечисление и сетка процедур под ним.
   ============================================================ */

.prob-list { margin: 10px 0 0; padding: 0 0 0 1px; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.prob-list li { position: relative; padding-left: 18px; }
.prob-list li::before {
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 7px; height: 1px; background: var(--c-accent);
}

.prob-procs.wrap { padding-top: clamp(8px, 1vw, 16px); padding-bottom: clamp(48px, 4.2vw, 80px); }
.prob-procs__heading { font-size: clamp(24px, 1.875vw, 36px); font-weight: 400; color: var(--c-text); letter-spacing: -0.03em; line-height: 1.15; margin: 0 0 clamp(18px, 1.46vw, 28px); font-style: normal; }
/* Кнопка под сеткой. Отступ крупный: плитка снизу почти пустая
   (фото и текст сидят в верхней части), и при маленьком отступе
   кнопка читается прилипшей к карточкам. */
.prob-procs__all {
  display: inline-flex; align-items: center; gap: 7px; margin-top: clamp(36px, 3.75vw, 64px);
  padding: 11px 18px; border-radius: 999px; border: 1px solid rgba(141,165,133,0.4);
  font-size: clamp(14px, 0.94vw, 16px); font-weight: 500; color: var(--c-accent-hover);
  letter-spacing: -0.02em; text-decoration: none;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.16s cubic-bezier(0.23,1,0.32,1);
}
.prob-procs__all::after { content: '→'; font-size: 15px; line-height: 1; }
@media (hover: hover) and (pointer: fine) { .prob-procs__all:hover { background: rgba(141,165,133,0.1); border-color: var(--c-accent); } }
.prob-procs__all:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.prob-procs__all:active { transform: scale(0.97); }

@media (prefers-reduced-motion: reduce) {
  .prob-procs__all { transition: none; }
  .prob-procs__all:active { transform: none; }
}

@media (max-width: 767px) {
  .prob-procs.wrap { padding: 0 20px 40px; }
  .prob-procs__heading { font-size: 22px; margin-bottom: 14px; }
  .prob-procs__all { margin-top: 24px; }

}

/* ── Центрированная шапка страницы ──────────────────────────────────
   Заголовок стоял у левого края .wrap, а текст идёт узкой колонкой по
   центру — композиция разъезжалась. Центрируем крошки, заголовок и
   вводный абзац; остальной текст остаётся выключенным влево: абзац по
   центру на всю ширину колонки читается заметно хуже. */
.page--problem .article-bc.wrap { justify-content: center; text-align: center; }
.page--problem .article-top.wrap { text-align: center; }
.page--problem .article-content > .article-section:first-child { text-align: center; }
/* Подзаголовки разделов тоже по центру — иначе вверху страницы всё
   выключено по центру, а дальше резко уходит влево. Сами абзацы и
   списки остаются слева: их читают, а не рассматривают. */
.page--problem .article-content h3 { text-align: center; }
.page--problem .prob-procs__heading { text-align: center; }
.page--problem .prob-procs { text-align: center; }
.page--problem .prob-procs__grid { text-align: left; }

/* ── Карточки процедур ───────────────────────────────────────────────
   На десктопе — та же плитка, что на странице услуг
   (css/components/dir-tile.css), чтобы одна и та же услуга выглядела
   на сайте одинаково. */
.page--problem .dir-grid { padding: 0; }

/* На телефоне плитка 380×520 на каждую процедуру — это снова экран на
   карточку, от чего уходили в навигаторе услуг. Та же разметка
   разворачивается в компактную строку: превью, название, стрелка. */
@media (max-width: 767px) {
  .page--problem .dir-grid { grid-template-columns: 1fr; gap: 8px; }
  .page--problem .dir-tile {
    display: flex; align-items: center; aspect-ratio: auto;
    border-radius: 14px; container-type: normal;
  }
  .page--problem .dir-tile__scrim,
  .page--problem .dir-tile__num,
  .page--problem .dir-tile__photo-spacer,
  .page--problem .dir-tile__desc,
  .page--problem .dir-tile__num-hover,
  .page--problem .dir-tile__title-hover { display: none; }

  .page--problem .dir-tile__photo {
    position: static; flex-shrink: 0; width: 56px; height: 56px;
    margin: 10px; border-radius: 10px; overflow: hidden; transform: none;
  }
  /* на тач-экране «наведение» срабатывает от касания — гасим разворот фото */
  .page--problem .dir-tile:hover .dir-tile__photo { top: auto; left: auto; width: 56px; height: 56px; border-radius: 10px; }
  .page--problem .dir-tile:hover .dir-tile__body { opacity: 1; }

  .page--problem .dir-tile__body {
    flex: 1 1 auto; min-width: 0; flex-direction: row; align-items: center;
    gap: 0; padding: 10px 44px 10px 0; text-align: left;
  }
  .page--problem .dir-tile__title { font-size: 15px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; }

  .page--problem .dir-tile__arrow {
    position: absolute; right: 12px; top: 50%; bottom: auto;
    width: 26px; height: 26px; border-radius: 50%;
    opacity: 1; transform: translateY(-50%); transition: none;
    background: rgba(141,165,133,0.14); color: var(--c-accent-hover);
  }
  .page--problem .dir-tile:hover .dir-tile__arrow { opacity: 1; transform: translateY(-50%); transition: none; }
  .page--problem .dir-tile__arrow svg { width: 13px; height: 13px; }
  .page--problem .dir-tile:active { background: rgba(141,165,133,0.06); }
}