/* ============================================================
   Himaya Garden landing pages — responsive layer.
   The compiled components read these variables in their inline
   styles (var(--x, desktopFallback)); flipping them here is the
   whole mobile layout. Loaded after colors_and_type.css.
   ============================================================ */

img { max-width: 100%; }

/* typography: no widowed/orphaned last words */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* ---------- Tablet ---------- */
@media (max-width: 980px) {
  :root {
    --hg-px: 32px;
    --hg-px-lg: 36px;
    --hg-py: 88px;
    --hg-py-lg: 104px;
    --hg-py-sm: 64px;
    --hg-gap-xl: 48px;
    --hg-c2: 1fr;
    --hg-c3: 1fr 1fr;
    --hg-c4: 1fr 1fr;
    --hg-oph1: 380px;
    --hg-oph3: 340px;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  :root {
    --hg-px: 20px;
    --hg-px-lg: 22px;
    --hg-px-sm: 24px;
    --hg-py: 64px;
    --hg-py-lg: 80px;
    --hg-py-sm: 52px;
    --hg-gap-xl: 40px;
    --hg-hdr: 1fr auto;          /* header: logo + CTA */
    --hg-nav: none;              /* hide center nav */
    --hg-corner: none;           /* hide hero corner ornament */
    --hg-c2: 1fr;
    --hg-c3: 1fr;
    --hg-c4: 1fr;
    --hg-moment: 1fr;            /* timeline rows stack */
    --hg-mdi: none;              /* hide timeline diamond cell */
    --hg-faq: 20px 1fr 24px;
    --hg-faqpad: 32px;
    --hg-lift: none;             /* featured tier sits flush */
    --hg-oph1: 300px;
    --hg-oph2: 300px;
    --hg-oph2b: 240px;
    --hg-oph3: 300px;
    --hg-opm: 0px;               /* no stagger offset when stacked */
  }

  /* header logo a touch smaller */
  header img { height: 44px !important; }
}