/* ===== BEYONDSKIN 2.0 — СТРАНИЦА «SPECIALIST» (Dr. Cesar Caldera) =====
   Размеры сняты с Figma: кадр «о клинике/главная/врач» 1440×2407 (десктоп)
   и «главная/врач» 402×1441 (мобилка), состояния вкладок — кадры
   «Certifications & Licenses» / «Hospital Affiliations» / «Speciality».

   Переменные (--dark, --cream, --sand, --copper, --lavender-muted, --serif,
   --sans, --pad, --shell) объявлены в main.css. Крошки (.bs2-about__crumbs,
   .bs2-crumb) переиспользуются из about.css — оно подключено раньше.

   ПРО СПЕЦИФИЧНОСТЬ: кит Elementor задаёт `.elementor-kit-138 h2` (0,1,1),
   `.elementor-kit-138 button{color:#fff}` (0,1,1) и `.elementor-kit-138 a:hover`
   (0,2,1). Поэтому заголовки скоупятся под `.bs2-home`, а кнопки-вкладки
   пишутся как `.bs2-home button.bs2-spec-tab` (0,2,1) — иначе текст вкладок
   становится белым по лавандовому и нечитаемым. */

/* margin-left/right отдельно от top/bottom: если задать шорткатом margin:0 auto,
   специфичность (.bs2-spec section = 0,1,1) перебивает точечные margin-top у
   .bs2-spec-stats/.bs2-spec-tabs/.bs2-spec-bottom (0,1,0) и обнуляет их — из-за
   этого секции слипались и линии-разделители съезжали вплотную к соседним блокам. */
.bs2-spec section{max-width:var(--shell);margin-left:auto;margin-right:auto;padding-left:var(--pad);padding-right:var(--pad)}

/* ===== 1. ШАПКА ===== */
/* Три колонки: текст — портрет — карточка. Нижние края подписи, фото и кнопки
   выровнены по одной линии, поэтому колонки тянутся (stretch), а подпись и
   кнопка прижимаются к низу через margin-top:auto. */
.bs2-spec-hero{display:grid;grid-template-columns:1fr 440px 362px;gap:35px;align-items:stretch;padding-top:20px}

.bs2-spec-hero__text{display:flex;flex-direction:column}
.bs2-home .bs2-spec-hero__title{font-family:var(--serif);font-size:clamp(48px,6.1vw,88px);font-weight:400;line-height:1.02;color:var(--dark);text-transform:uppercase}
.bs2-spec-hero__person{margin-top:auto;padding-bottom:6px}
.bs2-spec-hero__role{display:block;font-size:17px;font-weight:300;color:var(--dark);margin-bottom:6px}
.bs2-spec-hero__name{display:block;font-family:var(--sans);font-size:34px;font-weight:400;line-height:1.15;color:var(--dark);text-transform:uppercase}

.bs2-spec-hero__media{height:470px;overflow:hidden}
.bs2-spec-hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 20%}

.bs2-spec-hero__aside{display:flex;flex-direction:column}
.bs2-spec-hero__card{background:var(--lavender-muted);padding:24px 26px}
.bs2-spec-hero__card p{font-size:15px;font-weight:400;line-height:1.55;color:var(--dark)}
.bs2-spec-hero__card .bs2-accent{color:var(--copper)}
.bs2-spec-hero__btn{align-self:flex-start;margin-top:auto;font-size:15px;padding:14px 34px;text-transform:uppercase}

/* ===== 2. ПЛАШКИ СО СТАТИСТИКОЙ ===== */
.bs2-spec-stats{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding-top:46px;margin-top:44px}
.bs2-spec-stats::before{content:'';position:absolute;top:0;left:var(--pad);right:var(--pad);height:1px;background:rgba(41,31,35,.35)}
.bs2-spec-stat{background:var(--sand);min-height:250px;padding:28px 30px;display:flex;flex-direction:column}
.bs2-spec-stat__pill{align-self:flex-start;background:var(--dark);color:var(--white);
  font-size:11px;font-weight:500;letter-spacing:.6px;text-transform:uppercase;padding:11px 22px;border-radius:50px}
.bs2-spec-stat__body{margin-top:auto}
.bs2-spec-stat__label{display:block;font-size:20px;font-weight:300;line-height:1.35;color:var(--dark);margin-bottom:2px}
.bs2-spec-stat__value{display:block;font-family:var(--serif);font-size:46px;font-weight:400;line-height:1.05;color:var(--dark);text-transform:uppercase}
/* У третьей плашки значение длиннее («Glendale Memorial Hospital») и подпись занимает
   две строки — крупный кегль там не помещается. */
.bs2-spec-stat:last-child .bs2-spec-stat__label{font-size:15px}
.bs2-spec-stat:last-child .bs2-spec-stat__value{font-size:32px}

/* ===== 3. ВКЛАДКИ ===== */
/* Линии сверху и снизу — как в макете; контент вкладки идёт СЛЕВА на всю ширину
   текстовой колонки, справа от него ничего нет. */
.bs2-spec-tabs{position:relative;margin-top:56px;padding-top:44px;padding-bottom:44px}
.bs2-spec-tabs::before,.bs2-spec-tabs::after{content:'';position:absolute;left:var(--pad);right:var(--pad);height:1px;background:rgba(41,31,35,.35)}
.bs2-spec-tabs::before{top:0}
.bs2-spec-tabs::after{bottom:0}
.bs2-spec-tabs__head{display:flex;align-items:flex-start;justify-content:space-between;gap:40px}
.bs2-home .bs2-spec-tabs__title{font-family:var(--serif);font-size:40px;font-weight:400;line-height:1.1;color:var(--dark);text-transform:uppercase}
.bs2-spec-tabs__nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:12px;max-width:600px}

.bs2-home button.bs2-spec-tab{background:var(--lavender-muted);color:var(--dark);border:none;border-radius:50px;
  padding:14px 28px;font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.3px;
  text-transform:uppercase;cursor:pointer;transition:background-color .2s,color .2s;white-space:nowrap}
.bs2-home button.bs2-spec-tab.is-active{background:var(--dark);color:var(--white);cursor:default}
/* Неактивная вкладка на наведении заливается тем же тёмным, к которому придёт после
   выбора, — связь очевидна. Активная не реагирует: нажимать в ней нечего.
   Цвет намеренно НЕ внутри @media(hover:hover): там, где медиазапрос не сматчился,
   побеждает `.elementor-kit-138 button:hover` и вкладка уезжает в синий #2B247B. */
.bs2-home button.bs2-spec-tab:not(.is-active):hover{background:var(--dark);color:var(--white)}
.bs2-home button.bs2-spec-tab:not(.is-active):active{transform:scale(.97);transition-duration:.08s}

.bs2-spec-tabs__body{padding-top:26px;max-width:780px}
.bs2-spec-panel{display:none}
.bs2-spec-panel.is-active{display:block}
.bs2-home .bs2-spec-panel__title{font-family:var(--sans);font-size:22px;font-weight:400;color:var(--dark);margin-bottom:22px}
.bs2-spec-panel ul{list-style:none;display:flex;flex-direction:column;gap:16px}
.bs2-spec-panel li{position:relative;padding-left:22px;font-size:16px;font-weight:300;line-height:1.5;color:var(--dark)}
.bs2-spec-panel li::before{content:'';position:absolute;left:2px;top:9px;width:5px;height:5px;border-radius:50%;background:var(--dark)}
.bs2-spec-panel li strong{font-weight:500}
.bs2-spec-panel__intro{font-size:16px;font-weight:300;line-height:1.55;color:var(--dark);margin-bottom:20px}
.bs2-spec-panel__intro strong{font-weight:500}
/* В «Speciality» одиннадцать коротких пунктов — в макете они идут плотным списком. */
.bs2-spec-panel ul.bs2-spec-panel__list--tight{gap:5px}

/* ===== 4. ФОТО + ПЕСОЧНЫЙ БЛОК ===== */
.bs2-spec-bottom{display:grid;grid-template-columns:726fr 578fr;gap:26px;margin-top:52px;padding-bottom:90px}
/* Именно height, а не min-height: исходник вертикальный (1150×2044), при min-height
   высота блока остаётся auto, картинка не может взять height:100% и растягивает
   секцию по своим пропорциям. object-position подобран так, чтобы в кадр попало
   лицо, а не потолок. */
.bs2-spec-bottom__media{height:312px;overflow:hidden}
.bs2-spec-bottom__media img{width:100%;height:100%;object-fit:cover;object-position:center 62%}

.bs2-spec-cta{background:var(--sand);padding:40px 44px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.bs2-home .bs2-spec-cta__title{font-family:var(--serif);font-size:36px;font-weight:400;line-height:1.15;color:var(--dark);text-transform:uppercase}
.bs2-home .bs2-spec-cta__title em{font-style:italic}
.bs2-spec-cta p{font-size:16px;font-weight:400;color:var(--dark)}
.bs2-spec-cta__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px}
.bs2-spec-cta__actions .bs2-btn{padding:14px 32px;font-size:15px;text-transform:uppercase}

/* ===== АДАПТИВ ===== */
@media(max-width:1200px){
  .bs2-spec-hero{grid-template-columns:1fr 330px 300px;gap:26px}
  .bs2-spec-hero__media{height:400px}
  .bs2-spec-hero__name{font-size:28px}
  .bs2-spec-stat__value{font-size:38px}
  .bs2-spec-stat:last-child .bs2-spec-stat__value{font-size:27px}
}

@media(max-width:1024px){
  /* Карточка «Since 1985» уходит под заголовок и фото, растягиваясь на обе колонки. */
  .bs2-spec-hero{grid-template-columns:1fr 320px;gap:24px}
  .bs2-spec-hero__aside{grid-column:1 / -1;flex-direction:row;align-items:center;gap:24px}
  .bs2-spec-hero__card{flex:1}
  .bs2-spec-hero__btn{margin-top:0}
  .bs2-spec-stats{grid-template-columns:1fr;gap:18px}
  .bs2-spec-stat{min-height:0;padding:24px 26px}
  .bs2-spec-stat__body{margin-top:26px}
  .bs2-spec-bottom{grid-template-columns:1fr;gap:18px}
  .bs2-spec-bottom__media{height:280px}
}

@media(max-width:768px){
  .bs2-about__crumbs{font-size:15px;padding-top:16px;padding-bottom:16px}
  /* На мобильном заголовок слева, портрет справа — по кадру 402px. */
  .bs2-spec-hero{grid-template-columns:1fr 46%;gap:14px;padding-top:8px}
  .bs2-home .bs2-spec-hero__title{font-size:38px}
  .bs2-spec-hero__media{height:205px}
  .bs2-spec-hero__text{grid-row:1}
  .bs2-spec-hero__person{margin-top:20px;padding-bottom:0}
  .bs2-spec-hero__role{font-size:14px}
  .bs2-spec-hero__name{font-size:26px}
  .bs2-spec-hero__aside{flex-direction:column;align-items:stretch;gap:22px;
    margin-top:24px;padding-top:24px;border-top:1px solid rgba(41,31,35,.35);grid-column:1 / -1}
  .bs2-spec-hero__btn{align-self:center}

  .bs2-spec-stats{margin-top:30px;padding-top:30px}
  .bs2-spec-stat{min-height:230px}
  .bs2-spec-stat__body{margin-top:auto}
  .bs2-spec-stat__value{font-size:40px}
  .bs2-spec-stat:last-child .bs2-spec-stat__value{font-size:28px}

  .bs2-spec-tabs{margin-top:36px;padding-top:32px;padding-bottom:32px}
  .bs2-spec-tabs__head{flex-direction:column;gap:22px}
  .bs2-home .bs2-spec-tabs__title{font-size:28px}
  /* Подписи вкладок длинные — сетка 2×2 во всю ширину, перенос внутри кнопки разрешён. */
  .bs2-spec-tabs__nav{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:none;width:100%}
  .bs2-home button.bs2-spec-tab{width:100%;padding:12px 8px;font-size:11px;
    text-align:center;white-space:normal;line-height:1.3;min-width:0}
  .bs2-spec-tabs__body{padding-top:22px}
  .bs2-spec-panel li{font-size:15px}

  .bs2-spec-bottom{margin-top:32px;padding-bottom:60px}
  .bs2-spec-bottom__media{height:230px}
  .bs2-spec-cta{padding:30px 26px}
  .bs2-home .bs2-spec-cta__title{font-size:27px}
  .bs2-spec-cta__actions .bs2-btn{flex:1;min-width:150px}
}