/* ==========================================================================
   RESPONSIVE — mobile-first overrides by breakpoint
   ========================================================================== */

/* ---- Header ----------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .header__nav { display: none; }
}
@media (max-width: 599.98px) {
  :root { --header-h: 64px; }
  .hide-sm { display: none !important; }
  .header__inner { gap: var(--sp-2); }
  .header__cta { display: none; } /* "Записаться" lives in the bottom action bar on phones */
  .header__theme { display: none; }
  .logo { font-size: 1.05rem; }
}
.site-menu__prefs { display: grid; gap: var(--sp-3); justify-items: start; }
.menu-theme .ico { width: 18px; height: 18px; }

/* ---- Mobile action bar ------------------------------------------------ */
@media (max-width: 767.98px) {
  :root { --actionbar-h: calc(64px + env(safe-area-inset-bottom)); }
  body { padding-bottom: var(--actionbar-h); }
  .action-bar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 80;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3) calc(var(--sp-2) + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--c-black) 94%, transparent);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 400ms var(--ease-out);
  }
  .action-bar__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--c-off);
    font-size: var(--fs-sm);
    font-weight: 500;
  }
  .action-bar__btn svg { width: 18px; height: 18px; }
  .action-bar__btn--primary { background: var(--c-off); color: var(--c-black); border-color: var(--c-off); }
  /* Hide while typing so the keyboard and fields are never covered. */
  html.is-typing .action-bar, html.menu-open .action-bar { transform: translateY(110%); }
}

/* ---- Hero ------------------------------------------------------------- */
@media (max-width: 899.98px) {
  .hero { padding-top: calc(var(--header-h) + var(--sp-4)); }
  .hero__inner { display: flex; flex-direction: column; gap: var(--sp-5); min-height: auto; }
  .hero__title { font-size: clamp(2.6rem, 0.8rem + 9.2vw, 5.5rem); max-width: 12ch; }
  .hero__media { min-height: 0; aspect-ratio: 4 / 3; order: 3; }
  .hero__bottom { order: 4; }
  .hero__cue { display: none; }
  .hero__ctas .btn { flex: 1 1 auto; }
}

/* ---- Approach --------------------------------------------------------- */
@media (max-width: 899.98px) {
  .approach__list { grid-template-columns: 1fr; gap: var(--sp-8); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-6); }
}

/* ---- Close-up (no pin on small screens) ------------------------------- */
@media (max-width: 899.98px) {
  .closeup { padding-block: var(--section-y); }
  .closeup__pin { height: auto; overflow: visible; display: grid; gap: var(--sp-6); }
  .closeup__head { position: static; text-align: left; justify-items: start; }
  .closeup__stage { position: relative; inset: auto; padding-inline: var(--gutter); }
  .closeup__frame {
    --w: auto;
    position: relative;
    left: auto; top: auto;
    width: 100%;
    margin: 0;
    border-radius: var(--radius);
  }
  .hotspot-label { font-size: 0.625rem; padding: 0.3rem 0.55rem; }
  .hotspot-label .index-num { margin: 0; }
  .hotspot-label__t { display: none; }
  .hotspot-panel,
  .hotspot-panel.is-left,
  .hotspot-panel.is-right {
    left: 3% !important;
    right: 3%;
    top: auto !important;
    bottom: 3%;
    width: auto;
    translate: none;
  }
  .closeup__side { position: static; max-width: none; text-align: left !important; padding-inline: var(--gutter); font-size: var(--fs-base); }
}

/* ---- Showcase --------------------------------------------------------- */
@media (max-width: 899.98px) {
  .showcase__head, .results__head, .team__head { grid-template-columns: 1fr; }
  .showcase__item { width: min(78vw, 340px); }
}
@media (max-height: 820px) and (min-width: 1024px) {
  .showcase.is-pinned .service-card .media { aspect-ratio: 1; }
  .showcase.is-pinned .service-card p { display: none; }
  .showcase.is-pinned .showcase__head { margin-bottom: var(--sp-5); }
  .showcase.is-pinned .showcase__head h2 { font-size: clamp(2rem, 1rem + 2.6vw, 3.5rem); }
}

/* ---- Results / team / pricing ---------------------------------------- */
@media (max-width: 1023.98px) {
  .results__layout, .pricing__layout { grid-template-columns: 1fr; }
  .pricing__intro { position: static; }
  .team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-7); }
}
@media (max-width: 599.98px) {
  .ba { aspect-ratio: 4 / 5; border-radius: var(--radius); }
  .team__grid { gap: var(--sp-6) var(--sp-4); }
  .doc-card__role { font-size: var(--fs-lg); }
  .price-row { grid-template-columns: minmax(0, 1fr) auto; padding-block: var(--sp-4); gap: var(--sp-1) var(--sp-3); }
  .price-row__title { font-size: var(--fs-base); }
  .price-row__price { font-size: var(--fs-base); text-align: right; }
  .price-row__note { grid-column: 1 / -1; }
  .price-row__actions { grid-column: 1 / -1; grid-row: auto; justify-self: start; }
  .price-row__actions .link-arrow { padding-block: 0.25rem; min-height: 40px; }
  .finale__ctas .btn { width: 100%; }
}

/* ---- Inner pages ------------------------------------------------------ */
@media (max-width: 1023.98px) {
  .page-hero__grid, .split, .profile, .booking, .contact-grid, .faq-layout, .prices-layout { grid-template-columns: 1fr; }
  .split__sticky, .profile__media, .booking__intro, .faq-side, .prices-nav { position: static; }
  .profile__media { max-width: 520px; }
  .principles, .consent-steps, .prep-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reviews-grid, .related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prices-nav { display: none; }
}
@media (max-width: 767.98px) {
  .svc-row { grid-template-columns: 72px minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
  .svc-row__thumb { display: block; grid-row: 1 / 3; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; }
  .svc-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
  .svc-row > .index-num, .svc-row__go { display: none; }
  .svc-row p { grid-column: 2; }
  .doc-row { grid-template-columns: 1fr; }
  .doc-row__media, .doc-row__body,
  .doc-row:nth-child(even) .doc-row__media,
  .doc-row:nth-child(even) .doc-row__body { grid-column: 1; grid-row: auto; }
  .gallery, .facts, .info-cards { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .legal section { grid-template-columns: 1fr; }
  .space-gallery { grid-template-columns: 1fr; }
  .space-gallery .media:nth-child(n) { grid-column: 1; margin-top: 0; aspect-ratio: 4 / 3; }
  .svc-hero__media { aspect-ratio: 4 / 3; }
}
@media (max-width: 599.98px) {
  .principles, .consent-steps, .prep-grid, .reviews-grid, .related { grid-template-columns: 1fr; }
  .info-list > div { grid-template-columns: 1fr; gap: var(--sp-1); }
  .steps li { grid-template-columns: 2.5rem 1fr; font-size: var(--fs-lg); }
  .cta-band { padding: var(--sp-6) var(--sp-5); }
  .cta-band__actions, .cta-band__actions .btn { width: 100%; }
}

/* ---- Large displays --------------------------------------------------- */
@media (min-width: 1800px) {
  :root { --container: 1680px; }
}

/* ---- Touch targets (≥ 44px on touch screens) -------------------------- */
@media (hover: none), (max-width: 767.98px) {
  .lang-switch button { min-height: 40px; min-width: 44px; }
  .pill-list a, .pill-list span { min-height: 44px; }
  .contact-big dd a { display: inline-flex; align-items: center; min-height: 44px; }
  .contact-big a.big { min-height: 48px; }
  .svc-row h2 a { display: inline-block; padding-block: 0.4rem; }
}

/* Hint wording per input type */
.closeup__side .hint-touch { display: none; }
@media (hover: none) {
  .closeup__side .hint-pointer { display: none; }
  .closeup__side .hint-touch { display: inline-block; }
}

/* ---- Performance on phones -------------------------------------------- */
@media (max-width: 767.98px) {
  /* Blur behind a fixed header is expensive on mobile GPUs: use a solid bar. */
  .site-header.is-scrolled { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: var(--bg); }
  .finale__light { animation: none; }
}

/* ---- Mobile polish ------------------------------------------------------ */
@media (max-width: 1023.98px), (max-height: 599.98px) {
  .showcase__item { transition: transform 200ms linear, opacity 200ms linear; will-change: transform; }
  .showcase__viewport { scroll-padding-inline: var(--gutter); padding-bottom: var(--sp-2); }
  .showcase__item { scroll-snap-align: center; }
  .showcase__track { padding-inline: calc((100vw - min(78vw, 340px)) / 2); }
}
@media (max-width: 899.98px) {
  .approach__item { position: sticky; top: calc(var(--header-h) + var(--sp-3)); background: var(--bg); padding-bottom: var(--sp-5); }
  .approach__list { gap: var(--sp-6); }
  .approach { overflow: clip; } /* hidden would break position: sticky */
}
/* Press feedback on touch */
@media (hover: none) {
  .btn, .service-card, .doc-card, .case-btn, .chip, .action-bar__btn, .svc-row, .icon-btn, .lang-switch button {
    transition: transform 160ms var(--ease-out);
    -webkit-tap-highlight-color: transparent;
  }
  .btn:active, .service-card:active, .doc-card:active, .chip:active, .action-bar__btn:active, .icon-btn:active { transform: scale(0.96); }
  .case-btn:active, .svc-row:active { transform: scale(0.985); }
}
/* Bottom bar slides in on load */
@media (max-width: 767.98px) {
  .action-bar { animation: bar-in 700ms var(--ease-out) 600ms both; }
}
@keyframes bar-in { from { transform: translateY(110%); } }
html.is-typing .action-bar, html.menu-open .action-bar { animation: none; }

/* Filter chips: one swipeable row on phones instead of several wrapped rows */
@media (max-width: 767.98px) {
  .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-block: 2px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - 2.5rem), transparent);
            mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - 2.5rem), transparent);
  }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; scroll-snap-align: start; }
  .faq-side .chips, .toolbar .chips { margin-inline: calc(var(--gutter) * -1); }
}

/* Booking on phones: heading → form → "what happens next" (form first) */
@media (max-width: 1023.98px) {
  .booking { display: flex; flex-direction: column; gap: var(--sp-6); padding-top: calc(var(--header-h) + var(--sp-6)); }
  .booking__intro { display: contents; }
  .booking__intro > * { order: 0; }
  .booking-card { order: 1; }
  .booking__intro > div { order: 2; }
  .booking__intro h1 { margin-top: calc(var(--sp-4) * -1); }
}
@media (max-width: 599.98px) {
  .booking-card { margin-inline: calc(var(--gutter) * -0.5); padding: var(--sp-5) var(--sp-4); }
}

/* Let swipeable chip rows shrink inside flex/grid parents (prevents page overflow) */
[data-svc-filters], [data-faq-filters], [data-results-filters], [data-pricing], .faq-side > *, .toolbar > * { min-width: 0; }
.faq-layout > *, .results__side, .pricing__table { min-width: 0; }

/* The close-up photo starts slightly enlarged for its zoom-in; keep it from widening the page */
@media (max-width: 899.98px) {
  .closeup { overflow-x: clip; }
}

/* ==========================================================================
   Mobile: only the essentials
   ========================================================================== */
@media (max-width: 767.98px) {
  :root { --section-y: 4.5rem; }

  /* Hero: headline, photo, one sentence, one action */
  .hero__note, .hero__ctas .btn:not(.btn--solid) { display: none; }
  .hero__lead { font-size: var(--fs-base); }

  /* Approach: three points, no decoration or filler figures */
  .approach__curve, .stats { display: none; }
  .approach__title { font-size: clamp(2rem, 1rem + 6vw, 2.6rem); margin-bottom: var(--sp-6); }
  .approach__img { aspect-ratio: 16 / 9; }

  /* Close-up: just the interactive photo */
  .closeup__side--left, .closeup__side--right > span, .closeup__side--right > br { display: none; }
  .closeup__side--right { padding-top: 0; }
  .closeup__pin { gap: var(--sp-4); }

  /* Section intros: heading only (keep the honesty notes) */
  .showcase__aside .lead, .team__head .lead, .pricing__intro .lead, .finale__lead, .results__head .lead { display: none; }
  .showcase__head, .team__head, .results__head { margin-bottom: var(--sp-5); }
  .results__desc p.muted { font-size: var(--fs-sm); }
  .doc-card .link-arrow, .doc-card__name { display: none; }

  /* Finale: headline + two actions */
  .finale { min-height: auto; padding-block: 5rem; }
  .finale__title { font-size: clamp(2.2rem, 1rem + 7vw, 3rem); }

  /* Footer: contacts and hours only */
  .footer__word { display: none; }
  .footer__top { grid-template-columns: 1fr 1fr; gap: var(--sp-6) var(--sp-4); padding-bottom: var(--sp-6); }
  .footer__top > .footer__col:nth-child(1) { grid-column: 1 / -1; }
  .footer__top > .footer__col:nth-child(2), .footer__top > .footer__col:nth-child(3) { display: none; }
  .footer__bottom > span:last-child { display: none; }
  .site-footer { padding-top: var(--sp-8); }
  .demo-note { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-xs); }
}