/* Responsive composition shared by the three public pages.
   !important overrides the exported templates' inline presentation. */

/* Display face: Sofia Sans Extra Condensed (OFL), self-hosted. Its caps are small for the em,
   so size-adjust brings them to the cap height the page sizes were tuned for. */
@font-face {
  font-family: 'Sg Display';
  src: url('./assets/fonts/sofia-sans-xcond-cyrillic.woff2') format('woff2');
  font-weight: 900 1000; font-style: normal; font-display: swap; size-adjust: 122%;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Sg Display';
  src: url('./assets/fonts/sofia-sans-xcond-latin.woff2') format('woff2');
  font-weight: 900 1000; font-style: normal; font-display: swap; size-adjust: 122%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Holds the line widths while the face loads. */
@font-face {
  font-family: 'Sg Display Fallback';
  src: local('Impact'), local('Arial Narrow Bold');
  size-adjust: 103%;
}
:root { color-scheme: dark; --display: 'Sg Display', 'Sg Display Fallback', sans-serif; }
a, button, input { -webkit-tap-highlight-color: rgba(201,226,254,.24); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid #0079ff !important;
  outline-offset: 4px;
}
.quiz-title:focus { outline: none; }
.mobile-menu, .quiz-dialog { overscroll-behavior: contain; }
.menu-toggle { min-width: 44px !important; min-height: 44px !important; text-align: center !important; }
.quiz-dialog input { min-width: 0 !important; width: 100% !important; scroll-margin-block: 120px; }
.team-portrait {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

@media (max-width: 1179px) {
  .site-header > div:first-child { gap: 12px !important; }
  .site-header > div:first-child > a { flex-shrink: 0; }
  .site-header > div:first-child > div { gap: 8px !important; }
  .site-header > div:first-child > a > span:last-child { display: none; }
  .header-contact { min-height: 44px; }
  .site-header .mobile-menu {
    max-height: calc(100dvh - 68px - env(safe-area-inset-top));
    overflow-y: auto;
    box-sizing: border-box;
    background: #060606;
    padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
  }
  .mobile-menu a { min-height: 44px; box-sizing: border-box; }
}

@media (max-width: 1023px) {
  #why .sticky-intro { position: static !important; }
}

@media (max-width: 767px) {
  html { scroll-padding-top: 92px !important; }
  main, footer, .quiz-dialog { overflow-wrap: anywhere; }
  main *, footer *, .quiz-dialog * { min-width: 0; }
  main > section, footer > div {
    padding-left: max(20px, env(safe-area-inset-left)) !important;
    padding-right: max(20px, env(safe-area-inset-right)) !important;
    box-sizing: border-box;
  }
  .site-header { top: env(safe-area-inset-top, 0px) !important; }
  .site-header > div:first-child {
    width: 100% !important;
    height: 68px !important;
    padding: 0 max(12px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)) !important;
    background: rgba(6,6,6,.96) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.14) !important;
    box-sizing: border-box;
  }
  .site-header > div:first-child > a > span:first-child { font-size: 23px !important; }
  .header-contact { font-size: 12px !important; padding-inline: 10px !important; }
  .menu-toggle { padding-inline: 4px !important; font-size: 11px !important; }
  main { padding-top: calc(68px + env(safe-area-inset-top)) !important; }
  .mobile-menu:not(nav) {
    padding-top: calc(92px + env(safe-area-inset-top)) !important;
    padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
  }
  .mobile-menu nav { font-size: clamp(32px, 9vw, 52px) !important; }
  main > section:first-child { padding-top: 24px !important; }
  [data-screen-label="Дизайнерам — hero"] h1 { font-size: clamp(40px, 10.8vw, 76px) !important; line-height: 1.04 !important; }
  [data-screen-label="Кейс — обложка"] h1 { font-size: clamp(56px, 17vw, 112px) !important; }
  h2 { font-size: clamp(32px, 8.8vw, 52px) !important; line-height: 1.06 !important; }
  .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px 16px !important; }
  .metrics-grid > div > span:first-child { font-size: 12px !important; line-height: 1.4; letter-spacing: .02em !important; }
  .metrics-grid > div > span:last-child:not([style*="--display"]) { font-size: 14px !important; line-height: 1.45; }

  #why button { padding-block: 20px !important; }
  #why button > span:first-child { font-size: 18px !important; }
  #why .accordion-answer, #faq p { padding-right: 0 !important; }
  #why .detail-row { grid-template-columns: minmax(0, 1fr) !important; gap: 6px !important; }
  [data-screen-label="Дизайнерам"] > a { padding: 24px 20px !important; }
  [data-screen-label="Дизайнерам"] > a > div > span { overflow-wrap: normal; }
  [data-screen-label="Дизайнерам"] > a > div:first-child > span:nth-child(2) { font-size: clamp(26px, 7.6vw, 40px) !important; }
  [data-screen-label="Кейс — обложка"] .detail-row { grid-template-columns: 80px minmax(0,1fr) !important; }
  #how .stage-duration { text-align: left !important; }
  #design .case-mobile-gallery { grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 8px !important; }
  #design .case-mobile-gallery > div { padding: 8px !important; }
  footer > div { padding-bottom: max(24px, env(safe-area-inset-bottom)) !important; }
  footer > div > div:last-child a { display: inline-flex; align-items: center; min-height: 44px; }
  footer > div > div:last-child > div { gap: 0 20px !important; }
  /* Quiz layout lives in quiz/quiz.css. */
}

/* A normal reading sequence on touch-sized and short viewports. */
@media (max-width: 1023px), (max-height: 600px), (prefers-reduced-motion: reduce) {
  #process { height: auto !important; padding: 56px max(20px, env(safe-area-inset-left)) !important; max-width: 1440px; margin: 0 auto; box-sizing: border-box; }
  #process > div { position: static !important; height: auto !important; padding-top: 0 !important; overflow: visible !important; gap: 28px !important; }
  #process .proc-wrap { padding: 0 !important; }
  #process .proc-num { display: none !important; }
  #process .process-track p { color: rgba(255,255,255,.72) !important; }
  .process-track { display: grid !important; grid-template-columns: minmax(0,1fr); width: 100% !important; padding: 0 !important; gap: 0 !important; transform: none !important; counter-reset: step; }
  .process-track > div { gap: 0 !important; }
  .process-track > div > div:first-child { display: none !important; }
  .process-track > div > div:last-child { width: 100% !important; height: auto !important; min-height: 0; padding: 24px 0 !important; gap: 16px; border: 0 !important; border-top: 1px solid rgba(255,255,255,.24) !important; background: transparent !important; color: #fff !important; backdrop-filter: none !important; }
  .process-track h3 { display: flex; gap: 16px; font-size: clamp(28px, 7vw, 40px) !important; line-height: 1.08 !important; }
  .process-track h3::before { counter-increment: step; content: counter(step); font: 12px/2.5 Inter, sans-serif; color: #9a9a9a; flex-shrink: 0; }
  .process-track > div:last-child button { min-height: 56px; height: auto !important; padding: 14px 16px !important; flex-wrap: wrap; gap: 8px 16px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}