/* ============================================================
   ABOUT PAGE — about.html-only styles.
   Renamed to a namespaced BEM scheme so nothing here can ever
   collide with a same-named class on another page again (this
   session's bugs: about-stat, about-photo-wrap, article-card
   were all this exact failure mode before the rename).
   ============================================================ */

/* ── HERO ─────────────────────────────────────────────────── */
/* All measurements below are read directly from the Figma frame (1920 canvas)
   and expressed as clamp(min, px/19.2 vw, px) so proportions stay locked at
   any viewport width — 19.2px = 1vw at the 1920px canvas width. */
.about-hero { padding-top: calc(var(--header-h) + clamp(24px, 3.7vw, 71px)); }
.about-hero__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.25vw, 24px); align-items: stretch; }
.about-hero__row > * { min-width: 0; }
.about-hero__left { display: flex; flex-direction: column; justify-content: space-between; gap: clamp(10px, 1.04vw, 20px); }
.about-hero__title { font-size: clamp(28px, 3.33vw, 64px); font-weight: 400; line-height: 1; letter-spacing: -0.04em; color: var(--c-text); font-style: normal; }
.about-hero__cards { display: flex; flex-direction: column; gap: clamp(16px, 1.72vw, 33px); }
.about-hero__cards-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.04vw, 20px); }
.about-hero__card {
  border: 1px solid #f0f0f0; border-radius: clamp(12px, 1.04vw, 20px); padding: clamp(16px, 1.67vw, 32px);
  display: flex; flex-direction: column; gap: clamp(6px, 0.625vw, 12px);
  /* высота по содержимому с запасом вместо жёсткой пропорции: с ней
     первый экран вырастал до ~770px и нижний ряд карточек обрезался
     краем окна на ноутбуке */
  min-height: clamp(150px, 12.5vw, 240px); background: #fff;
}
.about-hero__card--accent { background: var(--c-accent); }
.about-hero__card--grey { background: #ededed; }
.about-hero__number { font-size: clamp(11px, 0.78vw, 15px); font-weight: 400; letter-spacing: -0.04em; line-height: 1.4; color: rgba(48,54,46,0.6); }
.about-hero__card--accent .about-hero__number { color: #d9d9d9; }
/* the site-wide hover tint (animations.js) reads oddly on the olive card — keep its number steady */
.about-hero__card--accent:hover .about-hero__number { color: #d9d9d9 !important; }
.about-hero__card-title { font-size: clamp(13px, 0.83vw, 16px); font-weight: 500; letter-spacing: -0.04em; line-height: 1.25; color: var(--c-text); }
.about-hero__card--accent .about-hero__card-title { color: #fff; }
.about-hero__card-text { font-size: clamp(11px, 0.78vw, 15px); font-weight: 400; letter-spacing: -0.04em; line-height: 1.4; color: rgba(48,54,46,0.6); opacity: 0.7; }
.about-hero__card--accent .about-hero__card-text { color: #fff; opacity: 0.7; }
/* высоту первого экрана задаёт колонка с карточками: снимок вложен
   абсолютно, поэтому его собственная пропорция 768×769 больше не тянет
   блок вниз и нижний ряд карточек не срезается краем окна */
.about-hero__team-photo { position: relative; width: 100%; height: 100%; min-height: clamp(280px, 26vw, 520px); border-radius: clamp(12px, 1.04vw, 20px); overflow: hidden; }
.about-hero__team-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 49% 100%; display: block; }

@media (max-width: 900px) {
  .about-hero__row { grid-template-columns: 1fr; }
  .about-hero__left { gap: 32px; }
  .about-hero__team-photo { aspect-ratio: 4/3; }
}
.about-hero__dots { display: none; }
/* ── mobile hero — exact values pulled from Figma node 2250:865 ── */
@media (max-width: 767px) {
  .about-hero__row { gap: 20px; }
  .about-hero__left { gap: 20px; }
  .about-hero__title { font-size: 28px; line-height: 1.1; letter-spacing: -0.02em; text-align: center; }
  .about-hero__cards {
    display: flex; flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 20px; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 2px;
  }
  .about-hero__cards::-webkit-scrollbar { display: none; }
  .about-hero__cards-row { display: contents; }
  .about-hero__card {
    flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 350 / 305;
    border-radius: 20px; padding: 32px; gap: 12px; justify-content: flex-start;
  }
  .about-hero__number { font-size: 18px; line-height: 1.4; letter-spacing: -0.04em; }
  .about-hero__card-title { font-size: 24px; font-weight: 500; line-height: 1.2; letter-spacing: -0.04em; }
  .about-hero__card-text { font-size: 18px; line-height: 1.4; letter-spacing: -0.04em; }
  .about-hero__dots { display: flex; gap: 10px; justify-content: center; margin-top: 0; }
  .about-hero__team-photo { aspect-ratio: 350 / 462; border-radius: 16px; }
  .about-hero__team-photo img { object-position: center 22%; }
}

/* ── HERO ENTRANCE SEQUENCE — photo (right) → title (left) → cards (stagger) on
   desktop; title → cards → photo, top-to-bottom, on mobile (see inline <script>) ── */
.about-hero .about-hero__team-photo,
.about-hero .about-hero__title,
.about-hero .about-hero__card { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .about-hero .about-hero__team-photo,
  .about-hero .about-hero__title,
  .about-hero .about-hero__card { opacity: 1 !important; }
}

/* ── MISSION STATEMENT ────────────────────────────────────── */
/* Figma: w-[1365px], text-[48px], leading-[1.2], no letter-spacing */
.about-mission { padding: 0; }
.about-mission__text {
  max-width: clamp(300px, 71.09vw, 1365px); margin: 0 auto; text-align: center;
  font-size: clamp(22px, 2.5vw, 48px); font-weight: 400; line-height: 1.2;
  letter-spacing: normal; color: var(--c-text); font-style: normal;
}
.about-mission__dim { color: rgba(48,54,46,0.4); }
.about-mission__br { display: none; }
/* Closing beat of the mission sequence: the badges fade up one after the
   other once the sentence has finished typing (animations.js drives the
   reveal, which is why they carry no inline --rr-del here). */
.about-mission__ratings { margin-top: clamp(28px, 2.6vw, 48px); }
/* Figma mobile (node 2250:865): full-width text block, 20px section padding,
   350px effective content width, text-[24px], leading-[1.2], no letter-spacing */
@media (max-width: 767px) {
  .about-mission { padding: 64px 0; }
  .about-mission .wrap { padding: 0 20px; }
  .about-mission__text { max-width: none; font-size: 24px; line-height: 1.2; letter-spacing: normal; }
  .about-mission__br { display: block; }
  .about-mission__ratings { margin-top: 24px; gap: 14px 20px; }
  .about-mission__ratings .price-rating { font-size: 12.5px; }
  .about-mission__ratings .price-rating img { width: 20px; height: 20px; }
}

/* ── ВНУТРИ КЛИНИКИ ────────────────────────────────────────── */
.about-interior { padding: 0; }
.about-interior__h { padding: 0 var(--gutter); margin-bottom: clamp(40px, 6.56vw, 126px); text-align: left; }
.about-interior__h.sec-h { color: var(--c-text); }
.about-interior__row { display: flex; align-items: stretch; gap: 24px; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; scrollbar-width: none; -ms-overflow-style: none; }
.about-interior__row::-webkit-scrollbar { display: none; }
.about-interior__item { flex: 0 0 auto; height: clamp(220px, 35.83vw, 688px); aspect-ratio: 3 / 2; border-radius: 16px; overflow: hidden; }
.about-interior__item:first-child { margin-left: var(--gutter); }
.about-interior__item:last-child { margin-right: var(--gutter); }
.about-interior__item img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.about-interior__nav { display: flex; align-items: center; justify-content: center; padding: 0 var(--gutter); margin-top: 32px; }
.about-interior__dots { display: flex; gap: 10px; }

/* ── 3D-ТУР ────────────────────────────────────────────────── */
/* margin-top fixed at 160px (not the fluid section+section clamp) and
   heading-to-content gap matched to .about-interior__h, both per explicit
   request rather than the page's usual fluid clamp() pattern. */
.about-3dtour { margin-top: 160px; }
.about-3dtour__h { margin-bottom: clamp(40px, 6.56vw, 126px); text-align: left; }
.about-3dtour__frame { width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: var(--c-muted); box-shadow: 0 24px 64px rgba(16,47,39,0.12); }
.about-3dtour__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 767px) { .about-3dtour__frame { aspect-ratio: 4 / 5; border-radius: 12px; } }

/* ── СТАТЬИ И НОВОСТИ ─────────────────────────────────────── */
/* Figma: feature card size-[719.026px] (square), Stats_Grid gap-[33px] row / ~24px
   column, small cards w-[372px] h-[339px] (Stats_Grid h-711 minus 33 gap, /2 rows). */
.about-articles { padding: 0; }
.about-articles__row { display: flex; gap: clamp(10px, 1.04vw, 20px); align-items: center; }
.about-articles__card {
  position: relative; display: block; border-radius: clamp(12px, 1.04vw, 20px); overflow: hidden;
  text-decoration: none; background: #ededed;
  transition: transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow 0.35s ease;
}
.about-articles__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94); }
/* только для мыши: в мобильной карусели подъём карточки обрезался
   лентой с overflow-x, а на тач-экране ховер залипал после тапа */
@media (hover: hover) and (pointer: fine) {
  .about-articles__card:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(48,54,46,0.18), 0 4px 12px rgba(48,54,46,0.08); }
  .about-articles__card:hover .about-articles__bg { transform: scale(1.05); }
}
video.about-articles__bg { background: #23241d; }

/* Feature card — dark video, white text, absolute-positioned exactly per Figma.
   Card is 769px wide × 719px tall (not square). Text: left/top 48px = 6.24%/6.68%,
   width 658px = 85.6% of 769; excerpt top 590px = 82.06% of 719. */
.about-articles__featured { flex: 0 0 clamp(280px, 40.05vw, 769px); aspect-ratio: 769 / 719; }
.about-articles__overlay--featured {
  position: absolute; inset: 0; pointer-events: none;
  /* подложка с обеих сторон: заголовок сверху и врезка снизу лежат на
     светлых кадрах, одного верхнего градиента для них не хватало */
  background:
    linear-gradient(180deg, rgba(20,22,19,0.55) 0%, rgba(20,22,19,0.12) 32%, rgba(20,22,19,0) 52%),
    linear-gradient(0deg, rgba(20,22,19,0.62) 0%, rgba(20,22,19,0.16) 26%, rgba(20,22,19,0) 46%);
}
.about-articles__title--featured {
  position: absolute; z-index: 2; left: 6.24%; top: 6.68%; width: 85.6%;
  font-size: clamp(22px, 2.5vw, 48px); font-weight: 500; line-height: 1.1; letter-spacing: normal; color: #fff;
}
.about-articles__excerpt--featured {
  position: absolute; z-index: 2; left: 6.24%; bottom: 6.68%; width: 85.6%;
  font-size: clamp(14px, 1.15vw, 22px); font-weight: 400; line-height: 1.3; letter-spacing: -0.04em; color: #fff;
}

/* Small cards — light photo, no overlay, dark text (Figma Stat_01…04 pattern) */
.about-articles__grid { flex: 1; min-width: 0; display: grid; grid-template-columns: 376fr 372fr; column-gap: clamp(10px, 1.04vw, 20px); row-gap: clamp(16px, 1.72vw, 33px); }
/* Фото занимает верх карточки, подпись — белую плашку под ним: тёмный
   текст поверх светлого снимка почти не читался. Доля фото фиксирована,
   поэтому все четыре карточки в сетке совпадают по разбивке. */
.about-articles__grid .about-articles__card {
  aspect-ratio: 372 / 339; border: 1px solid #ededed; background: #fff;
  display: flex; flex-direction: column;
}
.about-articles__grid .about-articles__bg {
  /* фото забирает всё, что осталось от подписи: при фиксированной доле
     на широких карточках под текстом оставалась пустая белая полоса */
  position: relative; inset: auto; flex: 1 1 auto; min-height: 0;
  width: 100%; height: auto; object-position: center 30%;
}
.about-articles__frame {
  position: relative; z-index: 2; flex: 0 0 auto; height: auto; width: 100%;
  padding: clamp(12px, 1vw, 18px) clamp(14px, 1.35vw, 26px) clamp(14px, 1.15vw, 22px);
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  gap: clamp(4px, 0.42vw, 8px); background: #fff; box-sizing: border-box; overflow: hidden;
}
.about-articles__grid .about-articles__title {
  width: 100%; font-size: clamp(13px, 0.94vw, 18px); font-weight: 500; letter-spacing: -0.03em;
  line-height: 1.25; color: var(--c-text);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.about-articles__title--narrow { max-width: 100%; }
.about-articles__grid .about-articles__excerpt {
  width: 100%; font-size: clamp(11px, 0.78vw, 15px); font-weight: 400; letter-spacing: -0.03em;
  line-height: 1.4; color: #5B6159; opacity: 1;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}

/* ниже 1200px четыре карточки рядом с большой ужимались до ~230px и
   подпись переставала помещаться — раскладываем в столбец раньше */
@media (max-width: 1200px) and (min-width: 768px) {
  .about-articles__row { flex-direction: column; }
  .about-articles__featured { flex: none; width: 100%; aspect-ratio: 16/9; }
}
.about-articles__dots { display: none; }
@media (max-width: 767px) {
  .about-articles { padding-bottom: 32px; }
  .about-articles__row {
    display: flex; flex-direction: row; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
    gap: 12px; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 2px;
  }
  .about-articles__row::-webkit-scrollbar { display: none; }
  .about-articles__grid { display: contents; }
  .about-articles__card, .about-articles__featured { flex: 0 0 100%; width: 100%; scroll-snap-align: start; aspect-ratio: 350 / 462; border-radius: 16px; }
  .about-articles__grid .about-articles__card { aspect-ratio: 350 / 462; }
  /* в карусели карточка во весь экран — фото снова становится фоном,
     а подпись садится на затемнение снизу */
  .about-articles__grid .about-articles__bg { position: absolute; inset: 0; flex: none; height: 100%; object-position: center 30%; }
  .about-articles__grid .about-articles__card::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(0deg, rgba(20,22,19,0.72) 0%, rgba(20,22,19,0.2) 34%, rgba(20,22,19,0) 60%);
  }
  .about-articles__frame { flex: none; height: 100%; padding: 32px; justify-content: flex-end; gap: 10px; background: none; }
  .about-articles__grid .about-articles__title { color: #fff; -webkit-line-clamp: 3; }
  .about-articles__grid .about-articles__excerpt { color: rgba(255,255,255,0.85); -webkit-line-clamp: 3; }
  .about-articles__grid .about-articles__title { font-size: 22px; font-weight: 500; line-height: 1.15; }
  .about-articles__title--narrow { max-width: 100%; }
  .about-articles__grid .about-articles__excerpt { font-size: 14px; opacity: 1; }
  .about-articles__dots { display: flex; gap: 10px; justify-content: center; margin-top: 20px; padding-bottom: 6px; }
}

/* ── FOOTER — page-specific override only; base rules live in
   components/footer.css. about.html uses a 2-col grid at this
   breakpoint (index.html stacks instead — intentional divergence). ── */
@media (max-width: 640px) {
  .footer-nav { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 16px 20px; }
  .footer-nav__group { display: contents; }
  .footer-brand-row { flex-direction: column; align-items: flex-start; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ── MOBILE booking/footer section swap ── */
@media (max-width: 767px) {
  .sec-booking, .site-footer { display: none; }
}