/* =========================================================================
   CleanPro Plus — Responsive refinements
   Mobile-first rules live alongside components in style.css; this file
   holds breakpoint-specific overrides that don't fit naturally inline.
   ========================================================================= */

/* Small phones */
@media (max-width: 375px) {
  :root { --space-section: 3rem; }
  .btn-brand { padding: 0.85rem 1.4rem; font-size: 0.92rem; }
}

/* Phones / small tablets */
@media (max-width: 575.98px) {
  .section-head { margin-bottom: var(--space-6); }
  .display-actions { flex-direction: column; align-items: stretch !important; }
  .display-actions .btn-brand { width: 100%; }
  .stat-tile .stat-num { font-size: 1.9rem; }
}

/* Tablets */
@media (min-width: 576px) and (max-width: 991.98px) {
  :root { --header-h: 76px; }
}

/* Mobile + tablet: hide heavy decorative blobs to protect performance & avoid overflow */
@media (max-width: 767.98px) {
  .bg-decor.blob { display: none; }
  .page-header { padding: calc(var(--header-h) + 2.25rem) 0 3rem; }
}

/* Large desktop refinements */
@media (min-width: 1400px) {
  .container { max-width: 1280px; }
}

/* Ensure no horizontal scroll from full-bleed decorative elements */
html, body { max-width: 100%; overflow-x: hidden; }
/* Note: .site-header is intentionally excluded — its Services dropdown
   panel must be able to overflow below the header's own box. */
section, footer { overflow: clip; }

/* Print */
@media print {
  .site-header, .site-footer, .mobile-menu, .cookie-banner, .btn-brand, .bg-decor { display: none !important; }
}