/* ============================================================
   DESKTOP.CSS — правила ТОЛЬКО для компьютерной версии.

   Файл подключён с media="(min-width: 901px)": на телефонах и
   планшетах уже 900 пикселей и меньше он вообще не применяется,
   поэтому что бы здесь ни было написано — мобильную версию это
   не заденет.

   Подключается последним, после styles.css, styles-pro.css и
   встроенных стилей страницы, поэтому перебивает их без !important.

   ПРАВИЛО РАБОТЫ: любая правка, которая нужна только на большом
   экране, пишется сюда. В общие файлы больше не лезем.
   ============================================================ */

/* ── общая ширина страницы ────────────────────────────────────
   1240 растягивало текст в слишком длинные строки. 1120 — предел,
   за которым строка перестаёт читаться комфортно.                */
:root {
  --max-w: 1120px;
}

/* ── пазл в шапке: центральный кружок ─────────────────────────
   было clamp(340px, 46vw, 600px) — на широком экране это 600 и
   кружок съедал сам пазл. Теперь потолок 440.                    */
.puzzle {
  --d: clamp(320px, 30vw, 440px);
}

/* ── блок «Обо мне» ───────────────────────────────────────────
   видео было 640 в ширину при секции 1120 — смотрелось узкой
   колонкой посреди пустоты. Расширяю до 860.                     */
.section.about .about-grid {
  grid-template-columns: minmax(0, 860px);
}

/* Фото в карточке «Консультация» не доходило до верхней грани:
   строка сетки выше самого снимка, и он вставал по центру строки.
   Прижимаем к верху — оба фото теперь упираются в контур.        */
.about-cta-ico--photo {
  align-self: start;
}

/* ── видео «отёки» в блоке тренировок ─────────────────────────
   было max-width: 480 — для этой ширины экрана мелко.            */
.pro-wo-single {
  max-width: 760px;
}

/* ── кейсы и отзывы ───────────────────────────────────────────
   карточки были 317 в ширину и 538 в высоту — крупнее всего
   остального на странице. Уменьшаю примерно на пятую часть.      */
.cases-track {
  grid-auto-columns: clamp(230px, 18vw, 270px);
  gap: 14px;
}
.case-card {
  padding: 12px;
  border-radius: 16px;
}
.case-card h3 {
  font-size: 15px;
}
.case-quote {
  font-size: 12.5px;
}
.case-stats li {
  font-size: 11px;
  padding: 5px 9px;
}

/* ── плитка «Кейсы» в пазле ───────────────────────────────────
   Снимок вертикальный (536×857), а плитка широкая (1.6:1) —
   при заполнении от кадра оставалась только полоса по центру,
   и фигура выглядела приближенной. Собрала широкую версию:
   по бокам достроена та же стена, так что в кадр помещается
   вся фигура целиком. На телефоне остаётся прежний снимок.     */
.piece-cases::before {
  background-image: url('Photos/Me/IMG_2022-cases-wide.jpg?v=5') !important;
  background-size: cover !important;
  background-position: center 50% !important;
}

/* ── подписи на плитках ───────────────────────────────────────
   Нижняя пара стояла у самого низа — так было сделано под
   мобильную версию, где кружок больше и по центру подпись
   уезжала под него. На большом экране кружок теперь 440,
   места хватает: ставим подписи по центру, как у верхней пары. */
.piece-workouts .piece-face,
.piece-cases .piece-face {
  justify-content: center;
  padding-bottom: clamp(16px, 3vw, 36px);
}

/* ── стык между плитками пазла ────────────────────────────────
   Между кнопками шла волосяная щель в 4 пикселя (--gap). Убираю:
   плитки смыкаются встык. Вырез под центральный кружок считается
   от этого же значения, поэтому меняем именно переменную.        */
.puzzle {
  --gap: 0px;
}

/* ── кнопки «Консультация» и «Диагностика тела» ───────────────
   Были 319×364 при контейнере 660 — крупнее, чем нужно рядом с
   видео. Ужимаю по всем осям: уже контейнер, ниже снимок,
   меньше внутренние поля и кегли.                                */
.section.about .about-tg-actions {
  width: min(100%, 560px);
  margin-inline: auto;
}
.about-cta {
  --cta-pad-x: 20px;
  --cta-pad-t: 20px;
  padding-bottom: 16px;
  row-gap: 10px;
  border-radius: 18px;
}
.about-cta-ico--photo {
  aspect-ratio: 2 / 1;          /* было 16/9 — снимок стал ниже */
}
.about-cta-eyebrow {
  font-size: 10px;
  letter-spacing: 0.12em;
}
.about-cta-title {
  font-size: clamp(14px, 1.7vw, 24px);
}
.about-cta-desc {
  font-size: 12px;
  line-height: 1.45;
}
.about-cta-arrow svg {
  width: 20px;
  height: 20px;
}

/* ── видео в центре пазла ─────────────────────────────────────
   Голова стояла низко: над ней оставалась пустая стена, а рот
   почти упирался в нижний край. Поднимаю кадр. Сдвиг возможен
   только в пределах запаса от масштаба — при scale(1.26) запас
   13%, и прежний сдвиг ровно в 13% оголял низ круга (тот самый
   «фон»). Поэтому масштаб чуть больше, сдвиг с запасом внутри.   */
/* Файл center-hq.mp4 пересобран заново и уже скадрирован под круг: лицо
   стоит в кадре как надо. Поэтому на компьютере никаких сдвигов и
   увеличений не применяем — прежний подъём превращал кадр в крупный план
   подбородка. Мобильное правило в styles-pro.css не трогаем.             */
.piece-model-video {
  /* по краю самого файла идёт чёрная кайма, причём снизу она шире: круг в
     кадре смещён вверх (снизу 32 пикселя черноты из 600). Считаем: чтобы
     полоса ушла за границу круга, нужен масштаб не меньше 1.12. Берём 1.14
     и небольшой подъём — сдвиг пишем первым, иначе он умножится на масштаб. */
  transform: scale(1.2);
}

/* ── надпись в шапке ──────────────────────────────────────────
   49px подбирались под высоту знака, но в шапке это читается как
   вывеска. Уменьшаю до 34 — буквы становятся спокойнее круга,
   а не спорят с ним. Мобильный кегль (clamp до 24px) не трогаем. */
.nav-logo-text {
  font-size: 34px !important;
  top: 1px;
}

/* ── карточка «смотреть» в панели зоны ────────────────────────
   Заголовки роликов теперь берутся с YouTube как есть, а они
   длинные. Однострочный режим с многоточием обрезал их на
   середине — на большом экране даём две строки.                */
.zone-preview-meta h4 {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.25;
}

/* Та же страховка от разъезжания карточки, что и в mobile.css —
   продублирована намеренно, чтобы слои не зависели друг от друга. */
.zone-preview {
  max-width: 100%;
  box-sizing: border-box;
}
.zone-preview-meta { min-width: 0; flex: 1 1 auto; }
.zone-preview-meta h4 { min-width: 0; max-width: 100%; }

/* ── логотип на внутренних страницах ──────────────────────────
   Название должно читаться одинаково на всех страницах: на главной
   кегль 34, а в гайде стояло 40 и на диагностике до 49. Выравниваем.
   Знак не трогаем — у гайда он меньше по высоте шапки.            */
.g-logo-text,
.course-brand-name {
  font-size: 34px !important;
}