/*
 * ============================================================
 * responsive.css — Mobile and tablet layout adjustments
 * ============================================================
 *
 * WHAT THIS FILE DOES:
 *   - Overrides layout rules at smaller screen widths so the site
 *     looks good on phones and tablets.
 *   - Switches multi-column grids to single-column on small screens.
 *   - Shows the hamburger menu button and hides the desktop nav on mobile.
 *
 * EDITING TIPS (no CSS knowledge required):
 *   - The "breakpoint" sizes (980px and 640px) control when the layout
 *     switches. 980px is roughly tablet width; 640px is roughly phone width.
 *   - Do NOT change these breakpoints unless you understand how they
 *     interact with the grid definitions in layout.css.
 *   - The mobile menu panel appears below the header when the hamburger
 *     is clicked — its open/close behavior is controlled by app.js (wireNav).
 *
 * DEPENDENCIES:
 *   - Overrides rules in layout.css, header.css, hero.css, and sections.css.
 *   - Must be loaded LAST in index.html (after all other stylesheets).
 *   - Mobile menu toggle behavior is in app.js (wireNav function).
 * ============================================================
 */

/* ── Tablet layout (≤ 980px) ──────────────────────────────── */
@media (max-width: 980px) {
  /* Switch all multi-column grids to single column */
  .hero-grid,
  .two-col,
  .product-grid,
  .three-up,
  .feature-grid,
  .service-grid,
  .two-paths-grid,
  .donation-grid {
    grid-template-columns: 1fr;
  }

  /* Stack modes tracks to a vertical column on tablet */
  .modes-tracks {
    flex-direction: column;
    gap: 24px;
  }

  /* On tablet, the pair stacks cards vertically too */
  .modes-track-pair {
    flex-direction: column;
    gap: 0;
  }

  /* Arrow rotates to point downward between stacked pair cards */
  .modes-pair-arrow {
    width: 100%;
    height: 28px;
    font-size: 1.4rem;
    transform: rotate(90deg);
  }

  /* Hub feature cards: 2 columns on tablet */
  .hub-features {
    grid-template-columns: 1fr 1fr;
  }

  .hero-points {
    grid-template-columns: 1fr;
  }

  /* Show the hamburger button, switch nav to mobile panel */
  .nav-toggle { display: block; }

  .nav {
    position: absolute;
    top: 78px;
    right: 16px;
    left: 16px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 14px;
    background: rgba(10, 13, 11, 0.98);
    border: 1px solid var(--border);
    border-radius: 18px;
    max-height: calc(100vh - 94px); /* legacy fallback; modern browsers use dvh line below */
    max-height: calc(100dvh - 94px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* app.js adds .open to show the menu */
  .nav.open { display: flex; }

  .nav a {
    white-space: normal;
    overflow-wrap: break-word;
  }

  .header-inner { position: relative; }

  .hero-media-wrap,
  .hero-visual:hover .hero-media-wrap {
    transform: none;
    box-shadow:
      0 16px 40px rgba(0, 0, 0, 0.46),
      0 0 0 1px rgba(123, 255, 192, 0.12);
  }

  .hero-grid > * {
    min-width: 0;
  }

  .hero-copy {
    max-width: 100%;
  }

  .service-group {
    margin-top: 40px;
  }

  .services-foundation {
    margin-top: 32px;
    padding-top: 22px;
  }
}

/* ── Phone layout (≤ 640px) ───────────────────────────────── */
@media (max-width: 640px) {
  .hero { padding-top: 46px; }
  .section { padding: 64px 0; }

  /* Stack footer items vertically on small screens */
  .footer-inner {
    flex-direction: column;
  }

  /* Slightly smaller border radius on cards for narrow screens */
  .hero-panel,
  .product-card,
  .support-panel,
  .callout,
  .verify-box,
  .info-card,
  .feature-tile,
  .mode-card,
  .platform-card,
  .donation-card,
  .membership-form-wrap,
  .agreement-box,
  .hub-feature-item {
    border-radius: 18px;
  }

  .mode-head,
  .service-card-top {
    align-items: flex-start;
  }

  .mode-icon-wrap {
    width: 60px;
    height: 60px;
  }

  .service-icon-wrap {
    width: 48px;
    height: 48px;
  }

  .service-group-head h3 {
    font-size: 1.3rem;
  }

  .hero h1,
  .section-heading h2,
  .section-heading p,
  .royal-intro,
  .royal-offer {
    overflow-wrap: break-word;
  }

  .hero h1 {
    font-size: clamp(1.75rem, 10vw, 2.4rem);
  }

  .eyebrow {
    display: block;
    white-space: normal;
    overflow-wrap: break-word;
  }

  .modal {
    align-items: flex-start;
    padding: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .modal-content {
    width: 100%;
    max-width: 100%;
    margin-top: max(4px, env(safe-area-inset-top));
    margin-bottom: max(4px, env(safe-area-inset-bottom));
    padding: 18px 16px;
    border-radius: 16px;
  }

  .modal-body {
    max-height: calc(100vh - 140px); /* legacy fallback; modern browsers use dvh line below */
    max-height: calc(100dvh - 140px);
  }

  .close-modal {
    top: 10px;
    right: 14px;
  }

  .mode-hardware {
    grid-template-columns: 1fr;
  }

  .mode-hardware dt {
    white-space: normal;
  }

  .step-cmd {
    max-width: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .modal-body,
  .modal-body p,
  .modal-body li,
  .check-row,
  .royal-feature-card p,
  .hub-feature-item p,
  .service-desc,
  .service-card span,
  .footer-tagline,
  .footer-nav a {
    overflow-wrap: break-word;
  }

  .royal-features {
    /* minmax(0, 1fr) lets long content shrink instead of overflowing */
    grid-template-columns: minmax(0, 1fr);
  }

  /* Stack Hub feature cards to single column on phones */
  .hub-features {
    grid-template-columns: 1fr;
  }
}