/* ===== BEYONDSKIN 2.0 — СТРАНИЦА «О КЛИНИКЕ» =====
   Значения выверены по Figma (файл ezkaQLobEt1jVq25DxT3Xk, холст «Структура»,
   кадры 614:347 / 614:416 / 614:433 / 614:458 / 614:476 при ширине 1440px).

   Переменные (--dark, --sand, --copper, --serif, --sans, --pad, --shell) объявлены
   в main.css — здесь только раскладка страницы.

   Про специфичность: как и в main.css, заголовки скоупятся под .bs2-home,
   иначе глобальный кит Elementor (.elementor-kit-138 h1/h2) перебивает наши правила. */

.bs2-about{background:var(--cream);overflow-x:hidden}
/* margin-left/right отдельно от top/bottom: margin:0 auto шорткатом (специфичность
   0,1,1) перебивал бы точечный margin-top:96px у .bs2-about-principle (0,1,0) —
   из-за этого тёмная полоса с цитатой прилипала к предыдущему блоку без отступа. */
.bs2-about section{max-width:var(--shell);margin-left:auto;margin-right:auto}

/* ===== ХЛЕБНЫЕ КРОШКИ ===== */
.bs2-about__crumbs{max-width:var(--shell);margin:0 auto;padding:22px var(--pad) 26px;display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:20px;font-weight:300;color:var(--gray)}
/* nowrap на самой крошке: без него на узком экране «Back to Main» рвётся
   на три строки по словам вместо переноса всей строки крошек целиком. */
.bs2-crumb{display:inline-flex;align-items:center;gap:12px;color:var(--gray);white-space:nowrap}
.bs2-crumb__current{white-space:nowrap}
.bs2-home .bs2-crumb:hover{color:var(--dark)}
.bs2-crumb__arrow{color:var(--copper);font-size:22px;line-height:1}
.bs2-crumb__sep{color:var(--gray)}
.bs2-crumb__current{color:var(--gray)}

/* ===== HERO ===== */
.bs2-about-hero{padding:0 var(--pad);display:grid;grid-template-columns:545fr 745fr;gap:22px;align-items:stretch}
.bs2-about-hero__media{overflow:hidden;height:431px}
.bs2-about-hero__media img{width:100%;height:100%;object-fit:cover;object-position:center}
.bs2-about-hero__card{border:1px solid rgba(41,31,35,.5);padding:34px 42px 40px;display:flex;flex-direction:column}
.bs2-about-hero__label{font-size:20px;font-weight:400;color:var(--dark)}
.bs2-home .bs2-about-hero__title{font-family:var(--serif);font-size:40px;font-weight:400;line-height:1.15;color:var(--dark);text-transform:uppercase;margin:auto 0 0}
.bs2-home .bs2-about-hero__title em{font-style:italic}
.bs2-about-hero__text{font-size:18px;font-weight:300;line-height:1.45;color:var(--dark);margin:26px 0 0}

/* ===== ПОЛОСА-CTA ===== */
.bs2-about-cta{padding:26px var(--pad) 0}
.bs2-about-cta__inner{background:var(--sand);padding:34px 44px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.bs2-home .bs2-about-cta__title{font-family:var(--serif);font-size:25px;font-weight:400;line-height:1.2;color:var(--dark);margin-bottom:10px}
.bs2-home .bs2-about-cta__title em{font-style:italic}
.bs2-about-cta__copy p{font-size:15px;font-weight:300;color:var(--dark);line-height:1.45}
.bs2-about-cta__btn{flex:0 0 auto;font-size:15px;padding:14px 34px;text-transform:uppercase}

/* ===== ТРИ БЛОКА ПРЕИМУЩЕСТВ ===== */
.bs2-about-points{padding:96px var(--pad) 0;display:flex;flex-direction:column;gap:74px}
.bs2-about-point{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.bs2-about-point--reverse .bs2-about-point__media{order:-1}
.bs2-home .bs2-about-point__title{font-family:var(--serif);font-size:40px;font-weight:400;line-height:1.15;color:var(--dark);text-transform:uppercase;margin-bottom:26px}
.bs2-home .bs2-about-point__title em{font-style:italic}
.bs2-about-point__text p{font-size:15px;font-weight:300;line-height:1.6;color:var(--dark);max-width:640px}
.bs2-about-point__media{overflow:hidden}
.bs2-about-point__media img{width:100%;height:338px;object-fit:cover;object-position:center}
.bs2-about-point:first-child .bs2-about-point__media img{object-position:center 22%}
.bs2-about-point--reverse .bs2-about-point__media img{height:334px}

/* ===== КАРТОЧКА ВРАЧА ===== */
.bs2-about-doctor{padding:96px var(--pad) 0}
.bs2-about-doctor__inner{background:rgba(227,199,176,.2);display:grid;grid-template-columns:493fr 827fr;align-items:stretch}
.bs2-about-doctor__photo{overflow:hidden;min-height:431px}
.bs2-about-doctor__photo img{width:100%;height:100%;object-fit:cover;object-position:center}
.bs2-about-doctor__body{padding:44px 56px 40px;display:flex;flex-direction:column}
.bs2-home .bs2-about-doctor__title{font-family:var(--serif);font-size:40px;font-weight:400;line-height:1.1;color:var(--dark);text-transform:uppercase;margin-bottom:22px}
.bs2-home .bs2-about-doctor__title em{font-style:italic;color:var(--copper)}
.bs2-about-doctor__desc{font-size:18px;font-weight:300;line-height:1.5;color:var(--dark)}
.bs2-about-doctor__rule{height:1px;background:rgba(41,31,35,.5);margin:30px 0 22px}
.bs2-about-doctor__name{font-size:20px;font-weight:600;color:var(--dark)}
.bs2-about-doctor__role{font-size:18px;font-weight:300;color:var(--dark);margin-top:2px}
.bs2-about-doctor__link{display:inline-flex;align-items:center;gap:14px;align-self:flex-end;margin-top:auto;padding-top:28px;font-size:20px;font-weight:300;color:var(--dark);border-bottom:1px solid var(--dark);padding-bottom:2px}
.bs2-home .bs2-about-doctor__link:hover{color:var(--terracotta);border-color:var(--terracotta)}

/* ===== ЦЕНТРАЛЬНЫЙ СЛОГАН ===== */
.bs2-about-claim{padding:108px var(--pad) 0;text-align:center}
.bs2-home .bs2-about-claim__title{font-family:var(--serif);font-size:40px;font-weight:400;line-height:1.3;color:var(--dark);text-transform:uppercase;max-width:1180px;margin:0 auto}
.bs2-home .bs2-about-claim__title em{font-style:italic}
.bs2-about-claim__text{font-size:18px;font-weight:300;line-height:1.5;color:var(--dark);max-width:880px;margin:30px auto 0}

/* ===== ИСТОРИЯ ===== */
.bs2-about-history{padding:88px var(--pad) 0}
.bs2-about-history__inner{display:grid;grid-template-columns:582fr 710fr;gap:26px;align-items:stretch}
.bs2-about-history__photo{overflow:hidden;min-height:566px}
.bs2-about-history__photo img{width:100%;height:100%;object-fit:cover;object-position:center}
.bs2-about-history__card{border:1px solid rgba(41,31,35,.5);padding:56px 60px 50px}
.bs2-about-history__head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.bs2-home .bs2-about-history__title{font-family:var(--serif);font-size:40px;font-weight:400;line-height:1.15;color:var(--dark);text-transform:uppercase}
.bs2-home .bs2-about-history__title em{font-style:italic}
.bs2-about-history__btn{flex:0 0 auto;font-size:18px;padding:12px 34px;text-transform:uppercase}
.bs2-about-history__text{margin-top:52px;display:flex;flex-direction:column;gap:20px}
.bs2-about-history__text p{font-size:15px;font-weight:300;line-height:1.6;color:var(--dark)}

/* ===== ТЁМНАЯ ПОЛОСА С ПРИНЦИПОМ ===== */
/* Полоса без боковых полей — как в Figma, где она идёт от края до края кадра 1440,
   но всё так же ограничена общим шеллом, как остальные блоки темы. */
.bs2-about-principle{background:var(--dark);margin-top:96px;padding:66px 20px 58px;text-align:center}
.bs2-home .bs2-about-principle__quote{font-family:var(--serif);font-size:30px;font-weight:400;line-height:1.4;color:var(--white);max-width:1060px;margin:0 auto;font-style:normal;border:none;padding:0}
.bs2-about-principle__author{display:block;font-family:var(--sans);font-style:normal;font-size:18px;font-weight:400;color:var(--sand);margin-top:26px}

/* ===== ПОЛИТИКИ ===== */
.bs2-about-policies{padding:64px var(--pad) 96px}
.bs2-home .bs2-about-policies__title{font-family:var(--serif);font-size:40px;font-weight:400;color:var(--dark);text-align:center;text-transform:uppercase;margin-bottom:44px}
.bs2-about-policies__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.bs2-policy{min-height:281px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;padding:40px 28px;text-align:center;background-size:cover;background-position:center}
.bs2-policy--lavender{background-color:var(--lavender-muted)}
.bs2-policy--sand{background-color:var(--sand)}
.bs2-policy--photo{background-color:var(--charcoal)}
.bs2-home .bs2-policy__title{font-family:var(--serif);font-size:30px;font-weight:400;line-height:1.2;color:var(--dark);text-transform:uppercase}
.bs2-home .bs2-policy--photo .bs2-policy__title{color:var(--white)}
.bs2-policy__btn{font-size:15px;padding:12px 34px}

/* ===== АДАПТИВ ===== */
@media(max-width:1200px){
  .bs2-about-hero{grid-template-columns:1fr 1fr;gap:18px}
  .bs2-about-hero__card{padding:28px 30px 32px}
  .bs2-about-point{gap:48px}
  .bs2-about-doctor__body{padding:36px 38px 32px}
  .bs2-about-history__card{padding:42px 40px 38px}
  .bs2-home .bs2-about-claim__title{font-size:34px}
}

@media(max-width:1024px){
  .bs2-about-hero{grid-template-columns:1fr;gap:16px}
  .bs2-about-hero__media{height:340px}
  .bs2-home .bs2-about-hero__title{margin-top:24px}
  .bs2-about-cta__inner{flex-direction:column;align-items:flex-start;gap:22px}
  .bs2-about-points{padding-top:64px;gap:52px}
  .bs2-about-point,
  .bs2-about-point--reverse{grid-template-columns:1fr;gap:26px}
  .bs2-about-point--reverse .bs2-about-point__media{order:0}
  .bs2-about-point__media img,
  .bs2-about-point--reverse .bs2-about-point__media img{height:300px}
  .bs2-about-doctor__inner{grid-template-columns:1fr}
  .bs2-about-doctor__photo{min-height:380px}
  .bs2-about-doctor__link{align-self:flex-start;margin-top:26px}
  .bs2-about-history__inner{grid-template-columns:1fr;gap:18px}
  .bs2-about-history__photo{min-height:320px}
  .bs2-about-policies__grid{grid-template-columns:1fr 1fr}
}

@media(max-width:768px){
  .bs2-about__crumbs{font-size:16px;padding:16px var(--pad) 18px}
  .bs2-home .bs2-about-hero__title,
  .bs2-home .bs2-about-point__title,
  .bs2-home .bs2-about-doctor__title,
  .bs2-home .bs2-about-history__title,
  .bs2-home .bs2-about-claim__title,
  .bs2-home .bs2-about-policies__title{font-size:30px}
  .bs2-about-hero__text,
  .bs2-about-doctor__desc,
  .bs2-about-claim__text{font-size:16px}
  .bs2-about-history__head{flex-direction:column;gap:18px}
  .bs2-about-history__btn{align-self:flex-start}
  .bs2-about-history__text{margin-top:30px}
  .bs2-home .bs2-about-principle__quote{font-size:22px}
  .bs2-about-principle{padding:48px 20px 42px;margin-top:70px}
  .bs2-about-policies__grid{grid-template-columns:1fr}
  .bs2-policy{min-height:220px}
  .bs2-about-claim{padding-top:70px}
  .bs2-about-doctor,
  .bs2-about-history{padding-top:64px}
}

@media(max-width:480px){
  .bs2-about-hero__card{padding:24px 22px 26px}
  .bs2-about-cta__inner{padding:26px 24px}
  .bs2-about-doctor__body{padding:28px 24px 26px}
  .bs2-about-history__card{padding:30px 24px 28px}
  .bs2-home .bs2-about-hero__title,
  .bs2-home .bs2-about-point__title,
  .bs2-home .bs2-about-doctor__title,
  .bs2-home .bs2-about-history__title,
  .bs2-home .bs2-about-claim__title,
  .bs2-home .bs2-about-policies__title{font-size:26px}
  .bs2-home .bs2-about-principle__quote{font-size:19px}
  .bs2-about-point__media img,
  .bs2-about-point--reverse .bs2-about-point__media img{height:240px}
}