/* ===== RESPONSIVE OVERRIDES FOR INLINE-STYLED SECTIONS ===== */
/* This file overrides inline grid styles used across all pages */

/* ===== TABLET (1024px) ===== */
@media (max-width: 1024px) {
  /* Footer top bar: 2 cols */
  .footer > .container > div[style*="repeat(12"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2rem !important;
  }
  .footer > .container > div[style*="repeat(12"] > div[style*="span 4"],
  .footer > .container > div[style*="repeat(12"] > div[style*="span 3"],
  .footer > .container > div[style*="repeat(12"] > div[style*="span 2"] {
    grid-column: span 1 !important;
  }
  /* Footer global hubs: 3 cols */
  .footer > .container > div[style*="repeat(5"] {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.5rem !important;
  }
  /* Any 3-col inline grid → 2 cols */
  div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Page hero banners with 12-col grids */
  section[style*="min-height"] .container > div[style*="repeat(12"] {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  section[style*="min-height"] .container > div[style*="repeat(12"] > div[style*="span"] {
    grid-column: span 1 !important;
  }
}

/* ===== MOBILE (768px) ===== */
@media (max-width: 768px) {
  /* Footer top bar: 1 col */
  .footer > .container > div[style*="repeat(12"] {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .footer > .container > div[style*="repeat(12"] > div[style*="span 4"],
  .footer > .container > div[style*="repeat(12"] > div[style*="span 3"],
  .footer > .container > div[style*="repeat(12"] > div[style*="span 2"] {
    grid-column: span 1 !important;
  }
  /* Footer global hubs: 2 cols */
  .footer > .container > div[style*="repeat(5"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem !important;
  }
  /* Footer bottom sub-bar */
  .footer > .container > div[style*="space-between"] {
    flex-direction: column !important;
    text-align: center !important;
    gap: 1rem !important;
  }
  /* Page hero/banner inline grids */
  section[style*="min-height"] .container > div[style*="repeat(12"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  section[style*="min-height"] .container > div[style*="repeat(12"] > div[style*="span"] {
    grid-column: span 1 !important;
  }
  /* Any 3-col grid → 1 col */
  div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
  /* Any 2-col inline grid */
  div[style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
  /* Inline flex with gap that might overflow */
  .footer[style] {
    font-size: 0.875rem !important;
  }
}

/* ===== SMALL MOBILE (480px) ===== */
@media (max-width: 480px) {
  .footer > .container > div[style*="repeat(5"],
  .footer > .container > div[style*="repeat(2"] {
    grid-template-columns: 1fr !important;
  }
  .footer[style] {
    padding-top: 2.5rem !important;
  }
}

/* ===== GLOBAL INLINE-GRID SAFETY NET ===== */
/* Inline grid styles carry high specificity, so these overrides use !important.
   Class-based grids (styled in style.css) are intentionally untouched — only
   ad-hoc inline grids that would otherwise overflow are collapsed here. */

/* Tablet: wide inline grids step down to a comfortable column count */
@media (max-width: 1024px) {
  div[style*="repeat(6"],
  div[style*="repeat(5"],
  div[style*="repeat(4"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Mobile: every inline grid collapses to a single column so nothing overflows */
@media (max-width: 768px) {
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* Neutralize column spans so a single-column grid leaves no gaps */
  [style*="grid-column"] {
    grid-column: auto !important;
  }
  /* Fixed/large inline widths must never exceed the viewport */
  [style*="min-width"] {
    min-width: 0 !important;
  }
  /* Final guard against stray horizontal scroll */
  html,
  body {
    overflow-x: hidden;
    max-width: 100%;
  }
}