/* =====================================================
   ZenoraTech – Service Page Mobile Fix
   Add this to the bottom of style.css  (or paste the
   <style> block into each service page <head>)
   ===================================================== */

/* --- Page hero: safe padding on small screens --- */
@media (max-width: 768px) {
  .page-hero {
    padding: 100px 16px 60px;
  }
  .page-hero .hero-title {
    font-size: clamp(2rem, 8vw, 3rem);
    letter-spacing: -1px;
  }
  .page-hero .hero-sub {
    font-size: 0.95rem;
  }
  .page-hero .hero-actions {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }
}

/* --- Stats row: 4-col → 2-col → 1-col --- */
@media (max-width: 768px) {
  /* The inline stats grid on technical-services page */
  [style*="grid-template-columns:repeat(4,1fr)"],
  .stats-inline-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}
@media (max-width: 420px) {
  [style*="grid-template-columns:repeat(4,1fr)"],
  .stats-inline-grid {
    grid-template-columns: 1fr !important;
  }
}

/* --- Why-choose grid: 4 → 2 → 1 --- */
@media (max-width: 1024px) {
  .why-choose-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .why-choose-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Service cards: 3 → 1 --- */
@media (max-width: 900px) {
  .service-cards {
    grid-template-columns: 1fr;
  }
}

/* --- Service items grid: min-width too wide on small screens --- */
@media (max-width: 560px) {
  .service-items {
    grid-template-columns: 1fr;
  }
}

/* --- ss-header: wrap on mobile --- */
@media (max-width: 600px) {
  .ss-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
}

/* --- Section padding tighter on mobile --- */
@media (max-width: 768px) {
  .service-section {
    padding: 50px 0;
  }
  .faq-section {
    padding: 60px 0;
  }
  .cta-banner {
    padding: 60px 16px;
  }
  .cta-actions {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }
}

/* --- Footer: single column on mobile --- */
@media (max-width: 640px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
  }
}

/* =====================================================
   HAMBURGER FIX
   The hamburger display:flex is gated behind 768px in
   style.css — this ensures it also works on service pages
   ===================================================== */
@media (max-width: 768px) {
  .hamburger {
    display: flex !important;
  }
}

