/* 
========================================================================
   SRVSTECH - RESPONSIVE STYLESHEET
========================================================================
   Groups all layout overrides for 576px, 768px, 992px, & 1200px breakpoints
========================================================================
*/

/* --- 0. MOBILE HORIZONTAL TOUCH SWIPE CAROUSEL (max-width: 767px) --- */
@media (max-width: 767px) {
  /* Card containers converted into smooth horizontal touch scroll tracks */
  .about-stats,
  .services-grid,
  .solutions-grid,
  .hardware-grid,
  .portfolio-grid,
  .courses-grid,
  .ap-highlights-grid,
  .ap-services-grid,
  .ap-support-grid,
  .partner-group-cards {
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 14px !important;
    margin-left: -0.25rem;
    margin-right: -0.25rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    gap: 1rem !important;
    scrollbar-width: thin;
  }

  /* Custom subtle horizontal scrollbar indicator */
  .about-stats::-webkit-scrollbar,
  .services-grid::-webkit-scrollbar,
  .solutions-grid::-webkit-scrollbar,
  .hardware-grid::-webkit-scrollbar,
  .portfolio-grid::-webkit-scrollbar,
  .courses-grid::-webkit-scrollbar,
  .ap-highlights-grid::-webkit-scrollbar,
  .ap-services-grid::-webkit-scrollbar,
  .ap-support-grid::-webkit-scrollbar,
  .partner-group-cards::-webkit-scrollbar {
    height: 4px;
  }

  .about-stats::-webkit-scrollbar-thumb,
  .services-grid::-webkit-scrollbar-thumb,
  .solutions-grid::-webkit-scrollbar-thumb,
  .hardware-grid::-webkit-scrollbar-thumb,
  .portfolio-grid::-webkit-scrollbar-thumb,
  .courses-grid::-webkit-scrollbar-thumb,
  .ap-highlights-grid::-webkit-scrollbar-thumb,
  .ap-services-grid::-webkit-scrollbar-thumb,
  .ap-support-grid::-webkit-scrollbar-thumb,
  .partner-group-cards::-webkit-scrollbar-thumb {
    background: var(--color-secondary);
    border-radius: 4px;
  }

  /* Cards set to 84% width so next card peeks on screen */
  .stat-card,
  .service-card,
  .solution-card,
  .hardware-card,
  .portfolio-card,
  .course-card,
  .ap-highlight-card,
  .ap-service-box,
  .ap-support-item,
  .partner-card {
    flex: 0 0 84% !important;
    min-width: 84% !important;
    max-width: 84% !important;
    scroll-snap-align: start !important;
    box-sizing: border-box !important;
  }

  .about-box {
    padding: 1.25rem 1rem;
    gap: 1.25rem;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  .about-content h3 {
    font-size: 1.35rem;
    line-height: 1.35;
    word-break: break-word;
  }

  .about-content p {
    font-size: 0.925rem;
    line-height: 1.6;
    word-break: break-word;
  }

  .logo-wrapper img {
    height: 60px;
    max-height: 64px;
  }
}

/* --- 1. SMALL MOBILE TO TABLET OVERRIDES (min-width: 576px) --- */
@media (min-width: 576px) {
  .hero-title {
    font-size: 3rem;
  }

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

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

  .form-group-row {
    grid-template-columns: 1fr 1fr;
  }

  .contact-form-container {
    padding: var(--space-lg);
  }
}

/* --- 2. TABLET TO LAPTOP OVERRIDES (min-width: 768px) --- */
@media (min-width: 768px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }

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

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

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

  .intersection-block {
    padding: var(--space-xl) var(--space-lg);
  }

  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr;
  }
}

/* --- 3. LAPTOP TO DESKTOP OVERRIDES (min-width: 992px) --- */
@media (min-width: 992px) {
  .section-padding {
    padding-top: var(--space-xxl);
    padding-bottom: var(--space-xxl);
  }

  .nav-list {
    display: flex;
  }

  .menu-toggle {
    display: none;
  }

  .hero {
    /* navbar offset now comes from main */
    padding-top: 0.5rem;
    padding-bottom: var(--space-xxl);
  }

  .hero-grid {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-lg);
  }

  .values-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
  }

  .solutions-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .hardware-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
  }

  .franchise-banner {
    padding: var(--space-xl);
  }

  .franchise-grid {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  .about-box {
    grid-template-columns: 1.2fr 0.8fr;
    padding: var(--space-xl);
  }

  .contact-grid {
    grid-template-columns: 0.9fr 1.1fr;
    align-items: flex-start;
  }
}

/* --- 4. LARGE SCREEN OVERRIDES (min-width: 1200px) --- */
@media (min-width: 1200px) {
  .hero-title {
    font-size: 3.5rem;
  }
}

/* --- 5. PARTNER SECTION — no additional breakpoints needed (groups handle layout) --- */