/* ===== BEYONDSKIN 2.0 — КАТАЛОГ СПЕЦИАЛИСТОВ (/specialists/) =====
   По архиву about.zip: кадр «о клинике/главная/врачи» (десктоп 1440×2662),
   мобильные «главная» 402×1090, «врачи» 402×1008, «other» 402×553.

   Замеры с макета: фото шапки 538×433, рамка справа 745 шириной, зазор 29;
   лавандовая полоса 1311×128 внутри полей; карточка врача 307 шириной,
   шаг 334 (зазор 27); нижний блок 715 + 578.

   Кнопки и ссылки пишутся с префиксом .bs2-home — кит Elementor задаёт
   `.elementor-kit-138 a:hover` и `button` весом (0,2,1) и перебивает
   одноклассовые правила. */

.bs2-specs{background:var(--cream);overflow-x:hidden}
.bs2-specs section{max-width:var(--shell);margin-left:auto;margin-right:auto}

/* ===== 1. ШАПКА ===== */
.bs2-specs-hero{padding:26px var(--pad) 0;display:grid;grid-template-columns:538fr 745fr;gap:29px;align-items:stretch}
.bs2-specs-hero__media img{width:100%;height:433px;object-fit:cover;object-position:center}
/* В макете это тонкая рамка по контуру, без заливки. */
.bs2-specs-hero__box{border:1px solid rgba(41,31,35,.35);padding:34px 36px 40px;display:flex;flex-direction:column}
.bs2-specs-hero__kicker{font-size:17px;font-weight:300;color:var(--dark)}
/* Между кикером и заголовком в макете большой воздух: заголовок прижат к низу. */
.bs2-home .bs2-specs-hero__title{font-family:var(--serif);font-size:44px;font-weight:400;line-height:1.1;
  color:var(--dark);text-transform:uppercase;margin:auto 0 0}
.bs2-home .bs2-specs-hero__title em{font-style:italic;color:var(--copper)}
.bs2-specs-hero__text{margin-top:22px;font-size:18px;font-weight:300;line-height:25px;color:var(--dark)}

/* ===== 2. ЛАВАНДОВАЯ ПОЛОСА ===== */
/* Полоса не во всю ширину экрана, а внутри полей — как в макете. */
.bs2-specs-cta{margin:36px auto 52px;padding:0 var(--pad)}
.bs2-specs-cta__inner{background:var(--lavender-muted);padding:30px 40px;display:flex;align-items:center;
  justify-content:space-between;gap:34px}
.bs2-home .bs2-specs-cta__title{font-family:var(--serif);font-size:25px;font-weight:400;line-height:1.2;
  color:var(--dark);text-transform:none;margin-bottom:8px}
.bs2-home .bs2-specs-cta__title em{font-style:italic}
.bs2-specs-cta__copy p{font-size:15px;font-weight:300;line-height:1.45;color:var(--dark)}
.bs2-specs-cta__btn{flex:0 0 auto;font-size:15px;padding:14px 34px;text-transform:uppercase}

/* ===== 3. СЕТКА ВРАЧЕЙ ===== */
.bs2-specs-grid{padding:0 var(--pad);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:52px 27px}
/* Плашка под фото песочная: в макете карточки без фотографии выглядят именно так. */
.bs2-spec-card__photo{background:var(--sand);aspect-ratio:307/325;overflow:hidden}
.bs2-spec-card__photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
.bs2-home .bs2-spec-card__name{font-family:var(--sans);font-size:24px;font-weight:300;line-height:1.25;
  color:var(--dark);text-transform:none;margin:18px 0 0}
.bs2-home .bs2-spec-card__name a,
.bs2-home .bs2-spec-card__name span{color:var(--dark);text-decoration:underline;text-underline-offset:4px}
@media(hover:hover){
  .bs2-home .bs2-spec-card__name a{transition:color .2s var(--ease-out)}
  .bs2-home .bs2-spec-card__name a:hover{color:var(--terracotta)}
  .bs2-home .bs2-spec-card__book{transition:color .2s var(--ease-out)}
  .bs2-home .bs2-spec-card__book:hover{color:var(--terracotta)}
}
.bs2-spec-card__book{display:inline-flex;align-items:center;gap:.4em;margin-top:12px;
  font-size:17px;font-weight:300;color:var(--dark)}

/* ===== 4. НИЖНИЙ БЛОК ===== */
.bs2-specs-foot{margin:78px auto 92px;padding:0 var(--pad);display:grid;grid-template-columns:715fr 578fr;
  gap:19px;align-items:stretch}
.bs2-specs-foot__media img{width:100%;height:302px;object-fit:cover;object-position:center}
.bs2-specs-foot__box{background:var(--sand);padding:44px 54px;display:flex;flex-direction:column;justify-content:center}
.bs2-home .bs2-specs-foot__title{font-family:var(--serif);font-size:34px;font-weight:400;line-height:1.15;
  color:var(--dark);text-transform:uppercase;margin:0}
.bs2-home .bs2-specs-foot__title em{font-style:italic}
.bs2-specs-foot__sub{margin-top:16px;font-size:17px;font-weight:300;color:var(--dark)}
.bs2-specs-foot__row{display:flex;align-items:center;gap:17px;margin-top:22px;flex-wrap:wrap}
.bs2-specs-foot__book{font-size:15px;padding:14px 30px;text-transform:uppercase}
.bs2-specs-foot__tel{font-size:17px;padding:13px 30px;text-transform:none}

/* ===== АДАПТИВ ===== */
@media(max-width:1200px){
  .bs2-specs-hero{grid-template-columns:1fr 1fr;gap:22px}
  .bs2-home .bs2-specs-hero__title{font-size:36px}
  .bs2-specs-grid{gap:44px 22px}
  .bs2-specs-foot{grid-template-columns:1fr 1fr}
  .bs2-specs-foot__box{padding:34px 34px}
}
@media(max-width:1024px){
  /* В мобильном макете порядок вертикальный: фото, рамка, полоса. */
  .bs2-specs-hero{grid-template-columns:1fr;gap:15px}
  .bs2-specs-hero__media img{height:352px}
  .bs2-specs-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 20px}
  .bs2-specs-cta__inner{flex-direction:column;align-items:center;text-align:center;gap:22px}
  .bs2-specs-foot{grid-template-columns:1fr;gap:0}
  .bs2-specs-foot__media img{height:250px}
  .bs2-specs-foot__box{text-align:center;align-items:center;padding:34px 26px 40px}
}
@media(max-width:768px){
  .bs2-home .bs2-specs-hero__title{font-size:32px}
  .bs2-specs-hero__text{font-size:16px;line-height:1.55}
  .bs2-home .bs2-specs-cta__title{font-size:21px}
  .bs2-home .bs2-spec-card__name{font-size:18px;margin-top:12px}
  .bs2-spec-card__book{font-size:15px;margin-top:8px}
  .bs2-home .bs2-specs-foot__title{font-size:28px}
  .bs2-specs-foot__row{justify-content:center}
}
@media(max-width:480px){
  .bs2-specs-hero__media img{height:300px}
  .bs2-specs-hero__box{padding:26px 22px 30px}
  .bs2-specs-grid{gap:26px 16px}
  .bs2-specs-foot__row{gap:12px}
  .bs2-specs-foot__book,.bs2-specs-foot__tel{font-size:14px;padding:12px 22px}
}