/* ==========================================================================
   mobile.css — поведение и оформление на узких экранах.

   Правила действуют до 64rem и не затрагивают настольную версию.
   Подключается последним, поэтому переопределяет базовые компоненты
   в рамках слоя components, без повышения специфичности и !important.
   ========================================================================== */
@layer components {
  /* ========================================================================
     1. Верхняя панель
     Два телефона с подписями и WhatsApp переносились в четыре строки и
     занимали 140px — четверть экрана до начала контента. Звонок и мессенджер
     дублирует нижняя панель, поэтому на мобильном верхняя не нужна.
     ====================================================================== */
  @media (max-width: 63.99rem) {
    .topbar {
      display: none;
    }
  }

  /* ========================================================================
     2. Шапка
     Компактная и липкая. Скрытие при прокрутке намеренно НЕ делаем:
     любой transform на шапке превращает её в containing block, и панель
     меню (position: fixed) начинает позиционироваться от шапки, а не от
     экрана — из-за этого меню не открывалось после прокрутки вниз.
     ====================================================================== */
  @media (max-width: 63.99rem) {
    .header {
      /* backdrop-filter, как и transform, создаёт containing block для
         position: fixed. Панель меню вложена в шапку, поэтому на мобильном
         оставляем надёжный непрозрачный фон без фильтра. */
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      background-color: var(--color-surface);
    }

    .header__inner {
      min-height: 3.5rem;
      padding-block: var(--sp-2);
      gap: var(--sp-3);
    }

    .header__logo .logo__mark {
      inline-size: 8.75rem;
      block-size: auto;
    }
  }

  /* ========================================================================
     3. Кнопка меню
     Три полосы плюс подпись: связка узнаётся быстрее, чем иконка без слова
     или слово без иконки.
     ====================================================================== */
  @media (max-width: 63.99rem) {
    .nav__toggle {
      gap: var(--sp-2);
      min-inline-size: auto;
      padding-inline: var(--sp-3);
      border-color: var(--color-border-strong);
      background-color: var(--color-surface-2);
      /* Прижимаем к правому краю: логотип слева, кнопка меню справа —
         привычная и предсказуемая раскладка шапки. */
      margin-inline-start: auto;
    }

    .nav__toggle-text {
      font-size: var(--fs-300);
      font-weight: var(--fw-semibold);
      letter-spacing: var(--ls-caps);
      text-transform: uppercase;
    }

    /* Три полосы: средняя — сам элемент, крайние — псевдоэлементы. */
    .nav__burger {
      position: relative;
      inline-size: 1.125rem;
      block-size: 2px;
      flex: none;
      background-color: currentColor;
      border-radius: 2px;
      transition: background-color var(--dur-fast) var(--ease-out);
    }

    .nav__burger::before,
    .nav__burger::after {
      content: "";
      position: absolute;
      inset-inline: 0;
      block-size: 2px;
      background-color: currentColor;
      border-radius: 2px;
      transition: transform var(--dur-fast) var(--ease-out);
    }

    .nav__burger::before {
      inset-block-start: -6px;
    }

    .nav__burger::after {
      inset-block-start: 6px;
    }

    /* Открытое меню: полосы складываются в крестик. */
    [aria-expanded="true"] .nav__burger {
      background-color: transparent;
    }

    [aria-expanded="true"] .nav__burger::before {
      transform: translateY(6px) rotate(45deg);
    }

    [aria-expanded="true"] .nav__burger::after {
      transform: translateY(-6px) rotate(-45deg);
    }

    /* Кнопку «Записаться» из шапки убираем: она есть и в панели меню,
       и в нижней панели действий. В узкой шапке она только теснит логотип. */
    .header__actions {
      display: none;
    }
  }

  /* ========================================================================
     4. Панель меню
     Выдвигается на весь экран. dvh, а не vh: адресная строка браузера
     на мобильном меняет высоту вьюпорта, и при vh низ панели обрезался бы.
     ====================================================================== */
  @media (max-width: 63.99rem) {
    .nav__panel {
      position: fixed;
      inset: 0;
      inset-block-start: 0;
      z-index: var(--z-nav-panel);
      display: flex;
      flex-direction: column;
      max-height: none;
      block-size: 100dvh;
      padding: 0;
      background-color: var(--color-bg);
      border: 0;
      box-shadow: none;
      overflow-y: auto;
      overflow-x: hidden;
      overscroll-behavior: contain;
      touch-action: pan-y;
      /* Жестовая зона снизу и вырез сверху. */
      padding-block-end: calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
    }

    @media (prefers-reduced-motion: no-preference) {
      .nav__panel {
        animation: nav-slide var(--dur-base) var(--ease-out);
      }
    }

    /* Шапка панели: заголовок и крестик, прилипают к верху при прокрутке. */
    .nav__panel-head {
      position: sticky;
      inset-block-start: 0;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--sp-3);
      padding: var(--sp-4) var(--gutter);
      background-color: var(--color-bg);
      border-block-end: var(--border-1);
    }

    .nav__panel-title {
      color: var(--color-text-strong);
      font-size: var(--fs-500);
      font-weight: var(--fw-bold);
    }

    .nav__close {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      inline-size: var(--tap);
      block-size: var(--tap);
      flex: none;
      margin-inline-end: calc(var(--sp-2) * -1);
      background: none;
      border: 0;
      border-radius: var(--radius-pill);
      color: var(--color-text-strong);
      cursor: pointer;
    }

    .nav__close svg {
      inline-size: 1.375rem;
      block-size: 1.375rem;
    }

    .nav__close:hover {
      background-color: var(--color-surface-2);
    }

    /* --- список разделов ------------------------------------------------ */
    .nav__list {
      gap: 0;
      padding: var(--sp-2) var(--gutter) 0;
    }

    .nav__item + .nav__item {
      border-block-start: var(--border-1);
    }

    .nav__link {
      min-height: 3.25rem;
      padding-inline: 0;
      font-size: var(--fs-500);
      font-weight: var(--fw-medium);
      border-radius: 0;
    }

    /* Текущий раздел отмечен полосой слева, а не только цветом. */
    .nav__link[aria-current="page"] {
      color: var(--color-accent-text);
      font-weight: var(--fw-semibold);
      box-shadow: inset 3px 0 0 var(--color-accent);
      padding-inline-start: var(--sp-3);
    }

    /* --- аккордеон услуг ----------------------------------------------- */
    .nav__item.dropdown {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }

    /* Ссылка ведёт на страницу услуг, кнопка рядом раскрывает список.
       Разделение намеренное: по заголовку можно перейти, а не только раскрыть. */
    .dropdown__toggle {
      flex: 1;
      pointer-events: auto;
    }

    .dropdown__chevron {
      display: none;
    }

    .dropdown__expand {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      inline-size: var(--tap);
      block-size: var(--tap);
      flex: none;
      background: none;
      border: 0;
      color: var(--color-text-muted);
      cursor: pointer;
      border-radius: var(--radius-2);
    }

    .dropdown__expand svg {
      inline-size: 1.125rem;
      block-size: 1.125rem;
      transition: transform var(--dur-fast) var(--ease-out);
    }

    .dropdown__expand[aria-expanded="true"] svg {
      transform: rotate(180deg);
    }

    .dropdown__expand:hover {
      background-color: var(--color-surface-2);
      color: var(--color-text-strong);
    }

    /* Свёрнутый список услуг. Раскрывается классом is-open из nav.js.
       display:none, а не нулевая высота: элементы списка не сжимаются
       до нуля и продолжали бы занимать место. */
    .dropdown__menu {
      display: none;
      flex: 1 0 100%;
      gap: 0;
      margin: 0;
      padding-inline-start: 0;
      border-inline-start: 0;
    }

    .dropdown__menu.is-open {
      display: block;
      padding-block-end: var(--sp-2);
      border-block-start: var(--border-1);
      background-color: var(--color-surface-2);
      margin-inline: calc(var(--gutter) * -1);
      padding-inline: var(--gutter);
    }

    @media (prefers-reduced-motion: no-preference) {
      .dropdown__menu.is-open {
        animation: submenu-open var(--dur-base) var(--ease-out);
      }
    }

    .dropdown__link {
      display: flex;
      align-items: center;
      min-height: 2.75rem;
      padding-inline: var(--sp-4);
      color: var(--color-text-muted);
      font-size: var(--fs-400);
      border-radius: 0;
    }

    .dropdown__link[aria-current="page"] {
      color: var(--color-accent-text);
      font-weight: var(--fw-semibold);
    }

    /* --- призыв к действию и контакты в панели --------------------------- */
    .nav__panel-cta {
      margin: var(--sp-5) var(--gutter) 0;
      inline-size: auto;
      min-inline-size: 0;
      max-inline-size: none;
      align-self: stretch;
      min-height: 3.25rem;
      font-size: var(--fs-500);
    }

    .nav__panel-contacts {
      margin: var(--sp-5) 0 0;
      padding: var(--sp-4) var(--gutter) 0;
      border-block-start: var(--border-1);
    }

    .nav__panel-contacts a {
      margin-inline: 0;
      padding-inline: 0;
      min-height: 3rem;
    }

    .nav__panel-contacts > span {
      padding-inline: 0;
    }
  }

  /* Только прозрачность: transform на самой панели сделал бы её containing
     block для собственного position: fixed, и панель привязалась бы к шапке
     вместо экрана. Поэтому «выезд» не анимируем. */
  @keyframes nav-slide {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes submenu-open {
    from {
      opacity: 0;
      transform: translateY(-0.5rem);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  /* ========================================================================
     5. Нижняя панель действий
     Четвёртая кнопка — вход в меню. Правый верхний угол на крупных
     телефонах недосягаем одной рукой, нижняя кромка доступна всегда.
     ====================================================================== */
  @media (max-width: 47.99rem) {
    .sticky-bar {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .sticky-bar__menu {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      min-block-size: var(--sticky-bar-h);
      padding: var(--sp-2);
      background-color: var(--color-surface);
      border: 0;
      color: var(--color-text-strong);
      font-family: inherit;
      font-size: 0.8125rem;
      font-weight: var(--fw-semibold);
      cursor: pointer;
    }

    .sticky-bar__menu svg {
      inline-size: 1.25rem;
      block-size: 1.25rem;
      color: var(--color-accent-text);
    }

    .sticky-bar__menu:hover {
      background-color: var(--color-surface-2);
    }

    /* Пока меню открыто, нижняя панель мешает: панель уже на весь экран. */
    .is-nav-open .sticky-bar {
      display: none;
    }
  }

  /* ========================================================================
     6. Первый экран
     ====================================================================== */
  @media (max-width: 47.99rem) {
    .hero {
      background-image: none;
    }

    .hero__inner {
      padding-block: var(--sp-6) var(--sp-8);
      gap: var(--sp-5);
    }

    .hero__eyebrow {
      margin-block-end: var(--sp-3);
    }

    .hero__title {
      font-size: clamp(1.75rem, 1.35rem + 3.4vw, 2.25rem);
    }

    .hero__lead {
      font-size: var(--fs-400);
    }

    /* Карточка со ставкой: компактнее, чем на широком экране. */
    .hero-rate {
      padding: var(--sp-4) var(--sp-5);
    }

    .hero-rate__value {
      font-size: 2.25rem;
    }

    .hero-rate__note {
      margin-block-start: var(--sp-2);
    }

    .hero-card__list {
      padding: var(--sp-4) var(--sp-5);
    }

    .hero-card__list li {
      font-size: var(--fs-300);
    }

    .hero-card__foot {
      padding: var(--sp-3) var(--sp-5);
    }
  }

  /* ========================================================================
     7. Секции и заголовки
     ====================================================================== */
  @media (max-width: 47.99rem) {
    .section {
      padding-block: var(--sp-10);
    }

    .section--chapter {
      padding-block: var(--sp-12);
    }

    .section__head {
      margin-block-end: var(--sp-6);
    }

    .section__title {
      font-size: clamp(1.5rem, 1.2rem + 2.6vw, 1.875rem);
    }

    .section__lead {
      font-size: var(--fs-400);
    }

    /* Направления: заголовок и цена крупнее описания, порядок чтения ясен. */
    .dir {
      padding: var(--sp-5);
    }

    .dir__title {
      font-size: var(--fs-500);
    }

    .dirs {
      gap: var(--sp-3);
    }

    /* Формула расчёта: в столбик, иначе три ячейки жмутся в 390px. */
    .formula {
      padding: var(--sp-5);
      gap: var(--sp-2);
    }

    .formula__item {
      flex: 1 0 100%;
      flex-direction: row;
      align-items: baseline;
      justify-content: space-between;
      gap: var(--sp-3);
    }

    .formula__value {
      margin-block-start: 0;
    }

    /* Знаки операций между строками — по центру, как разделители. */
    .formula__op {
      flex: 1 0 100%;
      justify-content: center;
      font-size: var(--fs-400);
      line-height: 1;
    }

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

    .figure {
      padding: var(--sp-4);
    }

    .quote {
      padding: var(--sp-5);
    }

    .quote::before {
      font-size: 2.25rem;
    }
  }

  /* ========================================================================
     7a. Строка показателей на первом экране
     Число и подпись выравниваем по центру: иначе крупная цифра с плотным
     трекингом вставала левее подписи и текст казался съехавшим.
     ====================================================================== */
  @media (max-width: 47.99rem) {
    .hero__trust > li {
      align-items: center;
      text-align: center;
      padding-inline: var(--sp-2);
    }
  }

  /* ========================================================================
     8. Формы
     ====================================================================== */
  @media (max-width: 47.99rem) {
    .form--card {
      padding: var(--sp-5);
    }

    /* 16px — минимум, при котором iOS не приближает страницу при фокусе. */
    .form__input {
      font-size: 1rem;
    }

    /* Поля даты и времени на iOS имеют собственную ширину и вылезают за
       контейнер. Приводим их к общей ширине блока. */
    .form__input[type="date"],
    .form__input[type="time"],
    select.form__input {
      inline-size: 100%;
      max-inline-size: 100%;
      min-inline-size: 0;
    }

    /* WebKit на iPhone сохраняет у date собственную минимальную ширину даже
       при width:100%. Сбрасываем нативную геометрию, но сам системный picker
       остаётся доступен по нажатию. */
    .form__input[type="date"] {
      display: block;
      -webkit-appearance: none;
      appearance: none;
    }

    @supports (-webkit-touch-callout: none) {
      .form__input[type="date"] {
        inline-size: -webkit-fill-available;
      }
    }

    .form__input[type="date"]::-webkit-date-and-time-value {
      min-inline-size: 0;
      text-align: start;
    }

    .form__row,
    .form__grid > * {
      min-inline-size: 0;
    }

    /* Две колонки даты/времени в узкой форме тесноваты — ставим в столбик. */
    .form__grid--2 {
      grid-template-columns: minmax(0, 1fr);
    }

    .booking__note {
      font-size: var(--fs-300);
    }

    /* Подсказка про субботу/воскресенье появляется мягко, а не рывком. */
    @media (prefers-reduced-motion: no-preference) {
      .booking__note:not([hidden]) {
        animation: note-in var(--dur-base) var(--ease-out);
      }

      /* Список времени плавно проявляется, когда его заполнил выбор даты. */
      [data-booking] select[name="time"]:not(:disabled) {
        animation: field-in var(--dur-base) var(--ease-out);
      }
    }
  }

  @keyframes note-in {
    from {
      opacity: 0;
      transform: translateY(-0.35rem);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes field-in {
    from {
      opacity: 0.35;
    }
    to {
      opacity: 1;
    }
  }

  /* ========================================================================
     9. Прайс и таблицы
     ====================================================================== */
  @media (max-width: 47.99rem) {
    .price-filter {
      padding: var(--sp-4);
      gap: var(--sp-3);
    }

    /* Категории прокручиваются в одну строку: сетка из пятнадцати кнопок
       занимала бы пол-экрана. */
    .price-filter__cats {
      flex-wrap: nowrap;
      overflow-x: auto;
      scrollbar-width: none;
      padding-block-end: var(--sp-1);
      scroll-snap-type: x proximity;
    }

    .price-filter__cats::-webkit-scrollbar {
      display: none;
    }

    .prices__cat {
      flex: none;
      scroll-snap-align: start;
    }

    .prices__group-title {
      padding-inline: var(--sp-4);
    }

    /* На мобильной сетке ячейки строки сбрасывают собственный padding.
       Отступ переносим на саму строку, чтобы название работы и «Уточнить»
       не прижимались к рамке карточки. */
    .prices__group .prices__row {
      padding-inline: var(--sp-4);
    }
  }

  /* ========================================================================
     10. Мелкие уточнения
     ====================================================================== */
  @media (max-width: 47.99rem) {
    /* Убираем серую вспышку при касании: она выглядит неаккуратно. */
    a,
    button,
    summary,
    [role="button"] {
      -webkit-tap-highlight-color: transparent;
    }

    /* Прокрутка внутренних областей не тянет за собой страницу. */
    .table-scroll,
    .anchor-nav ul,
    .price-filter__cats {
      overscroll-behavior-x: contain;
    }

    .breadcrumbs {
      padding-block: var(--sp-2);
      font-size: 0.8125rem;
    }

    /* Длинные адреса и телефоны не должны распирать раскладку. */
    .contact__value {
      font-size: var(--fs-400);
    }

    .site__name {
      font-size: var(--fs-500);
    }

    .footer {
      margin-block-start: var(--sp-12);
      padding-block: var(--sp-8) var(--sp-6);
    }

    .footer__cols {
      gap: var(--sp-6);
    }
  }

  /* ========================================================================
     11. Настольный экран: элементы, нужные только на мобильном
     ====================================================================== */
  @media (min-width: 64rem) {
    /* Кнопка раскрытия подменю: на широком экране список открывается
       наведением, отдельная кнопка была бы лишней. */
    .dropdown__expand,
    .nav__panel-head,
    .nav__panel-cta {
      display: none;
    }
  }}