/* Custom overrides from Live Editor */

/* ═══════════════════════════════════════════
   MOBILE RESPONSIVENESS FIXES
   Fixes: hero gap, trust strip, why-choose grid,
   inline grids, service intro sections
════════════════════════════════════════════ */

/* ── HERO: remove excess gap between hero content and card on mobile ── */
@media (max-width: 768px) {
  .hero {
    min-height: 100svh !important;
    align-items: flex-start !important;
  }
  .hero-inner {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding-block: 2.5rem 2rem !important;
    align-items: flex-start !important;
  }
  /* Hide the service area card on mobile — it pushes content down */
  .hero-card {
    display: none !important;
  }
  .hero-content h1 {
    font-size: clamp(2.4rem, 10vw, 3.4rem) !important;
    margin-bottom: 1rem !important;
  }
  .hero-subtitle {
    font-size: 1rem !important;
    margin-bottom: 1.5rem !important;
  }
  .hero-actions {
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .hero-actions .btn {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .hero-tagline {
    margin-top: 1.25rem !important;
  }
}

/* ── TRUST STRIP: wrap to 2-col grid on mobile ── */
@media (max-width: 640px) {
  .trust-inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px 16px !important;
    justify-items: start !important;
  }
  .trust-item {
    font-size: 0.65rem !important;
  }
}

/* ── WHY CHOOSE GRID: stack to 1 col on mobile ── */
@media (max-width: 768px) {
  /* Targets the inline grid used for Why Choose section */
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns:repeat(2,1fr)"],
  [style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
}

/* Specific fix for why-choose 3-col → 1-col */
@media (max-width: 640px) {
  .wc-grid,
  section [style*="repeat(3"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── SERVICE PAGE INTRO: stack the 2-col grid on mobile ── */
@media (max-width: 768px) {
  /* Two-column intro (text + image) */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  /* Intro image stat badge — don't overflow */
  [style*="position:absolute;bottom:-20px;left:-20px"] {
    position: static !important;
    margin-top: 12px !important;
    display: inline-block !important;
  }
}

/* ── PROCESS STEPS: stack to 2-col on tablet, 1-col on mobile ── */
@media (max-width: 768px) {
  .process-steps {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }
}
@media (max-width: 480px) {
  .process-steps {
    grid-template-columns: 1fr !important;
  }
}

/* ── STATS BAR PREMIUM: wrap nicely on mobile ── */
@media (max-width: 640px) {
  .stats-grid-premium {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
}

/* ── FAQ SECTION: stack on mobile ── */
@media (max-width: 768px) {
  [style*="grid-template-columns:1fr 1fr"][style*="align-items:start"],
  [style*="grid-template-columns: 1fr 1fr"][style*="align-items: start"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── ROLES GRID (service pages): 2-col tablet, 1-col mobile ── */
@media (max-width: 1024px) {
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: repeat(2,1fr) !important;
  }
}
@media (max-width: 640px) {
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(2,1fr)"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── ABOUT PAGE GRID ── */
@media (max-width: 768px) {
  .about-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── CMS MODAL: full screen on mobile ── */
@media (max-width: 640px) {
  .cms-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 95vh !important;
    border-radius: 16px 16px 0 0 !important;
    position: fixed !important;
    bottom: 0 !important;
  }
  .cms-overlay {
    align-items: flex-end !important;
  }
  .cms-row {
    grid-template-columns: 1fr !important;
  }
}

/* ── PAGE HERO: proper sizing on mobile ── */
@media (max-width: 768px) {
  .page-hero {
    height: auto !important;
    min-height: 280px !important;
    padding-top: calc(72px + 2rem) !important;
    padding-bottom: 2.5rem !important;
  }
  .page-hero h1 {
    font-size: clamp(1.8rem, 7vw, 2.5rem) !important;
  }
}

/* ── SECTION PADDING: reduce on mobile ── */
@media (max-width: 768px) {
  section[style*="padding:90px 0"],
  section[style*="padding:96px 0"],
  section[style*="padding:80px 0"] {
    padding: 56px 0 !important;
  }
}

/* ── FOOTER BOTTOM: stack on mobile ── */
@media (max-width: 640px) {
  .footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: 0.75rem !important;
  }
  .footer-legal-links {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
}

/* ── PREVENT ANY HORIZONTAL SCROLL ── */
*, *::before, *::after {
  max-width: 100%;
  box-sizing: border-box;
}
img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* Bespoke Site Audits page hero background */
.page-hero-bg.bespoke-audits { background-image: url('../images/bespoke-site-audits.jpg'); opacity: 0.22; }