/* Адаптив брендовых и служебных страниц: «О нас», приложение, контакты, работа, кабинет, путь, документы.
   Подключается последним. Брейкпоинты: телефон <=600, планшет 601–900, ноутбук 901–1100, десктоп >1100;
   отдельно — низкие экраны (max-height) для липких сцен «О нас». */

/* ---------- «О нас» ---------- */

/* about-motion.js режет заголовок на слова-спаны .w — правило «h1 span = лаванда» красило весь заголовок. */
.about-hero h1 .w{color:inherit}

/* Липкие сцены: высота видимой области без панелей браузера на телефоне. */
@supports(height:100svh){
  .about-page.motion-on .about-chaos-stage,.about-page.motion-on .about-manifesto-stage{height:100svh}
}

/* Клетки таблицы: длинная «Сортировка: популярное» не обрезается, а переносится. */
.about-chaos-grid span{white-space:normal;line-height:1.25;padding-block:8px;overflow-wrap:break-word}

/* Манифест без анимации (reduced motion / без JS): заголовок держится сверху, а не уезжает в середину длинного списка. */
.about-page:not(.motion-on) .about-manifesto-stage{align-items:start}
.about-page:not(.motion-on) .about-manifesto-head{position:sticky;top:24px}

/* Чат-сцена: финальная фраза не наезжает на кота. */
.about-chat-scene strong{margin-right:min(150px,26%)}

/* «Что мы обещаем»: главная карточка на три строки — иначе четвёртая карточка выпадала под неё. */
@media(min-width:761px){
  .about-value-composition .about-value-main{grid-row:span 3}
}

/* Ноутбук и планшет 2×2: у второго ряда тот же левый край, что у первого. */
@media(max-width:1100px) and (min-width:761px){
  .about-audience-track article:nth-child(odd){padding-left:0}
  .about-audience-track article:nth-child(even){padding-left:25px}
}

/* Планшет: не растянутый телефон — пары «заголовок | текст» и «картинка | призыв» остаются в две колонки. */
@media(max-width:900px) and (min-width:601px){
  .about-friction-list article{grid-template-columns:minmax(170px,.75fr) minmax(0,1.25fr);gap:28px}
  .about-chat-scene{max-width:600px;width:100%;justify-self:center}
  .about-final{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:32px}
  .about-final>img{max-height:300px}
  .about-final .button{width:auto}
  .about-visual-collage{min-height:520px;max-width:600px;width:100%;justify-self:center}
}

/* Игра: билет больше не ложится на подпись. */
@media(max-width:900px){
  .about-game-intro{min-height:0;padding-right:150px;position:relative}
  .about-game-intro img{width:130px;left:auto;right:0;top:0;bottom:auto}
  .about-game-section .taste-game-play{min-height:0}
}

/* Телефон: хаос смягчается, текст остаётся в потоке. */
@media(max-width:600px){
  .about-poster{font-size:32px;letter-spacing:-1.5px;padding:18px 20px 22px;transform:rotate(-4deg);box-shadow:6px 7px 0 var(--panel)}
  .about-hero-cat{width:80%;right:-6%}
  .about-hero-ticket{width:80px;right:0}
  .about-hand-note{font-size:12px}

  .about-chat-scene{min-height:0;padding:24px 0 150px}
  .about-chat-scene p{font-size:14px}
  .about-chat-scene p span{font-size:11px;padding-right:8px}
  .about-chat-scene p:nth-child(2){margin-left:12%}
  .about-chat-scene p:nth-child(3){margin-left:4%}
  .about-chat-scene strong{align-self:flex-start;max-width:72%;margin-right:0;font-size:20px;transform:rotate(-2deg)}
  .about-chat-scene img{width:150px;right:-4%}

  .about-purpose-statement:after{font-size:40px;top:16px;right:16px}
  .about-purpose-statement p{padding-right:44px}

  .about-page .about-method-flow{min-height:0;padding-bottom:150px}
  .about-page .about-method-flow>div{max-width:86%}
  .about-page .about-method-flow>div:nth-child(2){margin-left:7%}
  .about-page .about-method-flow>div:nth-child(3){margin-left:14%}
  .about-method-flow img{width:170px;right:-4%}

  .about-lavender-sheet{font-size:36px;transform:rotate(-4deg);box-shadow:8px 9px 0 var(--panel)}
  .about-visual-collage{min-height:400px}

  .about-game-intro{padding-right:0}
  .about-game-intro img{position:static;display:block;width:110px;margin:8px 0 0 auto;transform:rotate(-8deg)}
  .about-final>img{max-height:240px}
}

/* Липкий манифест на низком экране телефона в альбомной ориентации: две колонки вместо стопки. */
@media(max-width:900px) and (max-height:520px) and (orientation:landscape){
  .about-manifesto-stage{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:28px;align-content:center}
  .about-manifesto-head .section-label{margin-bottom:8px}
  .about-manifesto-head h2{font-size:clamp(22px,4.2vw,32px)!important;letter-spacing:-.03em!important;margin-bottom:0}
  .about-page .about-manifesto-list{height:78vh}
  .about-page .about-manifesto-list h3{font-size:clamp(28px,11vh,52px)!important;margin-bottom:10px}
  .about-page .about-manifesto-list p{font-size:15px;line-height:1.5}
  .about-chaos-copy h2{font-size:clamp(40px,16vh,80px)!important;margin-bottom:14px}
  .about-chaos-copy p{font-size:15px}
}
/* Низкий десктоп: подзаголовок манифеста уступает место принципам. */
@media(min-width:901px) and (max-height:560px){
  .about-manifesto-head>p:not(.section-label){display:none}
  .about-manifesto-head h2{font-size:clamp(32px,4vw,48px)!important}
}

/* ---------- Приложение ---------- */
.app-final h2,.app-landing h2,.app-hero h1{text-wrap:balance}
@media(max-width:900px) and (min-width:601px){
  .app-gifts{grid-template-columns:minmax(0,1fr) 170px;gap:24px}
  .app-gifts img{max-width:170px}
}
@media(max-width:600px){
  .app-hero-cat{left:0;width:58%}
  .app-hero-visual .qr-frame{margin-right:2px}
  .app-ach-grid figure:nth-child(odd){transform:rotate(-1deg)}
  .app-ach-grid figure:nth-child(even){transform:rotate(1deg) translateY(10px)}
}

/* ---------- Контакты ---------- */
/* Абзац согласия в колонке растягивался по flex-basis 260px — пустота под кнопкой. */
.contact-submit p{min-width:0}
@media(max-width:900px) and (min-width:601px){
  .contact-aside{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .contact-aside>div{padding:18px}
}
@media(max-width:600px){
  .contact-submit p{flex:none}
  /* Темы — пилюли в строку, а не восемь полноширинных плиток. */
  .contact-topic-grid{display:flex;flex-wrap:wrap;gap:8px}
  .contact-topic span{min-height:44px;padding:10px 16px;border-radius:999px;font-size:15px}
  .contact-topics legend{font-size:18px}
}

/* ---------- Кабинет ---------- */
/* Вторичная кнопка в карточке была цвета карточки — читалась как текст со странным отступом. */
.account-section .button.secondary{background:var(--bg)}
/* Выбранная категория на всю ширину оставляла дыру в сетке. */
.interest-cards{grid-auto-flow:row dense}
@media(max-width:900px){
  .account-nav{padding-right:32px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
}
@media(max-width:900px) and (min-width:601px){
  .profile-dashboard{grid-template-columns:minmax(0,1fr) 220px;gap:24px}
  .dashboard-path{display:flex;flex-direction:column;align-items:start}
  .dashboard-path img{width:140px;height:140px;margin:0 auto 6px}
}
@media(max-width:600px){
  .login-panel>div:first-child{position:relative;min-height:0;padding-right:0}
  .login-panel>div:first-child .section-label{padding-right:96px}
  .login-panel>div:first-child h2{padding-right:72px}
  .login-panel>div:first-child img{position:absolute;right:-8px;top:-6px;width:96px;max-width:96px;margin:0}
  .login-panel>div:first-child p:not(.section-label){font-size:15px;max-width:none}
  .account-section .button.secondary,.login-panel .auth-method{width:100%;justify-content:center}
  /* Сохранение интересов всегда под пальцем, даже в длинном списке. */
  .interest-actions{position:sticky;bottom:0;z-index:3;margin-inline:-24px;margin-bottom:-24px;padding:12px 24px calc(14px + env(safe-area-inset-bottom));background:var(--panel);border-top:1px solid var(--line);border-radius:0 0 22px 22px}
  .dashboard-path{grid-template-columns:84px minmax(0,1fr);gap:0 14px;padding:18px}
  .dashboard-path img{width:84px;height:100px}
}

/* ---------- Путь ---------- */
.path-extra summary{padding-block:10px}
#path-rules{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 22px}
#path-rules p{margin:0;padding:10px 16px;border-radius:999px;background:var(--panel);color:var(--gray300,#d6d7d8);font-size:14px;line-height:1.4}
.path-achievement{display:flex;flex-direction:column}
.path-achievement h3{overflow-wrap:break-word;hyphens:auto}
@media(max-width:900px) and (min-width:601px){
  .path-level{grid-template-columns:200px minmax(0,1fr);gap:28px}
  .path-level img{height:200px}
  .path-achievements{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:600px){
  .path-achievement p{font-size:13px;line-height:1.6}
  .path-achievement small{font-size:12px}
}
@media(max-width:360px){
  .path-achievements{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Документы ---------- */
.legal-nav a{display:flex;align-items:center;min-height:44px}

/* Метка «ВО ЧТО МЫ ВЕРИМ» на телефоне пряталась вместе с подзаголовком; без анимации подзаголовок нужен в потоке. */
@media(max-width:900px){
  .about-manifesto-head p.section-label{display:block}
  .about-page:not(.motion-on) .about-manifesto-head p{display:block}
  .about-page:not(.motion-on) .about-manifesto-head{position:static}
}
@media(max-width:600px){
  .interest-actions{flex-wrap:nowrap;gap:16px}
  .interest-actions>.button{width:auto;flex:1 1 auto}
  .interest-actions>.text-button{flex:none;min-height:44px}
}

/* Игра «Соберём вечер»: чипы были цвета фона игрового поля — варианты читались как обычный текст. */
.about-game-section .game-options .chip{background:var(--panel);border-color:var(--line)}
.about-game-section .game-options .chip[aria-pressed=true],.about-game-section .game-options .chip.active{background:var(--selected-bg);border-color:var(--purple);color:var(--purple)}
@media(max-width:600px){
  /* Результаты игры: название события переносится на две строки, а не режется многоточием на узком экране. */
  .about-page .about-game-section{padding:16px}
  .about-page .about-game-section .taste-game-play{padding:18px 14px}
  .about-page .about-game-section .game-results a{grid-template-columns:48px minmax(0,1fr) 16px;gap:10px}
  .about-page .about-game-section .game-results :is(small,em){white-space:normal;overflow:visible}
  .about-page .about-game-section .game-results strong{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow-wrap:break-word}
}
@media(max-width:900px) and (min-width:601px){
  .about-page .about-friction-list h3{font-size:24px}
}
@media(max-width:900px) and (min-width:601px){
  .about-page .about-value-composition article:not(.about-value-main) h3,.about-page .about-roadmap-grid article:not(.is-now) h3{font-size:22px;letter-spacing:-.4px}
  .about-game-intro img{width:110px}
}