/* ===== BEYONDSKIN 2.0 — PATIENT CONCERNS =====
   Раздел перенесён со старого сайта (ProcessWire) в дизайн-систему нового.
   Шапка, тёмная полоса и хвост берутся из procedure.css — здесь только сетка
   разделов и типографика статьи.

   Кегли те же, что вымерены по макетам процедур: абзац 18px/23px,
   бежевая рамка в шапке 15px/19px. */

.bs2-concerns{background:var(--cream);overflow-x:hidden}
.bs2-concerns section{max-width:var(--shell);margin-left:auto;margin-right:auto}
/* Оформление общих полос (фон, паддинги, центрирование) живёт в procedure.css
   и не привязано к корневому классу шаблона. Здесь остаётся только блок новостей:
   его стили в main.css, а ограничение ширины снимать всё равно надо. */
.bs2-concerns .bs2-news{max-width:none}

/* Текстовая колонка в этом разделе короче, чем у процедур (нет длинного описания),
   и при align-items:start слева оставалась дыра до 230px. Центрируем по вертикали. */
.bs2-concerns .bs2-ps-hero{align-items:center}

/* ===== СЕТКА РАЗДЕЛОВ ===== */
/* Карточка та же, что в каталоге процедур (.bs2-proc-card из procedures.css),
   поэтому здесь только раскладка. Три плитки на хабе, четыре в категориях. */
.bs2-concerns-grid{padding:0 var(--pad) 74px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:34px}

/* ===== СТАТЬЯ ===== */
.bs2-concern-body{padding:0 var(--pad) 74px}
.bs2-concern-body__inner{max-width:1210px}
.bs2-concern-body__inner p{font-size:18px;font-weight:300;line-height:23px;color:var(--dark);margin-bottom:18px}
.bs2-home .bs2-concern-body__inner h2{font-family:var(--serif);font-size:34px;font-weight:400;line-height:1.15;
  color:var(--dark);text-transform:uppercase;margin:44px 0 18px}
.bs2-home .bs2-concern-body__inner h3{font-family:var(--serif);font-size:26px;font-weight:400;line-height:1.2;
  color:var(--dark);text-transform:uppercase;margin:34px 0 14px}
.bs2-concern-body__inner ul,
.bs2-concern-body__inner ol{list-style:none;margin:0 0 18px;display:flex;flex-direction:column;gap:10px}
.bs2-concern-body__inner li{position:relative;padding-left:20px;font-size:18px;font-weight:300;
  line-height:23px;color:var(--dark)}
.bs2-concern-body__inner li::before{content:'';position:absolute;left:0;top:9px;width:6px;height:6px;
  border-radius:50%;background:var(--copper)}
.bs2-concern-body__inner strong{font-weight:600}
.bs2-concern-body__inner img{margin:10px 0 22px}
/* Ссылки на процедуры проставляются автоматически (bs2_link_procedures) —
   цвет с весом (0,2,1), иначе кит Elementor красит их своим. */
.bs2-home .bs2-concern-body__inner a{color:var(--copper);text-decoration:underline;text-underline-offset:3px}
@media(hover:hover){
  .bs2-home .bs2-concern-body__inner a{transition:color .2s var(--ease-out)}
  .bs2-home .bs2-concern-body__inner a:hover{color:var(--terracotta)}
}

/* ===== АДАПТИВ ===== */
@media(max-width:1024px){
  .bs2-concerns-grid{gap:24px}
}
@media(max-width:768px){
  .bs2-concern-body__inner p,
  .bs2-concern-body__inner li{font-size:16px;line-height:1.55}
  .bs2-home .bs2-concern-body__inner h2{font-size:26px;margin-top:34px}
  .bs2-home .bs2-concern-body__inner h3{font-size:21px}
  .bs2-concerns-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
}
@media(max-width:480px){
  .bs2-concerns-grid{grid-template-columns:1fr}
}

/* Тап-зоны на мобильном: крошки были 26px, «Learn more» — 21px при норме 44.
   gap обязателен — переход в inline-flex съедает пробел между текстом и стрелкой. */
@media(max-width:768px){
  .bs2-concerns .bs2-crumb,
  .bs2-concerns .bs2-proc-card__more{min-height:44px;display:inline-flex;align-items:center;gap:.35em}
}

/* Кнопки CareCredit: на старом сайте это были картинки-кнопки с carecredit.com,
   обе отдавали 404. Заменены на свои. */
.bs2-concern-body__inner .bs2-cc-btn{display:inline-flex;margin:6px 12px 6px 0;
  font-size:15px;padding:13px 30px;text-transform:uppercase}
.bs2-home .bs2-concern-body__inner a.bs2-cc-btn{color:var(--white);text-decoration:none}

/* ---------- Обычная страница без своего шаблона (page.php) ---------- */
/* Юридические и текстовые страницы фотографии в шапке не имеют: сетку
   в одну колонку задаём явно, иначе вторая колонка съедает половину ширины. */
.bs2-ps-hero--noimage{grid-template-columns:minmax(0,1fr)}
.bs2-page .bs2-ps-hero--noimage .bs2-ps-hero__copy{max-width:900px}
/* Текст политик длинный — колонка уже, чем в Patient Concerns, иначе строка нечитаема. */
.bs2-page .bs2-concern-body__inner{max-width:860px}
.bs2-page .bs2-concern-body__inner h2{margin-top:34px}
@media (max-width:768px){
  .bs2-page .bs2-ps-hero--noimage .bs2-ps-hero__copy{max-width:none}
}
/* У текстовой страницы под шапкой нет картинки, и отступ от неё до первого
   подзаголовка выглядел провалом — ужимаем. */
.bs2-page .bs2-ps-hero--noimage{padding-bottom:18px}
.bs2-page .bs2-concern-body{padding-top:6px}
.bs2-page .bs2-concern-body__inner>h2:first-child{margin-top:0}
/* Карточка раздела без обложки: вместо фото — песочная плашка сверху,
   иначе заголовок висит в воздухе и ряд карточек разъезжается по высоте. */
.bs2-proc-card--text{border-top:3px solid var(--sand);padding-top:22px}
.bs2-proc-card--text .bs2-proc-card__title{margin-top:0}