/* components.css — компоненты Persavel. Мобайл-first. Зависит от tokens.css + base.css. */

/* ════ КНОПКИ / CTA ════ */
.cta {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: var(--cta-h);
  padding: 0 var(--space-5);
  background: var(--cta); color: var(--cta-ink);
  font-size: var(--fs-body); font-weight: var(--fw-semibold);
  border: 0; border-radius: var(--radius); cursor: pointer;
  text-decoration: none; text-align: center; letter-spacing: .01em;
  transition: background calc(140ms * var(--motion)) ease, transform calc(120ms * var(--motion)) ease;
}
.cta:active { transform: translateY(1px); }
.cta--primary { box-shadow: var(--shadow-card); }
.cta[disabled], .cta[aria-disabled="true"] { background: var(--disabled-bg); color: var(--disabled-ink); cursor: not-allowed; opacity: .7; pointer-events: none; }
/* hover только на устройствах с мышью (P0-4: против залипшего hover на тач-экранах) */
@media (hover: hover) and (pointer: fine) {
  .cta:hover { background: var(--cta-press); }
}

/* ════ ХЕДЕР ════ */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--gutter);
  background: rgba(251, 246, 238, 0.92);                         /* fallback (Б11) */
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.1) blur(8px);             /* префикс (Б11) */
  backdrop-filter: saturate(1.1) blur(8px);
  border-bottom: 1px solid var(--line);
}
/* Поверх hero (Б2): absolute, чтобы лежать НА фото, а не толкать hero вниз.
   sticky оставлял хедер в потоке — логотип оказывался на кремовом, hero+хедер >1 экрана. */
.site-header[data-variant="on-hero"] {
  position: absolute; inset: 0 0 auto; width: 100%;
  background: transparent; border-bottom-color: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* При прокрутке (класс ставит site.js в подшаге 4) — закрепляем с подложкой */
.site-header[data-scrolled="true"] {
  position: fixed;
  background: rgba(251, 246, 238, 0.94);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  border-bottom-color: var(--line);
  -webkit-backdrop-filter: saturate(1.1) blur(8px); backdrop-filter: saturate(1.1) blur(8px);
}
/* scrolled перекрывает on-hero: комбинированным селектором (Б10: выше специфичность,
   иначе .site-header[data-variant=on-hero] .logo ниже по каскаду побеждал и логотип оставался светлым) */
.site-header[data-variant="on-hero"][data-scrolled="true"] .logo { color: var(--ink); }
.site-header[data-variant="on-hero"][data-scrolled="true"] .burger span { background: var(--ink); }
.site-header[data-scrolled="true"] .logo { color: var(--ink); }
.site-header[data-scrolled="true"] .burger span { background: var(--ink); }
.site-header[data-scrolled="true"] :where(a, button):focus-visible { outline-color: var(--focus-ring); }
.logo { font-weight: var(--fw-bold); font-size: 1.25rem; letter-spacing: -.01em; text-decoration: none; color: var(--ink); }
.site-header[data-variant="on-hero"] .logo { color: var(--ink-on-dark); }

.burger {
  width: var(--tap-min); height: var(--tap-min);
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  background: transparent; border: 0; cursor: pointer;
}
.burger span { width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform calc(160ms * var(--motion)) ease, opacity calc(160ms * var(--motion)) ease; }
.site-header[data-variant="on-hero"] .burger span { background: var(--ink-on-dark); }

/* Без JS: меню — компактная строка ссылок (НЕ развёрнутый вертикальный оверлей,
   чтобы не наезжать на hero). Прячем только при наличии JS, где работает бургер. */
.site-menu ul {
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  gap: var(--space-2) var(--space-4);
  padding: 0;
}
.site-menu a {
  display: inline-flex; align-items: center;
  min-height: 36px; padding: 2px 0;
  text-decoration: none; font-weight: var(--fw-medium); font-size: var(--fs-small);
}
.site-header[data-variant="on-hero"] .site-menu a { color: var(--ink-on-dark); }

/* С JS: меню сворачивается в бургер; раскрытие — выпадающей панелью */
html.menu-ready .site-menu { display: none; }
html.menu-ready .site-menu[data-open="true"] {
  display: block; position: absolute; top: 100%; left: 0; right: 0;
  background: var(--bg); border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-card); padding: var(--space-2) 0;
}
html.menu-ready .site-menu[data-open="true"] ul { flex-direction: column; justify-content: flex-start; gap: 0; }
html.menu-ready .site-menu[data-open="true"] a { padding: var(--space-3) var(--gutter); min-height: var(--tap-min); width: 100%; font-size: var(--fs-body); color: var(--ink); }

/* ════ HERO ════ */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero::after { /* затемняющий градиент к низу */
  content: ""; position: absolute; inset: 0; z-index: 1; background: var(--hero-scrim);
}
.hero__overlay { position: relative; z-index: 2; padding: var(--gutter); padding-bottom: var(--space-7); width: 100%; max-width: var(--container); margin-inline: auto; }
.hero__overlay h1 { color: var(--ink-on-dark); margin-bottom: var(--space-3); }
.hero__sub { color: var(--ink-on-dark-2); font-size: var(--fs-body); margin-bottom: var(--space-5); }
.hero .cta { margin-bottom: var(--space-3); }

.trust-badge { display: flex; align-items: center; gap: var(--space-2); color: var(--ink-on-dark-2); font-size: var(--fs-small); }
.trust-badge__icon { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--sage-bg); display: inline-flex; align-items: center; justify-content: center; position: relative; }
.trust-badge__icon::after { content: ""; width: 16px; height: 16px; background: var(--sage); -webkit-mask: url("/assets/icons/shield.svg") center / contain no-repeat; mask: url("/assets/icons/shield.svg") center / contain no-repeat; }

/* ════ СЕКЦИИ — заголовки ════ */
.section__sub { color: var(--ink-2); font-size: var(--fs-body); margin-top: var(--space-2); margin-bottom: var(--space-5); }
.section h2 { margin-bottom: var(--space-2); }

/* ════ КАРТОЧКИ ════ */
.cards { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
.cards--4 { grid-template-columns: 1fr; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-5); }
.card h3 { margin-bottom: var(--space-2); }
.card p { color: var(--ink-2); font-size: var(--fs-small); }

/* ════ ДЕМО-КАРТОЧКА «Пример отчёта» ════ */
.demo-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-5); }
.demo-card__label { display: inline-block; font-size: var(--fs-kicker); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .05em; color: var(--terra-text); background: rgba(181, 97, 63, 0.12); background: color-mix(in srgb, var(--terra) 12%, transparent); padding: 4px 10px; border-radius: var(--radius-pill); margin-bottom: var(--space-4); }
.demo-card__radar { max-width: 380px; margin: 0 auto var(--space-4); }
.demo-card__radar svg { width: 100%; height: auto; display: block; }
.demo-card__scales { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-3); }
.demo-card__scales li { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--fs-small); padding-bottom: var(--space-2); border-bottom: 1px solid var(--line); }
.demo-card__hint { font-size: var(--fs-small); color: var(--ink-2); }

/* ════ СПИСКИ ════ */
.plain-list { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }
.plain-list li { position: relative; padding-left: var(--space-5); color: var(--ink); }
.plain-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--sage); }

.steps { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-4); counter-reset: step; }
.steps li { position: relative; padding-left: var(--space-7); }
.steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: -2px; width: 32px; height: 32px; border-radius: 50%; background: var(--sage-bg); color: var(--teal); font-weight: var(--fw-bold); display: flex; align-items: center; justify-content: center; }
.how__note { color: var(--ink-2); font-size: var(--fs-small); margin-top: var(--space-4); }

/* ════ СРАВНЕНИЕ (сколько потратили) ════ */
.compare { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.compare__col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-5); }
.compare__col--ours { border-color: var(--sage); background: var(--sage-bg); }
.compare__col h3 { margin-bottom: var(--space-2); }
.compare__note { color: var(--ink-2); font-size: var(--fs-small); margin-top: var(--space-2); }
.spent__kicker { font-weight: var(--fw-semibold); margin: var(--space-5) 0 var(--space-4); }

/* ════ FAQ-аккордеон на нативном <details>/<summary> (Б3: работает без JS) ════ */
.faq-list { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.faq-item__q {
  list-style: none; cursor: pointer;
  padding: var(--space-4); min-height: var(--tap-min);
  font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--ink);
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
}
.faq-item__q::-webkit-details-marker { display: none; }   /* убрать дефолтный треугольник */
.faq-item__q::after { content: "+"; font-size: 1.4em; font-weight: 400; color: var(--ink-2); transition: transform calc(160ms * var(--motion)) ease; }
.faq-item[open] .faq-item__q::after { transform: rotate(45deg); }
.faq-item__q:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: calc(-1 * var(--focus-width)); }
.faq-item__a { padding: 0 var(--space-4) var(--space-4); color: var(--ink-2); font-size: var(--fs-small); }
.faq-item__a p { font-size: inherit; }

/* ════ ФИНАЛЬНЫЙ CTA ════ */
.final-cta { text-align: center; }
.final-cta__note { color: var(--ink-2); font-size: var(--fs-small); margin-top: var(--space-3); }

/* ════ ФУТЕР ════ */
.site-footer { background: var(--surface-2); border-top: 1px solid var(--line); padding: var(--space-6) var(--gutter); margin-top: var(--space-7); }
.site-footer__age { font-weight: var(--fw-bold); margin-bottom: var(--space-3); }
.site-footer__legal ul { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-4); }
.site-footer__legal a { display: inline-flex; align-items: center; min-height: var(--tap-min); font-size: var(--fs-small); color: var(--ink-2); text-decoration: underline; }
.site-footer__req, .site-footer__disclaimer { font-size: var(--fs-small); color: var(--ink-2); margin-bottom: var(--space-3); }
.site-footer__disclaimer { padding: var(--space-3); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.site-footer__lang { font-size: var(--fs-kicker); color: var(--ink-2); }

/* ════ COOKIE-БАННЕР (D5) ════ */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-banner); background: var(--ink); color: var(--ink-on-dark); padding: var(--space-4) var(--gutter); box-shadow: var(--shadow-sticky); max-height: min(90dvh, 720px); overflow-y: auto; padding-bottom: max(var(--space-4), env(safe-area-inset-bottom)); }
.cookie-banner p { font-size: var(--fs-small); color: var(--ink-on-dark-2); margin-bottom: var(--space-3); max-width: var(--container); margin-inline: auto; }
.cookie-banner a { color: var(--ink-on-dark); text-decoration: underline; }
.cookie-banner__actions { display: flex; flex-direction: column; gap: var(--space-2); max-width: var(--container); margin-inline: auto; }
.cookie-banner__actions button { min-height: var(--tap-min); padding: 0 var(--space-4); border-radius: var(--radius); font-weight: var(--fw-semibold); cursor: pointer; border: 1px solid transparent; }
.cookie-banner__actions [data-cookie="accept-all"] { background: var(--cta); color: var(--cta-ink); }
.cookie-banner__actions [data-cookie="necessary"] { background: transparent; color: var(--ink-on-dark); border-color: var(--ink-on-dark-2); }
.cookie-banner__actions [data-cookie="settings"] { background: transparent; color: var(--ink-on-dark-2); text-decoration: underline; border: 0; min-height: var(--tap-min); padding: var(--space-2); }

/* ═══════════════════════════════════════════════════════════
   АДАПТИВ (подшаг 3). Мобайл-first: базовые стили выше — для телефона,
   ниже — расширения для планшета (≥680) и десктопа (≥1024).
   ═══════════════════════════════════════════════════════════ */

/* ──────── ПЛАНШЕТ ≥680px ──────── */
@media (min-width: 680px) {
  /* Текстовые секции остаются читаемой колонкой; крупнее вертикальный ритм */
  .section { padding-block: var(--space-8); }

  /* H1/H2 крупнее */
  h1 { font-size: 2.5rem; }      /* 40px */
  h2 { font-size: 1.75rem; }     /* 28px */

  /* «Что вы получите» — 4 карточки в 2 колонки */
  .cards--4 { grid-template-columns: 1fr 1fr; }

  /* Сравнение — 2 колонки рядом */
  .compare { grid-template-columns: 1fr 1fr; }

  /* Hero-текст ограничиваем по ширине, чтобы строки не растягивались */
  .hero__overlay h1 { max-width: 14ch; }
  .hero__sub { max-width: 42ch; }
  .hero .cta { width: auto; min-width: 280px; }

  /* CTA-секции: кнопка не на всю ширину */
  .final-cta .cta, .spent .cta { width: auto; min-width: 280px; }
}

/* ──────── ДЕСКТОП ≥1024px ──────── */
@media (min-width: 1024px) {
  /* Грид-блоки выходят в широкий контейнер; текстовые остаются узкими.
     Делаем это на конкретных секциях через внутренний приём ниже. */
  h1 { font-size: 3rem; }        /* 48px */

  /* «Что вы получите» — широкий контейнер + 4 в ряд.
     Секция .get центрируется широким контейнером, контент-обёртки внутри. */
  .get, .distinct, .spent, .how, .privacy, .faq, .final-cta, .burnout-block {
    max-width: var(--container-wide);
  }
  /* но читаемые текстовые элементы внутри грид-секций держим узкими */
  .get .section__sub, .how .steps, .privacy .plain-list, .distinct .plain-list,
  .faq .faq-list, .burnout-block p, .spent .compare {
    max-width: var(--container); margin-inline: auto;
  }
  .cards--4 { grid-template-columns: repeat(4, 1fr); }

  /* Hero-текст ещё крупнее, блок ограничен */
  .hero__overlay { padding-bottom: var(--space-8); }
  .hero__overlay h1 { font-size: 3.25rem; }  /* 52px */

  /* Меню на десктопе показываем строкой даже с JS (бургер прячем) */
  html.menu-ready .site-header .burger { display: none; }
  html.menu-ready .site-menu { display: block; position: static; background: transparent; border: 0; box-shadow: none; padding: 0; }
  html.menu-ready .site-menu ul { flex-direction: row; justify-content: flex-end; gap: var(--space-5); }
  html.menu-ready .site-menu a { padding: 0; min-height: auto; width: auto; font-size: var(--fs-small); color: var(--ink); }
  .site-header[data-variant="on-hero"] .site-menu a { color: var(--ink-on-dark); }
  .site-header[data-scrolled="true"] .site-menu a { color: var(--ink); }
}

/* ──────── COOKIE-БАННЕР: 2 колонки с 960px (Геша P1-8) ──────── */
@media (min-width: 960px) {
  .cookie-banner { display: flex; align-items: center; gap: var(--space-5); }
  .cookie-banner p { margin-bottom: 0; flex: 1; max-width: none; }
  .cookie-banner__actions { flex-direction: row; flex: 0 0 auto; max-width: none; }
  .cookie-banner__actions button { white-space: nowrap; }
}