/* ============================================================
   Novels AI — na-responsive.css
   Mobile-first breakpoints & responsive overrides
   ============================================================ */

/* ── Breakpoints:
      xs:  < 480px
      sm:  480px – 767px
      md:  768px – 1023px
      lg:  1024px – 1279px
      xl:  1280px+
   ────────────────────────────────────────────────────────── */

/* ── Large ─────────────────────────────────────────────── */
@media (max-width: 1279px) {
  .na-container  { max-width: 1100px; }
  .na-grid-4     { grid-template-columns: repeat(3, 1fr); }
  .na-gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .na-gallery-item:nth-child(4) { grid-column: span 1; }
}

/* ── Medium ────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .na-section    { padding: 80px 0; }
  .na-section-sm { padding: 60px 0; }

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

  .na-hero-cinematic { flex-direction: column; }

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

  .na-quiz-options { grid-template-columns: 1fr; }

  .na-about-timeline::before { display: none; }
  .na-about-timeline-item {
    grid-template-columns: 60px 1fr;
    gap: 16px;
    align-items: start;
  }
  .na-about-timeline-item:nth-child(odd) .na-about-timeline-content:first-child {
    text-align: left;
    padding-right: 0;
    padding-left: 0;
    grid-column: 2;
    grid-row: 1;
  }
  .na-about-timeline-item:nth-child(even) .na-about-timeline-content:first-child {
    order: unset;
    padding-left: 0;
    grid-column: 2;
    grid-row: 1;
  }
  .na-about-timeline-item:nth-child(even) .na-about-timeline-dot  { order: unset; }
  .na-about-timeline-item:nth-child(even) .na-about-timeline-year { order: unset; text-align: left; padding-right: 0; grid-column: 2; grid-row: 2; }
  .na-about-timeline-dot { justify-self: start; }

  .na-gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .na-gallery-item:nth-child(1) { grid-row: span 1; }

  .na-navbar-nav { display: none; }
  .na-hamburger  { display: flex; }
  .na-navbar-actions .na-btn { display: none; }

  .na-hero-stats { gap: 24px; }

  .na-story-builder-widget { padding: 32px 28px; }
  .na-quiz-container { padding: 32px 28px; }
  .na-contact-form-wrap { padding: 32px 28px; }
}

/* ── Small ─────────────────────────────────────────────── */
@media (max-width: 767px) {
  .na-section    { padding: 64px 0; }

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

  .na-genre-grid { grid-template-columns: 1fr 1fr; }

  .na-hero-stats { flex-direction: column; gap: 20px; }

  .na-hero-cta-group {
    flex-direction: column;
    align-items: flex-start;
  }

  .na-section-header { margin-bottom: 40px; }

  .na-story-builder-widget { padding: 24px 20px; border-radius: var(--na-radius-lg); }
  .na-quiz-container { padding: 24px 20px; border-radius: var(--na-radius-lg); }
  .na-audio-player-card { padding: 24px 20px; }
  .na-contact-form-wrap { padding: 24px 20px; }
  .na-pricing-card { padding: 28px 24px; }

  .na-service-hero { height: 280px; }
  .na-service-hero-overlay { padding: 32px 28px; }

  .na-article-image img { height: 260px; }

  .na-map-container { height: 280px; }

  .na-gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; }

  .na-footer-bottom { flex-direction: column; text-align: center; }

  .na-testimonial-card { padding: 24px 20px; }

  .na-cookie-banner { left: 16px; right: 16px; bottom: 16px; }
  .na-cookie-actions { flex-direction: column; }
  .na-cookie-actions .na-btn { width: 100%; justify-content: center; }

  .na-custom-cursor,
  .na-custom-cursor-ring { display: none; }

  .na-hero-floating-card { display: none; }

  .na-builder-tabs { gap: 6px; }
  .na-builder-tab  { padding: 7px 14px; font-size: .8rem; }

  .na-about-timeline-item {
    grid-template-columns: 44px 1fr;
  }

  .na-about-timeline-dot {
    width: 36px;
    height: 36px;
    font-size: .75rem;
  }

  .na-team-avatar { width: 80px; height: 80px; }

  .na-voice-card { padding: 18px 16px; }
}

/* ── Extra Small ───────────────────────────────────────── */
@media (max-width: 479px) {
  .na-container { padding: 0 16px; }

  .na-genre-grid { grid-template-columns: 1fr; }

  .na-gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .na-gallery-item:nth-child(1) { grid-row: span 1; }
  .na-gallery-item:nth-child(4) { grid-column: span 1; }

  .na-hero-cta-group .na-btn { width: 100%; justify-content: center; }

  .na-pricing-card { padding: 24px 20px; }

  .na-quiz-options { gap: 10px; }

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

  .na-footer-legal-links { flex-wrap: wrap; justify-content: center; gap: 12px; }
}

/* ── Print ─────────────────────────────────────────────── */
@media print {
  .na-navbar,
  .na-cookie-banner,
  .na-custom-cursor,
  .na-custom-cursor-ring,
  .na-scroll-progress,
  .na-floating-gradient-orb,
  #na-particles-canvas { display: none !important; }

  body { background: #fff; color: #000; }
  .na-section { padding: 40px 0; }
}

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  html { scroll-behavior: auto; }

  .na-custom-cursor,
  .na-custom-cursor-ring { display: none; }
}

/* ── Dark/light overrides for components ─────────────────── */
body.na-light-mode .na-navbar.na-navbar-scrolled {
  background: rgba(241,245,251,.9);
  border-bottom: 1px solid rgba(124,58,237,.15);
}

body.na-light-mode .na-form-input,
body.na-light-mode .na-form-textarea,
body.na-light-mode .na-form-select {
  background: var(--na-navy-light);
  color: var(--na-white);
}

body.na-light-mode .na-story-preview-box {
  background: var(--na-navy-light);
}

body.na-light-mode .na-cookie-banner {
  background: rgba(248,250,252,.95);
}

body.na-light-mode .na-map-container iframe {
  filter: grayscale(20%) contrast(1) hue-rotate(0deg);
}

/* ── High contrast mode ─────────────────────────────────── */
@media (forced-colors: active) {
  .na-btn-primary,
  .na-btn-glow {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }

  .na-card,
  .na-pricing-card,
  .na-testimonial-card {
    forced-color-adjust: none;
    border: 1px solid ButtonText;
  }
}