/* ═══════════════════════════════════════════════════════════════════
   EXTRAWEB — MEDIA.CSS
   All responsive / breakpoint rules
   Breakpoints: 1200 | 960 | 720 | 480 | 380
═══════════════════════════════════════════════════════════════════ */

/* ── 1200px ─────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  :root { --section-y: 88px; }

  /* Nav */
  .logo { margin-right: 32px; }
  .nav-links { gap: 0; }
  .nav-links a { padding: 7px 10px; font-size: .82rem; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 48px; }

  /* Themes grid */
  .themes-grid { grid-template-columns: repeat(3, 1fr) !important; }

  /* Bento */
  .bento { grid-template-columns: 1fr 1fr !important; }
  .fa,.fb,.fc,.fd,.fe,.ff { grid-column: span 1 !important; }

  /* Dashboard sidebar */
  .dash-sidebar { width: 220px; }
  .dash-main    { padding: 32px 28px; }
}

/* ── 960px (Tablet) ─────────────────────────────────────────────── */
@media (max-width: 960px) {
  :root { --section-y: 72px; }

  /* Nav — collapse to hamburger */
  .nav-links                { display: none !important; }
  .nav-right .btn-ghost     { display: none !important; }
  .ham                      { display: flex !important; }
  .logo                     { margin-right: 0; }

  /* Hero */
  .hero { padding-top: 120px; padding-bottom: 72px; }
  .hero-h1 { font-size: clamp(2.6rem, 6vw, 4rem); }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { justify-content: center; }

  /* Mockup */
  .m-screen { grid-template-columns: 1fr !important; }
  .m-sidebar { display: none !important; }
  .chip-a, .chip-b, .chip-c { display: none !important; }

  /* Stats */
  .stats-row { grid-template-columns: repeat(2, 1fr) !important; }

  /* Steps */
  .steps-grid { grid-template-columns: 1fr !important; }

  /* Themes */
  .themes-top { flex-direction: column; align-items: flex-start; }
  .themes-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Pricing */
  .pricing-grid { grid-template-columns: 1fr !important; }
  .price-card.featured { transform: none !important; }
  .price-card.featured:hover { transform: translateY(-6px) !important; }

  /* Testimonials */
  .testi-grid { grid-template-columns: 1fr !important; }

  /* Section title */
  .section-title { font-size: clamp(1.9rem, 4vw, 2.6rem); }

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

  /* Auth */
  .auth-card { padding: 36px 28px; }

  /* Dashboard */
  .dash-layout    { flex-direction: column; }
  .dash-sidebar   { width: 100%; height: auto; position: relative; flex-direction: row; padding: 16px 20px; overflow-x: auto; }
  .dash-sidebar-inner { flex-direction: row; gap: 6px; overflow-x: auto; }
  .dash-nav-section { display: none; }
  .dash-main { padding: 28px 20px; }
  .dash-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── 720px (Mobile L) ───────────────────────────────────────────── */
@media (max-width: 720px) {
  :root { --section-y: 60px; --page-x: 20px; }

  /* Logo */
  .logo { font-size: 1.15rem; }
  .logo-mark { width: 28px; height: 28px; font-size: .75rem; }

  /* Hero */
  .hero { padding-top: 100px; }
  .hero-h1 { font-size: clamp(2.2rem, 7vw, 3rem); }
  .hero-sub { font-size: .95rem; }
  .hero-proof { gap: 12px; }

  /* Stats */
  .stat-card { padding: 28px 22px; }
  .stat-number { font-size: 2.6rem; }
  .stat-bg-num { font-size: 5rem; }

  /* Steps */
  .step { padding: 32px 24px; }

  /* Features */
  .bento { grid-template-columns: 1fr !important; }

  /* Themes */
  .themes-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Demo card */
  .demo-card { padding: 36px 28px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer { padding: 56px var(--page-x) 32px; }

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

  /* Page hero */
  .page-hero { padding-top: calc(var(--nav-h) + 48px); padding-bottom: 48px; }

  /* Blog */
  .blog-grid { grid-template-columns: 1fr !important; }

  /* Dashboard */
  .dash-stats-grid  { grid-template-columns: 1fr !important; }
  .dash-actions     { flex-direction: column; align-items: stretch; }

  /* Auth social buttons */
  .social-btns { grid-template-columns: 1fr; }

  /* Pricing */
  .price-card { padding: 32px 24px; }
  .pc-price   { font-size: 3.2rem; }
}

/* ── 480px (Mobile M) ───────────────────────────────────────────── */
@media (max-width: 480px) {
  :root { --section-y: 52px; }

  .hero-h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); letter-spacing: -.04em; }
  .hero-proof { flex-direction: column; align-items: center; gap: 8px; }

  /* Stats single col */
  .stats-row { grid-template-columns: 1fr !important; }

  /* Themes 1 col */
  .themes-grid { grid-template-columns: 1fr !important; }

  .grid-4 { grid-template-columns: 1fr; }

  /* Auth */
  .auth-card { padding: 28px 20px; border-radius: var(--r-xl); }
  .auth-title { font-size: 1.5rem; }

  .section-title { font-size: clamp(1.7rem, 6vw, 2.2rem); }

  /* Nav */
  /*.nav-inner { height: 60px; }*/
  /*:root { --nav-h: 60px; }*/

  /* Mockup scroll hint */
  .scroll-hint { margin-top: 36px; }
}

/* ── 380px (Mobile S) ───────────────────────────────────────────── */
@media (max-width: 380px) {
  :root { --page-x: 16px; }
  .hero-h1 { font-size: 1.8rem; }
  .btn-lg  { padding: 13px 24px; font-size: .9rem; }
  .auth-card { padding: 24px 16px; }
}

/* ── HOVER: NONE (touch devices) ────────────────────────────────── */
@media (hover: none) {
  .card-hover:hover  { transform: none; box-shadow: none; }
  .btn-primary:hover { transform: none; }
  .btn-outline:hover { transform: none; }
  .step:hover        { transform: none; box-shadow: none; }
  .testi:hover       { transform: none; }
  .theme-card:hover  { transform: none; }
  .price-card:hover  { transform: none; }
  .price-card.featured:hover { transform: scale(1.03); }
  .stat-card:hover   { transform: none; }
}

/* ── PREFERS REDUCED MOTION ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .2s !important; }
  .orb { animation: none !important; }
  .rv  { opacity: 1 !important; transform: none !important; }
  .counter { transition: none !important; }
}

/* ── PRINT ──────────────────────────────────────────────────────── */
@media print {
  .nav, .mesh, .pbar, .mob-nav, .scroll-hint, .footer { display: none !important; }
  body { background: white; color: black; }
  .section { padding: 24px 0; }
}