/* RESPONSIVE DESIGN - MEDIA QUERIES */

/* XXL */
@media (max-width: 1536px) {
  :root {
    --container-width: 1140px;
  }
}

/* XL */
@media (max-width: 1280px) {
  :root {
    --container-width: 960px;
    --section-padding: 80px 0;
  }
}

/* LG - Tablets Landscape / Small Desktop */
@media (max-width: 1024px) {
  :root {
    --container-width: 100%;
    --section-padding: 70px 0;
  }
  
  .nav-links {
    display: none; /* Hide standard nav on tablet/mobile */
  }
  
  .nav-actions .btn {
    display: none; /* Hide primary CTA in nav on small screens to save space */
  }
  
  .mobile-menu-btn {
    display: block;
  }
}

/* MD - Tablets Portrait */
@media (max-width: 768px) {
  :root {
    --section-padding: 60px 0;
  }
  
  h1 { font-size: clamp(2.5rem, 8vw, 3.5rem); }
  h2 { font-size: clamp(1.8rem, 5vw, 2.5rem); }
  
  .mb-5 { margin-bottom: 2rem; }

  .hero-meta {
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: flex-start;
  }
  
  .hero-cta-group {
    align-items: flex-start;
  }

  .stats-grid,
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Reset Bento specific spans for tablet */
  .bento-main,
  .bento-tall,
  .bento-wide {
    grid-column: span 2;
  }

  /* Accordion Mobile Swipe Carousel */
  .acc-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    margin-left: 0;
    padding-bottom: 1.5rem; /* Space for native scroll interactions */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scrollbar-width: none; /* Hide scrollbar Firefox */
  }
  
  .acc-grid::-webkit-scrollbar {
    display: none; /* Hide scrollbar Chrome/Safari */
  }
  
  .acc-card {
    flex: 0 0 85%; /* Peek 15% of the next card to afford horizontal scrolling */
    scroll-snap-align: center;
  }
}

/* SM - Mobile Phones */
@media (max-width: 480px) {
  :root {
    --section-padding: 50px 0;
  }
  
  .container {
    padding: 0 1.5rem;
  }
  
  .hero-subheadline {
    font-size: 1rem;
  }
  
  .hero-cta-group {
    width: 100%;
  }
  
  .cta-primary {
    width: 100%;
    justify-content: center;
  }

  .stats-grid,
  .bento-grid {
    grid-template-columns: 1fr;
  }

  /* Reset all spans to single column for mobile phones */
  .bento-main,
  .bento-tall,
  .bento-small,
  .bento-wide {
    grid-column: span 1;
    grid-row: span 1;
  }

  /* Stack the wide bento block content vertically on mobile */
  .bento-wide .bento-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
}