/* Responsive layer for the Sacramento site. One URL adapts to every screen —
   no manual desktop/mobile switch. Selectors hook the data-r attributes the
   section components emit, so component internals stay untouched. */

html{scroll-behavior:smooth}
body{overflow-x:hidden}
[id]{scroll-margin-top:96px}

/* ---------- Tablet: 1024px and below ---------- */
@media (max-width:1024px){
  [data-r="shell"]{padding-left:var(--gutter-tablet)!important;padding-right:var(--gutter-tablet)!important}
  [data-r="header-bar"]{padding-left:var(--gutter-tablet)!important;padding-right:var(--gutter-tablet)!important}
  [data-r="nav-desktop"],[data-r="header-cta"]{display:none!important}
  [data-r="header-wa"]{display:flex!important}
  [data-r="header-burger"]{display:flex!important}
  [data-r="g3"],[data-r="g4"],[data-r="qf-grid"]{grid-template-columns:repeat(2,1fr)!important}
  [data-r="split"]{grid-template-columns:1fr!important}
  [data-r="gal"]{grid-template-columns:repeat(2,1fr)!important}
  [data-r="gal"]>[data-r="gal-lead"]{grid-column:span 2!important}
  [data-r="h1"]{font-size:48px!important}
  [data-r="h2"] h2,[data-r="h2"]{font-size:34px!important}
  [data-r="footer-grid"]{grid-template-columns:1fr 1fr!important}
}

/* ---------- Mobile: 640px and below ---------- */
@media (max-width:640px){
  [data-r="shell"]{padding-left:var(--gutter-mobile)!important;padding-right:var(--gutter-mobile)!important}
  [data-r="header-bar"]{padding-left:var(--gutter-mobile)!important;padding-right:var(--gutter-mobile)!important;gap:var(--space-3)!important}
  [id]{scroll-margin-top:80px}
  [data-r="section"]{padding-top:var(--space-8)!important;padding-bottom:var(--space-8)!important}
  [data-r="g3"],[data-r="g4"],[data-r="gal"],[data-r="qf-grid"]{grid-template-columns:1fr!important}
  [data-r="gal"]>[data-r="gal-lead"]{grid-column:span 1!important}
  [data-r="qf-full"]{grid-column:span 1!important}
  [data-r="about-stats"]{grid-template-columns:1fr!important}
  [data-r="h1"]{font-size:var(--text-hero-m)!important}
  [data-r="h2"] h2,[data-r="h2"]{font-size:var(--text-h2-m)!important}
  [data-r="lead"],[data-r="lead"] p{font-size:var(--text-body-lg-m)!important}

  /* Hero: its own vertical composition, not a squeezed desktop crop */
  [data-r="hero"]{min-height:640px!important;align-items:flex-end!important}
  [data-r="hero"] img{object-position:74% 40%!important}
  [data-r="hero-veil"]{background:var(--overlay-hero-mobile)!important}
  [data-r="hero-copy"]{padding-bottom:var(--space-7)!important;padding-top:220px!important}

  /* Photo bands: text over the darkest area, vertical gradient */
  [data-r="band"]{min-height:440px!important}
  [data-r="band-veil"]{background:var(--overlay-hero-mobile)!important}
  [data-r="band-copy"]{margin-left:0!important}
  [data-r="center"]{text-align:left!important;justify-content:flex-start!important;margin-left:0!important}
  [data-r="center"] div[style*="margin-inline"]{margin-left:0!important}

  /* CTAs fill the row so nothing sits off-screen */
  [data-r="cta-row"]{flex-direction:column!important;align-items:stretch!important}
  [data-r="cta-row"]>a,[data-r="cta-row"]>button{width:100%!important}
  [data-r="gallery-head"]{flex-direction:column!important;align-items:flex-start!important}
  [data-r="footer-grid"]{grid-template-columns:1fr!important;gap:var(--space-5)!important}
  [data-r="footer-legal"]{flex-direction:column!important;gap:var(--space-2)!important}
}

/* Floating WhatsApp must never cover a field, a CTA or the footer */
@media (max-width:640px){
  [data-r="float-wa"]{right:14px!important;bottom:14px!important}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:0.01ms!important}
}

/* ---------- Mobile polish: hero + header + floating WhatsApp ---------- */
@media (max-width:640px){
  /* Compact, legible header controls even if external icon masks fail. */
  [data-r="header-bar"]{padding-top:12px!important;padding-bottom:12px!important;gap:10px!important}
  [data-r="header"] img{height:34px!important}
  [data-r="header-wa"],[data-r="header-burger"]{
    width:44px!important;height:44px!important;min-width:44px!important;
    padding:0!important;align-items:center!important;justify-content:center!important;
    box-sizing:border-box!important
  }
  [data-r="header-wa"]>span,[data-r="header-burger"]>span{display:none!important}
  [data-r="header-wa"]::before{
    content:"WA";font-family:var(--font-heading);font-size:13px;font-weight:700;
    letter-spacing:.04em;color:#0B2E17
  }
  [data-r="header-burger"]::before{
    content:"☰";font-family:Arial,sans-serif;font-size:23px;line-height:1;color:var(--color-text-primary)
  }
  [data-r="header-burger"][aria-expanded="true"]::before{content:"×";font-size:30px;font-weight:300}

  /* Bring the vehicle into the first fold and remove the large empty sky area. */
  [data-r="hero"]{min-height:590px!important;align-items:center!important}
  [data-r="hero"]>img{
    object-position:78% 72%!important;
    transform:scale(1.18)!important;
    transform-origin:78% 72%!important
  }
  [data-r="hero-copy"]{padding-top:82px!important;padding-bottom:32px!important;max-width:100%!important}
  [data-r="h1"]{font-size:clamp(34px,9.6vw,38px)!important;line-height:.98!important;letter-spacing:.01em!important}
  [data-r="hero-copy"]>[style*="margin-bottom"]{margin-bottom:14px!important}
  [data-r="hero-copy"] [data-r="lead"]{font-size:17px!important;line-height:1.48!important;margin-top:18px!important}
  [data-r="hero-copy"] [data-r="cta-row"]{margin-top:22px!important;gap:10px!important}
  [data-r="hero-copy"] [data-r="cta-row"]>a{min-height:50px!important;padding:14px 18px!important;font-size:15px!important}
  [data-r="hero-copy"]>div:last-child{gap:6px!important;margin-top:18px!important}
  [data-r="hero-copy"]>div:last-child>span{font-size:10px!important;padding:7px 9px!important}

  /* Keep WhatsApp available without covering the hero CTA/content. */
  [data-r="float-wa"]{
    right:14px!important;bottom:14px!important;width:52px!important;height:52px!important;
    min-width:52px!important;padding:0!important;border-radius:50%!important;
    font-size:0!important;gap:0!important;justify-content:center!important;box-sizing:border-box!important
  }
  [data-r="float-wa"]>span{display:none!important}
  [data-r="float-wa"]::before{
    content:"WA";font-family:var(--font-heading);font-size:13px;font-weight:700;
    letter-spacing:.04em;color:#0B2E17
  }
}

@media (max-width:380px){
  [data-r="hero"]{min-height:570px!important}
  [data-r="hero-copy"]{padding-top:70px!important;padding-bottom:28px!important}
  [data-r="h1"]{font-size:34px!important}
}

/* ---------- Mobile polish v2: trust chips + local WhatsApp icon ---------- */
@media (max-width:640px){
  /* Hero trust items: balanced 2x2 grid instead of irregular wrapping. */
  [data-r="hero-copy"]>div:last-child{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
    margin-top:18px!important;
  }
  [data-r="hero-copy"]>div:last-child>span{
    width:100%!important;
    min-width:0!important;
    min-height:48px!important;
    box-sizing:border-box!important;
    justify-content:center!important;
    text-align:center!important;
    white-space:normal!important;
    line-height:1.25!important;
    font-size:10.5px!important;
    padding:8px 7px!important;
  }

  /* Replace the emergency WA letters with a reliable local WhatsApp icon. */
  [data-r="header-wa"]::before,
  [data-r="float-wa"]::before{
    content:""!important;
    display:block!important;
    width:24px!important;
    height:24px!important;
    background:url("assets/whatsapp-icon.svg") center/contain no-repeat!important;
  }
  [data-r="float-wa"]::before{width:26px!important;height:26px!important}
}

@media (max-width:360px){
  [data-r="hero-copy"]>div:last-child>span{font-size:10px!important;padding:7px 5px!important}
}