/* ============================================================
   SISTEMA SOLAR INTERATIVO — responsive.css
   Mobile-first breakpoints: 480 / 768 / 1024 / 1280
   ============================================================ */

/* ──────────────────────────────────────────────
   BREAKPOINTS
   --xs:  < 480px   (phones portrait)
   --sm:  480-767px (phones landscape)
   --md:  768-1023px (tablets)
   --lg:  1024-1279px (desktops)
   --xl:  1280px+ (wide)
────────────────────────────────────────────── */

/* ──────────────────────────────────────────────
   1. LARGE DESKTOP (≥ 1280px)
────────────────────────────────────────────── */
@media (min-width: 1280px) {
  .planets-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .features-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ──────────────────────────────────────────────
   2. DESKTOP (1024px – 1279px)
────────────────────────────────────────────── */
@media (max-width: 1279px) {
  .hero-content { padding-right: var(--sp-6); }
  .footer-links { gap: var(--sp-8); }
}

/* ──────────────────────────────────────────────
   3. TABLET LANDSCAPE / SMALL DESKTOP (768px – 1023px)
────────────────────────────────────────────── */
@media (max-width: 1023px) {
  /* Header */
  .desktop-nav { display: none; }
  .app-header { padding: 0 var(--sp-5); }

  /* Bottom nav visible on tablet/mobile */
  .bottom-nav { display: flex; }

  /* Hero */
  .hero-section {
    flex-direction: column;
    padding: var(--sp-16) var(--sp-6) var(--sp-10);
    text-align: center;
    min-height: auto;
    padding-top: calc(72px + var(--sp-10));
  }

  .hero-content {
    max-width: 100%;
    padding-right: 0;
    order: 1;
  }

  .hero-visual {
    order: 0;
    min-height: 320px;
    width: 100%;
  }

  .hero-actions {
    justify-content: center;
  }

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

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

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

  /* Comparison */
  .comparison-planets {
    gap: var(--sp-5);
  }

  /* Footer */
  .footer-content {
    flex-direction: column;
  }
  .footer-links {
    gap: var(--sp-8);
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  /* Daily fact */
  .daily-fact-card {
    padding: var(--sp-8);
  }

  /* Sections */
  .stats-section,
  .planets-section,
  .features-section,
  .daily-fact-section,
  .comparison-section,
  .faq-section {
    padding: var(--sp-12) 0;
  }

  /* Main content */
  .main-content {
    padding-top: 72px;
  }

  /* Toast position */
  .toast-container {
    bottom: 80px;
  }
}

/* ──────────────────────────────────────────────
   4. TABLET PORTRAIT (600px – 767px)
────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Logo — mostra título reduzido no mobile */
  .header-logo .logo-link span {
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    max-width: 110px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .logo-img {
    width: 30px;
    height: 30px;
  }


  /* Main content */
  .main-content { padding-top: 60px; }
  .app-header   { height: 60px; }

  /* Hero */
  .hero-section {
    padding: calc(60px + var(--sp-8)) var(--sp-5) var(--sp-8);
  }

  .title-line    { font-size: 1.6rem; }
  .title-highlight { font-size: 2.2rem; }
  .hero-description { font-size: 0.95rem; }
  .hero-visual { min-height: 260px; }

  /* Grids */
  .planets-grid { gap: var(--sp-4); }
  .features-grid { gap: var(--sp-4); }
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4);
  }

  /* Planet cards */
  .planet-card {
    padding: var(--sp-6) var(--sp-4) var(--sp-5);
  }

  .planet-visual {
    width: 70px; height: 70px;
  }

  .planet-sphere { width: 55px; height: 55px; }

  /* Feature card */
  .feature-card { padding: var(--sp-6); }

  /* Section titles */
  .section-title { font-size: 1.3rem; }

  /* Comparison — padding vai para o scroll container interno */
  .comparison-scroll { padding: var(--sp-6); }
  .comparison-planets { gap: var(--sp-4); }
  /* Mostra o hint de arrastar no mobile */
  .comparison-scroll-hint { display: flex; }

  /* Daily fact */
  .daily-fact-card {
    padding: var(--sp-6);
    border-radius: 16px;
  }

  .fact-content { font-size: 0.95rem; }

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

  /* Footer */
  .footer-links {
    flex-wrap: wrap;
    gap: var(--sp-6);
  }
}

/* ──────────────────────────────────────────────
   5. MOBILE (≤ 480px)
────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Header */
  .app-header { padding: 0 var(--sp-4); }
  .header-actions { gap: var(--sp-1); }
  .btn-icon { width: 36px; height: 36px; }

  /* Logo no mobile pequeno */
  .header-logo .logo-link span {
    font-size: 0.68rem;
    max-width: 90px;
  }
  .logo-img {
    width: 26px;
    height: 26px;
  }

  /* Hero */
  .hero-section {
    padding: calc(60px + var(--sp-6)) var(--sp-4) var(--sp-6);
  }

  .title-line    { font-size: 1.3rem; }
  .title-highlight { font-size: 1.8rem; }
  .hero-description { font-size: 0.88rem; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-visual { min-height: 220px; }

  /* Planets */
  .planets-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
  }

  .planet-card {
    padding: var(--sp-5) var(--sp-3) var(--sp-4);
    border-radius: 14px;
  }

  .planet-sphere { width: 50px; height: 50px; }
  .planet-visual { width: 60px; height: 60px; }
  .planet-name { font-size: 0.85rem; }
  .planet-tagline { font-size: 0.7rem; }
  .planet-stats { display: none; } /* hide on very small */

  /* Features */
  .features-grid { grid-template-columns: 1fr; }

  /* Stats */
  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
  }

  .stat-card { padding: var(--sp-5) var(--sp-4); }
  .stat-value { font-size: 1.5rem; }
  .stat-icon { width: 44px; height: 44px; font-size: 1.1rem; }

  /* Comparison */
  .comparison-scroll { padding: var(--sp-4); }
  .comparison-planets { gap: var(--sp-3); min-width: 640px; }

  /* FAQ */
  .faq-question { font-size: 0.88rem; padding: var(--sp-4) var(--sp-5); }
  .faq-answer p { font-size: 0.85rem; }

  /* Footer */
  .footer-links { flex-direction: column; gap: var(--sp-6); }
  .footer-bottom { font-size: 0.75rem; }

  /* Daily fact */
  .daily-fact-card { padding: var(--sp-5); border-radius: 14px; }
  .fact-content { font-size: 0.9rem; }

  /* Toast */
  .toast { min-width: auto; max-width: 90vw; }
  .toast-container { right: var(--sp-4); bottom: 80px; }

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

  /* Bottom nav — padding mínimo (safe-area já está no CSS base) */
  .bottom-nav { padding: 0 var(--sp-1); }
  .nav-item { padding: var(--sp-1) var(--sp-1); }

  /* Espaço extra no final das páginas para o bottom-nav não cobrir conteúdo */
  .main-content { padding-bottom: 88px; }

  /* Sections */
  .stats-section,
  .planets-section,
  .features-section,
  .daily-fact-section,
  .comparison-section,
  .faq-section {
    padding: var(--sp-10) 0;
  }

  /* Section header */
  .section-header { margin-bottom: var(--sp-8); }

  /* Search modal */
  .search-modal { padding-top: 80px; padding-left: var(--sp-4); padding-right: var(--sp-4); }
}

/* ──────────────────────────────────────────────
   6. EXTRA SMALL (≤ 360px)
────────────────────────────────────────────── */
@media (max-width: 360px) {
  .title-highlight { font-size: 1.5rem; }
  .planets-grid { gap: var(--sp-2); }
  .planet-card { border-radius: 12px; }
  .planet-sphere { width: 44px; height: 44px; }
  .btn-lg { padding: var(--sp-3) var(--sp-5); font-size: 0.8rem; }
}

/* ──────────────────────────────────────────────
   7. PRINT
────────────────────────────────────────────── */
@media print {
  .stars-container,
  .bottom-nav,
  .app-header,
  .search-modal,
  .toast-container { display: none !important; }

  body { background: #fff; color: #000; }
  .main-content { padding-top: 0; }
}

/* ──────────────────────────────────────────────
   8. HOVER-CAPABLE DEVICES
   (on touch devices, avoid hover side effects)
────────────────────────────────────────────── */
@media (hover: none) {
  .planet-card:hover,
  .feature-card:hover,
  .stat-card:hover {
    transform: none;
    box-shadow: none;
  }

  /* But keep visual feedback on tap */
  .planet-card:active { transform: scale(0.97); }
  .feature-card:active { transform: scale(0.97); }
  .btn:active { transform: scale(0.96); }
}

/* ──────────────────────────────────────────────
   9. HIGH CONTRAST MODE
────────────────────────────────────────────── */
@media (prefers-contrast: high) {
  :root {
    --glass-border: rgba(255,255,255,0.4);
    --glass-border-hover: rgba(79,195,247,0.8);
  }

  .planet-card,
  .feature-card,
  .stat-card,
  .faq-item {
    border-width: 2px;
  }
}

/* ──────────────────────────────────────────────
   10. LANDSCAPE PHONE
────────────────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
  .hero-section {
    min-height: auto;
    padding: calc(60px + var(--sp-6)) var(--sp-6) var(--sp-6);
    flex-direction: row;
  }

  .hero-visual { min-height: 200px; }
  .title-line { font-size: 1.4rem; }
  .title-highlight { font-size: 2rem; }
  .hero-description { display: none; }
}