/* site.css — shared responsive overrides. The components set their grid
   layouts inline (desktop-first); these classes collapse them on smaller
   screens, so !important is required to beat the inline styles. */

@media (max-width: 960px) {
  .g-hero, .g-two, .g-auth, .g-catrow { grid-template-columns: 1fr !important; }
  /* grid items default to min-width:auto, which blocks 1fr tracks from
     shrinking to the viewport (the search pill's min-content is ~470px) */
  .g-hero > *, .g-two > *, .g-auth > *, .g-catrow > * { min-width: 0 !important; }
  .hero-search > div:first-of-type { min-width: 0 !important; }
  /* collapsed category rows: ignore the desktop flip ordering so every row
     stacks image-first, consistently */
  .g-catrow > * { order: 0 !important; }
  .g-feed, .g-cats, .g-results, .g-steps, .g-three { grid-template-columns: repeat(2, 1fr) !important; }
  .g-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .g-stats > div { border-left: none !important; }
  .g-footer { grid-template-columns: 1fr 1fr !important; }
  /* the auth brand panel stacks above the form — keep it short */
  .g-auth > div:first-child { min-height: 0 !important; padding: 34px 34px !important; }
}

@media (max-width: 600px) {
  .g-feed, .g-cats, .g-results, .g-steps, .g-three { grid-template-columns: 1fr !important; }
  .g-feed > *, .g-results > * { grid-column: auto !important; }
  .g-footer { grid-template-columns: 1fr !important; }
  .g-stats { grid-template-columns: 1fr 1fr !important; }
  /* the hero headline uses a hard <br/> sized for desktop */
  .g-hero h1 br { display: none; }
  .g-hero h1 { font-size: 40px !important; line-height: 1.04 !important; letter-spacing: -0.02em !important; }
  /* search pill: drop the divider + decorative "Near you" segment so input + button fit */
  .hero-search > div:nth-of-type(2), .hero-search > div:nth-of-type(3) { display: none !important; }
}