/* PWS homepage - mobile hardening layer.
   Loaded after the bundle's own stylesheets so these rules win.
   Kept in a separate file so it can be removed without touching the bundle. */

/* Horizontal-scroll safety net across the whole tablet/phone range.
   clip (not hidden) so position:sticky keeps working. */
@media (max-width: 900px) {
  body { overflow-x: clip; }
}

/* iOS auto-zooms the viewport when a focused control is under 16px.
   The bundle fixed this for the hero search (.fld) only; the newsletter
   inputs are 15.5px and still trigger it. */
@media (max-width: 760px) {
  input, select, textarea, button { font-size: 16px !important; }
}

/* Footer link lists are 14px text on an 11px gap, giving roughly a 20px
   tap target. Pad them out toward the 44px guideline. */
@media (max-width: 760px) {
  footer .ulink {
    display: inline-block;
    padding: 7px 0;
    line-height: 1.3;
  }
}

/* Footer link columns are auto-fit at 150px, which lands on a cramped
   3-up on mid-size phones. Force a clean 2-up, then 1-up when very narrow. */
@media (max-width: 620px) {
  footer .four { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 380px) {
  footer .four { grid-template-columns: minmax(0,1fr) !important; }
}

/* Respect notch / rounded-corner insets on the floating header and footer. */
@media (max-width: 760px) {
  footer { padding-bottom: calc(clamp(20px,2.4vw,32px) + env(safe-area-inset-bottom)) !important; }
}

/* Long unbroken strings (email addresses, URLs) must not push the page wide. */
@media (max-width: 760px) {
  a[href^="mailto:"], a[href^="tel:"] { overflow-wrap: anywhere; }
}
/* Collection-base map: side-by-side on desktop, stacked on tablet and phone.
   The map keeps a usable height when it drops below the text. */
@media (max-width: 860px) {
  .pws-mapgrid { grid-template-columns: minmax(0,1fr) !important; }
  .pws-mapframe { min-height: clamp(280px, 62vw, 380px) !important; }
}