/* ==========================================================================
   Setbol — ракеточные виды спорта
   Токены и компоненты перенесены 1:1 из Figma (файл «сетбол»).
   ========================================================================== */

@font-face {
  font-family: 'Myriad Pro';
  src: url('../fonts/MyriadPro-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Myriad Pro';
  src: url('../fonts/MyriadPro-Semibold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Myriad Pro';
  src: url('../fonts/MyriadPro-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Цвет — Figma variables */
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f5;
  --bg-blue: #0e50b1;
  --bg-accent: #d8f04d;
  /* заливка лаймовых кнопок: по умолчанию — на светлом фоне */
  --btn-ink: #1651ac;
  --btn-ink-text: #ffffff;
  --text-title-dark: #242424;
  --text-body-grey: #6d7278;
  --stroke-grey: #dde1e5;

  /* Сетка */
  --frame: 1440px;
  --gutter: 72px;
  --content: 1296px;
  --hero-h: clamp(520px, 58.264vw, 1040px);
  --page-hero-h: clamp(520px, 57.569vw, 1030px);
  --bleed-pad: var(--gutter);

  /* Движение */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-fill: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --lh-normal: 1.202;
  --press: 160ms;
  --swap: 320ms;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--bg-primary);
  color: var(--text-title-dark);
  font-family: 'Myriad Pro', 'Segoe UI', system-ui, sans-serif;
  font-weight: 400;
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

p {
  margin: 0;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 600;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}

input {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--bg-accent);
  outline-offset: 2px;
  /* по контуру самого элемента, а не прямоугольником */
  border-radius: inherit;
}

/* у полей рамка повторяет скругление подложки */
.field__control:focus-within {
  outline: 2px solid var(--bg-accent);
  outline-offset: 0;
}

.field__control input:focus-visible,
.field__control select:focus-visible,
.field__control button:focus-visible {
  outline: none;
}

.container {
  width: 100%;
  margin: 0 auto;
  position: relative;
}

/* внутри .container (макс. 1440) — фиксированный отступ макета */
.pad {
  padding-inline: var(--gutter);
}

/* у секций во всю ширину колонка контента остаётся 1296 и по центру */
.pad-bleed {
  padding-inline: var(--bleed-pad);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Типографика — Figma text styles
   -------------------------------------------------------------------------- */

.h1 {
  font-size: 200px;
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.h2 {
  font-size: 56px;
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.h3 {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.sub-h1 {
  font-size: 24px;
  font-weight: 600;
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
}

.sub-h2 {
  font-size: 18px;
  font-weight: 600;
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
}

.sub-h3 {
  font-size: 16px;
  font-weight: 600;
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
}

.body-m {
  font-size: 18px;
  line-height: 1.55;
  letter-spacing: -0.01em;
}

.body-r {
  font-size: 16px;
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
}

.caption {
  font-size: 14px;
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
}

.link-s {
  font-size: 12px;
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
}

.lower {
  text-transform: lowercase;
}

/* --------------------------------------------------------------------------
   Кнопки
   -------------------------------------------------------------------------- */

.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 18px;
  font-weight: 600;
  line-height: var(--lh-normal);
  letter-spacing: -0.02em;
  padding: 18px 28px;
  transition:
    transform var(--press) var(--ease-out),
    border-color 300ms var(--ease-fill),
    color 300ms var(--ease-fill);
}

/* Заливка растёт кругом от той точки, где курсор вошёл в кнопку:
   центр и диаметр круга считает site.js, дальше всё делает transform. */
.btn::before,
.submit::before {
  content: '';
  position: absolute;
  z-index: 0;
  left: var(--ink-x, 50%);
  top: var(--ink-y, 50%);
  width: var(--ink-d, 0px);
  height: var(--ink-d, 0px);
  margin-left: calc(var(--ink-d, 0px) / -2);
  margin-top: calc(var(--ink-d, 0px) / -2);
  border-radius: 50%;
  background: var(--ink, currentColor);
  transform: scale(0);
  transition: transform 500ms var(--ease-fill);
  pointer-events: none;
}

.btn.is-ink::before,
.submit.is-ink::before {
  transform: scale(1);
}

.btn__label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .btn::before,
  .submit::before {
    transition-duration: 1ms;
  }
}

.btn:active {
  transform: scale(0.97);
}

.btn--accent {
  background: var(--bg-accent);
  border-color: var(--bg-accent);
  color: var(--text-title-dark);
}

.btn--accent-blue {
  background: var(--bg-accent);
  border-color: var(--bg-accent);
  color: var(--bg-blue);
}

.btn--outline-dark {
  border-color: var(--text-title-dark);
  color: var(--text-title-dark);
}

.btn--outline-white {
  border-color: #fff;
  color: #fff;
}

.btn--fixed {
  height: 62px;
  padding-block: 0;
}

.btn--sm {
  height: 52px;
  padding-block: 0;
  font-size: 14px;
}

/* Лаймовая кнопка заливается цветом, который контрастен её фону: на белом —
   синим, на синих поверхностях — белым. Значения приходят по наследству от
   контейнера, поэтому кнопке достаточно одного правила. */
.btn--accent,
.btn--accent-blue,
.submit {
  --ink: var(--btn-ink);
}

.btn--accent.is-ink,
.btn--accent-blue.is-ink,
.submit.is-ink {
  border-color: var(--btn-ink);
  color: var(--btn-ink-text);
}

/* синие поверхности */
.hero__frame,
.page-hero,
.blue-block,
.footer,
.modal__window,
.contacts__card,
.article__aside,
.adv-card__inner,
.lf-card__inner,
.indoor__card,
.step {
  --btn-ink: #ffffff;
  --btn-ink-text: var(--bg-blue);
}

/* шапка лежит на кадре, а после прокрутки — на белом */
.header {
  --btn-ink: #ffffff;
  --btn-ink-text: var(--bg-blue);
}

.header.is-on-light {
  --btn-ink: #1651ac;
  --btn-ink-text: #ffffff;
}

.btn--outline-dark {
  --ink: var(--text-title-dark);
}

.btn--outline-dark.is-ink {
  border-color: var(--text-title-dark);
  color: #fff;
}

.btn--outline-white {
  --ink: #fff;
}

.btn--outline-white.is-ink {
  border-color: #fff;
  color: var(--bg-blue);
}

/* --------------------------------------------------------------------------
   Шапка
   -------------------------------------------------------------------------- */

.header {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1400px, calc(100% - 40px));
  height: 85px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 72px;
  z-index: 100;
  transition:
    background-color 420ms ease,
    border-color 420ms ease,
    box-shadow 420ms ease,
    color 420ms ease;
}

/* после первого экрана стекло становится плотнее, чтобы белый текст читался */
/* Ниже первого экрана под шапкой оказывается светлый контент, на котором
   белое стекло делает белый текст нечитаемым. Материал остаётся прозрачным,
   но нейтрально-дымчатым — синей плашки нет, контраст есть. */
.header.is-stuck {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* Над светлыми секциями стекло остаётся прозрачным, а содержимое
   перекрашивается в тёмное — иначе белый текст на светлом фоне пропадает. */
.header.is-on-light {
  background: rgba(255, 255, 255, 0.45);
  border-color: rgba(36, 36, 36, 0.06);
}

.header.is-on-light .header__nav,
.header.is-on-light .btn--outline-white {
  color: var(--text-title-dark);
}

.header.is-on-light .btn--outline-white {
  border-color: rgba(36, 36, 36, 0.35);
}

.header.is-on-light .btn--outline-white {
  --ink: var(--text-title-dark);
}

.header.is-on-light .btn--outline-white.is-ink {
  border-color: var(--text-title-dark);
  color: #fff;
}

.header__logo {
  position: relative;
}

.header__logo-dark {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.header.is-on-light .header__logo-light {
  opacity: 0;
}

.header.is-on-light .header__logo-dark {
  opacity: 1;
}

.header__logo-light,
.header__logo-dark {
  transition: opacity 420ms ease;
}

@media (prefers-reduced-transparency: reduce) {
  .header,
  .header.is-stuck {
    background: rgba(14, 80, 177, 0.92);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .header.is-on-light {
    background: #fff;
  }
}

.header__logo {
  width: 94px;
  height: 23px;
  flex: none;
}

.header__logo img {
  width: 100%;
  height: 100%;
}

.header__nav {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 16px;
  font-weight: 600;
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
  text-transform: lowercase;
  color: #fff;
  white-space: nowrap;
}

.header__nav a {
  position: relative;
  padding-block: 4px;
  transition: opacity var(--press) ease;
}

.header__nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: var(--bg-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--press) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .header__nav a:hover::after {
    transform: scaleX(1);
  }
}

.header__nav a[aria-current='page']::after {
  transform: scaleX(1);
}

.header__actions {
  display: flex;
  gap: 10px;
  flex: none;
}

.header__actions .btn {
  height: 58px;
  padding: 0 27px;
  text-transform: lowercase;
}

/* --------------------------------------------------------------------------
   Герой главной
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  z-index: 1;
}

.hero__frame {
  position: relative;
  height: var(--hero-h);
  background: var(--bg-blue);
  border-radius: 0 0 32px 32px;
  overflow: hidden;
}

/* Ракетка выходит за нижнюю границу первого экрана (Figma: image 8).
   Края слоя растушёваны, иначе на стыке с фоном виден прямой срез. */
.hero__ball {
  display: none;
}

.hero__racket {
  position: absolute;
  left: 24.722%;
  top: 58.641%;
  width: 51.875%;
  height: 48.272%;
  max-width: none;
  object-fit: fill;
  pointer-events: none;
}

.hero__bg,
.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__photo {
  object-position: center bottom;
}

.hero__logo {
  position: absolute;
  left: 72px;
  top: 259px;
  width: 778px;
  height: 197px;
  z-index: 2;
}

.hero__logo img {
  width: 100%;
  height: 100%;
}

/* мяч логотипа — отдельный слой поверх: только он и крутится */
.hero__logo-ball {
  position: absolute;
  left: 72.33%;
  top: 16.15%;
  width: 21.55%;
  height: 83.77%;
  background: url('../img/logo-ball.svg') center / contain no-repeat;
}

@media (hover: hover) and (pointer: fine) {
  .hero__logo-ball:hover {
    animation: heroBallSpin 2.4s linear infinite;
  }
}

@keyframes heroBallSpin {
  from {
    transform: rotate(0turn);
  }
  to {
    transform: rotate(1turn);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__logo-ball:hover {
    animation: none;
  }
}

.hero__plate {
  position: absolute;
  /* ниже ракетки: она перекрывает плашку, как в макете */
  z-index: 1;
  left: 73px;
  top: 556px;
  width: 392px;
  padding: 28px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-direction: column;
  gap: 22px;
  color: #fff;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.hero__plate-cat {
  font-size: 14px;
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
  opacity: 0.8;
}

.hero__plate-msg {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.hero__plate-sub {
  font-size: 16px;
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
  text-transform: lowercase;
  opacity: 0.8;
  width: 260px;
}

.hero__plate-dot {
  position: absolute;
  right: 19px;
  top: 20px;
  width: 3px;
  height: 3px;
}

/* --------------------------------------------------------------------------
   Направления
   -------------------------------------------------------------------------- */

.directions {
  padding-block: 104px;
}

.directions__inner {
  display: flex;
  flex-direction: column;
  gap: 42px;
}

.directions__cards {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
}

.dir-card {
  background: #fff;
  border: 1px solid rgba(36, 36, 36, 0.5);
  border-radius: 28px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 530px;
  color: inherit;
  transition:
    transform 520ms var(--ease-out),
    box-shadow 520ms var(--ease-out),
    border-color 520ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  /* специфичность выше правила появления, иначе transform сбрасывается */
  .directions__cards .dir-card:hover {
    transform: translateY(-8px);
    border-color: var(--text-title-dark);
    box-shadow: 0 22px 48px rgba(14, 80, 177, 0.16);
  }
}

.dir-card__photo {
  height: 370px;
  flex: none;
  overflow: hidden;
}

.dir-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dir-card__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dir-card__text {
  font-size: 18px;
  line-height: 1.55;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  color: rgba(36, 36, 36, 0.5);
  max-width: 448px;
}

.directions__ball {
  position: absolute;
  /* сегменты внутри свёрстаны под диск 217 px, поэтому размер меняем масштабом,
     а не шириной — иначе картинки остаются в исходном размере и разъезжаются */
  --ball-scale: 1;
  left: calc(50% + 0.5px);
  top: calc(50% - 15.5px);
  transform: translate(-50%, -50%) scale(var(--ball-scale));
  width: 217px;
  height: 217px;
  z-index: 2;
}

/* сам диск ловит курсор, сегменты — нет */
.directions__ball img {
  pointer-events: none;
}

.directions__ball-disc {
  pointer-events: auto;
}

.directions__ball img {
  position: absolute;
  width: auto;
  height: auto;
  max-width: none;
}

.directions__ball-disc {
  inset: 0;
  width: 100%;
  height: 100%;
}

.directions__ball.is-spinning {
  animation: ballSpin 950ms cubic-bezier(0.5, 0, 0.15, 1) both;
}

/* мяч крутится, пока курсор на нём самом */
.directions__ball:hover:not(.is-spinning) {
  animation: ballIdleSpin 2.4s linear infinite;
}

@keyframes ballIdleSpin {
  from {
    transform: translate(-50%, -50%) scale(var(--ball-scale)) rotate(0turn);
  }
  to {
    transform: translate(-50%, -50%) scale(var(--ball-scale)) rotate(1turn);
  }
}

@media (prefers-reduced-motion: reduce) {
  .directions__ball:hover:not(.is-spinning) {
    animation: none;
  }
}

@keyframes ballSpin {
  from {
    transform: translate(-50%, -50%) rotate(0turn) scale(var(--ball-scale));
  }
  55% {
    transform: translate(-50%, -50%) rotate(1.35turn) scale(calc(var(--ball-scale) * 1.1));
  }
  to {
    transform: translate(-50%, -50%) rotate(2turn) scale(var(--ball-scale));
  }
}

/* --------------------------------------------------------------------------
   Форматы тренировок + расписание (синий блок)
   -------------------------------------------------------------------------- */

.blue-block {
  background: var(--bg-blue);
  border-radius: 32px;
  overflow: hidden;
  color: #fff;
}

.formats {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  padding-block: 80px;
}

.formats__intro {
  width: 380px;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 565px;
}

.formats__intro-top {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.formats__slider-wrap {
  width: 783px;
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}

/* на широких экранах слайдер не растягиваем — карточки прижаты к правому краю */

.formats__viewport {
  width: 100%;
  overflow: hidden;
}

.formats__track {
  display: flex;
  gap: 18px;
  align-items: center;
  transition: transform 460ms var(--ease-out);
}

.fmt-card {
  /* ширина из макета: шире карточки становятся рыхлыми */
  flex: 0 0 clamp(220px, calc((100% - 36px) / 3), 250px);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 520px;
}

.fmt-card--plain {
  background: #fff;
  border: 1px solid var(--stroke-grey);
  justify-content: flex-start;
}

.fmt-card__photo {
  height: 392px;
  flex: none;
  overflow: hidden;
}

.fmt-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fmt-card__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fmt-card--plain .fmt-card__body {
  gap: 8px;
}

.fmt-card--plain .fmt-card__title {
  color: var(--bg-blue);
}

.fmt-card--plain .fmt-card__sub {
  color: var(--text-body-grey);
}

.fmt-card__sub {
  font-size: 14px;
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
  text-transform: lowercase;
}

/* Пагинация */
.dots {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

.dots button {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  transition:
    width var(--swap) var(--ease-out),
    height var(--swap) var(--ease-out),
    background-color var(--swap) ease;
}

.dots button[aria-selected='true'] {
  width: 10px;
  height: 10px;
  background: var(--bg-accent);
}

.dots--dark button {
  background: rgba(36, 36, 36, 0.2);
}

.dots--dark button[aria-selected='true'] {
  background: var(--bg-accent);
}

/* Расписание */
.schedule {
  display: flex;
  gap: 70px;
  align-items: flex-start;
  padding-block: 80px;
}

.schedule__intro {
  width: 430px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: flex-start;
}

.schedule__desc {
  width: 405px;
  color: rgba(255, 255, 255, 0.7);
  text-transform: lowercase;
}

.schedule__list {
  flex: 1 1 auto;
  min-width: 0;
}

.slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 23px 0 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  width: 100%;
  text-align: left;
  transition: background-color var(--press) ease;
}

.slot__time {
  width: 90px;
  flex: none;
  color: var(--bg-accent);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.slot__time--sm {
  font-size: 24px;
  line-height: var(--lh-normal);
}

.slot__name {
  width: 270px;
  flex: none;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.slot__level {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  white-space: nowrap;
}

.slot__arrow {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color var(--press) ease,
    transform var(--press) var(--ease-out);
}

.slot__arrow img {
  width: 24px;
  height: 24px;
}

@media (hover: hover) and (pointer: fine) {
  .slot:hover .slot__arrow {
    background: var(--bg-accent);
    transform: translateX(4px);
  }
  .slot:hover .slot__arrow img {
    filter: brightness(0) saturate(100%) invert(8%) sepia(6%) saturate(0%) hue-rotate(200deg);
  }
}

.slot:active .slot__arrow {
  transform: scale(0.94);
}

/* --------------------------------------------------------------------------
   Тренеры
   -------------------------------------------------------------------------- */

.coaches {
  padding-block: 104px;
}

.coaches--tight {
  padding-block: 96px;
}

.coaches__inner {
  display: flex;
  flex-direction: column;
  gap: 42px;
}

.coaches__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

.coaches__head .h2 {
  width: 760px;
}

.coaches__head-desc {
  width: 441px;
  color: rgba(36, 36, 36, 0.5);
  text-transform: lowercase;
}

.coaches__slider {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.coaches__viewport {
  overflow: hidden;
}

.coaches__track {
  display: flex;
  gap: 22px;
  transition: transform 460ms var(--ease-out);
}

.coach {
  flex: 0 0 calc((100% - 44px) / 3);
  height: 560px;
  border-radius: 28px;
  border: 1px solid rgba(36, 36, 36, 0.5);
  background: #fff;
  overflow: hidden;
  position: relative;
}

.coach__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.coach__tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(176deg, rgba(14, 80, 177, 0.2) 6%, rgba(102, 102, 102, 0) 98%);
}

.coach__tags {
  position: absolute;
  z-index: 2;
  left: 24px;
  top: 24px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.tag {
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  border: 1px solid #fff;
  color: #fff;
}

.tag--accent {
  background: var(--bg-accent);
  border-color: var(--bg-accent);
  color: var(--text-title-dark);
}

.coach__info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 36px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
  color: #fff;
}

.coach--soft .coach__info {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.16) 100%);
}

.coach__desc {
  font-size: 14px;
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
  text-transform: lowercase;
  color: rgba(255, 255, 255, 0.7);
  max-width: 336px;
}

/* --------------------------------------------------------------------------
   Фотогалерея
   -------------------------------------------------------------------------- */

.gallery {
  padding-block: 104px;
}

.gallery__inner {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.gallery__grid {
  display: flex;
  gap: 12px;
  height: 900px;
}

.gallery__col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gallery__col figure {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  flex: none;
}

.gallery__col img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.g-420 {
  height: 420px;
}
.g-360 {
  height: 360px;
}
.g-280 {
  height: 280px;
}
.g-220 {
  height: 220px;
}

/* --------------------------------------------------------------------------
   Призыв
   -------------------------------------------------------------------------- */

.mission {
  padding: 72px var(--bleed-pad);
}

.mission__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}

.mission__lead {
  width: 1138px;
  max-width: 100%;
  text-align: center;
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.mission__buttons {
  display: flex;
  gap: 12px;
}

/* --------------------------------------------------------------------------
   Преимущества
   -------------------------------------------------------------------------- */

.advantages {
  position: relative;
  height: 704px;
}

/* декор выходит за границы секции и лежит под её содержимым */
.advantages__deco {
  z-index: 0;
}

.advantages__title,
.advantages__list {
  z-index: 1;
}

.advantages__deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.adv-swoosh {
  position: absolute;
  left: -249.36px;
  top: calc(50% + 105.63px);
  transform: translateY(-50%);
  width: 1791.463px;
  height: 951.613px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.adv-swoosh__rot {
  transform: rotate(9.31deg);
  width: 1703.052px;
  height: 685.034px;
  position: relative;
}

.adv-swoosh__rot img {
  position: absolute;
  inset: -6.93% -2.27% -4.5% -2.79%;
  width: auto;
  height: auto;
  max-width: none;
}

.adv-ellipse {
  position: absolute;
  left: calc(50% + 471px);
  transform: translateX(-50%);
  top: -139px;
  width: 732px;
  height: 732px;
}

.adv-ball {
  position: absolute;
}

.adv-ghost-card {
  position: absolute;
  left: 399px;
  top: 190.94px;
  width: 298px;
  height: 347px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.adv-ghost-card__inner {
  transform: rotate(-1.37deg);
  width: 290px;
  height: 340px;
  border-radius: 18px;
  background: linear-gradient(41.36deg, #d8f04d 30.8%, #ffffff 116.3%);
  box-shadow: 0 18px 40px rgba(14, 80, 177, 0.15);
}

.advantages__title {
  position: absolute;
  left: 72px;
  right: 72px;
  top: 104px;
}

.advantages__list {
  position: absolute;
  left: 0;
  right: 0;
  top: 201px;
  /* колонка контента из макета — группа карточек центрируется целиком */
  width: min(1296px, calc(100% - 144px));
  margin-inline: auto;
  height: 399.401px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.adv-card {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (hover: hover) and (pointer: fine) {
  .adv-card:hover {
    z-index: 5;
  }
  .adv-card:hover .adv-card__inner {
    background: var(--bg-accent);
    color: var(--text-title-dark);
    box-shadow: 0 26px 54px rgba(36, 36, 36, 0.24);
  }
  .adv-card:hover .adv-card__text {
    color: rgba(36, 36, 36, 0.8);
  }
  .adv-card:hover .icon-circle {
    background: rgba(36, 36, 36, 0.08);
  }
  .adv-card:hover .icon-circle img {
    filter: brightness(0);
  }
}

.adv-card__inner {
  width: 290px;
  height: 340px;
  border-radius: 18px;
  background: var(--bg-blue);
  box-shadow: 0 18px 40px rgba(14, 80, 177, 0.15);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: #fff;
  transition:
    transform 420ms var(--ease-out),
    background-color 420ms ease,
    color 420ms ease,
    box-shadow 420ms ease;
}

.adv-card:nth-child(1) .adv-card__inner {
  transform: rotate(-3deg);
}
.adv-card:nth-child(2) .adv-card__inner {
  transform: rotate(4deg);
}
.adv-card:nth-child(3) .adv-card__inner {
  transform: rotate(-2deg);
}
.adv-card:nth-child(4) .adv-card__inner {
  transform: rotate(3deg);
}

@media (hover: hover) and (pointer: fine) {
  .adv-card:nth-child(1):hover .adv-card__inner {
    transform: rotate(-3deg) translateY(-8px);
  }
  .adv-card:nth-child(2):hover .adv-card__inner {
    transform: rotate(4deg) translateY(-8px);
  }
  .adv-card:nth-child(3):hover .adv-card__inner {
    transform: rotate(-2deg) translateY(-8px);
  }
  .adv-card:nth-child(4):hover .adv-card__inner {
    transform: rotate(3deg) translateY(-8px);
  }
}

.icon-circle {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.adv-card__text {
  font-size: 16px;
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
  text-transform: lowercase;
  color: rgba(255, 255, 255, 0.7);
}

/* --------------------------------------------------------------------------
   События и новости
   -------------------------------------------------------------------------- */

.news {
  position: relative;
  height: 850px;
  border-radius: 32px;
  overflow: hidden;
  padding: 72px var(--bleed-pad);
  display: flex;
  flex-direction: column;
  gap: 32px;
  color: #fff;
}

.news__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.news__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}

.news__head-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
}

.news__sub {
  color: rgba(255, 255, 255, 0.7);
  text-transform: lowercase;
}

.news__grid {
  display: flex;
  gap: 24px;
}

.news-card {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  border-radius: 20px;
  overflow: hidden;
  transition: background-color var(--swap) ease;
}

@media (hover: hover) and (pointer: fine) {
  .news-card:hover {
    background: rgba(255, 255, 255, 0.2);
  }
}

.news-card--big {
  width: 560px;
  flex: none;
  height: 520px;
  display: flex;
  flex-direction: column;
}

.news-card--big .news-card__photo {
  height: 297px;
  flex: none;
  overflow: hidden;
}

.news-card--big .news-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-card__body {
  flex: 1 1 auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.news-card__top {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.chip {
  align-self: flex-start;
  background: var(--bg-accent);
  color: var(--text-title-dark);
  border-radius: 999px;
  padding: 12px 14px;
  font-size: 12px;
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
}

.news-card__more {
  color: var(--bg-accent);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: transform var(--press) var(--ease-out);
  display: inline-block;
}

@media (hover: hover) and (pointer: fine) {
  .news-card__more:hover {
    transform: translateX(3px);
  }
}

.news__small-col {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.news__viewport {
  flex: 1 1 auto;
  min-width: 0;
}

.news__track {
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 100%;
}

.news__dots {
  display: none;
}

.news__row {
  display: flex;
  gap: 24px;
}

.news-card--small {
  flex: 1 1 0;
  min-width: 0;
  height: 248px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 0 20px 20px;
}

.news-card--small .news-card__body {
  padding: 0;
  height: 100%;
}

.news-card--small .news-card__preview {
  width: 147px;
  height: 249px;
  flex: none;
  border-radius: 12px;
  overflow: hidden;
}

.news-card--small .news-card__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Карта и контакты
   -------------------------------------------------------------------------- */

.contacts {
  position: relative;
  height: 640px;
  background: var(--bg-secondary);
  overflow: hidden;
}

.contacts__map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.contacts .container {
  pointer-events: none;
}

.contacts__card {
  pointer-events: auto;
}

.contacts__card {
  position: absolute;
  left: 60px;
  top: 60px;
  width: 420px;
  height: 520px;
  border-radius: 20px;
  background: var(--bg-blue);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.15);
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  color: #fff;
}

.contacts__data {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-transform: lowercase;
}

.contacts__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contacts__label {
  font-size: 16px;
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.5);
}

.contacts__value {
  font-size: 18px;
  line-height: 1.55;
  letter-spacing: -0.01em;
}

.contacts__value--accent {
  color: var(--bg-accent);
}

.contacts__value--muted {
  color: rgba(255, 255, 255, 0.7);
}

.contacts__socials {
  display: flex;
  gap: 6px;
}

.social {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color var(--press) ease,
    transform var(--press) var(--ease-out);
}

.social img {
  width: auto;
  height: auto;
  flex: none;
}

.social .ic-vk {
  width: 29.83px;
  height: 18.5px;
}

.social .ic-tg {
  width: 26.5px;
  height: 24px;
  /* в макете глиф отражён по вертикали */
  transform: rotate(180deg) scaleX(-1);
  /* оптическая компенсация: масса самолётика смещена вправо-вверх */
  margin: 2px 3px 0 0;
}

.social:active {
  transform: scale(0.94);
}

@media (hover: hover) and (pointer: fine) {
  .social:hover {
    background: rgba(255, 255, 255, 0.3);
  }
}

/* --------------------------------------------------------------------------
   Подвал
   -------------------------------------------------------------------------- */

.footer {
  background: var(--bg-blue);
  border-radius: 32px 32px 0 0;
  color: #fff;
  padding: 62px var(--bleed-pad);
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.footer--form {
  padding: 80px var(--bleed-pad);
  align-items: center;
}

.footer__main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 23px;
}

.footer__brand img {
  width: 332px;
  height: 85px;
}

.footer__brand p {
  width: 310px;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
}

.footer__tagline {
  text-transform: none;
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-transform: lowercase;
  white-space: nowrap;
}

.footer__col > span:first-child {
  color: var(--bg-accent);
  font-size: 18px;
  line-height: 1.55;
  letter-spacing: -0.01em;
}

.footer__col a {
  font-size: 16px;
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
  transition: color var(--press) ease;
}

@media (hover: hover) and (pointer: fine) {
  .footer__col a:hover {
    color: var(--bg-accent);
  }
}

.footer__legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 22px;
  font-size: 17px;
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.65);
  width: 100%;
}

.footer__legal a {
  transition: color var(--press) ease;
}

@media (hover: hover) and (pointer: fine) {
  .footer__legal a:hover {
    color: #fff;
  }
}

/* «разработано в подписайт» — лого вместо слова */
.footer__by {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.6);
}

.footer__by img {
  width: 124px;
  height: 14px;
  opacity: 0.75;
  transition: opacity var(--press) ease;
}

@media (hover: hover) and (pointer: fine) {
  .footer__by:hover img {
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   Внутренние страницы: герой
   -------------------------------------------------------------------------- */

.page-hero {
  position: relative;
  z-index: 1;
  height: var(--page-hero-h);
  border-radius: 0 0 32px 32px;
  overflow: hidden;
  background: var(--bg-blue);
}

.page-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero__obj {
  position: absolute;
  max-width: none;
}

.page-hero__obj--tennis {
  z-index: 3;
  left: 25.35%;
  right: 9.72%;
  top: 10.98%;
  bottom: 5.19%;
  width: auto;
  height: auto;
}

.page-hero__obj--padel {
  left: 45.21%;
  right: 28.54%;
  top: 12.91%;
  bottom: 20.87%;
  width: auto;
  height: auto;
}

.page-hero__blur {
  position: absolute;
  z-index: 4;
  left: -7.3%;
  top: calc(50% - 141.91px);
  transform: translateY(-50%) rotate(108.91deg);
  width: 322px;
  height: 326px;
  filter: blur(9px);
}

.page-hero__text {
  position: absolute;
  left: 72px;
  top: 314px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: #fff;
  z-index: 2;
}

.page-hero__text .h1 {
  white-space: nowrap;
}

.page-hero__lead {
  width: 475px;
  text-transform: lowercase;
}

.page-hero__actions {
  display: flex;
  gap: 14px;
}

/* --------------------------------------------------------------------------
   Форматы занятий (внутренние страницы)
   -------------------------------------------------------------------------- */

.lesson-formats {
  position: relative;
  height: 558px;
}

/* декор выходит за границы секции, поэтому уводим его под соседние блоки */
.lesson-formats__deco {
  z-index: -1;
}

.lesson-formats__deco {
  position: absolute;
  left: -73.97px;
  top: calc(50% + 136.16px);
  transform: translateY(-50%);
  width: 1559.684px;
  height: 718.736px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.lesson-formats__deco-rot {
  transform: rotate(175.67deg) scaleY(-1);
  width: 1518.301px;
  height: 605.925px;
  position: relative;
}

.lesson-formats__deco-rot img {
  position: absolute;
  inset: -7.84% -2.53% -5.12% -3.13%;
  width: auto;
  height: auto;
  max-width: none;
}

.lesson-formats__head {
  position: absolute;
  left: 72px;
  right: 72px;
  top: 96px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

.lesson-formats__note {
  width: 360px;
  flex: none;
  text-align: right;
  color: rgba(36, 36, 36, 0.5);
  text-transform: lowercase;
}

.lesson-formats__cards {
  position: absolute;
  left: 0;
  right: 0;
  top: 189px;
  /* ширина колонки контента из макета — группа карточек центрируется целиком */
  width: min(1296px, calc(100% - 144px));
  margin-inline: auto;
  height: 273px;
}

.lf-card {
  position: absolute;
  z-index: 1;
  top: 0;
  height: 273px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lf-card__inner {
  width: 263.2px;
  height: 260px;
  border-radius: 20px;
  background: var(--bg-blue);
  border: 1px solid var(--bg-blue);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: #fff;
  transform: rotate(var(--tilt, 0deg));
  transition:
    transform 420ms var(--ease-out),
    background-color 420ms ease,
    border-color 420ms ease,
    color 420ms ease,
    box-shadow 420ms ease;
}

/* Наведение — как у карточек преимуществ на главной:
   карточка выходит поверх соседей и перекрашивается в акцент. */
@media (hover: hover) and (pointer: fine) {
  .lf-card:hover {
    z-index: 5;
  }
  .lf-card:hover .lf-card__inner {
    transform: rotate(var(--tilt, 0deg)) translateY(-8px);
    background: var(--bg-accent);
    border-color: var(--bg-accent);
    color: var(--text-title-dark);
    box-shadow: 0 26px 54px rgba(36, 36, 36, 0.24);
  }
  .lf-card:hover .lf-card__text {
    color: rgba(36, 36, 36, 0.8);
  }
  .lf-card:hover .icon-circle {
    background: rgba(36, 36, 36, 0.08);
  }
  .lf-card:hover .icon-circle img {
    filter: brightness(0);
  }
}

.lf-card__text {
  font-size: 14px;
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
  text-transform: lowercase;
  color: rgba(255, 255, 255, 0.7);
}

.lf-card .icon-circle {
  width: 48px;
  height: 48px;
}

/* --------------------------------------------------------------------------
   Цены
   -------------------------------------------------------------------------- */

.prices {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.prices__head {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.prices__eyebrow {
  color: var(--bg-blue);
  font-size: 14px;
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
  text-transform: lowercase;
}

.price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0 25px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.price-row:first-child {
  border-top: 0;
  padding-top: 25px;
}

.price-row__name {
  width: 420px;
  flex: none;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: lowercase;
}

.price-row__terms {
  width: 280px;
  flex: none;
  font-size: 14px;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  color: rgba(255, 255, 255, 0.7);
}

.price-row__value {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}/* --------------------------------------------------------------------------
   Аренда кортов
   -------------------------------------------------------------------------- */

.tabs {
  background: var(--bg-secondary);
  border-radius: 14px;
  padding: 5px 6px 5px 5px;
  display: flex;
  justify-content: center;
}

.tabs button {
  height: 55px;
  padding-inline: 24px;
  border-radius: 9px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  color: var(--text-title-dark);
  transition:
    background-color var(--swap) var(--ease-out),
    color var(--swap) var(--ease-out),
    transform var(--press) var(--ease-out);
}

.tabs button:active {
  transform: scale(0.97);
}

.tabs button[aria-selected='true'] {
  background: var(--bg-blue);
  color: #fff;
}

@media (hover: hover) and (pointer: fine) {
  .tabs button:not([aria-selected='true']):hover {
    background: rgba(36, 36, 36, 0.06);
  }
}

.point {
  display: flex;
  align-items: center;
  gap: 12px;
}

.point__mark {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 14px;
  background: var(--bg-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.point__mark img {
  width: 14px;
  height: 14px;
}

.point span {
  font-size: 16px;
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
  text-transform: lowercase;
}

/* --------------------------------------------------------------------------
   Форма записи
   -------------------------------------------------------------------------- */

.signup {
  /* во всю колонку контента поля растягиваются далеко за читаемую меру */
  width: 100%;
  max-width: 780px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding-bottom: 40px;
}

.signup__title {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.signup__heading {
  font-size: 40px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.signup__note {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.7);
}

.switch {
  width: 100%;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  padding: 5px;
  display: flex;
}

.switch button {
  flex: 1 1 0;
  min-width: 0;
  height: 54px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 18px;
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
  text-transform: lowercase;
  transition:
    background-color var(--swap) var(--ease-out),
    color var(--swap) var(--ease-out);
}

.switch button[aria-pressed='true'] {
  background: #fff;
  color: var(--bg-blue);
  font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
  .switch button:not([aria-pressed='true']):hover {
    background: rgba(255, 255, 255, 0.12);
  }
}

.field-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.field-group__label {
  font-size: 14px;
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
  text-transform: lowercase;
  color: rgba(255, 255, 255, 0.6);
}

.field-row {
  width: 100%;
  display: flex;
  gap: 32px;
}

.field {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.field > label {
  font-size: 14px;
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
  text-transform: lowercase;
  color: rgba(255, 255, 255, 0.6);
}

.field__control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  transition: background-color var(--press) ease;
}

.field:focus-within .field__control {
  background: rgba(255, 255, 255, 0.12);
}

.field__control input,
.field__control select {
  flex: 1 1 auto;
  min-width: 0;
  background: none;
  border: 0;
  color: #fff;
  font-size: 20px;
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
  padding: 6px 0;
  appearance: none;
}

.field__control input::placeholder {
  color: rgba(255, 255, 255, 0.44);
  text-transform: lowercase;
}

.field__control select {
  color: rgba(255, 255, 255, 0.44);
  text-transform: lowercase;
}

.field__control select option {
  color: var(--text-title-dark);
}

.field__control img {
  flex: none;
  pointer-events: none;
}

.field__divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.22);
  transition: background-color var(--press) ease;
}

.field:focus-within .field__divider {
  background: var(--bg-accent);
}

.consent {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
}

.consent input {
  appearance: none;
  /* 24 px — нижняя граница удобной цели нажатия на сенсорном экране */
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 6px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  cursor: pointer;
  position: relative;
  transition:
    background-color var(--press) ease,
    border-color var(--press) ease;
}

.consent input:checked {
  background: var(--bg-accent);
  border-color: var(--bg-accent);
}

.consent input:checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid var(--text-title-dark);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.consent label {
  text-transform: lowercase;
}

.submit {
  position: relative;
  overflow: hidden;
  align-self: center;
  min-width: 260px;
  height: 62px;
  padding-inline: 32px;
  border-radius: 12px;
  background: var(--bg-accent);
  color: var(--text-title-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 600;
  line-height: var(--lh-normal);
  letter-spacing: -0.02em;
  transition:
    transform var(--press) var(--ease-out),
    color 300ms var(--ease-fill);
}

.submit .btn__label {
  gap: 12px;
}

/* стрелка в кнопке — тем же цветом, что и подпись: под тёмной иконкой лежит
   лаймовая копия, при заливке верхняя просто растворяется */
.btn .ico--arrow,
.submit .ico--arrow {
  position: relative;
}

/* копия стрелки под тёмной: маска повторяет тот же поворот, что у img,
   и красится currentColor — тем же цветом, что и подпись */
.btn .ico--arrow::after,
.submit .ico--arrow::after {
  content: '';
  position: absolute;
  width: 8.63px;
  height: 12.97px;
  transform: rotate(-90deg) scaleX(-1);
  background: currentColor;
  -webkit-mask: url('../img/arrow-sm.svg') center / contain no-repeat;
  mask: url('../img/arrow-sm.svg') center / contain no-repeat;
  opacity: 0;
  transition: opacity 300ms var(--ease-fill);
}

.btn.is-ink .ico--arrow::after,
.submit.is-ink .ico--arrow::after {
  opacity: 1;
}

.btn .ico--arrow img,
.submit .ico--arrow img {
  transition: opacity 300ms var(--ease-fill);
}

.btn.is-ink .ico--arrow img {
  opacity: 0;
}

.submit.is-ink .ico--arrow img {
  opacity: 0;
}

.submit .ico--34 {
  width: 18px;
  height: 18px;
}

.submit .ico--34 img {
  width: 8.63px;
  height: 12.97px;
}

.submit:active {
  transform: scale(0.99);
}



/* --------------------------------------------------------------------------
   Смена панели корта — единственная «переключательная» анимация
   -------------------------------------------------------------------------- */

.swap-in {
  animation: swapIn var(--swap) var(--ease-out) both;
}

@keyframes swapIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Адаптив
   -------------------------------------------------------------------------- */

@media (max-width: 1439px) {
  .hero__logo {
    width: min(778px, 54vw);
    height: auto;
  }
  .page-hero__text .h1 {
    font-size: clamp(88px, 13.9vw, 200px);
  }
  .news-card--big {
    width: 42%;
  }
}

@media (max-width: 1200px) {
  :root {
    --gutter: 40px;
  }
  .header {
    padding-inline: 28px;
  }
  .header--wide {
    padding-inline: 32px;
  }
  .header__nav {
    gap: 16px;
    font-size: 14px;
  }
  .header__actions .btn {
    height: 50px;
    padding-inline: 18px;
    font-size: 15px;
  }
  .h2 {
    font-size: clamp(34px, 4.4vw, 56px);
  }
  .formats {
    flex-direction: column;
  }
  .formats__intro,
  .formats__slider-wrap {
    width: 100%;
  }
  .formats__intro {
    min-height: 0;
    gap: 36px;
  }
  .schedule {
    flex-direction: column;
    gap: 40px;
  }
  .schedule__intro,
  .schedule__desc {
    width: 100%;
  }
  .coaches__head {
    flex-direction: column;
    gap: 20px;
  }
  .coaches__head .h2,
  .coaches__head-desc {
    width: 100%;
  }
  .advantages {
    height: auto;
    padding-block: 96px;
  }
  .advantages__title,
  .advantages__list {
    position: static;
    height: auto;
  }
  .advantages__title {
    padding-inline: var(--gutter);
    margin-bottom: 42px;
  }
  .advantages__list {
    padding: 20px var(--gutter);
    flex-wrap: wrap;
    justify-content: center;
  }
  .adv-card {
    flex: 0 0 290px;
  }
  .lesson-formats {
    height: auto;
    padding-block: 96px;
  }
  .lesson-formats__head,
  .lesson-formats__cards {
    position: static;
    height: auto;
  }
  .lesson-formats__head {
    padding-inline: var(--gutter);
    margin-bottom: 42px;
  }
  .lesson-formats__cards {
    padding-inline: var(--gutter);
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
  }
  .lf-card {
    position: static;
    left: auto !important;
    flex: 0 0 263px;
  }
  .news__grid {
    flex-direction: column;
  }
  .news-card--big {
    width: 100%;
  }
  .contacts {
    height: auto;
  }
  .contacts__card {
    position: static;
    width: 100%;
    height: auto;
    margin: 0;
    border-radius: 0;
  }
  .contacts__map {
    position: static;
    height: 360px;
  }
}

@media (max-width: 860px) {
  :root {
    --gutter: 20px;
  }
  .header {
    position: absolute;
    height: auto;
    padding: 14px 20px;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
  }
  .header__nav {
    order: 3;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
  }
  :root {
    --hero-h: 620px;
    --page-hero-h: 620px;
  }
  .hero__racket {
    object-fit: contain;
    object-position: bottom;
  }
  .hero__logo {
    top: 300px;
  }
  .hero__plate {
    top: auto;
    bottom: 32px;
    left: 20px;
    right: 20px;
    width: auto;
  }
  .page-hero__text {
    left: 20px;
    right: 20px;
    top: 280px;
  }
  .page-hero__lead {
    width: auto;
  }
  .page-hero__actions {
    flex-wrap: wrap;
  }
  .directions__cards {
    grid-template-columns: 1fr;
  }
  .directions__ball {
    display: none;
  }
  .dir-card {
    height: auto;
  }
  .fmt-card,
  .coach {
    flex: 0 0 100%;
  }
  .gallery__grid {
    grid-template-columns: repeat(2, 1fr);
    height: auto;
  }
  .mission {
    padding: 72px var(--gutter);
  }
  .mission__lead {
    font-size: 24px;
  }
  .slot {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .slot__name,
  .slot__time {
    width: auto;
  }
  .news {
    padding: 40px 20px;
  }
  .news__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .news__row {
    flex-direction: column;
  }
  .news-card--small,
  .news-card--big {
    height: auto;
  }
  .news-card--small .news-card__preview {
    height: 180px;
    width: 120px;
  }
  .footer,
  .footer--form {
    padding: 48px 20px;
  }
  .footer__main {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }
  .footer__brand {
    align-items: flex-start;
  }
  .footer__brand img {
    width: 220px;
    height: auto;
  }
  .footer__brand p {
    width: auto;
    text-align: left;
  }
  .footer__legal {
    flex-direction: column;
    gap: 8px;
  }
  .field-row {
    flex-direction: column;
    gap: 32px;
  }
  .switch button,
  .switch button[aria-pressed='true'] {
    font-size: 15px;
    height: 48px;
  }
  .field__control input,
  .field__control select {
    font-size: 18px;
  }
  .submit {
    width: 100%;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .formats__track,
  .coaches__track {
    transition: none;
  }
  .swap-in {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Декоративные абсолютные слои (координаты из Figma)
   -------------------------------------------------------------------------- */

.adv-ball {
  position: absolute;
  width: auto;
  height: auto;
  max-width: none;
}

.adv-ellipse {
  max-width: none;
}

@media (max-width: 1200px) {
  .advantages__deco {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Иконки-стрелки: в Figma базовый глиф направлен вниз и поворачивается на -90°
   -------------------------------------------------------------------------- */

.ico {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.ico img {
  max-width: none;
}

.ico--arrow img {
  transform: rotate(-90deg) scaleX(-1);
}

.ico--24 {
  width: 24px;
  height: 24px;
}
.ico--24 img {
  width: 11.5px;
  height: 17.29px;
}

.ico--18 {
  width: 18px;
  height: 18px;
}
.ico--18 img {
  width: 8.63px;
  height: 12.97px;
}

.ico--34 {
  width: 35px;
  height: 34px;
}
.ico--34 img {
  width: 17.2px;
  height: 26.3px;
}

/* --------------------------------------------------------------------------
   Внутренние страницы: блок расписания и цен
   -------------------------------------------------------------------------- */

.schedule-block {
  display: flex;
  flex-direction: column;
  gap: 70px;
  padding-block: 80px;
}

.schedule--inner {
  padding: 0;
  width: 100%;
}

.btn--16 {
  font-size: 16px;
}

.prices__table {
  filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.07));
}/* Уголки секции аренды */

[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Герой внутренних страниц: точные координаты слоёв из Figma
   -------------------------------------------------------------------------- */

.page-hero__bg {
  object-fit: fill;
  max-width: none;
}

.page-hero--tennis .page-hero__bg {
  left: 0.03%;
  top: -3.59%;
  width: 100.26%;
  height: 103.58%;
}

.page-hero--padel .page-hero__bg {
  left: 0.03%;
  top: 0;
  width: 99.94%;
  height: 99.96%;
}

.page-hero__obj {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
}

.page-hero__obj img {
  position: absolute;
  max-width: none;
  object-fit: fill;
}

.page-hero__obj--tennis {
  z-index: 3;
  left: 25.35%;
  right: 9.72%;
  top: 10.98%;
  bottom: 5.19%;
  width: auto;
  height: auto;
}

.page-hero__obj--tennis img {
  left: 0.07%;
  top: 0.07%;
  width: 99.85%;
  height: 102.7%;
}

.page-hero__obj--padel {
  left: 45.21%;
  right: 28.54%;
  top: 12.91%;
  bottom: 20.87%;
  width: auto;
  height: auto;
}

.page-hero__obj--padel img {
  left: 0.11%;
  top: 0.12%;
  width: 99.78%;
  height: 99.82%;
}

/* Расписание: игроки стоят поверх заголовка (Figma 148:3698) */
.sched-figure {
  position: absolute;
  z-index: 3;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}

/* координаты из макета 1440×829 переведены в доли первого экрана */
.sched-figure--girl {
  left: 67.08%;
  top: 28.47%;
  width: 22.71%;
  height: 52.6%;
}

.sched-figure--man {
  left: 59.24%;
  top: 35.46%;
  width: 19.38%;
  height: 44.87%;
}

.page-hero--sched .page-hero__bg {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.page-hero--sched .page-hero__text {
  max-width: 980px;
}

.page-hero--sched .page-hero__lead {
  width: auto;
  max-width: 560px;
  text-transform: none;
  text-shadow: 0 2px 18px rgba(20, 26, 40, 0.35);
}

.page-hero--sched .h1 {
  text-shadow: 0 6px 40px rgba(20, 26, 40, 0.28);
}

/* Размытый мяч в левом верхнем углу страницы «Падел» */
.page-hero__blur {
  position: absolute;
  z-index: 4;
  left: -7.3%;
  width: 321.9px;
  height: 326.4px;
  top: calc(50% - 268px);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  filter: none;
}

.page-hero__blur img {
  width: 258.8px;
  height: 251.5px;
  max-width: none;
  transform: rotate(108.91deg);
  filter: blur(9px);
}

/* --------------------------------------------------------------------------
   Правки после сверки со скриншотами макета
   -------------------------------------------------------------------------- */

.btn {
  white-space: nowrap;
}

.signup > .field {
  width: 100%;
}

.consent label {
  font-size: 18px;
  line-height: 1.55;
  letter-spacing: -0.01em;
}

/* Тонировка фото тренеров на странице «Падел» */
.coach__tint--dark {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(102, 102, 102, 0) 100%);
}

.coach__photo--tall {
  height: 118.05%;
  top: 0;
  object-position: top;
}

/* Герой главной — геометрия слоёв из Figma (1440×839), без растяжения */
.hero__bg {
  left: -3.472%;
  top: 0;
  width: 106.111%;
  height: 102.503%;
  object-fit: fill;
  max-width: none;
}

.hero__photo {
  left: -8.889%;
  top: 0;
  width: 117.789%;
  height: 113.784%;
  object-fit: fill;
  max-width: none;
}

/* Точные кропы фото тренеров (значения из Figma) */
/* точные кропы из Figma: кадрируем, иначе на широком экране лица «плющит» */
.coach__photo--exact {
  object-fit: cover;
  max-width: none;
}

/* Фон секции новостей — геометрия из Figma. Кадрируем, а не растягиваем:
   при fill фотография шла с отношением 1.61 при 1.78 у файла. */
.news__bg {
  left: -6.66%;
  top: -3.49%;
  width: 106.66%;
  height: 112.2%;
  object-fit: cover;
  max-width: none;
}

/* Ширины описаний тренеров — по значениям Figma */
.coach:nth-child(1) .coach__desc {
  max-width: 336px;
}
.coach:nth-child(2) .coach__desc {
  max-width: 314px;
}
.coach:nth-child(3) .coach__desc {
  max-width: 328px;
}

/* --------------------------------------------------------------------------
   Адаптив: доработки
   -------------------------------------------------------------------------- */

.hero .container,
.page-hero .container,
.contacts .container,
.advantages .container,
.lesson-formats .container {
  height: 100%;
}

@media (max-width: 860px) {
  .directions__ball {
    display: none;
  }
}

@media (max-width: 1200px) {
  .news {
    height: auto;
  }
}

@media (max-width: 860px) {
  .slot {
    display: grid;
    grid-template-columns: 1fr 44px;
    align-items: center;
    row-gap: 4px;
    column-gap: 12px;
  }
  .slot__time,
  .slot__name,
  .slot__level {
    grid-column: 1;
  }
  .slot__arrow {
    grid-column: 2;
    grid-row: 1 / span 3;
    justify-self: end;
  }
}

@media (max-width: 860px) {
  .news-card--small {
    height: auto;
    align-items: stretch;
    padding: 16px 0 16px 16px;
    gap: 12px;
  }
  .news-card--small .news-card__body {
    height: auto;
    gap: 16px;
  }
  .news-card--small .news-card__top {
    gap: 12px;
  }
  .news-card--small .news-card__preview {
    width: 104px;
    height: auto;
    align-self: stretch;
  }
  .news-card--small .news-card__preview img {
    height: 100%;
    min-height: 150px;
  }
}

@media (max-width: 860px) {
  .news-card--small {
    flex: 0 0 auto;
  }
}

@media (max-width: 860px) {
  .lesson-formats__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .lesson-formats__note {
    width: auto;
    text-align: left;
  }

  .price-row {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .price-row__name {
    width: 100%;
  }
  .price-row__terms {
    width: auto;
    flex: 1 1 auto;
  }
  .price-row__value {
    margin-left: auto;
  }
  .tabs {
    max-width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar {
    display: none;
  }
  .tabs button {
    flex: none;
    padding-inline: 18px;
  }
}

/* Переключатель остаётся строкой до самых узких экранов: в колонке контейнер
   с радиусом 999px превращался в «каплю» и срезал подписи по краям. */
@media (max-width: 560px) {
  .switch button {
    padding-inline: 4px;
    white-space: nowrap;
  }
}

/* ниже 360 px три подписи в строку уже не помещаются — только там колонка,
   и радиус контейнера уменьшаем под высоту кнопки */
@media (max-width: 359px) {
  .switch {
    flex-direction: column;
    gap: 4px;
    border-radius: 29px;
  }
  .switch button {
    flex: none;
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Широкие экраны: композиция первого экрана масштабируется вместе с шириной,
   чтобы фото и ракетка оставались в тех же пропорциях, что и в макете
   -------------------------------------------------------------------------- */

/* Размытый мяч на «Паделе» — в долях от первого экрана */
.page-hero__blur {
  width: 22.354%;
  height: 39.373%;
  top: 32.882%;
}

.page-hero__blur img {
  width: 80.4%;
  height: 77.05%;
}

/* Ниже 900px высота первого экрана фиксируется, поэтому фото кадрируется, а не тянется */
@media (max-width: 900px) {
  .hero__bg,
  .hero__photo,
  .page-hero__bg,
  .page-hero__obj img {
    object-fit: cover;
  }
  .hero__racket {
    object-fit: contain;
    object-position: bottom;
  }
}

/* --------------------------------------------------------------------------
   Видео по наведению в карточке формата
   -------------------------------------------------------------------------- */

.fmt-card--plain {
  position: relative;
  overflow: hidden;
  transition: box-shadow 620ms var(--ease-out);
}

/* лаймовая рамка поверх всех слоёв карточки */
.fmt-card--plain::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 2px solid transparent;
  border-radius: inherit;
  pointer-events: none;
  transition: border-color 620ms var(--ease-out);
}

/* слой на всю карточку: видео или то же фото — проявляется при наведении */
.fmt-card__fill {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 620ms var(--ease-out);
}

.fmt-card__fill img,
.fmt-card__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* белая подложка уезжает вниз */
.fmt-card--plain .fmt-card__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  transition: transform 620ms var(--ease-out);
}

/* текст приходит сверху поверх видео */
.fmt-card__over {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #fff;
  opacity: 0;
  transform: translateY(-18px);
  transition:
    opacity 620ms var(--ease-out),
    transform 620ms var(--ease-out);
}

.fmt-card__over .fmt-card__sub {
  color: rgba(255, 255, 255, 0.85);
}

@media (hover: hover) and (pointer: fine) {
  .fmt-card--plain:hover .fmt-card__fill,
  .fmt-card--plain:focus-within .fmt-card__fill {
    opacity: 1;
  }
  .fmt-card--plain:hover .fmt-card__body,
  .fmt-card--plain:focus-within .fmt-card__body {
    transform: translateY(100%);
  }
  .fmt-card--plain:hover .fmt-card__over,
  .fmt-card--plain:focus-within .fmt-card__over {
    opacity: 1;
    transform: none;
  }
  .fmt-card--plain:hover,
  .fmt-card--plain:focus-within {
    box-shadow: 0 18px 40px rgba(14, 80, 177, 0.22);
  }
  .fmt-card--plain:hover::after,
  .fmt-card--plain:focus-within::after {
    border-color: var(--bg-accent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fmt-card__fill,
  .fmt-card--plain .fmt-card__body,
  .fmt-card__over {
    transition-duration: 1ms;
  }
}

/* --------------------------------------------------------------------------
   Плавное появление блоков при прокрутке
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 900ms var(--ease-out),
    transform 900ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* повёрнутые карточки приезжают без сброса угла */
.adv-card[data-reveal],
.lf-card[data-reveal] {
  transform: translateY(26px);
}

/* состояние покоя для скриншотов */
.screenshot-mode [data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.icon-circle img {
  transition: filter 420ms ease;
}

/* при постраничной съёмке фиксированная шапка не должна повторяться на каждом кадре */
.screenshot-mode .header {
  position: absolute;
}

/* ==========================================================================
   Страница расписания
   ========================================================================== */

/* Кнопки из UI Kit, которых не было на других страницах */
.btn--blue {
  background: var(--bg-blue);
  border-color: var(--bg-blue);
  color: #fff;
  font-size: 16px;
  padding: 18px 32px;
}

.btn--dark {
  background: var(--text-title-dark);
  border-color: var(--text-title-dark);
  color: #fff;
  font-size: 16px;
  padding: 18px 32px;
}

.btn--blue {
  --ink: var(--bg-accent);
}

.btn--blue.is-ink {
  border-color: var(--bg-accent);
  color: var(--bg-blue);
}

.btn--dark {
  --ink: var(--bg-accent);
}

.btn--dark.is-ink {
  border-color: var(--bg-accent);
  color: var(--text-title-dark);
}

/* --------------------------------------------------------------------------
   Список занятий
   -------------------------------------------------------------------------- */

.sched {
  padding-block: 104px;
}

.sched__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.sched__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.sched__sport {
  flex: none;
}

/* дни недели */
.daytabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.daytabs::-webkit-scrollbar {
  display: none;
}

.daytabs button {
  flex: 1 1 0;
  min-width: 96px;
  padding: 14px 18px;
  border-radius: 16px;
  border: 1px solid var(--stroke-grey);
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  transition:
    background-color var(--swap) var(--ease-out),
    border-color var(--swap) var(--ease-out),
    color var(--swap) var(--ease-out),
    transform var(--press) var(--ease-out);
}

.daytabs button:active {
  transform: scale(0.98);
}

.daytab__name {
  font-size: 18px;
  font-weight: 600;
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
  text-transform: lowercase;
}

.daytab__date {
  font-size: 14px;
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
  text-transform: lowercase;
  color: var(--text-body-grey);
}

.daytabs button[aria-selected='true'] {
  background: var(--bg-blue);
  border-color: var(--bg-blue);
  color: #fff;
}

.daytabs button[aria-selected='true'] .daytab__date {
  color: rgba(255, 255, 255, 0.7);
}

@media (hover: hover) and (pointer: fine) {
  .daytabs button:not([aria-selected='true']):hover {
    border-color: var(--text-title-dark);
  }
}

/* строка занятия */
.sched__list {
  display: flex;
  flex-direction: column;
}

.lesson {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 132px 160px 104px auto;
  align-items: center;
  gap: 24px;
  padding-block: 22px;
  border-top: 1px solid var(--stroke-grey);
  transition: background-color var(--swap) ease;
}

.lesson:last-child {
  border-bottom: 1px solid var(--stroke-grey);
}

.lesson__time {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--bg-blue);
}

.lesson__main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.lesson__title {
  font-size: 18px;
  font-weight: 600;
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
  text-transform: lowercase;
}

.lesson__meta {
  font-size: 14px;
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
  text-transform: lowercase;
  color: var(--text-body-grey);
}

.lesson__level {
  justify-self: start;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--stroke-grey);
  font-size: 12px;
  line-height: 12px;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  color: var(--text-title-dark);
  white-space: nowrap;
}

.lesson__spots {
  font-size: 14px;
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
  text-transform: lowercase;
  color: var(--text-body-grey);
}

/* мест мало — единственный акцент в строке */
.lesson__spots--low {
  color: var(--text-title-dark);
  font-weight: 600;
}

.lesson__spots--low::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 999px;
  background: var(--bg-accent);
  vertical-align: middle;
}

.lesson__price {
  font-size: 18px;
  font-weight: 600;
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.lesson__btn {
  justify-self: end;
}

@media (hover: hover) and (pointer: fine) {
  .lesson:hover {
    background: var(--bg-secondary);
  }
}

.sched__empty {
  padding: 40px 0;
  max-width: 560px;
  font-size: 18px;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--text-body-grey);
}

/* --------------------------------------------------------------------------
   Как попасть на тренировку
   -------------------------------------------------------------------------- */

.steps {
  padding-block: 0 104px;
}

.steps__inner {
  display: flex;
  flex-direction: column;
  gap: 42px;
}

.steps__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.step {
  background: var(--bg-blue);
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: #fff;
  transition:
    transform 420ms var(--ease-out),
    box-shadow 420ms ease;
}

.step__num {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 999px;
  background: var(--bg-accent);
  color: var(--text-title-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
}

.step__text {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  color: rgba(255, 255, 255, 0.7);
}

@media (hover: hover) and (pointer: fine) {
  .step:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 44px rgba(14, 80, 177, 0.2);
  }
}

/* --------------------------------------------------------------------------
   Адаптив расписания
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
  .lesson {
    grid-template-columns: 84px minmax(0, 1fr) 120px auto;
    row-gap: 12px;
  }
  .lesson__spots {
    grid-column: 2 / 4;
  }
  .lesson__price {
    grid-column: 4;
    justify-self: end;
  }
  .lesson__btn {
    grid-column: 4;
  }
  .steps__list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .sched {
    padding-block: 72px;
  }
  .steps {
    padding-block: 0 72px;
  }
  .sched__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .daytabs button {
    min-width: 84px;
    flex: none;
  }
  .lesson {
    grid-template-columns: 1fr auto;
    gap: 10px;
  }
  .lesson__time {
    font-size: 24px;
  }
  .lesson__main,
  .lesson__spots,
  .lesson__level {
    grid-column: 1 / -1;
  }
  .lesson__price {
    grid-column: 1;
    justify-self: start;
  }
  .lesson__btn {
    grid-column: 2;
    grid-row: 1;
  }
}

.hero__plate-title {
  font-size: 40px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* ==========================================================================
   Модальные окна
   ========================================================================== */

.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(16, 22, 34, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 420ms var(--ease-out);
}

.modal__window {
  position: relative;
  width: min(760px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--bg-blue);
  border-radius: 24px;
  padding: 40px;
  color: #fff;
  box-shadow: 0 40px 90px rgba(10, 20, 40, 0.4);
  opacity: 0;
  transform: translateY(24px) scale(0.97);
  transition:
    opacity 420ms var(--ease-out),
    transform 420ms var(--ease-out);
}

.modal.is-open .modal__scrim {
  opacity: 1;
}

.modal.is-open .modal__window {
  opacity: 1;
  transform: none;
}

.modal__close {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color var(--press) ease,
    transform var(--press) var(--ease-out);
}

.modal__close span {
  position: absolute;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
}

.modal__close span:first-child {
  transform: rotate(45deg);
}

.modal__close span:last-child {
  transform: rotate(-45deg);
}

.modal__close:active {
  transform: scale(0.94);
}

@media (hover: hover) and (pointer: fine) {
  .modal__close:hover {
    background: rgba(255, 255, 255, 0.3);
  }
}

.modal__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  margin-bottom: 28px;
  padding-inline: 48px;
}

.modal__title {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.modal__note {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.7);
}

.modal__form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.modal__form .submit {
  align-self: stretch;
}

.modal__done {
  padding: 16px 20px;
  border-radius: 14px;
  background: var(--bg-accent);
  color: var(--text-title-dark);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

body.modal-open {
  overflow: hidden;
}

/* кнопка-иконка в поле даты */
.field__icon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--press) ease;
}

@media (hover: hover) and (pointer: fine) {
  .field__icon:hover {
    background: rgba(255, 255, 255, 0.15);
  }
}

/* ==========================================================================
   Календарь выбора даты
   ========================================================================== */

[data-datefield] {
  position: relative;
}

.cal {
  /* fixed, иначе прокручиваемое окно попапа обрезает календарь */
  position: fixed;
  z-index: 300;
  width: 320px;
  max-width: calc(100vw - 32px);
  padding: 18px;
  border-radius: 22px;
  background: rgba(12, 26, 54, 0.55);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 30px 60px rgba(6, 16, 36, 0.45);
  color: #fff;
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top left;
  pointer-events: none;
  transition:
    opacity 260ms var(--ease-out),
    transform 260ms var(--ease-out);
}

.cal.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.cal__month {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: capitalize;
}

.cal__nav {
  display: flex;
  gap: 4px;
}

.cal__nav button {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.75);
  font-size: 18px;
  line-height: 1;
  transition:
    background-color var(--press) ease,
    color var(--press) ease;
}

@media (hover: hover) and (pointer: fine) {
  .cal__nav button:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
  }
}

.cal__nav button:disabled {
  opacity: 0.3;
  cursor: default;
}

.cal__week,
.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.cal__week {
  margin-bottom: 6px;
}

.cal__week span {
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  color: rgba(255, 255, 255, 0.45);
}

.cal__day {
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  transition:
    background-color 200ms var(--ease-out),
    color 200ms var(--ease-out),
    transform var(--press) var(--ease-out);
}

.cal__day:empty {
  pointer-events: none;
}

.cal__day:disabled {
  color: rgba(255, 255, 255, 0.28);
  cursor: default;
}

/* сегодняшний день помечается точкой */
.cal__day--today::after {
  content: '';
  position: absolute;
  bottom: 6px;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--bg-accent);
}

.cal__day--selected {
  background: var(--bg-accent);
  color: var(--text-title-dark);
}

.cal__day--selected.cal__day--today::after {
  background: var(--text-title-dark);
}

.cal__day:active:not(:disabled) {
  transform: scale(0.94);
}

@media (hover: hover) and (pointer: fine) {
  .cal__day:hover:not(:disabled):not(.cal__day--selected) {
    background: rgba(255, 255, 255, 0.18);
  }
}

.cal__foot {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cal__hint {
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.55);
}

.cal__today {
  flex: none;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: background-color var(--press) ease;
}

@media (hover: hover) and (pointer: fine) {
  .cal__today:hover {
    background: rgba(255, 255, 255, 0.28);
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal__scrim,
  .modal__window,
  .cal {
    transition-duration: 1ms;
  }
}

@media (max-width: 860px) {
  .modal {
    padding: 12px;
    align-items: flex-end;
  }
  .modal__window {
    padding: 28px 20px;
    max-height: calc(100vh - 24px);
    border-radius: 20px;
  }
  .modal__title {
    font-size: 24px;
  }
  .cal {
    width: 100%;
  }
}

/* ==========================================================================
   Просмотр фото галереи
   ========================================================================== */

.gallery__item {
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
  overflow: hidden;
}

.gallery__item img {
  transition: transform 620ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .gallery__item:hover img {
    transform: scale(1.04);
  }
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 72px;
}

.lightbox__scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 16, 28, 0.88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 420ms var(--ease-out);
}

.lightbox.is-open .lightbox__scrim {
  opacity: 1;
}

.lightbox__figure {
  position: relative;
  margin: 0;
  max-width: min(1100px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  opacity: 0;
  transform: scale(0.96);
  transition:
    opacity 420ms var(--ease-out),
    transform 420ms var(--ease-out);
}

.lightbox.is-open .lightbox__figure {
  opacity: 1;
  transform: none;
}

.lightbox__figure img {
  max-width: 100%;
  max-height: calc(100vh - 160px);
  border-radius: 18px;
  object-fit: contain;
}

.lightbox__figure figcaption {
  font-size: 15px;
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
  text-transform: lowercase;
  color: rgba(255, 255, 255, 0.7);
}

.lightbox__close {
  position: absolute;
  top: 28px;
  right: 28px;
  z-index: 2;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color var(--press) ease,
    transform var(--press) var(--ease-out);
}

.lightbox__close span {
  position: absolute;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
}

.lightbox__close span:first-child {
  transform: rotate(45deg);
}

.lightbox__close span:last-child {
  transform: rotate(-45deg);
}

.lightbox__nav {
  position: relative;
  z-index: 2;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color var(--press) ease,
    transform var(--press) var(--ease-out);
}

.lightbox__nav--prev {
  margin-right: 20px;
}

.lightbox__nav--next {
  margin-left: 20px;
}

.lightbox__close:active,
.lightbox__nav:active {
  transform: scale(0.94);
}

@media (hover: hover) and (pointer: fine) {
  .lightbox__close:hover,
  .lightbox__nav:hover {
    background: rgba(255, 255, 255, 0.28);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox__scrim,
  .lightbox__figure,
  .gallery__item img {
    transition-duration: 1ms;
  }
}

@media (max-width: 860px) {
  .lightbox {
    padding: 20px 12px;
  }
  .lightbox__nav {
    position: absolute;
    bottom: 22px;
    width: 46px;
    height: 46px;
    margin: 0;
  }
  .lightbox__nav--prev {
    left: 20px;
  }
  .lightbox__nav--next {
    right: 20px;
  }
  .lightbox__figure img {
    max-height: calc(100vh - 200px);
  }
}

/* ==========================================================================
   Выбор времени — тем же стеклом, что и календарь
   ========================================================================== */

[data-timefield] {
  position: relative;
}

.timepick {
  position: fixed;
  z-index: 300;
  width: 320px;
  max-width: calc(100vw - 32px);
  padding: 16px;
  border-radius: 22px;
  background: rgba(12, 26, 54, 0.55);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 30px 60px rgba(6, 16, 36, 0.45);
  color: #fff;
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top left;
  pointer-events: none;
  transition:
    opacity 260ms var(--ease-out),
    transform 260ms var(--ease-out);
}

.timepick.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.timepick__group + .timepick__group {
  margin-top: 14px;
}

.timepick__label {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  color: rgba(255, 255, 255, 0.45);
}

.timepick__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.timepick__slot {
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  transition:
    background-color 200ms var(--ease-out),
    color 200ms var(--ease-out),
    transform var(--press) var(--ease-out);
}

.timepick__slot--selected {
  background: var(--bg-accent);
  color: var(--text-title-dark);
}

.timepick__slot:active {
  transform: scale(0.94);
}

@media (hover: hover) and (pointer: fine) {
  .timepick__slot:hover:not(.timepick__slot--selected) {
    background: rgba(255, 255, 255, 0.18);
  }
}

@media (prefers-reduced-motion: reduce) {
  .timepick {
    transition-duration: 1ms;
  }
}

@media (max-width: 860px) {
  .timepick {
    width: 100%;
  }
}

/* ==========================================================================
   Степпер количества
   ========================================================================== */

.field__control--stepper {
  /* минус слева, плюс справа, число по центру — на любой ширине */
  justify-content: space-between;
  gap: 8px;
  padding: 4px 6px;
}

.stepper__btn {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color var(--press) ease,
    transform var(--press) var(--ease-out);
}

.stepper__btn:active {
  transform: scale(0.94);
}

.stepper__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

@media (hover: hover) and (pointer: fine) {
  .stepper__btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.26);
  }
}

.field__control--stepper input {
  flex: 1 1 auto;
  min-width: 56px;
  text-align: center;
  cursor: default;
}

/* ==========================================================================
   Страница «Тренеры»
   ========================================================================== */

/* герой: пара тренеров стоит поверх заголовка (Figma 149:3854) */
.coaches-hero__obj {
  position: absolute;
  z-index: 3;
  left: 53.68%;
  bottom: 0;
  /* у абсолютного img ширину из left/right не вывести — задаём явно (614×652) */
  width: 42.639%;
  aspect-ratio: 614 / 652;
  height: auto;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}

/* геометрия фона из макета: cover кадрирует иначе, чем Figma */
.page-hero--coaches .page-hero__bg {
  left: 0.02%;
  top: 0.04%;
  width: 100.02%;
  height: 99.93%;
  object-fit: fill;
}

.page-hero--coaches .page-hero__lead {
  width: auto;
  max-width: 560px;
  text-transform: none;
}

/* --------------------------------------------------------------------------
   Состав клуба
   -------------------------------------------------------------------------- */

.team {
  padding-block: 104px;
}

.team__inner {
  display: flex;
  flex-direction: column;
  gap: 42px;
}

.team__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.team__filter {
  flex: none;
}

.team__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

/* карточка тренера на странице: та же подача, что в слайдерах,
   плюс факты и кнопка записи */
.coach--page {
  height: 560px;
}

/* затемнение не двигается вместе с текстом, поэтому низ карточки всегда закрыт */
.coach--page::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* фото тоже absolute и без z-index перекрывало бы подложку */
  z-index: 1;
  /* затемняем только зону под текстом, фото остаётся светлым */
  height: 62%;
  background: linear-gradient(
    to bottom,
    rgba(10, 14, 24, 0) 0%,
    rgba(10, 14, 24, 0.18) 34%,
    rgba(10, 14, 24, 0.5) 58%,
    rgba(10, 14, 24, 0.74) 80%,
    rgba(10, 14, 24, 0.8) 100%
  );
  pointer-events: none;
  transition: opacity 420ms var(--ease-out);
}

/* информация видна всегда; при наведении блок поднимается, освобождая место кнопке */
.coach--page .coach__info {
  z-index: 2;
  gap: 10px;
  padding: 28px 24px 24px;
  background: none;
  transition: transform 520ms var(--ease-out);
}

.coach--page .coach__desc {
  max-width: none;
}

@media (hover: hover) and (pointer: fine) {
  .coach--page:hover .coach__info,
  .coach--page:focus-within .coach__info {
    transform: translateY(var(--coach-lift, 0px));
  }
}

.coach__facts {
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.coach__facts > div {
  display: flex;
  gap: 8px;
  font-size: 13px;
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
  text-transform: lowercase;
}

.coach__facts dt {
  flex: none;
  width: 52px;
  color: rgba(255, 255, 255, 0.5);
}

.coach__facts dd {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
}

/* кнопка занимает всю ширину карточки и выезжает снизу */
.coach__btn {
  position: absolute;
  z-index: 3;
  left: 24px;
  right: 24px;
  bottom: 24px;
  width: auto;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 420ms var(--ease-out),
    transform 420ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .coach--page:hover .coach__btn,
  .coach--page:focus-within .coach__btn {
    opacity: 1;
    transform: none;
  }
}

/* на тач-устройствах кнопка в потоке и видна сразу */
@media (hover: none), (pointer: coarse) {
  .coach--page .coach__info {
    transform: none;
  }
  .coach__btn {
    position: static;
    margin-top: 14px;
    opacity: 1;
    transform: none;
  }
}

.team__empty {
  padding: 40px 0;
  font-size: 18px;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--text-body-grey);
}

@media (max-width: 1200px) {
  .team__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 860px) {
  .team {
    padding-block: 72px;
  }
  .team__grid {
    grid-template-columns: 1fr;
  }
  .team__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .coaches-hero__obj {
    left: auto;
    right: -6%;
    width: 62%;
  }
}

/* выбранный на странице корт — сводка в форме бронирования */
.picked {
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.picked__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.picked__label {
  font-size: 14px;
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
  text-transform: lowercase;
  color: rgba(255, 255, 255, 0.6);
}

.picked__value {
  font-size: 16px;
  font-weight: 600;
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
  text-align: right;
}

.picked__value--accent {
  color: var(--bg-accent);
}

/* мяч в логотипе подвала — крутится при наведении, как в герое */
.footer__logo {
  position: relative;
  display: block;
  width: 332px;
  height: 85px;
}

.footer__logo img {
  width: 100%;
  height: 100%;
}

.footer__logo-ball {
  position: absolute;
  left: 72.33%;
  top: 16.15%;
  width: 21.55%;
  height: 83.77%;
  background: url('../img/logo-footer-ball.svg') center / contain no-repeat;
}

@media (hover: hover) and (pointer: fine) {
  .footer__logo-ball:hover {
    animation: heroBallSpin 2.4s linear infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer__logo-ball:hover {
    animation: none;
  }
}

@media (max-width: 860px) {
  .footer__logo {
    width: 220px;
    height: 56px;
  }
}

/* листание жестом: не даём браузеру перехватывать горизонтальную прокрутку */
.coaches__viewport,
.formats__viewport {
  touch-action: pan-y;
  cursor: grab;
}

.coaches__viewport:active,
.formats__viewport:active {
  cursor: grabbing;
}

.coaches__track img,
.formats__track img,
.coaches__track a,
.formats__track a {
  -webkit-user-drag: none;
  user-select: none;
}

/* ==========================================================================
   Страница «О клубе»
   ========================================================================== */

.page-hero--about .page-hero__bg {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero--about .page-hero__lead {
  width: auto;
  max-width: 560px;
}

/* --------------------------------------------------------------------------
   Кто мы
   -------------------------------------------------------------------------- */

.about-who {
  padding-block: 24px 82px;
}

.about-who__inner {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.about-who__row {
  display: flex;
  align-items: center;
}

.about-who__text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.about-who__lead {
  max-width: 604px;
  font-size: 26px;
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.about-who__collage {
  flex: 0 0 auto;
  width: 53.32%;
  height: auto;
}

.about-facts {
  margin: 0;
  padding-top: 42px;
  border-top: 1px solid var(--stroke-grey);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  text-align: center;
}

.about-facts__item {
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
}

.about-facts dt {
  font-size: 15px;
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
  text-transform: lowercase;
  color: var(--text-body-grey);
}

.about-facts dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-size: 56px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--bg-blue);
}

/* --------------------------------------------------------------------------
   Кому подойдёт
   -------------------------------------------------------------------------- */

.whom {
  padding-block: 0 104px;
}

.whom__inner {
  display: flex;
  flex-direction: column;
  gap: 42px;
}

.whom__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 64px;
}

.whom__item {
  padding: 28px 0;
  border-top: 1px solid var(--stroke-grey);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.whom__title {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.whom__text {
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: var(--text-body-grey);
}

/* --------------------------------------------------------------------------
   Клуб внутри — листаемые блоки
   -------------------------------------------------------------------------- */

.indoor__card {
  position: relative;
  padding: 72px;
  border-radius: 32px;
  background: var(--bg-blue);
  color: #fff;
  overflow: hidden;
}

.indoor__viewport {
  overflow: hidden;
  touch-action: pan-y;
}

.indoor__track {
  display: flex;
  align-items: stretch;
  transition: transform var(--swap) var(--ease-out);
}

.indoor__slide {
  flex: 0 0 100%;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 32px;
  min-height: 587px;
}

.indoor__text {
  flex: 0 0 auto;
  width: 466px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
}

.indoor__text .h2 {
  white-space: nowrap;
}

.indoor__note {
  font-size: 24px;
  font-weight: 600;
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.7);
}

.indoor__photo {
  margin: 0;
  flex: 0 0 auto;
  width: 428px;
  height: 587px;
  border-radius: 32px;
  overflow: hidden;
}

.indoor__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
}

.indoor__nav {
  position: absolute;
  right: 286px;
  bottom: 84px;
  transform: translateX(50%);
  display: flex;
  gap: 12px;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.indoor__arrow {
  width: 60px;
  height: 60px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition:
    transform var(--press) var(--ease-out),
    background-color var(--press) ease,
    opacity var(--press) ease;
}

.indoor__arrow img {
  width: 10px;
  height: 16px;
}

.indoor__arrow--prev img {
  transform: rotate(180deg);
}

.indoor__arrow--next {
  background: #fff;
}

.indoor__arrow:active {
  transform: scale(0.94);
}

.indoor__arrow:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.indoor__arrow[disabled] {
  opacity: 0.4;
  cursor: default;
}

@media (hover: hover) and (pointer: fine) {
  .indoor__arrow--prev:not([disabled]):hover {
    background: rgba(255, 255, 255, 0.22);
  }
  .indoor__arrow--next:not([disabled]):hover {
    transform: scale(1.06);
  }
}

/* --------------------------------------------------------------------------
   Частые вопросы
   -------------------------------------------------------------------------- */

.faq {
  padding-block: 104px;
}

.faq__inner {
  display: flex;
  flex-direction: column;
  gap: 42px;
}

.faq__list {
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-top: 1px solid var(--stroke-grey);
}

.faq-item:last-child {
  border-bottom: 1px solid var(--stroke-grey);
}

.faq-item h3 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.faq-item__q {
  width: 100%;
  padding: 26px 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  text-align: left;
  font-family: inherit;
  font-size: 24px;
  font-weight: 600;
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
  color: var(--text-title-dark);
  transition: color var(--press) ease;
}

.faq-item__q:focus-visible {
  outline: 2px solid var(--bg-blue);
  outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
  .faq-item__q:hover {
    color: var(--bg-blue);
  }
}

.faq-item__sign {
  position: relative;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

.faq-item__sign::before,
.faq-item__sign::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--bg-blue);
  transform: translate(-50%, -50%);
  transition: transform 320ms var(--ease-out);
}

.faq-item__sign::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item__q[aria-expanded='true'] .faq-item__sign::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.faq-item__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 360ms var(--ease-out);
}

.faq-item__a[data-open] {
  grid-template-rows: 1fr;
}

.faq-item__a-inner {
  overflow: hidden;
}

.faq-item__a p {
  margin: 0;
  padding-bottom: 28px;
  max-width: 820px;
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: -0.01em;
  color: var(--text-body-grey);
}

/* --------------------------------------------------------------------------
   Адаптив страницы «О клубе»
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
  .about-who__collage {
    width: 46%;
  }
  .about-facts {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }
  .indoor__card {
    padding: 48px;
  }
  .indoor__slide {
    flex-direction: column;
    min-height: 0;
    gap: 32px;
  }
  .indoor__text {
    width: auto;
  }
  .indoor__text .h2 {
    white-space: normal;
  }
  .indoor__photo {
    width: 100%;
    height: 420px;
  }
  .indoor__nav {
    right: 50%;
    bottom: 60px;
  }
}

@media (max-width: 860px) {
  .about-who {
    padding-block: 24px 64px;
  }
  .about-who__lead {
    font-size: 21px;
  }
  .about-facts dd {
    font-size: 40px;
  }
  .whom {
    padding-block: 0 72px;
  }
  .whom__list {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .whom__title {
    font-size: 24px;
  }
  .indoor__card {
    padding: 32px;
    border-radius: 24px;
  }
  .indoor__note {
    font-size: 18px;
  }
  .indoor__photo {
    height: 320px;
  }
  .indoor__nav {
    bottom: 44px;
  }
  .indoor__arrow {
    width: 48px;
    height: 48px;
  }
  .faq {
    padding-block: 72px;
  }
  .faq-item__q {
    font-size: 19px;
    padding: 22px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item__a,
  .faq-item__sign::before,
  .faq-item__sign::after,
  .indoor__track {
    transition-duration: 1ms;
  }
}

.indoor__arrow[disabled] {
  opacity: 0.4;
  cursor: default;
}

/* ==========================================================================
   Страница «Цены»
   ========================================================================== */

.page-hero--prices .page-hero__bg {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* в макете поверх фото лежит мягкое затемнение к низу */
.page-hero--prices::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(102, 102, 102, 0), rgba(0, 0, 0, 0.2));
}

.page-hero--prices .page-hero__text {
  z-index: 2;
}

.page-hero--prices .page-hero__lead {
  width: auto;
  max-width: 600px;
}

.pricing {
  padding-block: 104px;
}

.pricing__inner {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.pricing__tabs {
  align-self: flex-start;
  width: auto;
}

.pricing__panel {
  display: flex;
  flex-direction: column;
  gap: 72px;
}

.pricing-group {
  display: flex;
  flex-direction: column;
  gap: 42px;
}

.pricing-group__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pricing__eyebrow {
  color: var(--bg-blue);
  font-size: 14px;
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
  text-transform: lowercase;
}

.pricing__grid {
  display: grid;
  gap: 24px;
}

.pricing__grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

.pricing__grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.pricing__grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.plan {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px;
  border: 1px solid var(--stroke-grey);
  border-radius: 20px;
  transition:
    border-color 420ms var(--ease-out),
    transform 420ms var(--ease-out),
    box-shadow 420ms var(--ease-out);
}

.plan__name {
  font-size: 20px;
  font-weight: 600;
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
}

.plan__terms {
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--text-body-grey);
}

.plan__price {
  margin-top: auto;
  padding-top: 18px;
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--bg-blue);
  font-variant-numeric: tabular-nums;
}

/* выделенный тариф «Прогресс» — лаймовая карточка из макета */
.plan--accent {
  background: var(--bg-accent);
  border-color: var(--bg-accent);
}

.plan--accent .plan__terms {
  color: rgba(36, 36, 36, 0.72);
}

.plan--accent .plan__price {
  color: var(--text-title-dark);
}

@media (hover: hover) and (pointer: fine) {
  .plan:hover {
    background: var(--bg-accent);
    border-color: var(--bg-accent);
  }

  .plan:hover .plan__terms {
    color: rgba(36, 36, 36, 0.72);
  }

  .plan:hover .plan__price {
    color: var(--text-title-dark);
  }
}



@media (max-width: 1200px) {
  .pricing__grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 860px) {
  .pricing {
    padding-block: 72px;
  }
  .pricing__inner {
    gap: 56px;
  }
  .pricing__grid--4,
  .pricing__grid--3,
  .pricing__grid--2 {
    grid-template-columns: 1fr;
  }
  .plan__price {
    font-size: 28px;
  }
}

/* Призыв на странице цен: свуш на фоне, как в блоке преимуществ */

.mission--deco {
  position: relative;
  z-index: 0;
  padding-block: 104px 196px;
}

/* подвал перекрывает хвост волны, поэтому она уходит вниз, а не режется */
.footer {
  position: relative;
  z-index: 1;
}

.mission__deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.cta-swoosh {
  position: absolute;
  left: -209px;
  top: calc(50% + 148.91px);
  transform: translateY(-50%);
  width: 1797.969px;
  height: 1171.815px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cta-swoosh__rot {
  position: relative;
  transform: rotate(-20.68deg);
  width: 1689.769px;
  height: 614.688px;
}

.cta-swoosh__rot img {
  position: absolute;
  inset: -7.73% -2.21% -5.18% -2.81%;
  width: auto;
  height: auto;
  max-width: none;
}

.mission--deco .mission__inner {
  position: relative;
  z-index: 1;
}

.mission--deco .mission__lead {
  width: 958px;
}

@media (max-width: 860px) {
  .mission--deco {
    padding-block: 72px 120px;
  }
  .cta-swoosh {
    left: -40%;
    width: 180%;
    height: auto;
    aspect-ratio: 1798 / 1172;
  }
  .cta-swoosh__rot {
    width: 94%;
    height: auto;
    aspect-ratio: 1690 / 615;
  }
  .cta-swoosh__rot img {
    width: 105.02%;
    height: 112.91%;
  }
}

/* --------------------------------------------------------------------------
   Герои страниц на телефоне: заголовок целиком, текст не под фигурами
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {
  /* nowrap + 88px обрезали «РАСПИСАНИЕ» и «ТРЕНЕРЫ» за краем экрана */
  .page-hero__text .h1 {
    font-size: clamp(40px, 12vw, 64px);
    white-space: normal;
  }

  /* вырезанные фигуры игроков ложились поверх лида и кнопок — на узком экране
     оставляем только фоновое фото */
  .page-hero__obj,
  .page-hero__blur,
  .sched-figure,
  .coaches-hero__obj {
    display: none;
  }

  .page-hero__text {
    top: auto;
    bottom: 32px;
  }

  .page-hero__actions .btn {
    width: 100%;
  }
}

/* ==========================================================================
   Мобильная навигация: кнопка-бургер и выпадающая панель
   ========================================================================== */

.burger {
  display: none;
  width: 45px;
  height: 45px;
  flex: none;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  place-items: center;
  transition:
    transform var(--press) var(--ease-out),
    background-color var(--press) ease;
}

.burger:active {
  transform: scale(0.94);
}

.burger:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.burger__box {
  position: relative;
  display: block;
  width: 18px;
  height: 14px;
}

.burger__box span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 260ms var(--ease-out), opacity 160ms ease;
}

.burger__box span:nth-child(1) { top: 0; }
.burger__box span:nth-child(2) { top: 6px; }
.burger__box span:nth-child(3) { top: 12px; }

.burger[aria-expanded='true'] .burger__box span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.burger[aria-expanded='true'] .burger__box span:nth-child(2) {
  opacity: 0;
}

.burger[aria-expanded='true'] .burger__box span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.nav-sheet {
  position: fixed;
  z-index: 99;
  top: 0;
  left: 20px;
  right: 20px;
  padding: 104px 20px 24px;
  border-radius: 12px;
  background: rgba(14, 80, 177, 0.92);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  flex-direction: column;
  gap: 20px;
  transform: translateY(-12px);
  opacity: 0;
  transition:
    transform 240ms var(--ease-out),
    opacity 200ms var(--ease-out);
}

.nav-sheet[data-open] {
  transform: none;
  opacity: 1;
}

.nav-sheet__nav {
  display: flex;
  flex-direction: column;
}

.nav-sheet__nav a {
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 20px;
  font-weight: 600;
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
  text-transform: lowercase;
  color: #fff;
  transition: color var(--press) ease;
}

.nav-sheet__nav a[aria-current='page'] {
  color: var(--bg-accent);
}

.nav-sheet__cta {
  width: 100%;
  height: 54px;
  padding-block: 0;
}

@media (hover: hover) and (pointer: fine) {
  .burger:hover {
    background: rgba(255, 255, 255, 0.24);
  }
  .nav-sheet__nav a:hover {
    color: var(--bg-accent);
  }
}

@media (max-width: 860px) {
  .header {
    height: auto;
    padding: 15px 12px;
    flex-wrap: nowrap;
  }
  .header__nav {
    display: none;
  }
  .header__actions {
    gap: 8px;
    align-items: center;
  }
  /* на телефоне в шапке остаётся одно действие и кнопка меню */
  .header__actions .btn--outline-white {
    display: none;
  }
  .header__actions .btn {
    height: 50px;
    padding: 0 18px;
    font-size: 15px;
  }
  .burger {
    display: grid;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-sheet,
  .burger__box span {
    transition-duration: 1ms;
  }
}

/* ==========================================================================
   Мобильный редизайн: центр в заголовках, ленты вместо сеток, подвал в две
   колонки. Ниже 860px страницы читаются как одна колонка сверху вниз.
   ========================================================================== */

@media (max-width: 860px) {
  /* заголовки секций без сопроводительного текста встают по центру */
  .directions__inner > .h2,
  .lesson-formats__head,
  .schedule__intro,
  .gallery__inner > .h2,
  .advantages__title {
    text-align: center;
  }

  .lesson-formats__head,
  .schedule__intro {
    align-items: center;
  }

  /* на телефоне интро и список слотов идут друг под другом, а не колонками */
  .schedule {
    flex-direction: column;
    gap: 40px;
  }

  .schedule__intro {
    width: 100%;
  }

  .schedule__list {
    width: 100%;
  }

  .lesson-formats__head .btn,
  .schedule__intro .btn {
    align-self: center;
  }

  /* время слота — главный ориентир в списке */
  .slot__time {
    font-size: 36px;
  }

  /* галерея листается лентой: сетка из трёх колонок на телефоне не читается */
  .gallery__grid {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    height: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .gallery__grid::-webkit-scrollbar {
    display: none;
  }

  .gallery__col {
    display: contents;
  }

  .gallery__grid figure {
    flex: 0 0 82%;
    height: 420px;
    scroll-snap-align: center;
  }

  .gallery__grid figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* подвал: бренд на всю ширину, ссылки в две колонки */
  .footer__main {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
    gap: 32px 20px;
  }

  .footer__brand {
    grid-column: 1 / -1;
  }

  .footer__col {
    white-space: normal;
  }
}

/* --------------------------------------------------------------------------
   Первый экран на телефоне по макету: высокий кадр, логотип сверху,
   плашка слева внизу — не на всю ширину
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {
  :root {
    /* 865 px при ширине 430 — первый экран главной занимает экран целиком */
    --hero-h: min(201.16vw, 900px);
    --page-hero-h: min(201.16vw, 900px);
  }

  .hero__logo {
    left: 4.42%;
    top: 21.62%;
    width: 91.16%;
    height: auto;
  }

  .hero__racket {
    left: 6.38%;
    top: 34.25%;
    width: 93.62%;
    height: 58.25%;
    object-fit: contain;
    object-position: bottom;
  }

  /* кадр вытянут вертикально — фон и игрока кадрируем, а не растягиваем */
  .hero__bg,
  .hero__photo {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }

  /* на телефоне подставляется отдельный вертикальный кадр — его не кадрируем */
  .hero__bg {
    object-fit: cover;
    object-position: center;
  }

  /* ракетка уже есть в самом кадре, отдельный слой её удваивал */
  .hero__racket {
    display: none;
  }

  /* на фоне и в вырезке один и тот же игрок: при узком кадре они расходятся
     и он двоится — оставляем только фон, как в макете (одно фото на весь экран) */
  .hero__photo {
    display: none;
  }

  .hero__plate {
    left: 20px;
    right: auto;
    top: auto;
    bottom: 5.32%;
    width: 68.92%;
    padding: 21px;
    border-radius: 11px;
    gap: 17px;
  }

  .hero__plate-cat {
    font-size: 11px;
  }

  .hero__plate-msg {
    gap: 5px;
  }

  .hero__plate-title {
    font-size: 30px;
    line-height: 1.05;
  }

  .hero__plate-sub {
    width: auto;
    font-size: 12px;
  }

  .hero__ball {
    display: block;
    position: absolute;
    left: 0.93%;
    top: 37.34%;
    width: 14.42%;
    height: auto;
    z-index: 1;
    pointer-events: none;
  }

  /* на светлых кадрах белый текст пропадал — уводим низ героя в синий */
  .page-hero::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 58%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
      to top,
      rgba(14, 80, 177, 0.88) 0%,
      rgba(14, 80, 177, 0.55) 45%,
      rgba(14, 80, 177, 0) 100%
    );
  }

  .page-hero__text {
    z-index: 2;
  }
}


.hero__frame picture {
  display: contents;
}

/* ==========================================================================
   Мобильный макет (кадр 430 из Figma) — значения сняты 1:1 с макетов
   «Мобильная - Главная» и одноимённых мобильных кадров остальных страниц.
   Блок идёт последним: он перекрывает общие правила без !important.
   ========================================================================== */

@media (max-width: 700px) {
  :root {
    --gutter: 20px;
    --bleed-pad: 20px;
  }

  /* ---------- Шапка: стеклянная плашка 398×82 с отступом 16 ---------- */
  .header,
  .header--wide {
    position: absolute;
    top: 28px;
    left: 16px;
    right: 16px;
    width: auto;
    height: auto;
    transform: none;
    padding: 15px 12px;
    border-radius: 12px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .header__nav {
    display: none;
  }

  .header__actions {
    gap: 8px;
    align-items: center;
  }

  /* «расписание» в шапке на телефоне нет — остаётся «записаться» и бургер */
  .header__actions .btn--outline-white {
    display: none;
  }

  .header__actions .btn {
    height: 50px;
    padding: 0 18px;
    font-size: 15px;
    line-height: 18.03px;
  }

  .burger {
    display: grid;
  }

  /* ---------- Первый экран ---------- */
  .hero__plate {
    left: 20px;
    right: auto;
    top: auto;
    bottom: 5.31%;
    width: 68.92%;
    padding: 21.28px;
    border-radius: 10.64px;
    gap: 16.72px;
    border-width: 0.76px;
    background: rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(1.52px);
    backdrop-filter: blur(1.52px);
  }

  .hero__plate-cat {
    font-size: 10.64px;
    line-height: 12.79px;
    letter-spacing: -0.01em;
    opacity: 0.8;
  }

  .hero__plate-msg {
    gap: 5.32px;
  }

  .hero__plate-title {
    font-size: 30.4px;
    line-height: 31.92px;
    letter-spacing: -0.02em;
  }

  .hero__plate-sub {
    width: auto;
    font-size: 12.16px;
    line-height: 14.62px;
    opacity: 0.8;
  }

  /* ---------- Секции: 80px сверху и снизу, поля 20px ---------- */
  .directions,
  .coaches,
  .gallery,
  .formats,
  .schedule:not(.schedule--inner) {
    padding-block: 80px;
  }

  /* на внутренних страницах блок тренеров идёт с полями 96 px */
  .coaches--tight {
    padding-block: 96px;
  }

  .coaches--tight .coaches__inner {
    gap: 42px;
  }

  .mission {
    padding: 80px 20px;
  }

  .gallery {
    padding-bottom: 0;
  }

  .directions__inner,
  .coaches__inner {
    gap: 40px;
  }

  .gallery__inner {
    gap: 40px;
  }

  /* ---------- «С чего начнём» ---------- */
  .directions__inner > .h2 {
    text-align: center;
  }

  .directions__cards {
    gap: 18px;
  }

  .dir-card {
    height: auto;
  }

  .dir-card__photo {
    height: 370px;
  }

  /* ---------- «Групповые»: карточка показывает кадр целиком ---------- */
  .formats {
    flex-direction: column;
    gap: 40px;
    align-items: stretch;
  }

  .formats__intro {
    width: 100%;
    min-height: 0;
    align-items: center;
    gap: 36px;
  }

  .formats__intro-top {
    gap: 36px;
    align-items: center;
  }

  .formats__intro .h2 {
    text-align: center;
  }

  .formats__intro .body-m {
    text-align: center;
    font-size: 18px;
    line-height: 27.9px;
  }

  .formats__slider-wrap {
    width: 100%;
    gap: 56px;
  }

  .formats__track {
    gap: 20px;
  }

  .fmt-card {
    flex: 0 0 100%;
    height: 645px;
  }

  /* на телефоне нет наведения — карточка сразу в «раскрытом» состоянии */
  .fmt-card--plain::after {
    border-color: var(--bg-accent);
  }

  .fmt-card__fill {
    opacity: 1;
  }

  .fmt-card--plain .fmt-card__body {
    display: none;
  }

  .fmt-card__over {
    opacity: 1;
    transform: none;
  }

  /* ---------- Расписание ---------- */
  .schedule__intro {
    align-items: center;
    text-align: center;
  }

  .schedule__desc {
    width: 100%;
    text-align: center;
  }

  .slot {
    flex-wrap: wrap;
    row-gap: 4px;
    padding: 22.83px 0 24.92px;
  }

  .slot__time {
    width: 100%;
    font-size: 32px;
    line-height: 35.2px;
  }

  .slot__name {
    width: 100%;
    line-height: 19.23px;
  }

  .slot__level {
    line-height: 16.83px;
  }

  .slot__arrow {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .slot {
    position: relative;
    padding-right: 60px;
  }

  /* ---------- Тренеры ---------- */
  .coaches__head {
    gap: 20px;
    align-items: center;
  }

  .coaches__head .h2,
  .coaches__head-desc {
    width: 100%;
    text-align: center;
  }

  .coaches__head-desc {
    font-size: 16px;
    line-height: 19.23px;
  }

  .coaches__slider {
    gap: 24px;
  }

  .coach {
    height: 560px;
  }

  /* ---------- Галерея ---------- */
  .gallery__inner > .h2 {
    text-align: center;
  }

  .gallery__grid {
    gap: 20px;
    scroll-padding-inline: 20px;
  }

  .gallery__grid figure {
    flex: 0 0 350px;
    height: 480px;
    border-radius: 20px;
  }

  /* ---------- Наша цель ---------- */
  .mission__inner {
    gap: 40px;
  }

  .mission__lead {
    width: 100%;
    font-size: 24px;
    line-height: 28.8px;
    letter-spacing: -0.01em;
  }

  .mission__buttons {
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* ---------- Преимущества ---------- */
  .advantages {
    padding-block: 80px;
  }

  .advantages__title {
    margin-bottom: 40px;
    padding-inline: 20px;
  }

  .advantages__list {
    padding: 0;
    flex-direction: column;
    align-items: center;
    gap: 21px;
  }

  .adv-card {
    flex: none;
    width: 290px !important;
    height: 340px !important;
  }

  /* ---------- События и новости ---------- */
  .news {
    height: auto;
    padding: 80px 20px;
    gap: 40px;
  }

  /* кнопка «все статьи» по макету уходит вниз на всю ширину */
  .news__head {
    display: contents;
  }

  .news__head-text {
    order: 1;
    gap: 12px;
  }

  .news__grid {
    order: 2;
    flex-direction: column;
    gap: 40px;
  }

  .news .news__head > .btn {
    order: 3;
    width: 100%;
  }

  .news__sub {
    font-size: 18px;
    line-height: 27.9px;
  }

  .news-card--big {
    width: 100%;
    height: 560px;
  }

  .news-card--big .news-card__photo {
    height: 299px;
  }

  .news-card--small {
    height: 207px;
    padding: 16px 0 16px 16px;
    gap: 12px;
  }

  .news-card--small .news-card__preview {
    width: 95px;
    height: 175px;
  }

  /* ---------- Контакты ---------- */
  .contacts {
    height: 933px;
  }

  .contacts__map {
    position: absolute;
    inset: 0;
    height: 100%;
  }

  .contacts .container {
    height: 100%;
  }

  .contacts__card {
    position: absolute;
    left: 25px;
    right: 25px;
    top: 413px;
    width: auto;
    height: 492px;
    margin: 0;
    padding: 32px;
    border-radius: 24px;
    gap: 24px;
  }

  /* ---------- Подвал ---------- */
  .footer,
  .footer--form {
    padding: 48px 20px;
    gap: 56px;
  }

  .footer__main {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
    gap: 32px 20px;
  }

  .footer__brand {
    grid-column: 1 / -1;
    align-items: flex-start;
    gap: 23px;
  }

  .footer__brand img {
    width: 220px;
    height: auto;
  }

  .footer__brand p {
    width: auto;
    text-align: left;
    font-size: 18px;
    line-height: 27.9px;
  }

  .footer__col {
    white-space: normal;
    gap: 16px;
  }

  .footer__col > span:first-child {
    line-height: 27.9px;
  }

  .footer__col a {
    line-height: 19.23px;
  }

  .footer__legal {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 7.4px;
    padding-top: 23px;
    font-size: 17px;
    line-height: 20.43px;
  }
}

@media (max-width: 700px) {
  /* декоративные мячи и клякса в макете телефона не участвуют */
  .advantages__deco {
    display: none;
  }

  /* переносы строк в заголовках взяты из макета */
  /* перенос строки в заголовке — как на главной в макете */
  .blue-block:has(.formats) .schedule__intro .h2 {
    max-width: 272px;
  }

  .advantages__title .h2 {
    max-width: 335px;
    margin-inline: auto;
  }

  /* на телефоне абзац переносится сам — жёсткий перенос ломает макет */
  .coaches__head-desc br {
    display: none;
  }

  /* лента маленьких новостей: по одной карточке с точками */
  .news__viewport {
    overflow: hidden;
  }

  .news__track {
    display: flex;
    flex-direction: row;
    gap: 20px;
    transition: transform 460ms var(--ease-out);
  }

  .news__row {
    display: contents;
  }

  .news-card--small {
    flex: 0 0 100%;
  }

  .news__dots {
    display: flex;
  }

  .news__small-col {
    gap: 40px;
  }
}

@media (max-width: 700px) {
  /* первый экран собран из трёх слоёв макета: пустой корт, вырезанный игрок,
     размытый мяч — координаты в процентах от кадра 430×865 */
  .hero__photo {
    display: block;
    left: 6.383%;
    top: 34.25%;
    width: 93.617%;
    height: 58.246%;
    object-fit: cover;
    object-position: center;
  }

  .hero__ball {
    left: 0.93%;
    top: 37.34%;
    width: 14.419%;
    height: 7.052%;
    object-fit: contain;
  }
}

@media (max-width: 700px) {
  /* карточка формата на телефоне показывает кадр целиком — как в макете */
  .fmt-card__photo {
    height: 100%;
  }

  .gallery__grid figure {
    scroll-snap-align: start;
  }

  /* шаг «заголовок → лента» 40, «лента → точки» 20 */
  .gallery__inner {
    gap: 20px;
  }

  .gallery__grid {
    margin-top: 20px;
  }
}

/* на десктопе лента не прокручивается — точки скрыты скриптом */
.gallery__dots[hidden] {
  display: none;
}

.gallery__dots {
  display: flex;
}

@media (max-width: 700px) {
  /* нижние углы первого экрана по макету телефона */
  .hero__frame {
    border-radius: 0 0 20px 20px;
  }

  /* картинки карточек «Теннис»/«Падел» кадрируются как в макете */
  .dir-card__photo picture {
    display: contents;
  }

  .directions__cards .dir-card:nth-child(1) .dir-card__photo img {
    object-position: 38.5% bottom;
  }

  .directions__cards .dir-card:nth-child(2) .dir-card__photo img {
    object-position: 57.9% center;
  }

  .gallery__grid figure {
    border-radius: 16px;
  }
}

@media (max-width: 700px) {
  /* ---------- Внутренние страницы: первый экран 430×620 из макета ---------- */
  :root {
    --page-hero-h: min(144.186vw, 620px);
  }

  .page-hero {
    border-radius: 0 0 20px 20px;
  }

  /* в мобильном макете кадр идёт без синей заливки поверх фото */
  .page-hero::after {
    display: none;
  }

  /* Новые мобильные кадры светлее прежних — белый заголовок на них терялся.
     Возвращаем синий увод низа: он уже описан выше, здесь только включаем. */
  .page-hero--padel::after,
  .page-hero--coaches::after,
  .page-hero--about::after {
    display: block;
  }

  .page-hero__text {
    left: 20px;
    right: 20px;
    top: auto;
    bottom: 31px;
    gap: 20px;
  }

  .page-hero__text .h1 {
    white-space: normal;
    font-size: 51.6px;
    line-height: 0.9;
  }

  .page-hero__lead {
    width: auto;
    font-size: 18px;
    line-height: 27.9px;
  }

  .page-hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .page-hero__actions .btn {
    width: 100%;
    height: 62px;
    padding-block: 0;
    font-size: 18px;
  }
}

@media (max-width: 700px) {
  /* ---------- «Форматы для каждой цели» на страницах теннис/падел ---------- */
  .lesson-formats {
    padding-block: 96px;
  }

  .lesson-formats__head {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 42px;
    padding-inline: 20px;
  }

  .lesson-formats__head .h2 {
    max-width: 330px;
  }

  .lesson-formats__note {
    width: 100%;
    text-align: left;
  }

  .lesson-formats__cards {
    padding-inline: 0;
    width: auto;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .lf-card {
    flex: none;
  }
}

@media (max-width: 700px) {
  /* выпадающее меню повторяет положение шапки: 16 px по краям, 28 px сверху */
  .nav-sheet {
    left: 16px;
    right: 16px;
    padding: 122px 20px 24px;
  }
}

/* --------------------------------------------------------------------------
   «Клуб внутри»: подпись проявляется вместе со сменой слайда
   -------------------------------------------------------------------------- */

/* уходит быстро, приходит чуть позже и мягче — так смена читается как одно
   движение, а не как два независимых текста */
.indoor__text {
  opacity: 1;
  transition: opacity 340ms var(--ease-out) 110ms;
}

.indoor__slide:not([data-active]) .indoor__text {
  opacity: 0;
  transition: opacity 150ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .indoor__text,
  .indoor__slide:not([data-active]) .indoor__text {
    opacity: 1;
    transition: none;
  }
}

@media (max-width: 700px) {
  /* мяч логотипа на стыке карточек «Теннис» и «Падел» (Group 2 из макета) */
  .directions__ball {
    display: block;
    /* 141 / 217 — размер мяча из мобильного макета */
    --ball-scale: 0.6498;
    left: 50%;
    top: calc(50% + 39.6px);
  }

  /* заголовок призыва в две строки — по центру */
  .mission__inner .h2 {
    text-align: center;
  }

  /* фото в «Клубе внутри» чуть вытянуто по вертикали */
  .indoor__photo {
    height: auto;
    aspect-ratio: 326 / 380;
  }
}

@media (max-width: 700px) {
  /* счётчик занимает всю ширину поля: минус слева, плюс справа, число по центру */
  .field__control--stepper {
    justify-content: space-between;
  }

  .field__control--stepper input {
    flex: 1 1 auto;
  }
}


@media (max-width: 860px) {
  /* Десктопная геометрия фона внутренних страниц снята из Figma и растягивает
     картинку (object-fit: fill). На телефоне и планшете пропорции кадра другие —
     из-за этого фото плющило, поэтому здесь фон просто кадрируется по месту. */
  .page-hero .page-hero__bg {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

/* ==========================================================================
   Форма записи: подсказки при неправильном заполнении и окно успеха
   ========================================================================== */

.field__error {
  display: none;
  margin: 8px 0 0;
  font-size: 14px;
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
  text-transform: lowercase;
  color: #ffc2c2;
}

.field[data-invalid] .field__error,
.consent[data-invalid] .field__error {
  display: block;
  animation: fieldErrorIn 160ms var(--ease-out) both;
}

@keyframes fieldErrorIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.field[data-invalid] .field__control {
  background: rgba(255, 138, 138, 0.18);
}

.field[data-invalid] .field__divider {
  background: #ff8a8a;
}

/* подпись у согласия переносится под строку с галочкой */
.consent {
  flex-wrap: wrap;
}

.consent .field__error {
  width: 100%;
  margin-left: 36px;
}

.consent[data-invalid] input {
  border-color: #ff8a8a;
}

@media (prefers-reduced-motion: reduce) {
  .field[data-invalid] .field__error,
  .consent[data-invalid] .field__error {
    animation: none;
  }
}

/* ---------- Окно «заявка отправлена» ---------- */

/* длинную форму на телефоне показываем шторкой снизу, короткое подтверждение —
   по центру: иначе оно жмётся к краю экрана */
.modal--note {
  align-items: center;
}

.modal--note .modal__window {
  width: min(460px, 100%);
  padding: 44px 32px 32px;
}

.note {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

.note__mark {
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: 999px;
  background: var(--bg-accent);
  display: grid;
  place-items: center;
}

.note__mark img {
  width: 28px;
  height: 28px;
}

.note__title {
  font-size: 28px;
  font-weight: 600;
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
  text-transform: lowercase;
}

.note__text {
  font-size: 18px;
  line-height: 1.55;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  color: rgba(255, 255, 255, 0.7);
}

.note__btn {
  margin-top: 8px;
  min-width: 180px;
}

@media (max-width: 700px) {
  .modal--note .modal__window {
    padding: 36px 24px 24px;
  }

  .note__title {
    font-size: 24px;
  }

  .note__text {
    font-size: 16px;
  }

  .note__btn {
    width: 100%;
  }
}

/* ==========================================================================
   Планшет
   Между телефоном (≤700) и десктопом. До этого диапазон 701–860 доставался
   телефонным правилам и выглядел как растянутая мобильная версия: всё в одну
   колонку во всю ширину. Здесь возвращаем две колонки и планшетные отступы.
   ========================================================================== */

@media (min-width: 701px) and (max-width: 860px) {
  :root {
    --gutter: 32px;
    --bleed-pad: 32px;
  }

  /* ---------- Шапка ---------- */
  .header {
    padding: 14px 24px;
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  .header__actions .btn {
    height: 52px;
    padding-inline: 22px;
  }

  /* ---------- Первый экран ---------- */
  :root {
    --hero-h: min(88vw, 700px);
    --page-hero-h: min(78vw, 620px);
  }

  .hero__logo {
    left: var(--gutter);
    top: 26%;
    width: min(62vw, 470px);
    height: auto;
  }

  /* плашка не на всю ширину — иначе первый экран читается как телефонный */
  .hero__plate {
    left: var(--gutter);
    right: auto;
    top: auto;
    bottom: 7%;
    width: min(56vw, 420px);
    padding: 24px;
    gap: 18px;
  }

  .hero__plate-title {
    font-size: 34px;
  }

  .page-hero__text {
    left: var(--gutter);
    right: var(--gutter);
    bottom: 48px;
  }

  .page-hero__lead {
    width: min(70%, 520px);
  }

  .page-hero__actions .btn {
    width: auto;
  }

  /* ---------- Две колонки вместо одной ---------- */
  .directions__cards {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .dir-card__photo {
    height: 260px;
  }

  /* сегменты внутри свёрстаны под диск 217 px и не тянутся за коробкой —
     поэтому размер задаём только масштабом, как и на телефоне */
  .directions__ball {
    display: block;
    --ball-scale: 0.691;
  }

  /* ленты показывают по две карточки */
  .fmt-card,
  .coach {
    flex: 0 0 calc((100% - 18px) / 2);
  }

  .fmt-card {
    height: 460px;
  }

  .fmt-card__photo {
    height: 330px;
  }

  .coach {
    height: 460px;
  }

  /* ---------- Галерея: две колонки кладки вместо ленты ---------- */
  .gallery__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    height: auto;
    overflow: visible;
  }

  .gallery__col {
    display: flex;
    flex: 0 0 calc(50% - 8px);
    gap: 16px;
  }

  .gallery__grid figure {
    flex: 1 1 auto;
    height: auto;
    scroll-snap-align: none;
  }

  /* ---------- Новости: большая карточка сверху, мелкие по две ---------- */
  .news {
    height: auto;
  }

  .news__grid {
    flex-direction: column;
    gap: 24px;
  }

  .news__row {
    flex-direction: row;
    gap: 16px;
  }

  .news-card--big {
    width: 100%;
    height: auto;
  }

  .news-card--big .news-card__photo {
    height: 320px;
  }

  .news-card--small .news-card__preview {
    width: 120px;
    height: 100%;
  }

  /* ---------- Подвал: колонки в один ряд ---------- */
  .footer__main {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
  }

  .footer__brand {
    flex: 0 0 100%;
    align-items: flex-start;
  }

  .footer__brand p {
    text-align: left;
  }
}

/* Карточки преимуществ: на планшете в контейнере не хватало 14 px, чтобы встали
   по две в ряд, и они выстраивались по одной. Убираем боковое поле списка. */
@media (min-width: 701px) and (max-width: 1200px) {
  .advantages__list {
    padding-inline: 0;
  }
}

/* --------------------------------------------------------------------------
   Первый экран на промежуточных ширинах: плашка привязана к низу кадра.
   Абсолютный top: 556 из макета 1440 уводил её за нижнюю границу везде,
   где экран ниже 839 px — то есть на всех ширинах меньше 1440.
   -------------------------------------------------------------------------- */

@media (min-width: 861px) {
  .hero__plate {
    top: auto;
    bottom: 9.06%;
  }
}

@media (min-width: 861px) and (max-width: 1439px) {
  .hero__logo {
    top: 30.9%;
  }

  .hero__plate {
    padding: 22px;
    gap: 16px;
  }

  .hero__plate-title {
    font-size: 32px;
  }
}

@media (min-width: 701px) and (max-width: 860px) {
  /* мелкие новости делят ряд поровну: телефонное flex: 0 0 auto выносило
     вторую карточку за правый край */
  .news-card--small {
    flex: 1 1 0;
    min-width: 0;
  }

  /* слот расписания снова в строку — в ширину планшета всё помещается */
  .slot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: nowrap;
  }

  .slot__time {
    width: 100px;
    flex: none;
  }

  .slot__name {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
  }

  .slot__level {
    flex: none;
  }

  /* мяч держим в полосе фотографий, иначе он наезжает на заголовок карточки */
  .directions__ball {
    top: 30%;
  }
}

@media (min-width: 701px) and (max-width: 860px) {
  /* сетки внутренних страниц: на планшете помещается по две карточки */
  .team__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }

  .pricing__grid--4,
  .pricing__grid--3,
  .pricing__grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .lf-card {
    flex: 0 0 calc((100% - 32px) / 2);
  }

  .whom__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 0 32px;
  }

  .steps__list {
    grid-template-columns: repeat(2, 1fr);
  }

  /* форма записи: имя и телефон, дата и время — парами */
  .field-row {
    flex-direction: row;
    gap: 24px;
  }
}

@media (min-width: 701px) and (max-width: 860px) {
  /* вырезанные фигуры на планшете наезжают на заголовок и кнопки — тот же кадр
     уже есть в фоне, поэтому дубль убираем, как и на телефоне */
  .page-hero__obj,
  .page-hero__blur,
  .sched-figure {
    display: none;
  }

  /* на «Тренерах» пара есть только в вырезанном слое — фон её не содержит,
     поэтому не прячем, а уводим вправо от заголовка и кнопок */
  .coaches-hero__obj {
    left: auto;
    right: -2%;
    width: 38%;
    bottom: 0;
  }

  .page-hero--coaches .page-hero__lead {
    max-width: 400px;
  }

  /* лёгкая заливка слева: на светлых кадрах белый текст иначе пропадает */
  .page-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
      to right,
      rgba(9, 38, 84, 0.66) 0%,
      rgba(9, 38, 84, 0.32) 48%,
      rgba(9, 38, 84, 0) 78%
    );
  }

  .page-hero__text {
    z-index: 2;
  }
}

@media (min-width: 701px) and (max-width: 860px) {
  /* ---------- Единая сетка ----------
     Новости и подвал оставались на телефонных 20 px, остальные секции уже
     жили на 32 px — заголовки не совпадали по левому краю. */
  .news {
    padding: 72px var(--bleed-pad);
  }

  .footer,
  .footer--form {
    padding: 56px var(--bleed-pad);
  }

  /* ---------- Вертикальный ритм ----------
     104 снизу + 104 сверху давали 208 px пустоты между секциями. */
  .directions,
  .coaches,
  .gallery {
    padding-block: 72px;
  }

  .advantages {
    padding-block: 72px;
  }

  .mission {
    padding-block: 64px;
  }

  /* ---------- Первый экран ----------
     Ракетка накрывала заголовок плашки: на 1440 она заходит только на её
     правый край, а на планшете плашка шире относительно кадра. */
  .hero__plate {
    width: min(46vw, 340px);
  }

  .hero__racket {
    left: 46%;
    width: 54%;
  }

  /* ---------- Карточки форматов ----------
     Белые подложки прижаты к низу, поэтому при разной длине подписи
     разъезжались по высоте. Фиксируем общую линию. */
  .fmt-card--plain .fmt-card__body {
    min-height: 132px;
    justify-content: center;
  }

  /* ---------- Галерея ----------
     В две колонки 12 фото в натуральных пропорциях давали 2500 px прокрутки. */
  .gallery__grid figure {
    flex: none;
  }

  .gallery__grid .g-420 {
    height: 300px;
  }

  .gallery__grid .g-360 {
    height: 260px;
  }

  .gallery__grid .g-280 {
    height: 205px;
  }

  .gallery__grid .g-220 {
    height: 160px;
  }

  .gallery__grid figure img {
    height: 100%;
    object-fit: cover;
  }
}

@media (min-width: 701px) and (max-width: 860px) {
  /* На 1440 ракетка намеренно выходит за нижний край кадра, но там она широкая
     и свес читается как приём. На планшете тот же свес висел обрезком над белой
     секцией — держим ракетку внутри первого экрана. */
  .hero__racket {
    top: auto;
    bottom: 0;
    height: 42%;
    object-fit: contain;
    object-position: bottom;
  }
}

@media (min-width: 701px) and (max-width: 860px) {
  /* ---------- Расписание ----------
     Телефонная раскладка складывала строку в столбик и оставляла половину
     ширины пустой. На планшете возвращаем четыре колонки. */
  .lesson {
    grid-template-columns: 84px minmax(0, 1fr) 120px auto;
    gap: 24px;
    row-gap: 12px;
  }

  .lesson__time {
    font-size: 30px;
  }

  .lesson__main {
    grid-column: 2;
  }

  .lesson__level {
    grid-column: 3;
    justify-self: start;
  }

  .lesson__spots {
    grid-column: 2 / 4;
  }

  .lesson__price {
    grid-column: 4;
    grid-row: 2;
    justify-self: end;
  }

  .lesson__btn {
    grid-column: 4;
    grid-row: 1;
  }

  /* ---------- Контакты ----------
     Карточка шла во всю ширину без скруглений и выпадала из сетки страницы. */
  .contacts__card {
    margin-inline: var(--bleed-pad);
    width: auto;
    border-radius: 24px;
    padding: 32px;
  }

  .contacts__map {
    height: 300px;
  }
}

@media (min-width: 701px) and (max-width: 860px) {
  /* Ракетку привязываем к правому краю плашки, а не к фиксированному проценту:
     при 701–790 плашка упирается в 46vw и фиксированный отступ её не спасал. */
  :root {
    --plate-w: min(46vw, 340px);
  }

  .hero__plate {
    width: var(--plate-w);
  }

  .hero__racket {
    left: calc(var(--bleed-pad) + var(--plate-w) + 8px);
    width: calc(100% - var(--bleed-pad) - var(--plate-w) - 8px);
  }
}

@media (min-width: 701px) and (max-width: 860px) {
  /* hero-racket.png — вырезка того же кадра с растушёванным краем. Чтобы край
     не давал прямой срез, слой должен масштабироваться ровно как фон: фон здесь
     кадрируется по высоте (cover), поэтому считаем его ширину от высоты экрана
     и ставим ракетку в те же доли кадра, что и на макете 1440. */
  .hero__racket {
    display: block;
    /* фон кадрируется по высоте, поэтому его масштаб задаёт высота экрана;
       доли кадра те же, что на макете 1440 — по вертикали проценты совпадают */
    left: calc(49.5835% - 0.426706 * var(--hero-h));
    width: calc(0.890363 * var(--hero-h));
    top: 58.641%;
    height: 48.272%;
    bottom: auto;
    object-fit: fill;
    object-position: center;
  }

  /* карточка контактов упиралась в подвал — её скруглённый низ съедался */
  .contacts {
    padding-bottom: 56px;
  }
}

@media (min-width: 701px) and (max-width: 860px) {
  /* ---------- Галерея: лента вместо кладки ---------- */
  .gallery__grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    height: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--bleed-pad);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .gallery__grid::-webkit-scrollbar {
    display: none;
  }

  .gallery__col {
    display: contents;
  }

  .gallery__grid figure {
    flex: 0 0 calc((100% - 16px) / 2);
    height: 420px;
    scroll-snap-align: start;
    border-radius: 16px;
  }

  .gallery__grid figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .gallery__inner {
    gap: 20px;
  }

  .gallery__grid {
    margin-top: 20px;
  }

  /* ---------- Выравнивание по центру ---------- */
  .formats__intro {
    align-items: center;
    text-align: center;
  }

  .formats__intro-top {
    align-items: center;
  }

  /* заголовок новостей и кнопка снова в одну строку, как на десктопе */
  .news__head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
  }
}

@media (min-width: 701px) and (max-width: 860px) {
  /* высоты плиток кладки перебивали слайдер — в ленте все слайды равны */
  .gallery__grid .g-420,
  .gallery__grid .g-360,
  .gallery__grid .g-280,
  .gallery__grid .g-220 {
    height: 420px;
  }

  /* На планшете наведения нет, поэтому карточка формата сразу показывает
     видео с подписью сверху — как на телефоне. Иначе ролик не увидеть. */
  .fmt-card__fill {
    opacity: 1;
  }

  .fmt-card--plain .fmt-card__body {
    display: none;
  }

  .fmt-card__over {
    opacity: 1;
    transform: none;
  }

  .fmt-card--plain::after {
    border-color: var(--bg-accent);
  }

  .fmt-card__photo {
    height: 100%;
  }
}

/* --------------------------------------------------------------------------
   Фон секции новостей задан геометрией из макета 1440 с object-fit: fill.
   Ниже десктопа секция становится узкой и высокой, и фотографию плющило
   (на 820 показывалась с отношением 0.60 при 1.78 у файла) — кадрируем.
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
  .news__bg {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

/* --------------------------------------------------------------------------
   Точки пагинации: видимый кружок остаётся 8–10 px, но область нажатия
   вырастает до 24 px — иначе по ним трудно попасть пальцем.
   -------------------------------------------------------------------------- */

/* Состояния точек объявлены сокращённым `background`, а оно сбрасывает
   background-clip — без второго селектора активная точка заливалась целиком
   на все 26 px области нажатия и выглядела жирной кляксой. */
.dots button,
.dots button[aria-selected='true'] {
  box-sizing: content-box;
  padding: 8px;
  /* отрицательные поля возвращают прежний шаг 18 px между кружками */
  margin-inline: -3px;
  background-clip: content-box;
}

.dots {
  gap: 0;
}

/* --------------------------------------------------------------------------
   Вырезанная фигура на внутренних страницах лежит выше текста (z-index 3),
   и на узких десктопных ширинах нога теннисистки ложилась на кнопку
   «записаться на тренировку». Текст и кнопки всегда сверху.
   -------------------------------------------------------------------------- */

/* поднимать сам текст бесполезно: порядок решается на уровне .container,
   который лежит с фигурой в одном контексте наложения */
.page-hero > .container {
  z-index: 5;
}

/* --------------------------------------------------------------------------
   Между 861 и 1200 лента форматов разворачивается на всю ширину блока, но
   карточки остаются шириной 250 px из десктопного макета и жмутся влево —
   справа оставалась мёртвая синяя полоса до 334 px. Пусть делят ширину.
   -------------------------------------------------------------------------- */

@media (min-width: 861px) and (max-width: 1200px) {
  .fmt-card {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* Подложка карточки формата прижата к низу, поэтому при подписи в две строки
   она начиналась выше соседних и заголовки разъезжались на 17 px.
   Общая минимальная высота держит их на одной линии при любой ширине. */

.fmt-card--plain .fmt-card__body {
  min-height: 120px;
}

/* --------------------------------------------------------------------------
   На 861–1200 синий блок раскладывается в колонку, но вводные части остались
   выключенными влево — справа зияла пустота на треть ширины. Центрируем,
   как это уже сделано на планшете.
   -------------------------------------------------------------------------- */

@media (min-width: 861px) and (max-width: 1200px) {
  .formats__intro,
  .schedule__intro {
    align-items: center;
    text-align: center;
  }

  .formats__intro-top {
    align-items: center;
  }

  .formats__intro .body-m,
  .schedule__desc {
    max-width: 760px;
  }

  .schedule__desc {
    width: 100%;
  }

  /* при flex-direction: column и align-items: flex-start список слотов
     сжимался по содержимому и занимал половину ширины блока */
  .schedule__list {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Диапазон 861–1200: карточки преимуществ вставали 3 + 1, а карточка контактов
   шла во всю ширину без скруглений и отступов.
   -------------------------------------------------------------------------- */

@media (min-width: 861px) and (max-width: 1200px) {
  /* ширины хватает ровно на три карточки — ограничиваем колонку, чтобы
     раскладка была честной сеткой 2 × 2, а не «три и один» */
  .advantages__list {
    max-width: 680px;
    margin-inline: auto;
  }

  .contacts__card {
    margin-inline: var(--bleed-pad);
    width: auto;
    border-radius: 24px;
    padding: 36px;
  }

  .contacts {
    padding-bottom: 64px;
  }

  .contacts__map {
    height: 340px;
  }
}

/* ==========================================================================
   Страницы статей
   ========================================================================== */

.page-hero--article .page-hero__bg {
  filter: brightness(0.62) saturate(0.9);
}

.page-hero--article .page-hero__text {
  max-width: 860px;
  gap: 24px;
}

.article-title {
  font-size: clamp(34px, 4.2vw, 60px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
  text-transform: lowercase;
  color: rgba(255, 255, 255, 0.75);
}

.article {
  padding-block: 96px;
}

.article__inner {
  display: flex;
  align-items: flex-start;
  gap: 72px;
}

.article__body {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.article__lead {
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--text-title-dark);
}

.article__body p {
  font-size: 19px;
  line-height: 1.68;
  letter-spacing: -0.01em;
  color: rgba(36, 36, 36, 0.82);
}

.article__body h2 {
  margin-top: 18px;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.article__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.article__list li {
  position: relative;
  padding-left: 30px;
  font-size: 19px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: rgba(36, 36, 36, 0.82);
}

.article__list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 12px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--bg-accent);
}

/* нумерация только там, где содержание действительно последовательность */
.article__steps {
  counter-reset: step;
}

.article__steps li {
  padding-left: 52px;
  counter-increment: step;
}

.article__steps li::before {
  content: counter(step);
  left: 0;
  top: 2px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--bg-blue);
}

.article__quote {
  margin: 8px 0;
  padding-left: 26px;
  border-left: 3px solid var(--bg-accent);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.article__figure {
  margin: 10px 0;
  border-radius: 20px;
  overflow: hidden;
}

.article__figure img {
  width: 100%;
  height: 420px;
  object-fit: cover;
}

.article__figure figcaption {
  padding-top: 12px;
  font-size: 15px;
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
  color: var(--text-body-grey);
}

.article__aside {
  flex: 0 0 300px;
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px;
  border-radius: 24px;
  background: var(--bg-blue);
  color: #fff;
}

.article__aside h2 {
  font-size: 22px;
  font-weight: 600;
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
}

.article__aside p {
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.72);
}

.article__aside .btn {
  width: 100%;
}

/* ---------- Другие статьи ---------- */

.related {
  padding-block: 96px;
  background: var(--bg-secondary);
}

.related__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.related-card {
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--stroke-grey);
  color: inherit;
  transition:
    transform 420ms var(--ease-out),
    box-shadow 420ms var(--ease-out),
    border-color 420ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .related-card:hover {
    transform: translateY(-6px);
    border-color: var(--text-title-dark);
    box-shadow: 0 20px 44px rgba(14, 80, 177, 0.14);
  }
}

.related-card__photo {
  height: 200px;
  flex: none;
  overflow: hidden;
}

.related-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.related-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
}

.related-card__date {
  font-size: 14px;
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
  text-transform: lowercase;
  color: var(--text-body-grey);
}

.related-card__title {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* ---------- Лента статей ---------- */

.articles {
  padding-block: 96px;
}

.articles__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.articles__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.articles__grid .related-card--wide {
  grid-column: span 3;
  flex-direction: row;
}

.articles__grid .related-card--wide .related-card__photo {
  width: 48%;
  height: 340px;
}

.articles__grid .related-card--wide .related-card__body {
  justify-content: center;
  gap: 16px;
  padding: 40px;
}

.articles__grid .related-card--wide .related-card__title {
  font-size: 32px;
  line-height: 1.15;
}

@media (max-width: 1200px) {
  .article__inner {
    gap: 48px;
  }

  .article__aside {
    flex: 0 0 260px;
  }
}

@media (max-width: 1024px) {
  .article__inner {
    flex-direction: column;
  }

  .article__body {
    max-width: none;
  }

  .article__aside {
    position: static;
    width: 100%;
    flex: none;
  }

  .related__grid,
  .articles__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .articles__grid .related-card--wide {
    grid-column: span 2;
  }
}

@media (max-width: 860px) {
  .article {
    padding-block: 72px;
  }

  .related,
  .articles {
    padding-block: 72px;
  }

  .article__lead {
    font-size: 21px;
  }

  .article__body p,
  .article__list li {
    font-size: 17px;
  }

  .article__body h2 {
    font-size: 24px;
  }

  .article__figure img {
    height: 260px;
  }
}

@media (max-width: 700px) {
  .related__grid,
  .articles__grid {
    grid-template-columns: 1fr;
  }

  .articles__grid .related-card--wide {
    grid-column: span 1;
    flex-direction: column;
  }

  .articles__grid .related-card--wide .related-card__photo {
    width: 100%;
    height: 220px;
  }

  .articles__grid .related-card--wide .related-card__body {
    padding: 22px;
  }

  .articles__grid .related-card--wide .related-card__title {
    font-size: 22px;
  }

  .article__quote {
    font-size: 19px;
  }
}

/* Вся карточка новости кликабельна, а не только подпись «читать» */

.news-card {
  position: relative;
}

.news-card__more::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* лид статьи — обычным регистром: строчные буквы из макета страниц разделов
   к заголовку материала не относятся */
.page-hero--article .page-hero__lead {
  text-transform: none;
  max-width: 640px;
}

/* Обложка статьи всегда кадрируется: карточки новостей вертикальные,
   а шапка широкая — при object-fit: fill из общего правила фото плющило. */
.page-hero--article .page-hero__bg {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.related-card__lead {
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--text-body-grey);
}

/* --------------------------------------------------------------------------
   Правки промежуточных ширин и стыков блоков
   -------------------------------------------------------------------------- */

/* «Кто мы»: в колонку уходим только на планшете, и фото там кадрируем —
   на всю ширину оно занимало пол-экрана */
@media (max-width: 860px) {
  .about-who__row {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
  }

  .about-who__collage {
    width: 100%;
    max-width: 560px;
    height: auto;
    margin-inline: auto;
  }
}

/* Текст первого экрана привязан к низу: абсолютный top: 314 снят с макета 1440,
   и на узких десктопных ширинах кнопки упирались в нижний край кадра. */
@media (min-width: 861px) and (max-width: 1439px) {
  .page-hero__text {
    top: auto;
    bottom: 21.35%;
  }
}

/* Смежные синие блоки: расписание переходит в форму записи, и скругления
   на стыке рисовали лишний шов. */
.blue-block:has(+ .footer--form),
.blue-block:has(+ .footer) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.blue-block + .footer--form,
.blue-block + .footer {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Активная страница в подвале */
.footer__col a[aria-current='page'] {
  color: var(--bg-accent);
}

/* --------------------------------------------------------------------------
   Умная шапка на телефоне и планшете: прячется при прокрутке вниз
   и возвращается при прокрутке вверх.
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .header {
    position: fixed;
    transition:
      transform 320ms var(--ease-out),
      background-color 420ms ease,
      border-color 420ms ease;
  }

  .header.is-hidden {
    /* уводим за верхний край вместе с собственным отступом */
    transform: translateY(calc(-100% - 32px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .header {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Обложка статьи: на большом экране она занимала весь кадр целиком —
   для материала это перебор, ограничиваем высоту.
   -------------------------------------------------------------------------- */

.page-hero--article {
  height: clamp(440px, 42vw, 640px);
}

/* --------------------------------------------------------------------------
   Мяч в логотипе шапки крутится при наведении — как в логотипе первого экрана
   -------------------------------------------------------------------------- */

.header__logo-ball {
  position: absolute;
  left: 72.55%;
  top: 16.09%;
  width: 21.17%;
  height: 83.91%;
  background: url('../img/logo-ball.svg') center / contain no-repeat;
  pointer-events: none;
}

/* Тот же прокрут с подскоком, что у мяча в блоке «теннис / падел»:
   по клику мяч отыгрывает анимацию, и только потом уходим на главную. */
@keyframes headerBallSpin {
  0% {
    transform: rotate(0turn) scale(1);
  }
  55% {
    transform: rotate(1.35turn) scale(1.1);
  }
  100% {
    transform: rotate(2turn) scale(1);
  }
}

.header__logo-ball.is-spinning {
  animation: headerBallSpin 950ms cubic-bezier(0.5, 0, 0.15, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .header__logo-ball.is-spinning {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Планшет: в ленте форматов помещаются все три карточки
   -------------------------------------------------------------------------- */

@media (min-width: 701px) and (max-width: 860px) {
  .fmt-card {
    flex: 0 0 calc((100% - 36px) / 3);
    height: 420px;
  }

  .fmt-card__over {
    padding: 18px;
    gap: 6px;
  }

  .fmt-card__over .sub-h1 {
    font-size: 19px;
  }

  .fmt-card__over .fmt-card__sub {
    font-size: 13px;
  }

  /* нечётная карточка в двухколоночной сетке занимает ряд целиком,
     чтобы не висеть половинкой */
  .steps__list > *:last-child:nth-child(odd),
  .whom__list > *:last-child:nth-child(odd),
  .pricing__grid--3 > *:last-child:nth-child(odd),
  .team__grid > *:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (min-width: 861px) and (max-width: 1200px) {
  .steps__list > *:last-child:nth-child(odd),
  .whom__list > *:last-child:nth-child(odd),
  .pricing__grid--3 > *:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* --------------------------------------------------------------------------
   Статьи на большом экране
   -------------------------------------------------------------------------- */

/* Текст обложки прижат к низу: высота шапки теперь зависит от ширины окна,
   и фиксированный top: 314px срезал лид у длинных заголовков. */
@media (min-width: 861px) {
  .page-hero--article .page-hero__text {
    top: auto;
    bottom: 48px;
    gap: 18px;
  }
}

/* Колонка чтения не должна расти вместе с экраном: шире 1440 страница статьи
   ведёт себя так же, как на 1440, — иначе справа оставалось до 730 px пустоты. */
@media (min-width: 1441px) {
  .page-article .container {
    max-width: 1440px;
  }
}

/* Врезка прижата к правому краю — так она встаёт на одну линию с сеткой
   «читайте также» под ней, а не висит посреди пустого места. */
@media (min-width: 1201px) {
  .article__inner {
    justify-content: space-between;
  }
}

/* --------------------------------------------------------------------------
   Одинокая карточка в последнем ряду разворачивается на всю ширину блока
   и ложится горизонтально — иначе она висит огрызком слева. Раскладка
   привязана к числу колонок: правило для двух колонок на трёх ловило
   обычную третью карточку и разворачивало её боком.
   -------------------------------------------------------------------------- */

/* три колонки */
@media (min-width: 1025px) {
  .articles__grid > .related-card:last-child:nth-child(3n + 2),
  .related__grid > .related-card:last-child:nth-child(3n + 1) {
    grid-column: span 3;
    flex-direction: row;
  }

  .articles__grid > .related-card:last-child:nth-child(3n + 2) .related-card__photo,
  .related__grid > .related-card:last-child:nth-child(3n + 1) .related-card__photo {
    width: 48%;
    height: 340px;
    flex: none;
  }

  .articles__grid > .related-card:last-child:nth-child(3n + 2) .related-card__body,
  .related__grid > .related-card:last-child:nth-child(3n + 1) .related-card__body {
    justify-content: center;
    gap: 16px;
    padding: 40px;
  }

  .articles__grid > .related-card:last-child:nth-child(3n + 2) .related-card__title,
  .related__grid > .related-card:last-child:nth-child(3n + 1) .related-card__title {
    font-size: 28px;
    line-height: 1.15;
  }
}

/* две колонки */
@media (min-width: 701px) and (max-width: 1024px) {
  .articles__grid > .related-card:last-child:nth-child(2n),
  .related__grid > .related-card:last-child:nth-child(2n + 1) {
    grid-column: span 2;
    flex-direction: row;
  }

  .articles__grid > .related-card:last-child:nth-child(2n) .related-card__photo,
  .related__grid > .related-card:last-child:nth-child(2n + 1) .related-card__photo {
    width: 48%;
    height: 300px;
    flex: none;
  }

  .articles__grid > .related-card:last-child:nth-child(2n) .related-card__body,
  .related__grid > .related-card:last-child:nth-child(2n + 1) .related-card__body {
    justify-content: center;
    gap: 16px;
    padding: 40px;
  }

  .articles__grid > .related-card:last-child:nth-child(2n) .related-card__title,
  .related__grid > .related-card:last-child:nth-child(2n + 1) .related-card__title {
    font-size: 28px;
    line-height: 1.15;
  }
}