/* ==========================================================================
   Cross-Cutting Responsive Overrides & Utility Classes
   ========================================================================== */

/* Prevent any accidental horizontal scroll */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
  position: relative;
}

/* Visibility Utilities */
.hide-mobile { display: block; }
.show-mobile { display: none; }

@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
  .show-mobile { display: block !important; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hide-tablet { display: none !important; }
  .show-tablet { display: block !important; }
}

@media (min-width: 1024px) {
  .hide-desktop { display: none !important; }
  .show-desktop { display: block !important; }
}

/* Responsive Grid Classes */
.grid-1 {
  grid-template-columns: 1fr;
}

@media (min-width: 480px) {
  .grid-sm-2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .grid-md-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-md-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-md-4 { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1024px) {
  .grid-lg-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-lg-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-lg-4 { grid-template-columns: repeat(4, 1fr); }
  .grid-lg-5 { grid-template-columns: repeat(5, 1fr); }
}

@media (min-width: 1280px) {
  .grid-xl-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-xl-4 { grid-template-columns: repeat(4, 1fr); }
  .grid-xl-5 { grid-template-columns: repeat(5, 1fr); }
  .grid-xl-6 { grid-template-columns: repeat(6, 1fr); }
}

/* Alignment Utilities */
@media (max-width: 767px) {
  .text-center-mobile { text-align: center !important; }
  .text-left-mobile { text-align: left !important; }
  .flex-col-mobile { flex-direction: column !important; }
  .items-center-mobile { align-items: center !important; }
  .w-full-mobile { width: 100% !important; }
}

/* Spacing Responsive Scale */
@media (max-width: 767px) {
  :root {
    --spacing-3xl: 40px;
    --spacing-2xl: 32px;
    --spacing-xl: 24px;
    --spacing-lg: 18px;
  }
}

/* Print Styles */
@media print {
  .siteheader,
  .site-footer,
  .scroll-to-top-btn,
  .nav-cta-btn {
    display: none !important;
  }

  main.page-content {
    padding-top: 0 !important;
  }

  body {
    color: #000000;
    background: #FFFFFF;
    font-size: 12pt;
  }
}