/* ═══════════════════════════════════════════════════════════════════════════
   Промо-дровер «Собес с AI-дизайн-директором».
   Общий компонент для двух точек входа: HR-фидбек (index.html/SPA) и ЛК
   (account.html). Разметку и контроллер собирает promo_drawer.js.

   Механика (Figma «AI mock sobes»):
   - Десктоп (602:4097): выезжает справа, ширина фикс 800px при экране ≥1000px,
     ниже 1000 — адаптив вниз (всегда зазор слева 200px). Крестик — белый круг
     слева от панели. Контент 800/pad 32/gap секций 60.
   - Мобилка (700:1007, ≤550px): шторка снизу, скруглённый верх, крестик справа
     сверху над шторкой. Контент pad 24/gap 48, тексты по левому краю, H1 24px.
   - Фон под дровером: backdrop-filter blur(20px) + затемнение (Figma «blur»,
     BACKGROUND_BLUR radius 20).

   Палитра (из макета): bg #080808, карточки/ячейки #191919, контейнер таблицы
   #212121, бордер чипсов #434343, акцент #ffe266, приглушённый #c5c5c5,
   вторичный в таблице #afafaf.
   ═════════════════════════════════════════════════════════════════════════ */

.dd-overlay {
  --dd-bg: #080808;
  --dd-card: #191919;
  --dd-table: #212121;
  --dd-border: #434343;
  --dd-yellow: #ffe266;
  --dd-ink: #191919;
  --dd-muted: #c5c5c5;
  --dd-2nd: #afafaf;

  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  justify-content: flex-end; /* панель прижата вправо (десктоп) */
  align-items: stretch;

  background: rgba(4, 4, 4, 0.5);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);

  opacity: 0;
  transition: opacity 0.28s ease;
}
.dd-overlay.dd-open { opacity: 1; }
.dd-overlay[hidden] { display: none; }

/* Блокировка прокрутки фоновой страницы, пока дровер открыт. */
html.dd-lock, html.dd-lock body { overflow: hidden; }

/* ── Панель ─────────────────────────────────────────────────────────────── */
.dd-drawer {
  position: relative;
  width: min(800px, 100vw - 200px); /* фикс 800 при ≥1000; ниже — зазор 200 */
  height: 100%;
  background: var(--dd-bg);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
/* Открытое состояние — единый identity для обеих осей (X десктоп / Y мобилка):
   так при смене брейкпоинта на открытом дровере (поворот планшета) не залипает
   старый transform. Закрытое состояние задаёт ось отдельно (ниже + в @media). */
.dd-overlay.dd-open .dd-drawer { transform: none; }

/* Скролл-контейнер — панель не растёт, контент прокручивается внутри. */
.dd-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.dd-page {
  box-sizing: border-box;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 60px;
  color: #fff;
  font-family: var(--font-family, 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}

/* ── Крестик закрытия ───────────────────────────────────────────────────── */
.dd-close {
  position: absolute;
  top: 20px;
  left: -56px; /* белый круг слева от панели, в затемнённой зоне */
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: #191919;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
  z-index: 2;
  padding: 0;
}
.dd-close:hover { background: #f0f0f0; }
.dd-close svg { width: 18px; height: 18px; display: block; }

/* ── Типографика ────────────────────────────────────────────────────────── */
.dd-h1 {
  margin: 0;
  font-size: 32px;
  line-height: 32px;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: #fff;
  text-align: center;
}
.dd-h2 {
  margin: 0;
  max-width: 560px;
  font-size: 24px;
  line-height: 24px;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: #fff;
  text-align: center;
}
.dd-sub {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.02em;
  color: var(--dd-muted);
  text-align: center;
}
.dd-accent { color: var(--dd-yellow); }

/* ── Кнопка «Купить доступ» ─────────────────────────────────────────────── */
.dd-buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  background: var(--dd-yellow);
  color: var(--dd-ink);
  font-family: inherit;
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  white-space: nowrap;
  cursor: pointer;
}
.dd-buy:hover { filter: brightness(0.96); }
.dd-buy:disabled { opacity: 0.7; cursor: default; }

/* ── Секция-обёртка (заголовок + контент) ───────────────────────────────── */
.dd-sec {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}

/* ── 1. Hero ────────────────────────────────────────────────────────────── */
.dd-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}
.dd-hero__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.dd-hero__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.dd-proof { display: flex; align-items: center; gap: 8px; }
.dd-proof__faces { display: inline-flex; }
.dd-proof__faces i {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--dd-card);
  background-color: #c9c2b6; /* фолбэк, если фото не подгрузилось */
  background-size: cover;
  background-position: center;
}
.dd-proof__faces i + i { margin-left: -8px; }
.dd-proof__faces i:nth-child(1) { background-image: url(/assets/landing/avatar-hero-01.png); }
.dd-proof__faces i:nth-child(2) { background-image: url(/assets/landing/avatar-hero-02.png); }
.dd-proof__faces i:nth-child(3) { background-image: url(/assets/landing/avatar-hero-03.png); }
.dd-proof__txt {
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.02em;
  color: var(--dd-muted);
}

/* ── 2. Таблица сравнения ───────────────────────────────────────────────── */
.dd-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 16px;
}
.dd-table {
  min-width: 720px;
  box-sizing: border-box;
  background: var(--dd-table);
  border-radius: 16px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dd-tr { display: flex; gap: 2px; }
.dd-cell {
  box-sizing: border-box;
  background: var(--dd-card);
  border-radius: 8px;
  padding: 20px 24px;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.02em;
}
.dd-cell--label { flex: 0 0 158px; font-weight: 700; color: #fff; }
.dd-cell--dd { flex: 1 1 0; min-width: 0; color: #fff; }
.dd-cell--hr { flex: 1 1 0; min-width: 0; color: var(--dd-2nd); }
.dd-tr--head .dd-cell--dd,
.dd-tr--head .dd-cell--hr { font-weight: 700; color: #fff; }

/* ── 3. 50+ вопросов ────────────────────────────────────────────────────── */
.dd-qs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 400px;
  max-width: 100%;
  margin: 0 auto;
}
.dd-q {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px;
  background: var(--dd-card);
  border-radius: 8px;
}
.dd-q__ic { width: 16px; height: 16px; display: block; flex: none; }
.dd-q__t {
  margin: 0;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.02em;
  color: #fff;
  text-align: left;
}

/* ── 4. Скриншоты «на выходе» ───────────────────────────────────────────── */
.dd-shots { display: flex; gap: 8px; width: 100%; }
.dd-shot {
  margin: 0;
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 364 / 228; /* пропорции карточки-скрина: высота едет за шириной */
  background: var(--dd-card);
  border-radius: 16px;
  overflow: hidden;
}
.dd-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Скрин скоринга (dd-shot--blur) уже подготовлен с блюром снизу в самом файле —
   CSS-блюр НЕ накладываем, иначе картинка двоится/мылится. */

/* ── 5. Блоки внутри собеса (чипсы) ─────────────────────────────────────── */
.dd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  width: 100%;
}
.dd-chip {
  box-sizing: border-box;
  padding: 16px;
  border: 1px solid var(--dd-border);
  border-radius: 16px;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.02em;
  color: #fff;
}

/* ── 6. Нижний CTA ──────────────────────────────────────────────────────── */
.dd-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}
.dd-cta__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 560px;
}

/* ═══ Мобилка ≤550px: шторка снизу, левое выравнивание ═══════════════════ */
@media (max-width: 550px) {
  .dd-overlay {
    justify-content: center;
    align-items: flex-end;
  }
  .dd-drawer {
    width: 100%;
    height: auto;
    max-height: 92vh;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%); /* закрытая шторка снизу; открытая — transform:none выше */
  }

  .dd-close { top: -52px; left: auto; right: 16px; }

  .dd-page { padding: 24px; gap: 48px; }

  .dd-h1 { font-size: 24px; line-height: 24px; text-align: left; }
  .dd-h2 { text-align: left; max-width: none; }
  .dd-sub { text-align: left; }

  .dd-hero { align-items: stretch; max-width: none; }
  .dd-hero__cta { align-items: stretch; }
  .dd-buy { width: 100%; }

  .dd-sec { align-items: stretch; }
  .dd-cta { align-items: stretch; }
  .dd-cta__head { align-items: flex-start; max-width: none; }

  .dd-qs { width: 100%; }
  .dd-shots { flex-direction: column; } /* высоту держит aspect-ratio выше */
  .dd-chips { justify-content: flex-start; }

  /* На мобилке подписи и шапка таблицы — жёлтые (Figma 700:1008). */
  .dd-cell--label { color: var(--dd-yellow); }
  .dd-tr--head .dd-cell--dd,
  .dd-tr--head .dd-cell--hr { color: var(--dd-yellow); }
}

@media (prefers-reduced-motion: reduce) {
  .dd-overlay, .dd-drawer { transition: none; }
}