/* ============================================================
   THE DRY SHIELD — Responsive layout add-on  (v2)
   ------------------------------------------------------------
   Fixes mobile/tablet layout on the LIVE site. Additive & safe:
   only affects small widths, never the desktop layout.
   Pair with dryshield-mobile-menu.js (hamburger + announcement
   ticker).  Targets the The Dry Shield theme classes; harmless
   if a class doesn't exist on your site.
   `!important` is used on the header overrides because they must
   beat the theme's existing desktop header rules.
   ============================================================ */

/* Never allow sideways scroll on phones */
html, body { max-width: 100%; overflow-x: hidden; }
* { min-width: 0; }   /* lets flex/grid children shrink instead of overflowing */

/* ============================================================
   1) HEADER  —  hamburger | logo (centred, shrinks) | call
   Hide the desktop nav and the "Free Inspection" pill on mobile;
   show a compact call button.  (≤ 940px = tablet & phone)
   ============================================================ */
@media (max-width: 940px){
  .ds-header .ds-wrap{
    display: flex !important;
    align-items: center;
    gap: 10px;
    grid-template-columns: none !important;
  }
  .ds-nav{ display: none !important; }            /* replaced by the drawer */
  .dsm-burger{ display: flex !important; order: 0; flex: none; margin: 0 !important; }
  .ds-logo{ order: 1; flex: 1 1 auto; align-items: center !important; text-align: center; min-width: 0; }
  .ds-utils{ order: 2; flex: none; gap: 8px; }
  .ds-pill{ display: none !important; }           /* hide Free Inspection on mobile */
  /* Call button — compact, always visible, properly aligned */
  .ds-phone{
    display: inline-flex !important;
    align-items: center; justify-content: center; gap: 8px;
    height: 42px; padding: 0 14px;
    border: 1px solid var(--ink-900, #1A1A1A); border-radius: 2px;
    color: var(--ink-900, #1A1A1A); text-decoration: none; white-space: nowrap;
  }
  .ds-phone .pn{ display: none; }                 /* icon-only to save width */
  .ds-phone svg{ width: 18px; height: 18px; }
}
/* Progressive logo shrink so the three items always fit */
@media (max-width: 600px){ .ds-logo .mark{ font-size: 18px !important; letter-spacing: .14em !important; } .ds-logo .sub{ font-size: 7.5px !important; } }
@media (max-width: 380px){ .ds-logo .mark{ font-size: 15px !important; } .ds-logo .sub{ letter-spacing: .3em !important; } .ds-phone{ padding: 0 11px !important; } }

/* ============================================================
   2) ANNOUNCEMENT BAR  — one message at a time (rotated by JS).
   Until the JS runs, show only the first message so nothing
   overflows on the narrowest screens.
   ============================================================ */
@media (max-width: 760px){
  .ds-announce{ gap: 0 !important; padding: 0 16px; }
  .ds-announce span{ display: none !important; }
  .ds-announce span.dsm-tick-on,
  .ds-announce span:first-child{ display: inline-flex !important; }
  .ds-announce.dsm-ticker span:first-child:not(.dsm-tick-on){ display: none !important; }
}

/* ============================================================
   3) MULTI-COLUMN BANDS → stack on narrow screens
   Trust/feature rows, services, steps, stats, materials, etc.
   Each becomes a full-width "card", one after another.
   ============================================================ */
@media (max-width: 860px){
  .ds-trust .ds-wrap{ grid-template-columns: 1fr 1fr; }
  .services{ grid-template-columns: 1fr 1fr; }
  .steps{ grid-template-columns: 1fr 1fr; gap: 30px 26px; }
  .materials{ grid-template-columns: repeat(3,1fr); }
  .testi-grid{ grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .proj-grid{ grid-template-columns: 1fr 1fr; }
}
/* Phones: everything to a single column */
@media (max-width: 600px){
  .ds-trust .ds-wrap{ grid-template-columns: 1fr; }
  .ds-trust .trust-item{ border-right: none; border-bottom: 1px solid var(--line, #E6E6E6); justify-content: flex-start; }
  .ds-trust .trust-item:last-child{ border-bottom: none; }
  .services{ grid-template-columns: 1fr; }
  .steps{ grid-template-columns: 1fr; }
  .stats-grid{ grid-template-columns: 1fr 1fr; gap: 30px 12px; }
  .materials{ grid-template-columns: repeat(2,1fr); }
  .proj-grid{ grid-template-columns: 1fr; }
  /* hero meta (20 / 1,200+ / 5-yr) wraps cleanly, hide the tall dividers */
  .hero-meta{ gap: 20px 26px; flex-wrap: wrap; }
  .hero-meta .div{ display: none; }
}

/* Before/After, form, split layouts, footer */
@media (max-width: 880px){
  .ba-grid{ grid-template-columns: 1fr; }
  .form-grid{ grid-template-columns: 1fr; }
  .fc-grid{ grid-template-columns: 1fr; }
  .split, .split.narrow{ grid-template-columns: 1fr; }
  .legal-grid{ grid-template-columns: 1fr; }
  .legal-index{ position: static; }
  .legal-index ol{ display: none; }
}
@media (max-width: 860px){ .foot-top{ grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 480px){ .foot-top{ grid-template-columns: 1fr; } }
@media (max-width: 680px){ .foot-bot{ flex-direction: column; align-items: flex-start; gap: 18px; } }

/* ============================================================
   5) PROJECT DETAIL  — gallery first, then details below.
   Fact card un-sticks; each row keeps label + value on ONE line.
   ============================================================ */
@media (max-width: 880px){
  /* the about/fact split is handled above; make the fact card flow, not stick */
  .fact-card{ position: static !important; top: auto !important; margin-top: 8px; }
  /* project gallery thumbnails: 2-up on tablet/phone */
  .pj-thumbs{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  /* keep "Category … Bathroom Sealing" on one line, value right-aligned */
  .fact-card .facts li{ display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
  .fact-card .facts .k{ flex: none; }
  .fact-card .facts .v{ text-align: right; }
  /* project meta line wraps instead of overflowing */
  .pj-meta{ flex-wrap: wrap; row-gap: 8px; }
}

/* ============================================================
   SMALL-SCREEN POLISH (phones)
   ============================================================ */
@media (max-width: 560px){
  .hero .ds-wrap{ grid-template-columns: 1fr; }
  .hero-media{ max-width: 460px; }
  .hero-cta, .ds-cta .hero-cta{ flex-direction: column; align-items: stretch; width: 100%; }
  .hero-cta .btn{ width: 100%; }
  .ds-cta .inner{ flex-direction: column; align-items: flex-start; }
  .btn{ min-height: 52px; }
  .proj-filter{ flex-wrap: wrap; }
}
@media (hover: none){
  .foot-col a{ padding-top: 4px; padding-bottom: 4px; }
}