/* responsive.css — production-grade responsive rules */

/* ====== XL desktops (≥ 1280px) ====== */
@media (min-width: 1280px) {
  .section { width: min(1200px, 88%); }
  .grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid.two   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ====== Desktops (1024–1279px) ====== */
@media (min-width: 1024px) and (max-width: 1279px) {
  .section { width: min(1100px, 92%); }
  .grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid.two   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ====== Tablets landscape (768–1023px) ====== */
@media (min-width: 768px) and (max-width: 1023px) {
  .section { width: min(900px, 94%); }
  .grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.two   { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Compact nav spacing */
  .menu a { padding: 8px 10px; }
}

/* ====== Phones (480–767px) ====== */
@media (min-width: 480px) and (max-width: 767px) {
  .section { width: 92%; }
  .grid.three, .grid.two { grid-template-columns: 1fr; }

  /* Mobile nav sheet */
  .nav { padding: 8px 12px; }
  .hamburger { display: inline-block; }
  .menu { 
    position: fixed;
    top: 64px; right: 12px; left: 12px;
    display: none; flex-direction: column;
    gap: 6px; padding: 12px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
    box-shadow: var(--shadow);
  }
  .menu.open { display: flex; }
  .menu a, .menu button.theme-toggle { padding: 12px 14px; border-radius: 10px; }

  /* Hero spacing */
  .hero { padding: 36px 18px 48px; }
  .title { font-size: clamp(1.6rem, 5vw + 0.5rem, 2.2rem); }
  .subtitle { font-size: 0.98rem; }
  .logo-hero { width: 140px; height: 140px; }
}

/* ====== Small phones (≤ 479px) ====== */
@media (max-width: 479px) {
  .section { width: 92%; margin: 48px auto; }
  .grid.three, .grid.two { grid-template-columns: 1fr; }

  .btn { width: 100%; text-align: center; }
  .cta-group { width: 100%; display: grid; grid-template-columns: 1fr; gap: 10px; }

  .menu { top: 60px; }
  .logo-hero { width: 120px; height: 120px; }
  .title { font-size: clamp(1.4rem, 6vw + 0.4rem, 2rem); }
}

/* ====== Safe-area insets (iPhone notch, etc.) ====== */
@supports (padding: max(0px)) {
  .nav, .section, .footer { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
}

/* ====== When mobile menu is open, prevent body scroll ====== */
body.nav-open { overflow: hidden; touch-action: none; }


/* ===== Mobile polish (360–430px) ===== */
@media (max-width: 430px) {
  html, body { overflow-x: hidden; }

  /* Section rhythm & card comfort */
  .section { width: 92%; margin: 36px auto; }
  .grid { gap: 14px; }
  .card { padding: 16px; }
  .glass { border-radius: 14px; }

  /* Hero trim + readable type */
  .hero { padding: 28px 14px 40px; }
  .title { font-size: clamp(1.35rem, 6.2vw + 0.2rem, 1.9rem); letter-spacing: 0.1px; }
  .subtitle { font-size: 0.98rem; max-width: 46ch; }

  /* Logo sizing so it doesn’t dominate */
  .logo-hero { width: 120px; height: 120px; }

  /* CTAs: full width, comfy tap targets */
  .cta-group { width: 100%; display: grid; gap: 10px; grid-template-columns: 1fr; }
  .btn { width: 100%; min-height: 44px; }

  /* Mobile menu as a sheet */
  .nav { margin: 10px auto 18px; padding: 8px 10px; }
  .hamburger { display: inline-block; }
  .menu {
    position: fixed; inset: 64px 12px auto 12px;
    display: none; flex-direction: column; gap: 8px; padding: 12px;
    background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
    backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
    box-shadow: var(--shadow);
  }
  .menu.open { display: flex; }
  .menu a, .menu .theme-toggle { padding: 12px 14px; border-radius: 10px; }

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

/* ===== Super-small devices (≤ 360px) ===== */
@media (max-width: 360px) {
  .title { font-size: clamp(1.25rem, 7vw + 0.1rem, 1.7rem); }
  .logo-hero { width: 108px; height: 108px; }
  .section { margin: 32px auto; }
}