/*
  Частный Собеседник — responsive hardening layer
  Created 2026-08-11 after local working-version backup.

  Principle: no absolute pixel anchoring for ordinary pages. Layout scales by
  fluid containers, CSS grid/flex, clamp(), svh/svw and safe-area insets.
*/

:root {
  --cs-page-x: clamp(16px, 4vw, 24px);
  --cs-nav-safe-top: max(10px, env(safe-area-inset-top));
  --cs-footer-safe-bottom: max(10px, env(safe-area-inset-bottom));
}

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

img,
video,
svg {
  max-width: 100%;
  height: auto;
}

button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: rgba(255, 222, 156, .16);
}

/* Navigation: keep it usable instead of letting it overflow on phones. */
.top-nav {
  max-width: calc(100vw - 2 * var(--cs-page-x)) !important;
  overflow-x: auto !important;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  justify-content: flex-start;
}
.top-nav::-webkit-scrollbar { display: none; }
.top-nav a { flex: 0 0 auto; }

/* In-flow bottom back buttons: never fixed to fragile coordinates. */
.page-bottom-nav {
  width: 100%;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
.page-bottom-nav__btn {
  min-height: 44px;
  line-height: 1;
}

/* Main static pages — proportional containers. */
.about-wrap,
.sob-wrap,
.blog-wrap,
.contact-shell,
.privacy-wrap,
.seo-wrap {
  width: min(100%, 1180px) !important;
  padding-left: var(--cs-page-x) !important;
  padding-right: var(--cs-page-x) !important;
}

.about-lede,
.about-block,
.about-cta,
.sob-header,
.person,
.blog-hero,
.latest-post,
.blog-grid,
.contact-hero,
.contact-panel,
.contact-email-bottom {
  max-width: 100%;
}

/* Cards/grids: collapse by available width, not by device name. */
.about-principles,
.blog-grid,
.contact-layout {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)) !important;
}

.latest-post__card {
  grid-template-columns: minmax(220px, .72fr) minmax(0, 1fr) !important;
}

.person {
  grid-template-columns: minmax(260px, .92fr) minmax(0, 1fr) !important;
  align-items: center !important;
}
.person:nth-of-type(even) {
  grid-template-columns: minmax(0, 1fr) minmax(260px, .92fr) !important;
}
.person__video-el,
.person__video img,
.sand-video {
  max-width: 100%;
}
.person__price-card,
.person__topics {
  width: 100%;
}

.contact-form {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.contact-form__field--full,
.contact-form__submit {
  grid-column: 1 / -1 !important;
}
.contact-list {
  width: min(520px, 100%) !important;
}
.contact-list__row {
  width: 100% !important;
  align-items: center !important;
}
.contact-list__value,
.contact-list__value a {
  min-width: 0;
}

/* Cinematic square scenes: keep the square inside viewport across screens. */
.video-frame {
  width: min(94vw, 86svh, 940px) !important;
  max-width: calc(100vw - 2 * var(--cs-page-x));
}
.hotspot {
  touch-action: manipulation;
}
.topic-card {
  width: min(520px, calc(100vw - 2 * var(--cs-page-x))) !important;
  max-height: min(78svh, 720px) !important;
}

.site-footer {
  min-height: 44px;
}

.contact-mobile-break { display: none; }

@media (min-width: 1440px) {
  :root { --cs-page-x: 28px; }
  .about-wrap,
  .sob-wrap,
  .blog-wrap,
  .contact-shell { width: min(1240px, 100%) !important; }
  .contact-list { width: 540px !important; }
}

@media (max-width: 1024px) {
  .latest-post__card {
    grid-template-columns: 1fr !important;
  }
  .latest-post__image {
    min-height: 240px;
  }
  .person,
  .person:nth-of-type(even) {
    grid-template-columns: 1fr !important;
  }
  .person:nth-of-type(even) .person__video {
    order: 0 !important;
  }
  .person:nth-of-type(even) .person__info {
    order: 1 !important;
  }
}

@media (max-width: 820px) {
  :root { --cs-page-x: 18px; }

  .top-nav {
    top: var(--cs-nav-safe-top) !important;
    padding: 8px 10px !important;
    gap: 12px !important;
  }
  .top-nav a {
    font-size: 11px !important;
    letter-spacing: .045em !important;
  }

  .about-wrap,
  .sob-wrap,
  .blog-wrap,
  .contact-shell,
  .privacy-wrap,
  .seo-wrap {
    padding-top: calc(var(--cs-nav-safe-top) + 64px) !important;
    padding-bottom: 22px !important;
  }

  .about-lede,
  .sob-header,
  .blog-hero,
  .contact-hero {
    padding: clamp(24px, 7vw, 34px) !important;
    border-radius: 24px !important;
  }

  .about-lede h1,
  .sob-header h1,
  .blog-hero h1,
  .contact-hero h1 {
    font-size: clamp(28px, 7.4vw, 36px) !important;
    line-height: 1.10 !important;
    overflow-wrap: break-word;
  }
  .about-lede p,
  .sob-header p,
  .blog-hero p,
  .contact-hero p {
    font-size: clamp(15px, 4.1vw, 17px) !important;
  }

  .contact-form {
    grid-template-columns: 1fr !important;
    padding: 16px !important;
  }
  .contact-panel--form {
    padding: clamp(22px, 6vw, 30px) !important;
  }
  .contact-list {
    width: min(520px, 100%) !important;
  }

  .site-footer {
    flex-wrap: wrap;
    justify-content: center !important;
    text-align: center;
    gap: 8px 16px;
    padding: 16px var(--cs-page-x) !important;
  }
}

@media (max-width: 560px) {
  :root { --cs-page-x: 14px; }

  html,
  body {
    max-width: 100vw;
    overflow-x: hidden;
  }

  .about-wrap,
  .sob-wrap,
  .blog-wrap,
  .contact-shell,
  .privacy-wrap,
  .seo-wrap {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden;
  }

  .about-lede,
  .sob-header,
  .blog-hero,
  .contact-hero,
  .about-block,
  .person,
  .contact-panel,
  .contact-email-bottom {
    width: 100% !important;
    max-width: 100% !important;
  }

  .top-nav {
    left: var(--cs-page-x) !important;
    right: var(--cs-page-x) !important;
    transform: translateY(0) !important;
    width: auto !important;
    max-width: none !important;
  }
  body.blog-page .top-nav,
  body.blog-cat-page .top-nav,
  body.blog-post .top-nav,
  body.seo-post .top-nav,
  body.static-page .top-nav,
  body.is-ready .top-nav {
    transform: translateY(0) !important;
  }

  .hero {
    padding-left: var(--cs-page-x) !important;
    padding-right: var(--cs-page-x) !important;
  }
  .video-frame {
    width: min(calc(100vw - 2 * var(--cs-page-x)), 74svh) !important;
  }

  .contact-list {
    width: min(430px, 100%) !important;
  }
  .contact-mobile-break { display: block; }
  .about-lede h1,
  .sob-header h1,
  .blog-hero h1,
  .contact-hero h1 {
    font-size: clamp(26px, 6.6vw, 30px) !important;
    line-height: 1.12 !important;
  }
  .about-lede p,
  .sob-header p,
  .blog-hero p,
  .contact-hero p {
    font-size: clamp(14.5px, 3.8vw, 16px) !important;
  }
  .contact-list__row {
    grid-template-columns: 46px minmax(0, 1fr) !important;
    min-height: 68px !important;
    padding: 10px 12px !important;
    gap: 12px !important;
  }
  .contact-list__label,
  .contact-list__icon {
    width: 38px !important;
    height: 38px !important;
  }
  .contact-list__value,
  .contact-list__value a {
    font-size: clamp(14px, 4.2vw, 17px) !important;
    min-height: 38px !important;
  }

  .person,
  .about-block,
  .contact-panel,
  .contact-email-bottom,
  .latest-post,
  .blog-card {
    border-radius: 22px !important;
  }
  .person {
    padding: clamp(18px, 6vw, 24px) !important;
  }
  .person__name {
    font-size: clamp(34px, 10vw, 44px) !important;
  }

  .page-bottom-nav__btn,
  .back-scene {
    min-height: 44px;
    padding: 11px 20px !important;
  }
  body.theme-body .site-footer {
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
  }
  body.theme-body .back-scene {
    top: calc(max(12px, env(safe-area-inset-top)) + 56px) !important;
    bottom: auto !important;
  }

  .topic-card {
    width: calc(100vw - 2 * var(--cs-page-x)) !important;
    max-height: 76svh !important;
    padding: 18px !important;
  }
  .topic-card__actions {
    flex-direction: column;
  }
  .topic-card button {
    width: 100%;
    min-height: 44px;
  }
}

@media (max-width: 380px) {
  .top-nav {
    gap: 9px !important;
    padding: 7px 9px !important;
  }
  .top-nav a { font-size: 10px !important; }
  .contact-list__value,
  .contact-list__value a { font-size: 14px !important; }
}