/* responsive.css - THE STABILIZER */

/* --- TABLET (1024px and down) --- */
@media (max-width: 1024px) {
  :root { 
    --section-padding: 40px 15px; 
    --section-gap: 80px;
  }
  
  .hero-content h1 { 
    font-size: 2.8rem; 
    line-height: 1.1;
  }

  /* Force grids to 2 columns if they were 3 or 4 */
  .sector-grid-full,
  .articles-grid-tactical,
  .shop-grid-tactical, 
  .video-grid-tactical {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px;
  }
}

/* --- MOBILE LANDSCAPE / LARGE PHONES (768px and down) --- */
@media (max-width: 768px) {
  /* THE BREAKOUT RESET: Essential for Full-Width Sections */
  #sectors-section, 
  #articles-section, 
  #shop-section, 
  #manual-section, 
  #video-section, 
  #newsletter-section {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: 0 !important;
    padding: 40px 20px !important;
  }

  .hero-content h1 { 
    font-size: 2.2rem; 
  }
  
  .hero-content p { 
    font-size: 1rem; 
  }
  
  /* The "Big Fix" for titles: ensure long words break instead of pushing the screen wide */
  h1, h2, h3, .entry-title {
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-size: 1.8rem; /* Scaled down for mobile */
    line-height: 1.2;
  }

  /* Stack the main content and sidebar */
  .page-layout, 
  .report-grid, 
  .contact-grid,
  .manual-rugged-box,
  .dispatch-box-solid {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px;
  }

  .sidebar, .report-specs, .manual-preview, .manual-content {
    width: 100%;
  }

  .sidebar, .report-specs {
    order: 2; /* Puts sidebar below the main content */
  }

  .sector-card-sq {
    aspect-ratio: 16 / 9 !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
}

/* --- SMALL PHONES (480px and down) --- */
@media (max-width: 480px) {
  .hero-btns {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
  }

  .btn-main, .btn-luxury, .btn-tactical-submit, .btn-outline {
    width: 100%;
    text-align: center;
    margin-left: 0 !important;
    justify-content: center;
  }

  /* Force all grids to 1 column */
  .sector-grid-full,
  .articles-grid-tactical, 
  .shop-grid-tactical, 
  .video-grid-tactical,
  .founder-grid-dense {
    grid-template-columns: 1fr !important;
  }

  /* Tighten up padding so you don't waste screen space */
  .container, .footer-container, .header-container {
    padding: 0 15px;
  }

  .page-header {
    padding: 60px 0;
  }

  .sector-card-sq {
    aspect-ratio: 1 / 1 !important;
  }
}