/*
  responsive.css — cross-device layout system
  Принцип: компактность = нет лишнего; пространство = достаточно воздуха.
*/

/* ══════════════════════════════════════
   SPACING TOKENS (CSS custom props)
══════════════════════════════════════ */
:root {
  --sp-section: 96px;
  --sp-section-sm: 64px;
  --sp-section-xs: 48px;
  --sp-container: 24px;
}

/* ══════════════════════════════════════
   LARGE DESKTOP  ≥ 1280px
══════════════════════════════════════ */
@media (min-width: 1280px) {
  .container { padding: 0 40px; }
}

/* ══════════════════════════════════════
   LAPTOP  1025px – 1279px
══════════════════════════════════════ */
@media (min-width: 1025px) and (max-width: 1279px) {
  .container { padding: 0 28px; }
  .hero__big-num { font-size: clamp(5rem, 9vw, 8rem); }
  .speaker__layout { grid-template-columns: 1fr 220px 1fr; gap: 28px; }
}

/* ══════════════════════════════════════
   TABLET  769px – 1024px
══════════════════════════════════════ */
@media (max-width: 1024px) {
  .section { padding: var(--sp-section-sm) 0; }

  /* Speaker: hide photo col, keep text */
  .speaker__layout { grid-template-columns: 1fr 1fr; gap: 24px; }
  .speaker__photo { display: none; }
  .speaker__info h2 { font-size: clamp(1.8rem, 3.5vw, 2.4rem); }

  /* Steps arc: 2 columns */
  .steps-arc {
    grid-template-columns: 1fr 36px 1fr;
    grid-template-rows: auto;
    gap: 16px 0;
  }
  .step-arc__arrow--down,
  .step-arc__arrow--up { padding: 0; align-self: center; }

  /* Program days */
  .program-days { grid-template-columns: 1fr 1fr; gap: 16px; }

  /* Feat rows */
  .feat-row { grid-template-columns: 1fr 1fr; }

  /* About dark stats */
  .feat-row .feat-num:last-child { grid-column: 1 / -1; }

  /* Footer */
  .footer__inner { grid-template-columns: 1fr 1fr 1fr; gap: 32px 28px; }
  .footer__inner > :first-child { grid-column: 1 / -1; }

  /* Cabinet */
  .cab-sidebar { width: 220px; padding: 20px 14px; }
  .cab-nav__item { font-size: 0.82rem; padding: 9px 10px; gap: 8px; }
}

/* ══════════════════════════════════════
   MOBILE  ≤ 768px
══════════════════════════════════════ */
@media (max-width: 768px) {
  .section { padding: var(--sp-section-sm) 0; }
  .container { padding: 0 20px; }
  .section__title { margin-bottom: 32px; font-size: clamp(1.5rem, 5vw, 2.2rem); }

  /* Audience grid: 2 col */
  .audience-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .audience-item { padding: 18px 14px; gap: 8px; }
  .audience-item p { font-size: 0.78rem; }

  /* Stats bar: 2 col */
  .stats-bar__grid { grid-template-columns: repeat(2, 1fr); gap: 0; }
  .stats-bar__item { padding: 20px 12px; border-right: 1px solid rgba(255,255,255,0.07); border-bottom: 1px solid rgba(255,255,255,0.07); }
  .stats-bar__item:nth-child(2n) { border-right: none; }
  .stats-bar__num { font-size: clamp(1.8rem, 7vw, 2.4rem); }

  /* Stat cards */
  .stats-row { gap: 10px; }
  .stat-card { padding: 18px 20px; min-width: 0; flex: 1 1 calc(50% - 10px); }
  .stat-card__val { font-size: 2rem; }

  /* Speaker: stack */
  .speaker__layout { grid-template-columns: 1fr; }
  .speaker__info h2 { font-size: clamp(1.6rem, 6vw, 2.4rem); }

  /* Steps arc: linear vertical */
  .steps-arc {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 28px;
  }
  .step-arc__arrow--down,
  .step-arc__arrow--up {
    display: flex;
    justify-content: center;
    padding: 0;
    font-size: 1rem;
    opacity: 0.5;
  }
  .step-arc__arrow--down::before,
  .step-arc__arrow--up::before { content: '↓'; }

  /* Program days: 1 col */
  .program-days { grid-template-columns: 1fr; gap: 12px; }
  .program-day { padding: 22px 18px; }

  /* Cards 3 */
  .cards-3 { gap: 12px; }
  .card { padding: 24px 20px; }

  /* Feat row */
  .feat-row { grid-template-columns: 1fr; gap: 20px; }
  .feat-num__n { font-size: 2.8rem; }

  /* Footer */
  .footer__inner { grid-template-columns: 1fr 1fr; gap: 24px 20px; }
  .footer__inner > :first-child { grid-column: 1 / -1; }

  /* Page hero */
  .page-hero:not(.page-hero--about):not(.page-hero--learn):not(.page-hero--blog):not(.page-hero--trainer) { padding: 88px 0 40px; }
  .page-hero__title { font-size: clamp(1.6rem, 5.5vw, 2.4rem); }

  /* Quiz stage: stack */
  .about-quiz__stage { grid-template-columns: 1fr; }
  .about-quiz__side { display: none; }
  .about-quiz__question-card { min-height: auto; }
}

/* ══════════════════════════════════════
   MOBILE  ≤ 640px
══════════════════════════════════════ */
@media (max-width: 640px) {
  .section { padding: var(--sp-section-xs) 0; }
  .container { padding: 0 16px; }

  /* Audience: 1 col on very small */
  .audience-grid { grid-template-columns: 1fr; }

  /* Teaser carousel: smaller card on xs */
  .teaser-card { flex: 0 0 min(234px, 78vw); padding: 18px 14px; }
  .teaser-card .btn { width: 100%; justify-content: center; }

  /* Stat cards: 1 col */
  .stat-card { flex: 1 1 100%; }

  /* Review carousel: single */
  .review-card { flex: 0 0 calc(100% - 20px); }

  /* Speaker quote: adjust */
  .speaker-quote { padding: 24px 20px; }

  /* Section title */
  .section__title { margin-bottom: 24px; }

  /* Footer: 1 col */
  .footer__inner { grid-template-columns: 1fr; gap: 20px; }
  .footer__inner > :first-child { grid-column: 1; }
  .footer__bottom { flex-direction: column; gap: 12px; }
  .footer__disclaimer { text-align: left; max-width: 100%; }

  /* Cabinet mobile */
  .cab-sidebar { width: 100%; padding: 16px; border-right: none; border-bottom: 1px solid var(--border-color); }
  .cab-nav { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .cab-nav__item { padding: 8px 10px; font-size: 0.75rem; gap: 6px; flex: 0 0 auto; }
  .cab-nav__item .cab-nav__label { display: none; }
  .cab-nav__item svg { width: 20px; height: 20px; }
  .cab-main { padding: 16px; }

  /* Header compact */
  .logo { font-size: 1.05rem; }
}

/* ══════════════════════════════════════
   SMALL MOBILE  ≤ 480px
══════════════════════════════════════ */
@media (max-width: 480px) {
  .section { padding: 40px 0; }
  .container { padding: 0 14px; }

  /* Learn grid: carousel already handled */
  .learn-promo-banner { padding: 16px; gap: 12px; }
  .learn-promo-social { padding: 6px 10px; font-size: 0.72rem; }

  /* Typography */
  h2 { font-size: clamp(1.3rem, 6vw, 1.8rem); }
  h3 { font-size: 0.95rem; }

  /* Buttons */
  .btn { padding: 13px 20px; font-size: 0.78rem; }
  .btn--lg { padding: 14px 24px; font-size: 0.8rem; }

  /* Stats bar: 1 col */
  .stats-bar__grid { grid-template-columns: 1fr; }
  .stats-bar__item { border-right: none; }

  /* Page hero */
  .page-hero:not(.page-hero--about):not(.page-hero--learn):not(.page-hero--blog):not(.page-hero--trainer) { padding: 78px 0 32px; }

  /* Audience */
  .audience-item span { font-size: 1.4rem; }

  /* Modal */
  .modal__box { padding: 28px 18px; }
}

/* ══════════════════════════════════════
   OVERFLOW GUARD — global
══════════════════════════════════════ */
img, video, iframe, canvas { max-width: 100%; }
table { max-width: 100%; overflow-x: auto; display: block; }
pre, code { overflow-x: auto; }

/* ══════════════════════════════════════
   DEVICE POLISH — final cross-device layer
══════════════════════════════════════ */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.section,
.page-hero,
.tools-hub,
.learn-shell,
.trainer-shell,
.cab-auth,
.cab-content {
  content-visibility: auto;
  contain-intrinsic-size: auto 720px;
}

#homeFear,
#homeFear .section,
#homeFear > section,
#homeFear > section > .container,
#homeHabits,
#homeHabits .section,
#habit-price,
#homeCabPromo,
#homeCabPromo .section,
#authorCoursesMount,
#authorCoursesMount .section {
  content-visibility: visible;
  contain-intrinsic-size: auto;
  contain: none;
}

/* Button labels are 20% smaller while tap targets stay comfortable. */
.btn {
  min-height: 44px;
  font-size: 0.672rem;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  transform: translateZ(0);
}

.btn--sm { font-size: 0.624rem; }
.btn--lg { font-size: 0.704rem; }
.btn--outline { font-size: 0.76rem; }
.btn--course,
.promo-gate__submit {
  font-size: 0.656rem;
  line-height: 1.2;
}

.btn::after {
  content: '';
  position: absolute;
  inset: -1px;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.34), transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.55s cubic-bezier(0.22,1,0.36,1);
  pointer-events: none;
}

.btn:hover::after,
.btn:focus-visible::after {
  transform: translateX(120%);
}

.btn:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(108,71,255,0.34);
  outline-offset: 3px;
}

.btn:hover,
.card:hover,
.teaser-card:hover,
.tools-hub__card:hover,
.course-card:hover,
.event-card:hover,
.cab-promo__card:hover {
  will-change: transform;
}

.hero__bg::before {
  animation: heroGlow 9s ease-in-out infinite alternate;
}

.hero__headline-text h1,
.hero__sub-headline,
.hero__actions,
.hero__bottom {
  animation: softEntrance 0.72s cubic-bezier(0.22,1,0.36,1) both;
}

.hero__sub-headline { animation-delay: 0.08s; }
.hero__actions { animation-delay: 0.16s; }
.hero__bottom { animation-delay: 0.24s; }

.date-chip,
.countdown__block,
.stats-bar__item,
.teaser-card,
.tools-hub__card,
.card,
.review-card {
  transition:
    transform 0.28s cubic-bezier(0.22,1,0.36,1),
    box-shadow 0.28s ease,
    border-color 0.28s ease,
    background 0.28s ease;
}

.date-chip:hover,
.countdown__block:hover,
.stats-bar__item:hover {
  transform: translateY(-3px);
}

.teaser-card:hover,
.tools-hub__card:hover,
.card:hover,
.review-card:hover {
  transform: translateY(-5px);
}

.carousel,
.courses-grid,
.events__grid,
.blog-feed,
.blog-grid,
.feat-cols,
.cab-nav {
  overscroll-behavior-x: contain;
  scroll-padding-inline: 16px;
}

.tools-hub__grid,
.courses-grid,
.cards-3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}

.hero__left,
.page-hero .container,
.tools-hub__card,
.teaser-card,
.card,
.course-card,
.event-card,
.review-card {
  min-width: 0;
}

.hero__actions,
.page-hero__actions,
.cab-promo__btns,
.not-found-actions,
[class*="__actions"] {
  width: 100%;
}

@keyframes softEntrance {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes heroGlow {
  from { transform: scale(1); opacity: 0.78; }
  to { transform: scale(1.04); opacity: 1; }
}

@media (hover: none) {
  .btn:active,
  .teaser-card:active,
  .tools-hub__card:active,
  .card:active,
  .review-card:active {
    transform: translateY(-2px) scale(0.99);
  }
}

@media (max-width: 1024px) {
  .hero { min-height: auto; }
  .hero__left {
    max-width: min(100%, 520px);
    margin-inline: 0;
  }
}

@media (max-width: 768px) {
  .header {
    padding-top: max(10px, env(safe-area-inset-top));
  }

  .nav {
    width: min(340px, 90vw);
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }

  .hero__actions,
  .page-hero__actions,
  .cab-promo__btns,
  .not-found-actions {
    justify-content: center;
  }

  .hero__actions .btn,
  .page-hero__actions .btn,
  .cab-promo__btns .btn,
  .not-found-actions .btn {
    flex: 1 1 min(260px, 100%);
  }

  .review-card { flex-basis: min(360px, 88vw); }
}

@media (max-width: 560px) {
  .hero__sub-headline br { display: none; }

  .hero__actions,
  .page-hero__actions,
  .not-found-actions,
  .cab-promo__btns {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__actions .btn,
  .page-hero__actions .btn,
  .not-found-actions .btn,
  .cab-promo__btns .btn,
  .tools-hub__card .btn,
  .teaser-card .btn {
    width: 100%;
  }

  .btn {
    min-height: 42px;
    padding-inline: 16px;
    font-size: 0.624rem;
    letter-spacing: 0.045em;
  }

  .btn--sm { font-size: 0.592rem; }
  .btn--lg { font-size: 0.64rem; }
  .btn--course,
  .promo-gate__submit { font-size: 0.6rem; }

  .section,
  .page-hero,
  .tools-hub {
    contain-intrinsic-size: auto 560px;
  }
}

@media (max-width: 380px) {
  .container { padding-inline: 12px; }
  .logo { max-width: 58vw; }
  .date-chip b { font-size: 0.74rem; }
  .date-chip small { font-size: 0.5rem; }
  .hero__headline-text h1 { font-size: clamp(1.35rem, 8.5vw, 1.7rem); }
  .btn {
    padding-inline: 12px;
    font-size: 0.576rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__bg::before,
  .hero__headline-text h1,
  .hero__sub-headline,
  .hero__actions,
  .hero__bottom,
  .btn::after {
    animation: none !important;
    transition: none !important;
  }

  .btn::after { display: none; }
}

/* === GLOBAL BUTTON COLOR (#F5F6C1 + чёрный текст) === */
.btn,
a.btn,
.btn--gold,
.btn--lime,
.btn--accent,
.btn--sm,
.btn--lg,
.btn--hero-cta,
.btn--founder-cta,
.btn--wheel-open,
.btn--cab-register,
.btn--outline-gold,
.hero .btn--hero-cta,
#cabinet-promo .btn--cab-register,
.learn-wheel .btn--wheel-open {
  background: #F5F6C1 !important;
  color: #050505 !important;
  border-color: rgba(0, 0, 0, 0.14) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.btn:hover,
a.btn:hover,
.btn--gold:hover,
.btn--lime:hover,
.btn--accent:hover,
.btn--sm:hover,
.btn--hero-cta:hover,
.btn--founder-cta:hover,
.btn--wheel-open:hover,
.btn--cab-register:hover,
.btn--outline-gold:hover,
.hero .btn--hero-cta:hover,
#cabinet-promo .btn--cab-register:hover,
.learn-wheel .btn--wheel-open:hover {
  background: #ececb0 !important;
  color: #050505 !important;
  border-color: rgba(0, 0, 0, 0.22) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
}

.btn:active,
.btn--gold:active {
  transform: scale(0.98);
}

.cab-body .btn,
.cab-body a.btn,
.cab-body button.btn {
  background: #F5F6C1 !important;
  color: #050505 !important;
  border-color: rgba(0, 0, 0, 0.14) !important;
}

.cab-body .btn:hover,
.cab-body a.btn:hover,
.cab-body button.btn:hover {
  background: #ececb0 !important;
  color: #050505 !important;
}