/* Century Smile Maker — responsive overrides
   Purpose: the page layouts use inline style attributes for grid and padding,
   which stylesheets cannot override without !important. This file patches the
   inline patterns that did not collapse on phones.
   Loaded on every page. Last updated 2026-09-19.
*/

/* Vertical rhythm: cap oversized section padding on smaller screens. */
section[style*="padding:120px"],
section[style*="padding:110px"],
section[style*="padding:96px"]{
  padding-top:clamp(56px,8vw,96px)!important;
  padding-bottom:clamp(56px,8vw,96px)!important;
}

@media (max-width:700px){

  /* Two-column content rows that kept desktop columns on phones. */
  [style*="grid-template-columns:1fr 1.1fr"],
  [style*="grid-template-columns:0.85fr 1.15fr"],
  [style*="grid-template-columns:1.3fr 1fr"]{
    grid-template-columns:1fr!important;
    gap:28px!important;
  }

  /* Numbered card strips and city cards: stack them. */
  [style*="grid-template-columns:repeat(3, 1fr)"]{
    grid-template-columns:1fr!important;
  }

  /* "Since 2004" badge overhangs its container by 28px and spilled the page. */
  [style*="position:absolute"][style*="right:-28px"]{
    right:8px!important;
  }
}