/* ==========================================================================
   ERHEAP — Responsive refinements
   Base styles in style.css are mobile-first; this file layers breakpoint
   specific adjustments that don't fit naturally alongside a component.
   ========================================================================== */

/* ---------- 320px+ : smallest phones ---------- */
@media (max-width: 380px) {
  .nav-inner { padding-inline: var(--space-4); }
  .nav-brand span.name { display: none; }
  .hero { padding-top: calc(var(--nav-h) + var(--space-7)); }
  .stat-strip { grid-template-columns: 1fr; }
  .cta-band { padding: var(--space-6) var(--space-4); }
}

/* ---------- Mobile (≤ 980px): slim nav pill ---------- */
@media (max-width: 980px) {
  .site-nav { top: var(--space-3); }
  .nav-inner {
    height: var(--nav-h-mobile);
    width: min(1100px, calc(100% - var(--space-5)));
    padding-inline: var(--space-3);
    gap: var(--space-2);
  }
  .nav-brand { gap: var(--space-2); font-size: 0.95rem; }
  .nav-brand .logo-img { height: var(--logo-h-mobile); }
  .nav-brand .mark { width: 28px; height: 28px; border-radius: 8px; font-size: 0.85rem; }
  .nav-actions { gap: var(--space-2); }
  .theme-toggle { width: 34px; height: 34px; }
  .theme-toggle svg { width: 15px; height: 15px; }
  .nav-toggle { width: 36px; height: 36px; }
  .nav-toggle span, .nav-toggle::before, .nav-toggle::after { width: 16px; }
  .nav-toggle::before { transform: translateY(-4px); }
  .nav-toggle::after { transform: translateY(2px); }
  .nav-actions .btn { padding: 0.55em 1em; font-size: 0.85rem; }
  /* Keep mobile menu panel positioned relative to the shorter pill */
  .mobile-menu-panel { top: calc(var(--nav-h-mobile) + var(--space-5)); }
  /* Hero gets less top padding now that the pill is shorter */
  .hero { padding-top: calc(var(--nav-h-mobile) + var(--space-7)); }
}

/* ---------- 480px+ ---------- */
@media (min-width: 480px) {
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .hero-actions .btn { flex: none; }
}

/* ---------- 768px+ : tablets ---------- */
@media (min-width: 768px) {
  .section { padding-block: var(--space-10); }
  .footer-bottom { flex-wrap: nowrap; }
}

/* ---------- 1024px+ : small laptops ---------- */
@media (min-width: 1024px) {
  .hero-visual { aspect-ratio: 3/4; }
}

/* ---------- 1280px+ : desktop ---------- */
@media (min-width: 1280px) {
  :root { --container: 1240px; }
}

/* ---------- 1440px+ : large displays ---------- */
@media (min-width: 1440px) {
  :root { --container: 1320px; }
  .display-1 { font-size: 4.6rem; }
}

/* ---------- Fine pointer / hover-capable refinement ---------- */
@media (hover: none) {
  .card:hover, .card-glass:hover, .support-option:hover {
    transform: none;
  }
}

/* ---------- Landscape phones: keep nav compact ---------- */
@media (max-height: 480px) and (orientation: landscape) {
  .mobile-menu-panel { top: var(--space-4); max-height: 88vh; overflow-y: auto; }
}

/* ---------- Print ---------- */
@media print {
  .site-nav, .mobile-menu, .back-to-top, .system-banner, .toast-region { display: none !important; }
  body { background: #fff; color: #000; }
  .hero { padding-top: var(--space-6); }
}