/* ============================================================
   OHANA INFUSIONS — RESPONSIVE OVERRIDES
   The page components style themselves with inline styles, which
   beat stylesheets on specificity. These rules therefore use
   !important, scoped to [data-site-scroll] so only site pages are
   affected. Breakpoints: 900px tablet, 820px mobile nav, 620px phone.
   ============================================================ */

img, svg { max-width: 100%; }
html, body { overflow-x: hidden; }

@media (max-width: 900px) {
  /* Every multi-column grid in the site is an inline style, so collapse
     them all to a single column and let content stack. */
  [data-site-scroll] div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* Section gutters: the desktop value is 40px, too wide on a tablet. */
  [data-site-scroll] section {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  /* Nothing in a section should be able to push the page sideways. */
  [data-site-scroll] section > div { max-width: 100% !important; }
  /* Decorative art is absolutely positioned with negative offsets to bleed
     off the edge. Clip it per section so it cannot widen the page. */
  [data-site-scroll] section { overflow-x: clip !important; }
}

@media (max-width: 620px) {
  [data-site-scroll] section {
    padding-left: 18px !important;
    padding-right: 18px !important;
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }
  /* Display type: the desktop rem sizes overflow narrow screens. */
  [data-site-scroll] h1 { font-size: clamp(32px, 9.5vw, 46px) !important; }
  [data-site-scroll] h2 { font-size: clamp(24px, 6.8vw, 34px) !important; }
  [data-site-scroll] h3 { font-size: 1rem !important; }
  /* Oversized numerals (prices, step numbers) shrink so they fit. */
  [data-site-scroll] div[style*="font-size: 4.6rem"],
  [data-site-scroll] div[style*="font-size: 4.5rem"],
  [data-site-scroll] span[style*="font-size: 4.6rem"],
  [data-site-scroll] span[style*="font-size: 4.5rem"] {
    font-size: 3rem !important;
  }
  /* Stacked CTA rows should fill the width rather than sit half-off it.
     Button rows are flex containers with button children, so target those
     specifically and let them wrap and go full width. */
  [data-site-scroll] section div[style*="display: flex"]:has(> button) {
    flex-wrap: wrap !important;
  }
  [data-site-scroll] section div[style*="display: flex"]:has(> button) > button,
  [data-site-scroll] section div[style*="display: flex"]:has(> button) > a {
    flex: 1 1 100% !important;
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
  /* Buttons keep desktop padding and type inline, which overflows a phone. */
  [data-site-scroll] button, [data-site-scroll] section a[style*="border-radius: 999px"] {
    font-size: 14px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: 100% !important;
  }
  [data-site-scroll] button > span, [data-site-scroll] button {
    white-space: normal !important;
  }
  /* Tall decorative art gets shorter so copy stays above the fold. */
  [data-site-scroll] div[style*="aspect-ratio: 4 / 5"] { aspect-ratio: 4 / 3 !important; }
}

/* Footer: five columns down to two, then one. */
@media (max-width: 900px) {
  [data-site-scroll] footer div[style*="grid-template-columns"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
  }
}
@media (max-width: 620px) {
  [data-site-scroll] footer div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* The footer baseline row is a two-up flex that needs to stack. */
  [data-site-scroll] footer div[style*="justify-content: space-between"] {
    flex-direction: column !important;
    gap: 14px !important;
    align-items: flex-start !important;
  }
}