/* ============================================================
   SERVICES — services.html. Full redesign to match Figma nodes
   2257:1839 (desktop) / 2269:886 (mobile). Uses the shared
   header.css/footer.css/mobile-booking.css/forms.css components,
   same as promos.html/index.html, replacing the page's previous
   inner-header/inner-footer look.
   ============================================================ */
body.page--services { background: #fff; color: var(--c-text); }

/* ── DESKTOP (≥768px) ── */
.services-desktop { display: flex; flex-direction: column; align-items: center; gap: 160px; margin-top: var(--header-h); padding-bottom: 160px; }
.services-hero-group { display: flex; flex-direction: column; align-items: center; gap: 56px; width: 100%; padding-top: 56px; }

/* ── "Направления услуг" grid — copied verbatim from home.css's
   .sec-dir/.dir-* (index.html #services), per explicit request to
   reuse the homepage block instead of the custom grid this page had
   before (which was too large, gapless, and had no real photos). ── */
.sec-dir { background: var(--c-bg); padding: 0; width: 100%; }
/* Centred title + rating badges, matching prices.html's .price-hero
   (same clamp, weight, tracking and 20px title→badges gap) — this page
   opens the same way the price list does. */
.dir-head { padding: 0 var(--gutter); display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; margin-bottom: clamp(40px, 5vw, 72px); }
.dir-heading { font-size: clamp(40px, 3.6vw, 64px); font-weight: 400; text-align: center; color: var(--c-text); letter-spacing: -0.04em; line-height: 1; font-style: normal; margin: 0; }
/* .dir-grid/.dir-tile переехали в css/components/dir-tile.css —
   их же использует раздел «Я хочу». */

/* smaller solid CTA — copied from home.css's .hero__cta (applied on top
   of the shared .pill-btn), per explicit request to shrink this button */
.hero__cta {
  padding: clamp(12px, 1.04vw, 20px) clamp(24px, 2.19vw, 42px);
  font-size: clamp(15px, 1.15vw, 22px); letter-spacing: -0.02em; font-weight: 400;
  background: var(--c-accent); color: #fff; border-color: var(--c-accent);
  box-shadow: none; gap: clamp(10px, 1vw, 18px);
}
.hero__cta.hero__cta { border-radius: 12px !important; }
.hero__cta:hover { background: #6A7C64; border-color: #6A7C64; color: #fff; }
.hero__cta svg { flex-shrink: 0; width: clamp(18px, 1.45vw, 28px); height: clamp(18px, 1.45vw, 28px); transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1); }
.hero__cta:hover svg { transform: translate(3px, -3px); }

/* promo-banner carousel — copied from home.css (shared visual language,
   already fluid/clamp-based so the same markup works at any breakpoint);
   duplicated per-breakpoint below to match the site's established
   desktop/mobile DOM-split convention. */
.sec-promo-banner { padding: 0; width: 100%; }
.promo-banner-wrap {
  width: 100%; /* without this, nesting the wrap inside a flex container with
  align-items:center (as the mobile .mh-promo-banner-hero does) collapses it to
  a tiny shrink-to-fit size, since .promo-banner's own content is entirely
  position:absolute and contributes no in-flow intrinsic width */
  /* max-width 1320 вместе с собственным var(--gutter) давал двойной
     отступ — баннер был заметно уже сетки услуг на той же странице */
  margin: 0 auto; padding: 0 var(--gutter); display: flex; flex-direction: column; align-items: center; gap: 32px;
}
.promo-banner-strip { display: flex; gap: 24px; width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
.promo-banner-strip::-webkit-scrollbar { display: none; }
.promo-banner { position: relative; flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 1320 / 561; border-radius: 16px; overflow: hidden; }
.promo-banner__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 56% 42%; }
.promo-banner__card {
  position: absolute; left: clamp(16px, 3.6vw, 48px); top: 50%; transform: translateY(-50%);
  width: clamp(207px, 19.55vw, 264px); background: rgba(255,255,255,0.22);
  border: 1px solid rgba(255,255,255,0.45);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-radius: 18px; padding: clamp(18px, 1.44vw, 23px) clamp(16px, 1.27vw, 21px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
  min-height: clamp(207px, 21.85vw, 264px); text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.promo-banner__card:hover { transform: translateY(-54%); }
.promo-banner__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.promo-banner__label { font-size: clamp(14px, 0.95vw, 16px); font-weight: 500; color: rgba(48,54,46,0.6); letter-spacing: -0.02em; line-height: 1.15; font-style: normal; }
.promo-banner__arr {
  flex-shrink: 0; width: 37px; height: 37px; border-radius: 50%;
  background: var(--c-accent); color: #fff; display: flex; align-items: center; justify-content: center;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.promo-banner__arr svg { width: 18px; height: 18px; }
.promo-banner__card:hover .promo-banner__arr { transform: translate(3px, -3px); }
.promo-banner__bottom { display: flex; flex-direction: column; gap: 9px; color: rgba(48,54,46,0.6); }
.promo-banner__pct { font-size: clamp(37px, 3.91vw, 64px); font-weight: 500; letter-spacing: -0.03em; line-height: 1; font-style: normal; }
.promo-banner__desc { font-size: 14px; font-weight: 300; opacity: 0.7; letter-spacing: -0.02em; line-height: 1.3; font-style: normal; }
.promo-banner__dots { display: flex; align-items: center; gap: 10px; }

/* .services-desktop на телефоне больше не прячется целиком: из неё остаётся
   шапка раздела с навигатором — см. блок в конце файла. */

/* ── MOBILE (≤767px) — reuses .mh-booking/.mh-footer verbatim
   (mobile-booking.css), same pattern as promos.html. ── */
.mobile-services { display: none; }
@media (max-width: 767px) {
  footer.site-footer { display: none !important; }
  .mobile-services { display: flex; flex-direction: column; gap: 56px; padding-top: 84px; }
  /* у контейнера свой gap 56px — гасим и авто-отступ из base.css, и
     верхний padding подвала, иначе разрыв складывается втрое */
  .mobile-services .mh-footer { margin-top: 0; padding-top: 0; }

  /* copied verbatim from home.css's .mh-services/.mh-service-card
     (index.html mobile #services block), per explicit request */
  .mh-services { display: flex; flex-direction: column; gap: 28px; padding: 0 20px; }
  /* pull the badge row up against its title — the section's own 28px gap
     is meant for title→cards, not title→badges */
  .mh-services > .price-ratings--mobile { margin-top: -18px; }
  .mh-services__stack { display: flex; flex-direction: column; gap: 16px; }
  .mh-service-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; min-height: 450px; padding: 32px; border: 1px solid #d9d9d9; border-radius: 20px; text-align: center; text-decoration: none; color: inherit; }
  .mh-service-card__badge { width: 48px; height: 48px; border-radius: 24px; background: #ededed; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 500; letter-spacing: -0.04em; color: #5B6159; flex-shrink: 0; }
  .mh-service-card__photo { width: 200px; height: 200px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
  .mh-service-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .mh-service-card__title { font-size: 22px; font-weight: 600; letter-spacing: -0.04em; color: var(--c-text); margin: 0; }
  .mh-service-card__desc { font-size: 15px; font-weight: 400; line-height: 1.4; letter-spacing: -0.04em; color: #5B6159; margin: 0; }
  .mh-services__cta { display: flex; justify-content: center; }
  .mh-services__cta .mh-btn-primary { width: auto; padding: 14px 28px; gap: 10px; }
  .mh-services__cta .mh-btn-primary span { font-size: 17px; }
  .mh-services__cta .mh-btn-primary svg { width: 24px; height: 24px; }

  /* .mh-promo-card visuals copied from promos.css's mobile block, but
     shown one at a time here as a swipeable carousel with dot pagination
     (via the shared makeFilmstrip helper), per explicit request — only
     one card + dots should be visible, not a stacked list. */
  .mh-promos-hero { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; }
  .mh-promos-heading { font-size: 28px; font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; color: var(--c-text); text-align: center; padding: 0 20px; margin: 0; }
  .mh-promos-cards {
    display: flex; gap: 18px; padding: 0 20px; width: 100%;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 20px;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .mh-promos-cards::-webkit-scrollbar { display: none; }
  .mh-promo-card { position: relative; flex: 0 0 100%; scroll-snap-align: start; height: 432px; border-radius: 16px; overflow: hidden; background: #23241d; }
  .mh-promo-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .mh-promos-dots { display: flex; justify-content: center; gap: 10px; }
  .mh-promos-cards .mh-promo-card:nth-child(1) img { object-position: 70% center; }
  .mh-promos-cards .mh-promo-card:nth-child(2) img { object-position: 78% 35%; }
  .mh-promos-cards .mh-promo-card:nth-child(3) img { object-position: 65% center; }
  .mh-promo-card__panel { position: absolute; left: 16px; right: 16px; bottom: 16px; height: 190px; background: rgba(255,253,249,0.2); border-radius: 16px; overflow: hidden; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .mh-promo-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .mh-promo-arr { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--c-accent); display: flex; align-items: center; justify-content: center; }
  .mh-promo-card__label { font-size: 16px; font-weight: 500; line-height: 1.1; letter-spacing: -0.04em; color: rgba(48,54,46,0.6); max-width: 229px; margin: 0; }
  .mh-promo-card__body { display: flex; flex-direction: column; gap: 6px; color: rgba(48,54,46,0.6); }
  .mh-promo-card__pct { font-size: 52px; font-weight: 500; line-height: 1; margin: 0; }
  .mh-promo-card__desc { font-size: 10px; font-weight: 400; line-height: 1.4; letter-spacing: -0.04em; opacity: 0.8; margin: 0; }

  .mh-services-contact { display: flex; flex-direction: column; gap: 20px; width: 100%; padding: 16px 20px 0; }
  .mh-services-contact__lines { display: flex; flex-direction: column; gap: 12px; width: 100%; padding: 16px 0; border-top: 1px solid rgba(48,54,46,0.1); border-bottom: 1px solid rgba(48,54,46,0.1); font-size: 14px; }
  .mh-services-contact__lines p { margin: 0; }
  .mh-services-contact__lines .is-strong { font-weight: 500; color: var(--c-text); }
  .mh-services-contact__lines .is-muted { font-weight: 400; color: #5B6159; }
  .mh-services-contact__map { width: 100%; height: 220px; border-radius: 12px; overflow: hidden; }
  .mh-services-contact__map iframe { width: 100%; height: 100%; border: none; display: block; }
}


/* ═══════════════════════════════════════════════════════════════════
   НАВИГАТОР ПО УСЛУГАМ (≤1024px) — поиск, подбор по проблеме и
   аккордеон направлений вместо плитки из 19 карточек по 450px.

   Раньше на телефоне каждое направление занимало почти экран: до
   последнего нужно было пролистать около 8500px, а до конкретной
   процедуры — ещё два перехода. Здесь все семь направлений видны
   сразу, процедуры раскрываются внутри, и из каждого направления
   есть прямой переход в свою рубрику прайса.

   Тот же блок работает и на планшете: там прячется .dir-grid, а
   шапка раздела (.dir-head) и кнопка записи остаются общими.
   ═══════════════════════════════════════════════════════════════════ */

.svc-nav { display: none; }
.svc-nav [hidden] { display: none !important; }

@media (max-width: 1024px) {
  .dir-grid { display: none; }
  .svc-nav { display: flex; flex-direction: column; gap: 28px; padding: 0 var(--gutter); }

  /* ── Поиск ───────────────────────────────────────────────────── */
  .svc-search { display: flex; flex-direction: column; gap: 8px; }
  .svc-search__field {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 14px; border: 1px solid rgba(48,54,46,0.16); border-radius: 12px;
    background: #fff; color: var(--c-muted);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .svc-search__field:focus-within { border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(141,165,133,0.18); }
  .svc-search__field > svg { width: 19px; height: 19px; flex-shrink: 0; }
  .svc-search__input {
    flex: 1 1 auto; min-width: 0; border: none; outline: none; background: transparent;
    font-family: inherit; font-size: 16px; /* 16px обязательны: меньше — и Safari зумит страницу на фокусе */
    font-weight: 400; color: var(--c-text); letter-spacing: -0.02em; line-height: 1.2; padding: 0;
  }
  .svc-search__input::placeholder { color: rgba(91,97,89,0.75); }
  .svc-search__input::-webkit-search-cancel-button { display: none; }
  .svc-search__clear {
    flex-shrink: 0; width: 26px; height: 26px; border: none; border-radius: 50%;
    background: rgba(48,54,46,0.07); color: var(--c-muted); cursor: pointer;
    display: flex; align-items: center; justify-content: center; padding: 0;
    transition: background-color 0.2s ease, transform 0.16s cubic-bezier(0.23,1,0.32,1);
  }
  .svc-search__clear svg { width: 14px; height: 14px; }
  .svc-search__clear:active { transform: scale(0.92); }
  .svc-search__clear:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
  .svc-search__hint { margin: 0; font-size: 13px; font-weight: 400; color: var(--c-muted); line-height: 1.3; font-style: normal; min-height: 17px; }

  /* ── Подбор по проблеме ──────────────────────────────────────── */
  .svc-problems { display: flex; flex-direction: column; gap: 10px; }
  .svc-problems__label { margin: 0; font-size: 14px; font-weight: 400; color: var(--c-muted); letter-spacing: -0.01em; line-height: 1; font-style: normal; }
  /* лента, а не сетка: восемь кнопок в столбик отодвинули бы сам
     список услуг за нижний край экрана */
  .svc-problems__row {
    display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto;
    margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) 4px;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .svc-problems__row::-webkit-scrollbar { display: none; }
  .svc-problem {
    flex: 0 0 auto; padding: 9px 15px; border-radius: 999px;
    border: 1px solid rgba(48,54,46,0.14); background: transparent;
    font-family: inherit; font-size: 14px; font-weight: 400; color: var(--c-text);
    letter-spacing: -0.02em; line-height: 1; white-space: nowrap; cursor: pointer;
    transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease, transform 0.16s cubic-bezier(0.23,1,0.32,1);
  }
  .svc-problem:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
  .svc-problem:active { transform: scale(0.97); }
  .svc-problem[aria-pressed="true"] { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }

  /* ── Аккордеон направлений ───────────────────────────────────── */
  .svc-acc { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .svc-acc__item { border-top: 1px solid rgba(48,54,46,0.12); }
  .svc-acc__item:last-child { border-bottom: 1px solid rgba(48,54,46,0.12); }
  .svc-acc__head { margin: 0; font-size: inherit; font-weight: inherit; }
  .svc-acc__toggle {
    width: 100%; display: flex; align-items: center; gap: 12px;
    /* 18px сверху и снизу дают строке ~60px высоты — палец попадает без прицеливания */
    padding: 18px 0; border: none; background: transparent; cursor: pointer;
    font-family: inherit; text-align: left; color: var(--c-text);
    transition: color 0.2s ease;
  }
  .svc-acc__toggle:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; border-radius: 6px; }
  .svc-acc__name { flex: 1 1 auto; font-size: 17px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.25; }
  .svc-acc__count { flex-shrink: 0; font-size: 13px; font-weight: 400; color: var(--c-muted); }
  .svc-acc__chev { flex-shrink: 0; width: 20px; height: 20px; color: var(--c-muted); transition: transform 0.25s cubic-bezier(0.23,1,0.32,1); }
  .svc-acc__toggle[aria-expanded="true"] .svc-acc__chev { transform: rotate(180deg); }

  .svc-acc__panel { padding: 0 0 18px; }
  /* Панель раскрывается мгновенно — список навигационный, его открывают
     часто, и задержка здесь читается как тормоз. Анимируем только
     появление содержимого: transform и opacity, без скачка высоты. */
  .svc-acc__panel:not([hidden]) { animation: svc-panel-in 0.22s cubic-bezier(0.23,1,0.32,1) both; }
  @keyframes svc-panel-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

  .svc-acc__list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; }
  .svc-acc__row a {
    display: block; padding: 11px 0 11px 14px; position: relative;
    font-size: 15px; font-weight: 400; color: var(--c-muted); letter-spacing: -0.02em; line-height: 1.35;
    text-decoration: none; transition: color 0.2s ease;
  }
  .svc-acc__row a::before {
    content: ''; position: absolute; left: 0; top: 50%; width: 5px; height: 1px;
    background: rgba(48,54,46,0.28); transition: width 0.2s ease, background-color 0.2s ease;
  }
  @media (hover: hover) and (pointer: fine) {
    .svc-acc__row a:hover { color: var(--c-text); }
    .svc-acc__row a:hover::before { width: 9px; background: var(--c-accent); }
  }
  .svc-acc__row a:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; border-radius: 4px; }
  .svc-acc__row a:active { color: var(--c-accent-hover); }

  .svc-acc__price {
    display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
    padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(141,165,133,0.4);
    font-size: 14px; font-weight: 500; color: var(--c-accent-hover); letter-spacing: -0.02em;
    text-decoration: none; transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.16s cubic-bezier(0.23,1,0.32,1);
  }
  .svc-acc__price::after { content: '→'; font-size: 15px; line-height: 1; }
  @media (hover: hover) and (pointer: fine) { .svc-acc__price:hover { background: rgba(141,165,133,0.1); border-color: var(--c-accent); } }
  .svc-acc__price:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
  .svc-acc__price:active { transform: scale(0.97); }

  .svc-nav__empty { margin: 0; padding: 20px 0 4px; font-size: 15px; font-weight: 300; color: var(--c-muted); line-height: 1.55; font-style: normal; }

  @media (prefers-reduced-motion: reduce) {
    .svc-acc__panel:not([hidden]) { animation: none; }
    .svc-acc__chev, .svc-problem, .svc-acc__price, .svc-search__clear { transition: none; }
    .svc-problem:active, .svc-acc__price:active, .svc-search__clear:active { transform: none; }
  }
}

/* ── Планшет: плитка спрятана, шапка раздела и кнопка записи общие ── */
@media (min-width: 768px) and (max-width: 1024px) {
  .services-desktop { gap: clamp(64px, 9vw, 110px); padding-bottom: clamp(64px, 9vw, 110px); }
  .svc-nav { max-width: 720px; margin: 0 auto; width: 100%; }
}

/* ── Телефон: из десктопной разметки остаётся только шапка раздела
      с навигатором, всё остальное берёт на себя .mobile-services ── */
@media (max-width: 767px) {
  .services-desktop { display: flex; gap: 0; margin-top: 80px; padding-bottom: 0; }
  .services-desktop > .sec-promo-banner,
  .services-desktop > .sec-booking { display: none; }
  .sec-dir { padding: 0; }
  .dir-head { padding: 0 20px; gap: 14px; margin-bottom: 24px; }
  .dir-heading { font-size: 28px; letter-spacing: -0.04em; }
  .dir-head .price-ratings { gap: 12px 18px; }
  .dir-head .price-rating { font-size: 12.5px; }
  .dir-head .price-rating img { width: 20px; height: 20px; }
  .svc-nav { padding: 0 20px; gap: 24px; }
  .dir-cta-wrap { margin-top: 28px; padding: 0 20px; }
}