/* Shared phone layout for every public page.
   Each page links this before its own <style>, so a rule a page sets for itself
   still wins a tie. Selectors match the inline styles the pages are built from,
   the same way each page's own @media block does. */

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

@media (max-width:768px){
  /* Spacing: desktop section gaps read as dead air on a phone */
  #top{padding-top:40px!important}
  [style*="padding:88px 40px"]{padding-top:56px!important}
  [style*="padding:96px 40px"]{padding-top:64px!important}
  [style*="padding:80px 40px"]{padding-top:48px!important}
  [style*="padding:88px 40px;"]{padding-bottom:56px!important}
  [style*="40px 88px"]{padding-bottom:56px!important}
  [style*="40px 96px"]{padding-bottom:64px!important}
  #priorities>div[style*="margin-bottom:52px"]{margin-bottom:32px!important}

  /* Full-bleed bands (green statement, orange call to action): the section
     already carries the 20px gutter, so the inner box drops its own */
  section>div[style*="padding:72px 40px"]{padding:48px 0!important}
  section[style*="background:#C0603C"] a{flex:1 1 auto;text-align:center}

  /* Type: step the big lead paragraphs down so they don't fill the screen */
  p[style*="font-size:24px"],blockquote[style*="font-size:24px"]{font-size:20px!important}
  p[style*="font-size:22px"],p[style*="font-size:21px"]{font-size:19px!important}
  p[style*="font-size:20px"]{font-size:18px!important}
  #intro div[style*="font-size:19px"]{font-size:17px!important}
  #about p[style*="clamp(24px"]{font-size:22px!important}

  /* Tall portrait photos take a whole screen; square them off */
  [style*="aspect-ratio:4/5"],[style*="aspect-ratio:3/4"]{aspect-ratio:1/1!important}
  #about img{object-position:50% 12%}

  /* The green strip of topic names: drop the diamonds so a wrapped row
     doesn't end on a stray separator */
  div[style*="gap:44px;padding:16px 40px"]{column-gap:22px!important;row-gap:6px!important;padding:14px 20px!important;font-size:14px!important}
  div[style*="gap:44px;padding:16px 40px"]>span[style*="#E5A07E"]{display:none}

  /* Priority cards: the watermark number collides with the heading */
  #priorities article{padding:26px 22px!important}
  #priorities article>div[style*="padding-right:58px"]{padding-right:0!important}
  #priorities article>div[style*="font-size:64px"]{display:none}

  /* Issue jump links: one swipeable row instead of five stacked rows */
  #top>div[style*="flex-wrap:wrap;gap:10px"]{flex-wrap:nowrap!important;overflow-x:auto;margin:28px -20px 0!important;padding:0 20px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  #top>div[style*="flex-wrap:wrap;gap:10px"]::-webkit-scrollbar{display:none}
  #top>div[style*="flex-wrap:wrap;gap:10px"]>a{flex:none;white-space:nowrap}

  /* Home hero buttons share the row evenly, and still do when a longer
     Spanish label pushes one onto its own line */
  #top div[style*="gap:14px;margin-top:34px"]>a{flex:1 1 auto;text-align:center;padding-left:18px!important;padding-right:18px!important}

  /* Home endorsement card: full-width button */
  section#endorsements>div[style*="justify-content:space-between"]>a{flex:1 1 100%;text-align:center}

  /* Donor wall: names only, so two to a row instead of a long single file */
  #wall-donors{grid-template-columns:1fr 1fr;gap:8px}
  #wall-donors .end-card{padding:12px 14px}
  #wall-donors .end-card .name{white-space:normal;font-size:15px}

  /* Forms: short field pairs (first/last name, ZIP/phone) stay side by side */
  form [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr 1fr!important;gap:10px!important}

  /* Tap targets: checkboxes and footer links */
  form label:has(>input[type=checkbox]){padding:5px 0}
  form input[type=checkbox]{width:20px!important;height:20px!important;margin-top:1px!important}
  footer [style*="flex-direction:column;gap:9px"]{gap:0!important}
  footer [style*="flex-direction:column;gap:9px"]>a{padding:8px 0}
  footer a[href^="mailto:"]{padding:8px 0}
  #priorities article a{padding:10px 0;margin-top:6px!important}
  article>a[href$="/ideas/"]{padding:10px 0;margin:-10px 0 14px!important}
}