/* ============================================
   R-CORE RESPONSIVE — Mobile & Tablet Overrides
   Load AFTER all other CSS files
   ============================================ */

/* ─── Tiny Screens (≤ 360px) ─── */
@media (max-width: 360px) {
  .rc-header { padding: 8px 10px !important; }
  .rc-brand h1 { font-size: 14px !important; letter-spacing: 0.06em !important; }
  .rc-tagline { font-size: 9px !important; }
  .os-clock { font-size: 12px !important; }
  .os-date { font-size: 9px !important; }
  .os-clock-wrapper { padding: 4px 8px !important; gap: 2px !important; }
  .os-right { gap: 6px !important; }
  .rc-logo-dot { width: 8px !important; height: 8px !important; }
}

/* ─── Mobile (≤ 480px) ─── */
@media (max-width: 480px) {
  /* ── Layout ── */
  .rc-main-page { padding: 20px 14px !important; }
  .rc-main { padding: 16px 14px !important; }
  .rc-page-title { font-size: 24px !important; }
  .rc-page-desc { font-size: 14px !important; margin-bottom: 20px !important; }

  /* ── Grids: force 1 column on small screens ── */
  .rc-page-grid,
  .rc-intro-cards,
  .rc-what-grid,
  .rc-info-grid,
  .rc-grid,
  .rc-projects-micro {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* ── Intro Banner ── */
  .rc-intro-banner { padding: 40px 14px !important; margin: 20px auto !important; }
  .rc-intro-title { font-size: 26px !important; }
  .rc-intro-sub { font-size: 14px !important; }
  .rc-intro-btn { padding: 10px 20px !important; font-size: 14px !important; }

  /* ── Pulse Section ── */
  .rc-pulse-title { font-size: 22px !important; }
  .rc-pulse-desc { font-size: 13px !important; }

  /* ── What Core Section ── */
  .rc-what-core h2 { font-size: 22px !important; }

  /* ── Hero Aurora ── */
  .rc-hero-aurora { padding: 30px 10px 60px !important; }
  .rc-r-container { margin-bottom: 10px !important; }
  .rc-r-title h2 { font-size: 12px !important; letter-spacing: 0.25em !important; }
  .rc-r-title p { font-size: 11px !important; }

  /* ── Info Cards ── */
  .rc-info-card { padding: 20px 16px 24px !important; }
  .rc-info-card h3 { font-size: 16px !important; }

  /* ── Footer ── */
  .rc-footer { padding: 18px 14px !important; }
  .rc-footer span { font-size: 11px !important; }
  .rc-footer-socials { gap: 12px !important; }
  .rc-social-icon { font-size: 24px !important; padding: 6px !important; }

  /* ── Dock OS ── */
  .rc-dock-os {
    bottom: 10px !important;
    gap: 6px !important;
    padding: 8px 10px !important;
    border-radius: 16px !important;
    max-width: 95vw !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .rc-dock-item { font-size: 20px !important; padding: 6px !important; }
  .rc-battery-widget { font-size: 14px !important; padding: 6px 10px !important; white-space: nowrap !important; }
  .rc-weather-widget { font-size: 14px !important; padding: 6px 10px !important; white-space: nowrap !important; }

  /* ── Sidebar ── */
  .rc-sidebar { width: 240px !important; }
  .rc-sidebar.open { transform: translateX(0) !important; }
  .rc-sidebar-toggle { width: 38px !important; height: 38px !important; font-size: 18px !important; top: 14px !important; left: 14px !important; }

  /* ── Header ── */
  .rc-header { padding: 10px 12px !important; }
  .rc-brand-top { gap: 6px !important; }
  .rc-brand h1 { font-size: 15px !important; }
  .rc-tagline { font-size: 10px !important; }
  .os-clock-wrapper { padding: 4px 8px !important; }
  .os-clock { font-size: 13px !important; }
  .os-date { font-size: 10px !important; }
  .os-right { gap: 8px !important; }

  /* ── Scroll Reveal reduced motion ── */
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  /* ── Section Titles ── */
  .rc-page-title { font-size: 24px !important; }

  /* ── Buttons ── */
  .rc-btn { padding: 10px 16px !important; font-size: 13px !important; }
  .rc-btn-sm { padding: 6px 12px !important; font-size: 11px !important; }

  /* ── Cards ── */
  .rc-page-card { padding: 16px 14px 20px !important; }
  .rc-page-card h3 { font-size: 16px !important; }
  .rc-card { padding: 16px 14px 20px !important; }
}

/* ─── Tablet (≤ 768px) ─── */
@media (max-width: 768px) {
  /* ── Layout ── */
  .rc-main-page { padding: 24px 18px !important; }
  .rc-main { padding: 20px 18px !important; }

  /* ── Grids: 2 columns max on tablet ── */
  .rc-page-grid,
  .rc-intro-cards,
  .rc-what-grid,
  .rc-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 18px !important;
  }

  /* ── Info Grid ── */
  .rc-info-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: 18px !important;
  }

  /* ── Intro Banner ── */
  .rc-intro-banner { padding: 50px 16px !important; }
  .rc-intro-title { font-size: 32px !important; }

  /* ── Hero ── */
  .rc-hero-aurora { padding: 40px 16px 80px !important; }

  /* ── Dock OS ── */
  .rc-dock-os { gap: 12px !important; padding: 10px 14px !important; }
  .rc-dock-item { font-size: 24px !important; padding: 8px !important; }

  /* ── Header ── */
  .rc-header { padding: 12px 18px !important; }
  .rc-brand h1 { font-size: 18px !important; }

  /* ── Cards ── */
  .rc-card:hover { transform: translateY(-4px) scale(1.01) !important; }

  /* ── Intro Cards ── */
  .rc-intro-card:hover { transform: translateY(-4px) scale(1.01) !important; }

  /* ── What Items ── */
  .rc-what-item:hover { transform: translateY(-4px) scale(1.01) !important; }
}

/* ─── Tool-specific Responsive ─── */
@media (max-width: 600px) {
  .rc-system-info-grid { grid-template-columns: 1fr !important; }
  .rc-tz-converter { grid-template-columns: 1fr !important; }
  .rc-date-result { grid-template-columns: 1fr !important; }
}

/* ─── Reduced Motion (accessibility + performance) ─── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .rc-r-3d { animation: none !important; }
  .rc-aurora-bg { animation: none !important; }
  .rc-ambient-glow { animation: none !important; }
  .rc-neon-grid { animation: none !important; }
  .rc-scroll-indicator { animation: none !important; }
  .rc-intro-banner { animation: none !important; }
  .rc-pulse-bar { animation: none !important; }
  .rc-glass-layer { display: none !important; }
}

/* ─── Touch Device Optimizations ─── */
@media (hover: none) and (pointer: coarse) {
  /* Disable hover effects that cause reflow */
  .rc-page-card:hover,
  .rc-intro-card:hover,
  .rc-what-item:hover,
  .rc-info-card:hover,
  .rc-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  /* Reduce backdrop-filter on touch devices (performance) */
  .rc-glass-layer { display: none !important; }
  .rc-ambient-glow { opacity: 0.3 !important; }
  .rc-header { backdrop-filter: blur(8px) saturate(120%) !important; }
  .rc-dock-os { backdrop-filter: blur(8px) !important; }
  .rc-sidebar { backdrop-filter: blur(8px) saturate(120%) !important; }

  /* Increase touch targets */
  .rc-dock-item { padding: 10px 14px !important; }
  .rc-side-nav a { padding: 14px 16px !important; font-size: 16px !important; }
  .rc-btn { padding: 14px 20px !important; }
  .rc-calc-btn { padding: 18px 8px !important; }
}

/* ─── Landscape Mobile ─── */
@media (max-height: 500px) and (orientation: landscape) {
  .rc-hero-aurora { min-height: auto !important; padding: 24px 16px 40px !important; }
  .rc-r-container { margin-bottom: 6px !important; }
  .rc-r-3d { width: 80px !important; height: 80px !important; font-size: 48px !important; }
  .rc-r-3d::before,
  .rc-r-3d::after { font-size: 48px !important; }
  .rc-r-title { margin-bottom: 20px !important; }
  .rc-scroll-indicator { display: none !important; }
  .rc-info-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important; gap: 12px !important; }
}

/* ─── Dark Mode Fallback ─── */
@media (prefers-color-scheme: light) {
  body { background: #05060a !important; } /* Keep dark always */
}