/* ==========================================================================
   ФитнесТут — адаптив
   Подключается ПОСЛЕ style.css, поэтому только переопределяет десктоп.

   Логика:
   • ≤ 1024px — «планшет»: десктопная композиция сохраняется (строки,
     колонки, крупный Bebas), но все размеры плавно масштабируются через
     clamp() и vw.
   • ≤ 700px  — «телефон»: колонки складываются в стопку, шрифты остаются
     крупными и характерными.
   ========================================================================== */

@media (max-width: 1024px) {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  button {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  /* ======================================================================
     HERO + OFFER (слайдер из двух экранов)
     ====================================================================== */

  /* Высота экрана вместо жёстких 1125px.
     Первая строка — запасная для старых браузеров без svh. */
  .slider > section,
  .fit {
    height: clamp(640px, 100vh, 1100px);
    height: clamp(640px, 100svh, 1100px);
  }

  .slider > section {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* ---------- Hero ---------- */

  .fit {
    background-position: 62% center;
  }

  .fit-top {
    top: clamp(20px, 5vw, 60px);
    left: clamp(20px, 5vw, 60px);
    right: clamp(20px, 5vw, 60px);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .fit-top img {
    width: min(62vw, 420px);
    height: auto;
  }

  .fit-top__paragraph1,
  .fit-top__paragraph2 {
    font-size: clamp(15px, 3.6vw, 31px);
    line-height: 1.3;
  }

  .fit-top__paragraph1 {
    margin-top: clamp(12px, 3vw, 39px);
  }

  .fit-block {
    padding: clamp(150px, 34vw, 320px) clamp(20px, 6vw, 80px) 0;
  }

  .fit-block h6 {
    font-size: clamp(60px, 17vw, 130px);
    line-height: 0.95;
  }

  .fit-block p {
    font-size: clamp(90px, 26vw, 217px);
    line-height: 0.9;
  }

  .fit-block button {
    margin-top: clamp(28px, 7vw, 90px);
    width: 100%;
    max-width: 420px;
    font-size: clamp(18px, 4.6vw, 40px);
    letter-spacing: 0.5px;
    padding: 0.7em 1em;
    border-width: 2px;
    border-radius: 16px;
  }

  .fit-logo {
    top: auto;
    bottom: clamp(16px, 4vw, 40px);
    right: clamp(16px, 4vw, 40px);
    width: clamp(96px, 24vw, 250px);
    height: auto;
  }

  /* ---------- Offer ---------- */

  .offer {
    margin: 0;
    padding: clamp(20px, 4vw, 40px) clamp(20px, 5vw, 60px)
      clamp(20px, 4vw, 40px);
  }

  .offer-container {
    flex: 1;
    min-height: 0;
    width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
  }

  .offer-top {
    column-gap: clamp(12px, 3vw, 24px);
    align-items: flex-start;
  }

  .offer-top img {
    width: clamp(180px, 38vw, 539px);
    height: auto;
  }

  .offer-top__paragraph1,
  .offer-top__paragraph2 {
    font-size: clamp(15px, 3vw, 31px);
    line-height: 1.3;
  }

  /* Планшет: как на десктопе — текст слева, картинка справа */
  .offer-block {
    flex: 1;
    min-height: 0;
    margin-top: clamp(16px, 4vw, 60px);
    align-items: center;
    column-gap: clamp(8px, 2vw, 24px);
  }

  .offer-block > div {
    flex: 0 0 auto;
  }

  .offer-block > img {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    align-self: stretch;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    object-position: right center;
  }

  .offer-block span,
  .offer-blockPrice span {
    display: block;
    font-size: clamp(56px, 13vw, 200px);
    line-height: 0.95;
  }

  .offer-blockPrice {
    align-items: baseline;
    column-gap: 0.12em;
  }

  .offer-blockPrice span {
    display: inline-block;
  }

  .offer-blockSpan {
    font-size: clamp(100px, 26vw, 380px) !important;
    -webkit-text-stroke: clamp(2px, 0.4vw, 4px) #000 !important;
  }

  .offer-footer {
    flex: none;
    margin-top: clamp(16px, 3vw, 46px);
  }

  .offer-logo {
    width: clamp(90px, 18vw, 250px);
    height: auto;
  }

  .offer-but {
    row-gap: clamp(8px, 1.5vw, 16px);
  }

  .offer-but p {
    font-size: clamp(14px, 2.6vw, 35px);
  }

  .offer-but button {
    font-size: clamp(16px, 3.4vw, 40px);
    letter-spacing: 0.5px;
    padding: 0.6em 1.6em;
    border-width: 2px;
    border-radius: 16px;
  }

  /* ======================================================================
     «О НАШЕМ КЛУБЕ» + зоны
     ====================================================================== */

  .club-text {
    height: auto;
    padding: clamp(150px, 40vw, 400px) 20px clamp(60px, 14vw, 140px);
    font-size: clamp(64px, 24vw, 231px);
    line-height: 0.95;
  }

  .fitness-zones {
    width: 100%;
    min-height: 0;
  }

  .fitness-zones::after {
    background-size: cover;
    background-position: center;
  }

  .fitness-zones__glow {
    width: 100%;
    left: 0;
  }

  .fitness-zones__grid {
    width: 100%;
    max-width: 1268px;
    height: auto;
    padding: clamp(32px, 6vw, 99px) clamp(20px, 5vw, 60px)
      clamp(48px, 8vw, 80px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-column-gap: clamp(16px, 3vw, 108px);
    grid-row-gap: clamp(16px, 3vw, 89px);
  }

  .fitness-zone {
    width: 100%;
    min-height: clamp(84px, 14vw, 133px);
    padding: clamp(18px, 3vw, 24px) clamp(20px, 3.4vw, 27px);
    border-radius: 20px;
  }

  .zone-title {
    font-size: clamp(20px, 3.4vw, 48px);
    letter-spacing: -0.3px;
  }

  .zone-text {
    font-size: clamp(14px, 2.2vw, 25px);
  }

  .fitness-zone.active .zone-text {
    max-height: 420px;
    margin-top: 12px;
  }

  .scroll-bar {
    margin-top: clamp(60px, 12vw, 180px);
  }

  .ticker-title {
    font-size: clamp(32px, 6vw, 72px);
    margin-top: 4px;
  }

  .ticker-title > span {
    padding-right: 30px;
  }

  /* ======================================================================
     ТАРИФЫ
     ====================================================================== */

  .plans {
    padding: 24px 0 40px;
  }

  .plans__title {
    font-size: clamp(72px, 24vw, 231px);
    line-height: 1;
    margin-top: clamp(48px, 12vw, 180px);
  }

  .plans__viewport {
    width: 100%;
    max-width: 1470px;
  }

  .plan {
    padding: clamp(24px, 5vw, 80px) clamp(20px, 4vw, 40px) 32px;
  }

  /* [←]  Заголовок  [пустышка для симметрии] */
  .plan__top {
    gap: 12px;
    margin: 0 0 clamp(16px, 3vw, 32px);
    justify-content: space-between;
  }

  .plan__top::after {
    content: '';
    flex: 0 0 clamp(56px, 12vw, 120px);
  }

  .plan__back {
    flex: 0 0 clamp(56px, 12vw, 120px);
    width: clamp(56px, 12vw, 120px);
    height: auto;
  }

  .plan__back img {
    width: 100%;
    height: auto;
  }

  .plan__title {
    flex: 1;
    text-align: center;
    font-size: clamp(26px, 6vw, 70px);
    line-height: 1.1;
  }

  .plan__body {
    gap: clamp(16px, 3vw, 30px);
    align-items: center;
    flex-grow: 0;
  }

  .plan__img {
    flex: 0 0 40%;
    width: 40%;
  }

  .plan__img img {
    width: 100%;
    height: auto;
  }

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

  .plan__list {
    margin: 0 0 clamp(10px, 2vw, 16px);
  }

  .plan__list li {
    font-size: clamp(14px, 2.5vw, 31px);
    line-height: 1.35;
    padding-left: 22px;
    margin-bottom: 4px;
  }

  .plan__price {
    font-size: clamp(26px, 4.8vw, 70px);
    line-height: 1.1;
  }

  .plan__price span {
    font-size: clamp(14px, 2.2vw, 32px);
    display: inline-block;
  }

  .plan__bottom {
    gap: clamp(12px, 3vw, 120px);
    margin-top: clamp(24px, 4vw, 50px);
  }

  /* Обе кнопки — с пропорциями SVG-стрелки (539:106), поэтому рамка
     стрелки не сплющивается и кнопки всегда одного размера */
  .plan__period,
  .plan__next {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: auto;
    aspect-ratio: 539 / 106;
    font-size: clamp(16px, 3vw, 36px);
    border-radius: 16px;
  }

  .plan__next img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* ======================================================================
     ГАЛЕРЕЯ
     ====================================================================== */

  .gallery {
    margin-top: clamp(64px, 10vw, 120px);
  }

  .gallery-text {
    margin-left: clamp(20px, 6vw, 13%);
    margin-bottom: clamp(28px, 4vw, 40px);
    font-size: clamp(30px, 6vw, 70px);
  }

  .gallery-block {
    width: 100%;
    max-width: 1195px;
    padding: 0 clamp(16px, 4vw, 40px);
  }

  /* Пропорции десктопа: картинка = 77% ширины, нижняя смещена на 23% */
  .gallery-item {
    width: 77%;
  }

  .gallery-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 922 / 527;
    object-fit: cover;
  }

  .gallery-item--bottom {
    margin-left: 23%;
    margin-top: -4.4%;
  }

  .gallery-item--top::before {
    top: -10%;
    right: -21.7%;
    width: 58.2%;
    height: auto;
    aspect-ratio: 537 / 492;
  }

  .gallery-item--bottom::before {
    top: 11.4%;
    left: -39%;
    width: 39.6%;
    height: auto;
    aspect-ratio: 365 / 299;
  }

  /* ======================================================================
     ЗАЯВКА
     ====================================================================== */

  .feedback {
    width: calc(100% - 40px);
    max-width: 1023px;
    margin: clamp(64px, 10vw, 120px) auto;
  }

  .feedback__title {
    font-size: clamp(90px, 30vw, 292px);
    margin-bottom: -0.27em;
  }

  .feedback__subtitle {
    font-size: clamp(48px, 14vw, 144px);
    margin-top: 16px;
  }

  .feedback__form {
    padding: clamp(28px, 6vw, 99px) clamp(20px, 6vw, 195px)
      clamp(32px, 7vw, 110px) clamp(20px, 6vw, 129px);
    gap: clamp(20px, 4vw, 97px);
    border-radius: clamp(24px, 4vw, 40px);
  }

  .feedback__field {
    gap: clamp(10px, 1.6vw, 21px);
  }

  .feedback__label {
    font-size: clamp(16px, 2.6vw, 35px);
  }

  .feedback__input {
    width: 100%;
    height: clamp(52px, 9vw, 149px);
    font-size: 16px; /* 16px+ — чтобы iOS не зумил страницу при фокусе */
    border-radius: clamp(14px, 2.4vw, 25px);
  }

  .feedback__submit {
    margin: 0;
    align-self: center;
    width: min(100%, 520px);
    min-width: 0;
    min-height: clamp(56px, 9vw, 96px);
    padding: 0.3em 0.8em;
    font-size: clamp(22px, 7vw, 102px);
    border-radius: 18px;
  }

  /* ======================================================================
     ТРЕНЕРЫ
     ====================================================================== */

  /* Секция на мобильном намного ниже десктопной, поэтому проценты градиента
     дают тёмный текст на тёмном фоне. Задаём стопы в px: чёрный только под
     кнопками, а весь текст тренера остаётся на светлом/оранжевом. */
  .trainers {
    min-height: 0;
    padding: clamp(48px, 8vw, 80px) 0 clamp(32px, 5vw, 56px);
    background: linear-gradient(
      0deg,
      #000 0,
      #000 clamp(120px, 20vw, 200px),
      rgb(255, 89, 12) clamp(230px, 36vw, 340px),
      rgb(255, 223, 159) 55%,
      #fff 100%
    );
  }

  .trainers::before {
    width: 140vw;
    height: 134vw;
    right: -55vw;
    bottom: -20vw;
    background-size: contain;
  }

  .trainers__inner {
    padding: 0 clamp(20px, 4vw, 32px);
  }

  .trainers__title {
    font-size: clamp(36px, 6vw, 64px);
    margin-bottom: clamp(24px, 5vw, 60px);
  }

  /* Высота вьюпорта подгоняется JS под активного тренера (см. main.js) */
  .trainers__viewport {
    transition: height 0.4s ease;
  }

  .trainers__track {
    align-items: flex-start;
  }

  .trainer {
    gap: clamp(20px, 3vw, 40px);
  }

  .trainer__photo {
    flex: 0 0 38%;
    width: 38%;
    max-width: none;
    height: auto;
    aspect-ratio: 515 / 765;
  }

  .trainer__photo img {
    position: absolute;
    inset: 0;
  }

  .trainer__badge {
    bottom: 20%;
    font-size: clamp(13px, 1.9vw, 18px);
    padding: 0.8em 3.4em 0.8em 1.3em;
  }

  .trainer__info {
    max-width: none;
    padding-top: 0;
  }

  .trainer__name {
    font-size: clamp(28px, 4vw, 40px);
    margin-bottom: clamp(16px, 3vw, 40px);
  }

  .trainer__row {
    gap: clamp(12px, 2vw, 20px);
    margin-bottom: clamp(16px, 2.4vw, 24px);
  }

  .trainer__icon {
    flex: 0 0 clamp(34px, 5vw, 60px);
    width: clamp(34px, 5vw, 60px);
    height: clamp(34px, 5vw, 60px);
  }

  .trainer__text,
  .trainer__label,
  .trainer__text li {
    font-size: clamp(14px, 2.3vw, 31px);
    line-height: 1.35;
  }

  .trainers__controls {
    gap: clamp(12px, 3vw, 134px);
    margin-top: clamp(96px, 22vw, 150px);
  }

  /* Обе кнопки — одинаковые пропорции (539:100), как на десктопе */
  .trainers__btn,
  .trainers__btn--sign {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: 536px;
    height: auto;
    aspect-ratio: 539 / 100;
    border-radius: 16px;
  }

  .trainers__btn--sign {
    font-size: clamp(18px, 3.4vw, 48px);
    border-width: 2px;
    letter-spacing: 0.5px;
  }

  .trainers__btn--next img {
    width: 100%;
    height: 100%;
  }

  /* ======================================================================
     КАРТА + КОНТАКТЫ + ПОДВАЛ
     ====================================================================== */

  .maps {
    margin-top: clamp(64px, 9vw, 130px);
  }

  .maps .container {
    width: 100%;
    padding: 0 clamp(20px, 4vw, 40px);
  }

  .maps_text {
    font-size: clamp(32px, 6vw, 70px);
    margin-bottom: clamp(20px, 5vw, 80px);
  }

  .maps iframe {
    display: block;
    width: 100%;
    height: clamp(320px, 60vw, 720px);
    border-radius: 18px;
  }

  .contacts {
    width: auto;
    height: auto;
    min-height: clamp(360px, 60vw, 708px);
    margin: clamp(64px, 10vw, 150px) clamp(20px, 4vw, 40px) 0;
    padding-bottom: 60px;
  }

  .contacts_text {
    font-size: clamp(32px, 6vw, 70px);
  }

  .contacts_list {
    margin-top: clamp(20px, 3vw, 40px);
    row-gap: clamp(14px, 2.2vw, 28px);
  }

  .contacts_list li {
    font-size: clamp(16px, 2.6vw, 35px);
    line-height: 1.3;
  }

  body::before {
    height: clamp(380px, 70vw, 635px);
  }
}

/* ==========================================================================
   ТЕЛЕФОН (≤ 700px) — всё складывается в стопку
   ========================================================================== */

@media (max-width: 700px) {
  /* ---------- Offer: заголовок над картинкой ---------- */

  .offer-top {
    flex-direction: column;
    row-gap: 14px;
  }

  .offer-top img {
    width: min(62vw, 300px);
  }

  .offer-top__paragraph1,
  .offer-top__paragraph2 {
    font-size: clamp(15px, 4vw, 20px);
  }

  .offer-block {
    flex-direction: column;
    align-items: stretch;
    row-gap: 4px;
  }

  .offer-block > img {
    width: 100%;
    align-self: auto;
    object-position: center bottom;
  }

  .offer-block span,
  .offer-blockPrice span {
    font-size: clamp(52px, 20vw, 120px);
  }

  .offer-blockSpan {
    font-size: clamp(90px, 38vw, 220px) !important;
  }

  .offer-but p {
    font-size: 14px;
  }

  .offer-but button {
    font-size: 17px;
    padding: 0.65em 1.4em;
  }

  /* ---------- Club + зоны ---------- */

  .club-text {
    padding-top: clamp(140px, 44vw, 260px);
    font-size: clamp(64px, 26vw, 160px);
  }

  .fitness-zones__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .zone-title {
    font-size: clamp(22px, 6.4vw, 32px);
  }

  .zone-text {
    font-size: 15.5px;
    line-height: 1.45;
  }

  /* ---------- Тарифы ---------- */

  .plans__title {
    font-size: clamp(72px, 27vw, 160px);
  }

  .plan__title {
    font-size: clamp(24px, 7vw, 36px);
  }

  .plan__body {
    flex-direction: column;
    align-items: stretch;
  }

  .plan__img {
    flex: none;
    width: 100%;
  }

  .plan__list li {
    font-size: 15.5px;
  }

  .plan__price {
    font-size: clamp(30px, 9.4vw, 48px);
  }

  .plan__price span {
    font-size: 15px;
  }

  /* Две кнопки друг под другом, одинаковый размер (60px × пропорции 539:106) */
  .plan__bottom {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .plan__period,
  .plan__next {
    flex: none;
    width: min(100%, 305px);
    height: 60px;
    aspect-ratio: auto;
    font-size: 17px;
  }

  /* Остальные главные кнопки — той же высоты и радиуса */
  .fit-block button,
  .offer-but button {
    height: 60px;
    padding-top: 0;
    padding-bottom: 0;
    border-radius: 16px;
  }

  /* ---------- Галерея ---------- */

  .gallery-item {
    width: 82%;
  }

  .gallery-item--bottom {
    margin-left: 18%;
    margin-top: -5%;
  }

  .gallery-item--bottom::before {
    left: -32%;
    width: 32%;
  }

  /* ---------- Заявка ---------- */

  .feedback__title {
    font-size: clamp(90px, 34vw, 200px);
  }

  .feedback__subtitle {
    font-size: clamp(48px, 17vw, 110px);
  }

  .feedback__label {
    font-size: 16px;
  }

  .feedback__input {
    height: 56px;
  }

  .feedback__submit {
    width: 100%;
    min-height: 60px;
    font-size: clamp(22px, 7vw, 34px);
  }

  /* ---------- Тренеры: фото сверху, текст снизу ---------- */

  .trainer {
    flex-direction: column;
    gap: 22px;
  }

  .trainer__photo {
    flex: none;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
  }

  .trainer__badge {
    bottom: 8%;
    font-size: 14px;
  }

  .trainer__info {
    width: 100%;
    flex: none;
  }

  .trainer__name {
    font-size: 30px;
    margin-bottom: 20px;
  }

  .trainer__text,
  .trainer__label,
  .trainer__text li {
    font-size: 15.5px;
    line-height: 1.4;
  }

  /* Две кнопки друг под другом — тот же размер, что и в тарифах (305 × 60) */
  .trainers {
    background: linear-gradient(
      0deg,
      #000 0,
      #000 190px,
      rgb(255, 89, 12) 310px,
      rgb(255, 223, 159) 55%,
      #fff 100%
    );
  }

  .trainers__controls {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 140px;
  }

  .trainers__btn,
  .trainers__btn--sign {
    flex: none;
    width: min(100%, 305px);
    height: 60px;
    aspect-ratio: auto;
  }

  .trainers__btn--sign {
    font-size: 17px;
  }

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

  .contacts_list li {
    font-size: 17px;
  }
}

/* ==========================================================================
   Тач-экраны: убираем «залипающие» hover-состояния
   ========================================================================== */

@media (hover: none) {
  .plan__period:hover {
    background: #fff;
    color: #000;
  }

  .trainers__btn--sign:hover {
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
  }

  .trainers__btn--next:hover {
    background: transparent;
  }

  .feedback__submit:hover {
    background: #ff5200;
  }

  .fitness-zone:hover {
    border-color: rgba(255, 255, 255, 0.08);
  }

  .fitness-zone.active:hover {
    border-color: #ff5200;
  }
}