/* ============================================================
   RESPONSIVE — Mobile-first breakpoints
   Breakpoints: sm 480px | md 768px | lg 1024px | xl 1280px
   ============================================================ */

/* ══════════════════════════════════════════
   MOBILE BASE (320px - 479px)
══════════════════════════════════════════ */

/* Navigation */
.nav__links { display: none; }
.nav__cta   { display: none; }
.hamburger  { display: flex; }
.mobile-menu { display: flex; }

/* Hero */
.hero { min-height: 100svh; }
.hero__inner {
  padding-top: calc(var(--nav-h) + var(--sp-4));
  padding-bottom: var(--sp-7);
  text-align: center;
}

.hero-book {
  max-width: 240px;
  margin: 0 auto var(--sp-4);
}

.hero-book img { max-height: 320px; object-fit: contain; }

/* Grids */
.grid--2,
.grid--3,
.grid--4,
.grid--5 { grid-template-columns: 1fr; }

.split,
.split--wide-left,
.split--wide-right {
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}

/* Typography */
h1 { font-size: 2.25rem; }
h2 { font-size: 1.875rem; }
h3 { font-size: 1.5rem; }

/* Footer */
.footer__grid { grid-template-columns: 1fr; gap: var(--sp-4); }
.footer__bottom { flex-direction: column; gap: var(--sp-2); text-align: center; }

/* Form */
.form-row { grid-template-columns: 1fr; }

/* Timeline */
.timeline::before { left: 20px; transform: none; }
.timeline-item {
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
}
.timeline-item:nth-child(odd) .timeline-content { order: 0; text-align: left; }
.timeline-item:nth-child(even) .timeline-content { order: 0; }
.timeline-node { order: -1; }

/* Sections */
.section { padding: var(--sp-6) 0; }
.section--lg { padding: var(--sp-7) 0; }

.container { padding: 0 var(--gutter-sm); }

/* Book card */
.book-card { padding: var(--sp-4) var(--sp-3); }

/* CTA buttons */
.btn-group { flex-direction: column; }
.btn-group .btn { width: 100%; justify-content: center; }

/* Stat grid */
.stats-grid { grid-template-columns: 1fr 1fr; }

/* ══════════════════════════════════════════
   SMALL (480px+)
══════════════════════════════════════════ */
@media (min-width: 480px) {
  .hero-book { max-width: 280px; }

  .grid--2 { grid-template-columns: repeat(2, 1fr); }

  .btn-group { flex-direction: row; }
  .btn-group .btn { width: auto; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════
   MEDIUM (768px+)
══════════════════════════════════════════ */
@media (min-width: 768px) {

  /* Typography */
  h1 { font-size: clamp(2.5rem, 5vw, var(--text-6xl)); }
  h2 { font-size: clamp(2rem, 4vw, var(--text-5xl)); }

  /* Navigation */
  .nav__links { display: flex; }
  .nav__cta   { display: block; }
  .hamburger  { display: none; }

  /* Hero */
  .hero__inner {
    text-align: left;
    padding-top: 0;
    padding-bottom: 0;
  }

  .hero-book {
    max-width: none;
    margin: 0;
  }

  /* Grids */
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }

  /* Split */
  .split {
    grid-template-columns: 1fr 1fr;
  }

  /* Footer */
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
  .footer__bottom { flex-direction: row; }

  /* Form */
  .form-row { grid-template-columns: 1fr 1fr; }

  /* Timeline (full) */
  .timeline::before { left: 50%; transform: translateX(-50%); }
  .timeline-item { grid-template-columns: 1fr auto 1fr; }
  .timeline-item:nth-child(odd) .timeline-content { order: -1; text-align: right; }
  .timeline-item:nth-child(even) .timeline-content { order: 1; }

  /* Page hero */
  .page-hero { min-height: 50vh; }

  /* Stats */
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ══════════════════════════════════════════
   LARGE (1024px+)
══════════════════════════════════════════ */
@media (min-width: 1024px) {

  /* Grids */
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .grid--5 { grid-template-columns: repeat(5, 1fr); }

  /* Split */
  .split--wide-left  { grid-template-columns: 3fr 2fr; }
  .split--wide-right { grid-template-columns: 2fr 3fr; }

  /* Footer */
  .footer__grid { grid-template-columns: 1.4fr 1fr 1.2fr 1fr; }

  /* Sections */
  .section { padding: var(--sp-8) 0; }

  /* Container */
  .container { padding: 0 var(--gutter); }
}

/* ══════════════════════════════════════════
   XL (1280px+)
══════════════════════════════════════════ */
@media (min-width: 1280px) {
  .section--lg { padding: var(--sp-9) 0; }
}

/* ══════════════════════════════════════════
   PRINT
══════════════════════════════════════════ */
@media print {
  .nav, .footer, .scroll-progress,
  .page-loader, .mobile-menu, .mobile-overlay,
  .hero-scroll, .particles { display: none !important; }

  body { background: white; color: black; }
  a { color: black; text-decoration: underline; }
}

/* ══════════════════════════════════════════
   REDUCED MOTION
══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .float-anim,
  .hero-title, .hero-subtitle, .hero-tagline,
  .hero-cta, .hero-book, .hero-scroll,
  .hero-book .float-anim {
    animation: none !important;
  }

  .particle { animation: none !important; display: none; }

  .divider-animated {
    width: 48px !important;
    transition: none !important;
  }
}