/* ═══════════════════════════════════════════════════════════════
   WARROOM PORTFOLIO — COMPREHENSIVE RESPONSIVE PATCH
   Covers: all pages, all breakpoints, all components
   Breakpoints:
     ≤ 1200px  Large tablet / small laptop
     ≤ 1024px  Tablet landscape
     ≤  768px  Tablet portrait / large phone
     ≤  480px  Phone
     ≤  380px  Small phone
     hover:none  Touch devices
     prefers-reduced-motion  Accessibility
═══════════════════════════════════════════════════════════════ */

/* ── GLOBAL BOX MODEL ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
img, video, iframe { max-width: 100%; height: auto; }

/* ── PREVENT HORIZONTAL OVERFLOW ─────────────────────────── */
html, body { overflow-x: hidden; max-width: 100vw; }

/* ── TOUCH DEVICES: disable hover-only effects ────────────── */
@media (hover: none) {
  .cloud-card:hover,
  .mc:hover,
  .btn-p:hover,
  .btn-s:hover,
  .nlinks a:hover,
  .project-card:hover,
  .cert-card:hover,
  .flinks a:hover,
  .challenge-item:hover { transform: none !important; box-shadow: none !important; }
  /* Disable custom cursor on touch */
  #cursor, #cursor-ring, .cursor, .cursor-ring { display: none !important; }
  body { cursor: auto !important; }
}

/* ── REDUCED MOTION ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ══════════════════════════════════════════════════════════
   ≤ 1200px — LARGE TABLET / SMALL LAPTOP
══════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
  /* Navbar padding */
  nav, .nhq .ni { padding-left: 24px !important; padding-right: 24px !important; }

  /* Hero */
  .hleft { padding: 60px 32px 60px 48px !important; }

  /* Section padding */
  section { padding: 80px 32px !important; }
  #progress { padding: 60px 32px !important; }
  #classified { padding: 80px 32px !important; }

  /* Theater grid: 5→4 */
  .thgrid { grid-template-columns: repeat(4, 1fr) !important; }

  /* Feature stats */
  .fstats { grid-template-columns: repeat(4, 1fr) !important; }

  /* Missions grid */
  .mgrid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important; }

  /* Projects grid */
  .projects-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ══════════════════════════════════════════════════════════
   ≤ 1024px — TABLET LANDSCAPE
══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Hero */
  #hero { grid-template-columns: 1fr !important; }
  .hright { display: none !important; }
  .hleft { padding: 60px 32px !important; max-width: 700px; }

  /* Stats */
  .hstats { grid-template-columns: repeat(2, 1fr) !important; }

  /* Theater grid: 4→3 */
  .thgrid { grid-template-columns: repeat(3, 1fr) !important; }

  /* Progress section */
  .pgrid { grid-template-columns: 1fr !important; gap: 32px !important; }

  /* Feature card stats */
  .fstats { grid-template-columns: repeat(3, 1fr) !important; }

  /* Section padding */
  section { padding: 72px 32px !important; }
  #progress { padding: 56px 32px !important; }

  /* Cloud grid: keep 5 but reduce gap */
  .cloud-grid { gap: 0.75rem !important; }

  /* Doc grid */
  .doc-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ══════════════════════════════════════════════════════════
   ≤ 768px — TABLET PORTRAIT / LARGE PHONE
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* ── NAV ── */
  nav { padding: 0 16px !important; }
  /* The canonical .nhq nav already has mobile rules; reinforce */
  .nhq .ni { padding: 0 16px !important; }
  /* Hide nav-status text on small screens */
  .nav-status, .nstatus { display: none !important; }
  /* Hamburger open animation */
  .nham.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nham.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .nham.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* ── HERO ── */
  #hero { padding: 70px 16px 40px !important; }
  .hleft { padding: 40px 0 !important; }
  .htitle { font-size: clamp(1.8rem, 7vw, 3rem) !important; }
  .hbtns { flex-direction: column; gap: 10px; }
  .btn-p, .btn-s {
    width: 100% !important;
    justify-content: center !important;
    clip-path: none !important;
  }
  .hstats { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── SECTIONS ── */
  section { padding: 56px 16px !important; }
  #progress { padding: 48px 16px !important; }
  #classified { padding: 56px 16px !important; }
  #theater { padding: 56px 16px !important; }
  #missions { padding: 56px 16px !important; }

  /* Section header brackets */
  .sh::before { left: 0 !important; }
  .sh::after { right: 0 !important; }

  /* ── THEATER / CLOUD GRID ── */
  .thgrid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .cloud-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 0.5rem !important; }

  /* ── FEATURE CARD ── */
  .fcard { padding: 24px 16px !important; }
  .fstats { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }

  /* ── MISSIONS GRID ── */
  .mgrid { grid-template-columns: 1fr !important; }

  /* ── PROGRESS / GAUGES ── */
  .pgrid { grid-template-columns: 1fr !important; }
  .cgauges { grid-template-columns: 1fr !important; }

  /* ── CLASSIFIED SECTION ── */
  .clcard { padding: 32px 20px !important; }

  /* ── FOOTER ── */
  footer { padding: 32px 16px !important; }
  .fi2 { flex-direction: column !important; gap: 20px !important; }
  .flinks { flex-wrap: wrap !important; justify-content: flex-start !important; }
  .fstats { grid-template-columns: repeat(3, 1fr) !important; }
  .wr-footer { padding: 24px 16px 16px !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 1.5rem !important; }
  .footer-brand { grid-column: 1 / -1 !important; }
  .footer-bottom { flex-direction: column !important; text-align: center !important; gap: 12px !important; }
  .footer-stats { justify-content: center !important; }

  /* ── PROJECTS GRID ── */
  .projects-grid { grid-template-columns: 1fr !important; }

  /* ── CERTIFICATIONS PAGE ── */
  .certs-grid { grid-template-columns: 1fr !important; }
  .cert-card { padding: 20px 16px !important; }

  /* ── PROJECT PAGE HEADER ── */
  .project-header { padding: 80px 16px 40px !important; }
  .project-header-content { grid-template-columns: 1fr !important; text-align: center !important; }
  .project-icon-large { margin: 0 auto !important; }
  .project-badges { justify-content: center !important; }
  .project-actions { justify-content: center !important; flex-wrap: wrap !important; }
  .project-actions .btn { width: 100% !important; justify-content: center !important; }

  /* ── PROJECT PAGE BODY ── */
  .project-body { padding: 0 16px !important; }
  .project-section { padding: 32px 0 !important; }
  .tech-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .doc-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .related-grid { grid-template-columns: 1fr !important; }
  .quickstart-step { grid-template-columns: 1fr !important; text-align: center !important; }
  .step-number { margin: 0 auto !important; }

  /* ── COMPACT PROJECT CARDS ── */
  .project-compact-grid { grid-template-columns: 1fr !important; }
  .pcard { padding: 16px !important; }
  .pcard-meta { flex-wrap: wrap !important; gap: 6px !important; }

  /* ── BOOKING / CTA ── */
  .booking-cta { flex-direction: column !important; text-align: center !important; padding: 1.5rem !important; }
  .booking-cta-buttons { width: 100% !important; justify-content: center !important; flex-direction: column !important; }
  .booking-cta-buttons .btn { width: 100% !important; justify-content: center !important; }
  .booking-services { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════════════════
   ≤ 480px — PHONE
══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* Threat ticker: shrink text */
  .ti { font-size: 9px !important; padding: 0 18px !important; }
  .tl { font-size: 9px !important; padding: 0 8px !important; }

  /* Hero */
  .htitle { font-size: clamp(1.6rem, 8vw, 2.4rem) !important; }
  .hsub { font-size: 11px !important; }
  .hdesc { font-size: 14px !important; }
  .hbadge { font-size: 10px !important; }
  .hstats { grid-template-columns: repeat(2, 1fr) !important; }
  .hstat { padding: 12px 8px !important; }
  .hstat-n { font-size: 1.4rem !important; }

  /* Cloud grid: 3→2 on very small phones */
  .cloud-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .cloud-card { padding: 1rem 0.5rem !important; }
  .cloud-icon { font-size: 1.8rem !important; }
  .cloud-name { font-size: 0.75rem !important; }
  .cloud-count { font-size: 1.2rem !important; }
  .cloud-description, .cloud-features { display: none !important; }

  /* Theater grid: 2→2 (already set) */
  .thgrid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Feature stats: 2→1 */
  .fstats { grid-template-columns: 1fr !important; }

  /* Section headers */
  .sh { margin-bottom: 32px !important; }
  .section-title { font-size: 1.4rem !important; }
  .stag { font-size: 9px !important; }

  /* Sections */
  section { padding: 40px 14px !important; }
  #progress { padding: 40px 14px !important; }

  /* Tech grid: 1 col */
  .tech-grid { grid-template-columns: 1fr !important; }
  .doc-grid { grid-template-columns: 1fr !important; }

  /* Classified card */
  .clcard { padding: 24px 14px !important; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr !important; }
  .fstats { grid-template-columns: repeat(2, 1fr) !important; }

  /* Buttons: full width */
  .btn-p, .btn-s, .nbook { width: 100% !important; justify-content: center !important; }

  /* Project page */
  .project-header { padding: 70px 14px 32px !important; }
  .project-body { padding: 0 14px !important; }
  .status-badge { font-size: 12px !important; padding: 6px 12px !important; }

  /* Certifications */
  .cert-grid, .certs-grid { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════════════════
   ≤ 380px — SMALL PHONE
══════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  .htitle { font-size: 1.5rem !important; }
  .hstats { grid-template-columns: 1fr 1fr !important; }
  section { padding: 32px 12px !important; }
  .cloud-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .thgrid { grid-template-columns: repeat(2, 1fr) !important; }
  .fstats { grid-template-columns: 1fr !important; }
  .doc-grid { grid-template-columns: 1fr !important; }
  .tech-grid { grid-template-columns: 1fr !important; }
  .project-header { padding: 64px 12px 28px !important; }
}

/* ══════════════════════════════════════════════════════════
   LANDSCAPE PHONE
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) and (orientation: landscape) {
  #hero { min-height: auto !important; padding-top: 64px !important; }
  .htitle { font-size: 2rem !important; }
}

/* ══════════════════════════════════════════════════════════
   HAMBURGER OPEN STATE ANIMATION
══════════════════════════════════════════════════════════ */
.nham.open span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
.nham.open span:nth-child(2) { opacity: 0 !important; transform: scaleX(0) !important; }
.nham.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }

/* ══════════════════════════════════════════════════════════
   INLINE STYLE OVERRIDES — fix hardcoded padding in HTML
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Override any inline padding:80px or padding:60px 80px */
  [style*="padding:80px"],
  [style*="padding: 80px"] { padding: 56px 16px !important; }
  [style*="padding:60px 80px"],
  [style*="padding: 60px 80px"] { padding: 48px 16px !important; }
  [style*="padding:48px 40px"],
  [style*="padding: 48px 40px"] { padding: 40px 16px !important; }

  /* Override any inline grid-template-columns with fixed px values */
  [style*="grid-template-columns:200px"],
  [style*="grid-template-columns: 200px"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════════════════════
   TOUCH DEVICE: disable particle/globe canvas pointer events
   (already pointer-events:none in HTML but reinforce)
══════════════════════════════════════════════════════════ */
@media (hover: none) {
  canvas { pointer-events: none !important; }
}