/* ============================================================
   AeroWash Solutions — Global Mobile Responsive Overrides
   Fixes all inline-styled grids across Services, Industries,
   sub-pages, and footer without modifying Elementor data.
   v1.1 — Added section padding reduction + before/after fixes
   ============================================================ */

/* ─── GLOBAL FIXES (all breakpoints) ─── */

/* FAQ page — remove white frame around hero on MOBILE only */
@media (max-width: 921px) {
  .page-id-1547 #content > .ast-container {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .page-id-1547 #content {
    padding: 0 !important;
    margin: 0 !important;
  }
  .page-id-1547 .elementor-element-faq_s1 {
    margin: 0 !important;
    padding: 0 !important;
  }
  .page-id-1547 .elementor-element-faq_s1 > .elementor-container {
    padding: 0 !important;
    max-width: 100% !important;
  }
}

/* ─── BREAKPOINT: TABLET (≤ 1024px) ─── */
@media (max-width: 1024px) {

  /* 5-col → 3-col on tablet */
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns:repeat(5, 1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* 4-col → 2-col on tablet */
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* 3-col → 2-col on tablet */
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Hero 1.2fr .8fr → stack */
  [style*="grid-template-columns:1.2fr .8fr"],
  [style*="grid-template-columns:1.2fr 0.8fr"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
}

/* ─── BREAKPOINT: MOBILE (≤ 767px) ─── */
@media (max-width: 767px) {

  /* ── Hero Background — poster image fallback on mobile ── */
  /* Mobile browsers block autoplay video; show extracted frame instead */
  #aw-section-hero .elementor-background-video-container {
    display: none !important;
  }
  #aw-section-hero {
    background-image: url(/wp-content/uploads/2026/03/hero-video-poster.jpg) !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  /* ── Elementor Section Padding Reduction ── */
  /* Biggest impact: cuts 40-60px padding per section = massive space savings */
  .elementor-section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  /* Hero/CTA sections (with gradients/backgrounds) keep slightly more */
  .elementor-section[data-settings*="background_background"] {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  /* Last CTA section with 100px padding */
  .elementor-section[style*="padding:100px"] {
    padding: 48px 0 !important;
  }

  /* ── Grid Overrides ── */

  /* 5-col → horizontal scroll on mobile (About page "Our Story" cards) */
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns:repeat(5, 1fr)"] {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 0.75rem !important;
    padding-bottom: 4px !important;
    grid-template-columns: unset !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(232,113,42,0.3) transparent;
  }
  [style*="grid-template-columns:repeat(5,1fr)"]::-webkit-scrollbar,
  [style*="grid-template-columns:repeat(5, 1fr)"]::-webkit-scrollbar { height: 3px; }
  [style*="grid-template-columns:repeat(5,1fr)"]::-webkit-scrollbar-track,
  [style*="grid-template-columns:repeat(5, 1fr)"]::-webkit-scrollbar-track { background: rgba(0,0,0,0.04); border-radius: 3px; margin: 0 8px; }
  [style*="grid-template-columns:repeat(5,1fr)"]::-webkit-scrollbar-thumb,
  [style*="grid-template-columns:repeat(5, 1fr)"]::-webkit-scrollbar-thumb { background: rgba(232,113,42,0.35); border-radius: 3px; }

  [style*="grid-template-columns:repeat(5,1fr)"] > div,
  [style*="grid-template-columns:repeat(5, 1fr)"] > div {
    flex: 0 0 65vw !important;
    max-width: 65vw !important;
    scroll-snap-align: start !important;
    box-sizing: border-box !important;
  }

  [style*="grid-template-columns:repeat(5,1fr)"]::after,
  [style*="grid-template-columns:repeat(5, 1fr)"]::after {
    content: '' !important;
    flex: 0 0 1px !important;
  }

  /* 3-col → 1-col on mobile */
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* 4-col → 2-col on mobile */
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  /* 2-col repeat → 1-col on mobile */
  [style*="grid-template-columns:repeat(2,1fr)"],
  [style*="grid-template-columns:repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* 2-col 1fr 1fr (before/after image grids) — KEEP 2-col for comparison */
  /* These need to stay side-by-side but with reduced gap */
  [style*="grid-template-columns:1fr 1fr"] {
    gap: 0.75rem !important;
  }

  /* Before/after image containers — limit height on mobile */
  /* Only target divs that contain images, not text content cards */
  [style*="grid-template-columns:1fr 1fr"] > div:has(> img) {
    max-height: 250px !important;
    overflow: hidden !important;
  }

  [style*="grid-template-columns:1fr 1fr"] > div img {
    height: 180px !important;
    object-fit: cover !important;
  }

  /* Hero layout 1.2fr .8fr → stack */
  [style*="grid-template-columns:1.2fr .8fr"],
  [style*="grid-template-columns:1.2fr 0.8fr"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* ── Typography ── */

  /* Scale down H1 across all HTML widgets */
  .elementor-widget-html h1 {
    font-size: 1.65rem !important;
    line-height: 1.2 !important;
  }

  /* Scale down H2 across all HTML widgets */
  .elementor-widget-html h2 {
    font-size: 1.35rem !important;
    line-height: 1.25 !important;
  }

  /* Scale down H3 */
  .elementor-widget-html h3 {
    font-size: 0.95rem !important;
  }

  /* ── Padding Adjustments ── */

  /* Reduce horizontal padding on all content containers in HTML widgets */
  .elementor-widget-html [style*="padding:0 2rem"] {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* ── Card / Grid Item Fixes ── */

  /* Reduce padding on grid children (cards) */
  [style*="grid-template-columns:repeat(3"] > a,
  [style*="grid-template-columns:repeat(4"] > a,
  [style*="grid-template-columns:repeat(3"] > div[style*="background:#fff"],
  [style*="grid-template-columns:repeat(4"] > div[style*="background:#fff"] {
    padding: 1.25rem 1rem !important;
  }

  /* ── Table Responsiveness ── */

  .elementor-widget-html table {
    font-size: 0.75rem !important;
  }

  .elementor-widget-html th,
  .elementor-widget-html td {
    padding: 8px 6px !important;
  }

  /* ── Hero Image ── */

  .elementor-widget-html img[style*="height:400px"] {
    height: 220px !important;
  }

  .elementor-widget-html [style*="max-height:400px"] {
    max-height: 220px !important;
  }

  /* ── Button Stacking ── */

  .elementor-widget-html [style*="display:flex"][style*="justify-content:center"][style*="flex-wrap:wrap"] {
    flex-direction: column !important;
    align-items: center !important;
  }

  .elementor-widget-html [style*="display:flex"][style*="justify-content:center"][style*="flex-wrap:wrap"] > a {
    width: 100% !important;
    max-width: 300px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* ── FAQ Accordion ── */

  .elementor-widget-html details summary {
    font-size: 0.9rem !important;
    padding: 0.85rem 1rem !important;
  }

  .elementor-widget-html details > div {
    font-size: 0.85rem !important;
    padding: 0 1rem 0.85rem !important;
  }

  /* ── Stats Row ── */
  .elementor-widget-html [style*="display:flex"][style*="justify-content:space-around"],
  .elementor-widget-html [style*="display:flex"][style*="justify-content:space-between"] {
    gap: 0.5rem !important;
  }

  /* ── Stats Section — tighter on mobile ── */
  #aw-section-stats {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  /* ── Footer ── */

  footer[style*="background:#1C2025"] [style*="grid-template-columns:repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem 1rem !important;
  }

  footer[style*="background:#1C2025"] {
    padding: 40px 1rem 0 !important;
  }

  /* Footer text sizes — compact */
  footer[style*="background:#1C2025"] h4 {
    font-size: 0.8rem !important;
  }

  footer[style*="background:#1C2025"] a {
    font-size: 0.78rem !important;
  }

  /* Footer brand description — truncate with ellipsis */
  footer[style*="background:#1C2025"] p[style*="font-size:0.9rem"] {
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
  }

  /* Footer CTA button — prevent overflow */
  footer[style*="background:#1C2025"] a[style*="padding:10px 24px"] {
    padding: 8px 16px !important;
    font-size: 0.8rem !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
  }

  /* Footer bottom bar */
  footer [style*="display:flex"][style*="justify-content:space-between"] {
    flex-direction: column !important;
    text-align: center !important;
    gap: 0.5rem !important;
  }

  /* ── Step Cards — Horizontal Scroll ── */
  /* Override the generic stack rules for step grids — make them swipeable */

  /* Shared scroll container styles */
  .aw-scroll-row {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 1rem !important;
    padding-bottom: 4px !important;
    grid-template-columns: unset !important;
    /* Thin accent scrollbar — Firefox */
    scrollbar-width: thin;
    scrollbar-color: rgba(232,113,42,0.3) transparent;
  }
  /* Thin accent scrollbar — Webkit */
  .aw-scroll-row::-webkit-scrollbar { height: 3px; }
  .aw-scroll-row::-webkit-scrollbar-track { background: rgba(0,0,0,0.04); border-radius: 3px; margin: 0 8px; }
  .aw-scroll-row::-webkit-scrollbar-thumb { background: rgba(232,113,42,0.35); border-radius: 3px; }

  /* 3-col step grids (service sub-pages: gap:2rem and gap:1.5rem variants) */
  .elementor-widget-html [style*="grid-template-columns:repeat(3"][style*="gap:2rem"],
  .elementor-widget-html [style*="grid-template-columns:repeat(3"][style*="gap:1.5rem"] {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 1rem !important;
    padding-bottom: 4px !important;
    grid-template-columns: unset !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(232,113,42,0.3) transparent;
  }
  .elementor-widget-html [style*="grid-template-columns:repeat(3"][style*="gap:2rem"]::-webkit-scrollbar,
  .elementor-widget-html [style*="grid-template-columns:repeat(3"][style*="gap:1.5rem"]::-webkit-scrollbar { height: 3px; }
  .elementor-widget-html [style*="grid-template-columns:repeat(3"][style*="gap:2rem"]::-webkit-scrollbar-track,
  .elementor-widget-html [style*="grid-template-columns:repeat(3"][style*="gap:1.5rem"]::-webkit-scrollbar-track { background: rgba(0,0,0,0.04); border-radius: 3px; margin: 0 8px; }
  .elementor-widget-html [style*="grid-template-columns:repeat(3"][style*="gap:2rem"]::-webkit-scrollbar-thumb,
  .elementor-widget-html [style*="grid-template-columns:repeat(3"][style*="gap:1.5rem"]::-webkit-scrollbar-thumb { background: rgba(232,113,42,0.35); border-radius: 3px; }

  .elementor-widget-html [style*="grid-template-columns:repeat(3"][style*="gap:2rem"] > div,
  .elementor-widget-html [style*="grid-template-columns:repeat(3"][style*="gap:1.5rem"] > div,
  .elementor-widget-html [style*="grid-template-columns:repeat(3"][style*="gap:2rem"] > a,
  .elementor-widget-html [style*="grid-template-columns:repeat(3"][style*="gap:1.5rem"] > a {
    flex: 0 0 80vw !important;
    max-width: 80vw !important;
    scroll-snap-align: start !important;
    box-sizing: border-box !important;
  }

  .elementor-widget-html [style*="grid-template-columns:repeat(3"][style*="gap:2rem"]::after,
  .elementor-widget-html [style*="grid-template-columns:repeat(3"][style*="gap:1.5rem"]::after {
    content: '' !important;
    flex: 0 0 1px !important;
  }

  /* 2-col step grids (Solar Panel steps, Services 4-step: repeat(2) with gap:1.5rem) */
  .elementor-widget-html [style*="grid-template-columns:repeat(2,1fr)"][style*="gap:1.5rem"],
  .elementor-widget-html [style*="grid-template-columns:repeat(2, 1fr)"][style*="gap:1.5rem"] {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 1rem !important;
    padding-bottom: 4px !important;
    grid-template-columns: unset !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(232,113,42,0.3) transparent;
  }
  .elementor-widget-html [style*="grid-template-columns:repeat(2,1fr)"][style*="gap:1.5rem"]::-webkit-scrollbar,
  .elementor-widget-html [style*="grid-template-columns:repeat(2, 1fr)"][style*="gap:1.5rem"]::-webkit-scrollbar { height: 3px; }
  .elementor-widget-html [style*="grid-template-columns:repeat(2,1fr)"][style*="gap:1.5rem"]::-webkit-scrollbar-track,
  .elementor-widget-html [style*="grid-template-columns:repeat(2, 1fr)"][style*="gap:1.5rem"]::-webkit-scrollbar-track { background: rgba(0,0,0,0.04); border-radius: 3px; margin: 0 8px; }
  .elementor-widget-html [style*="grid-template-columns:repeat(2,1fr)"][style*="gap:1.5rem"]::-webkit-scrollbar-thumb,
  .elementor-widget-html [style*="grid-template-columns:repeat(2, 1fr)"][style*="gap:1.5rem"]::-webkit-scrollbar-thumb { background: rgba(232,113,42,0.35); border-radius: 3px; }

  .elementor-widget-html [style*="grid-template-columns:repeat(2,1fr)"][style*="gap:1.5rem"] > div,
  .elementor-widget-html [style*="grid-template-columns:repeat(2, 1fr)"][style*="gap:1.5rem"] > div,
  .elementor-widget-html [style*="grid-template-columns:repeat(2,1fr)"][style*="gap:1.5rem"] > a,
  .elementor-widget-html [style*="grid-template-columns:repeat(2, 1fr)"][style*="gap:1.5rem"] > a {
    flex: 0 0 80vw !important;
    max-width: 80vw !important;
    scroll-snap-align: start !important;
    box-sizing: border-box !important;
  }

  .elementor-widget-html [style*="grid-template-columns:repeat(2,1fr)"][style*="gap:1.5rem"]::after,
  .elementor-widget-html [style*="grid-template-columns:repeat(2, 1fr)"][style*="gap:1.5rem"]::after {
    content: '' !important;
    flex: 0 0 1px !important;
  }

  /* 2x2 step grid (How It Works page: 1fr 1fr with gap:2rem) */
  .elementor-widget-html [style*="grid-template-columns:1fr 1fr"][style*="gap:2rem"] {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 1rem !important;
    padding-bottom: 4px !important;
    grid-template-columns: unset !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(232,113,42,0.3) transparent;
  }
  .elementor-widget-html [style*="grid-template-columns:1fr 1fr"][style*="gap:2rem"]::-webkit-scrollbar { height: 3px; }
  .elementor-widget-html [style*="grid-template-columns:1fr 1fr"][style*="gap:2rem"]::-webkit-scrollbar-track { background: rgba(0,0,0,0.04); border-radius: 3px; margin: 0 8px; }
  .elementor-widget-html [style*="grid-template-columns:1fr 1fr"][style*="gap:2rem"]::-webkit-scrollbar-thumb { background: rgba(232,113,42,0.35); border-radius: 3px; }

  .elementor-widget-html [style*="grid-template-columns:1fr 1fr"][style*="gap:2rem"] > div,
  .elementor-widget-html [style*="grid-template-columns:1fr 1fr"][style*="gap:2rem"] > a {
    flex: 0 0 80vw !important;
    max-width: 80vw !important;
    scroll-snap-align: start !important;
    box-sizing: border-box !important;
  }

  .elementor-widget-html [style*="grid-template-columns:1fr 1fr"][style*="gap:2rem"]::after {
    content: '' !important;
    flex: 0 0 1px !important;
  }

  /* Sports Complex step cards (class-based layout) */
  .aw-sp .steps {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 1rem !important;
    padding-bottom: 4px !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(232,113,42,0.3) transparent;
  }
  .aw-sp .steps::-webkit-scrollbar { height: 3px; }
  .aw-sp .steps::-webkit-scrollbar-track { background: rgba(0,0,0,0.04); border-radius: 3px; margin: 0 8px; }
  .aw-sp .steps::-webkit-scrollbar-thumb { background: rgba(232,113,42,0.35); border-radius: 3px; }

  .aw-sp .steps .step {
    flex: 0 0 80vw !important;
    max-width: 80vw !important;
    scroll-snap-align: start !important;
    box-sizing: border-box !important;
  }

  .aw-sp .steps::after {
    content: '' !important;
    flex: 0 0 1px !important;
  }
}

/* ─── BREAKPOINT: SMALL PHONE (≤ 420px) ─── */
@media (max-width: 420px) {

  /* 5-col keeps horizontal scroll on tiny screens (no override needed) */

  /* 4-col → keep 2x2 on tiny screens (Core Values) */
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }

  /* Before/after grids stack on very small screens (but NOT step grids with gap:2rem) */
  [style*="grid-template-columns:1fr 1fr"]:not([style*="gap:2rem"]) {
    grid-template-columns: 1fr !important;
  }

  /* Footer → full stack on tiny screens */
  footer[style*="background:#1C2025"] [style*="grid-template-columns:repeat(4"] {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  .elementor-widget-html h1 {
    font-size: 1.4rem !important;
  }

  .elementor-widget-html h2 {
    font-size: 1.2rem !important;
  }

  /* Even less padding on tiny screens */
  .elementor-section {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
}