/* ============================================================
   jamilla.studio — Responsive overrides
   Desktop inline styles are the base. These mobile-first media
   queries adapt layout at 768px (tablet) and 480px (phone).
   Tested down to 375px.
   ============================================================ */

  /* add-on card expand — transform-only, so throttled animation can't hide it */
  .addon-expand { animation: addonSlide .45s cubic-bezier(.22,1,.36,1); }
  @keyframes addonSlide { from { transform: translateY(-8px); } to { transform: translateY(0); } }
  @media (prefers-reduced-motion: reduce) { .addon-expand { animation: none; } }

  /* dark-section form: light labels + translucent fields */
  .vip-form-dark label { color: rgba(246,243,234,0.62) !important; }
  .vip-form-dark input, .vip-form-dark select, .vip-form-dark textarea {
    background: rgba(246,243,234,0.06) !important;
    border-color: rgba(246,243,234,0.24) !important;
    color: var(--cream) !important;
  }
  .vip-form-dark button[type="submit"] {
    background: var(--cream) !important; color: var(--ink) !important;
  }
  .vip-form-dark legend { color: rgba(246,243,234,0.62) !important; }
  .vip-form-dark fieldset p { color: rgba(246,243,234,0.55) !important; }
  .vip-form-dark fieldset label { border-top-color: rgba(246,243,234,0.18) !important; }
  .vip-form-dark fieldset label span { color: var(--cream) !important; }
  .vip-form-dark fieldset label span span { color: rgba(246,243,234,0.55) !important; }

/* Nav: hamburger hidden on desktop */
.nav-hamburger { display: none; }
.nav-mobile-menu { display: none; }

/* ---------------- TABLET & below ≤768px ---------------- */
@media (max-width: 768px) {
  /* NAV → hamburger */
  nav .nav-link { display: none !important; }
  .nav-hamburger { display: inline-flex !important; }

  /* All multi-column grids stack into one column */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* Section rhythm: generous but tighter; narrower gutters */
  /* tighter vertical rhythm on tablet */
  section { padding-top: 56px !important; padding-bottom: 56px !important;
            padding-left: 30px !important; padding-right: 30px !important; }
  footer { padding-left: 30px !important; padding-right: 30px !important; }

  /* Inner max-width wrappers — horizontal-only AND combined vertical+horizontal */
  [style*="padding: 0 56px"], [style*="padding: 0 48px"],
  [style*="padding: 4px 56px 0"], [style*="padding: 0px 56px"],
  [style*="px 56px"], [style*="px 48px"] {
    padding-left: 30px !important; padding-right: 30px !important;
  }

  /* Grid gaps tighten when stacked */
  [style*="grid-template-columns"] { gap: 36px !important; }

  /* HERO → centered, slightly smaller */
  .hero-content {
    align-items: center !important; justify-content: center !important;
    text-align: center !important; padding: 100px 28px !important;
  }
  .hero-content h1 { font-size: clamp(46px, 14vw, 88px) !important; }
  .hero-content .hero-fade { margin-left: auto !important; margin-right: auto !important; }

  /* CTA buttons: comfortable touch targets */
  a[style*="text-transform: uppercase"][style*="padding"],
  button[style*="text-transform: uppercase"][style*="padding"] {
    min-height: 48px !important; box-sizing: border-box !important;
  }
}

/* ---------------- PHONE ≤480px ---------------- */
@media (max-width: 480px) {
  section { padding-top: 40px !important; padding-bottom: 40px !important;
            padding-left: 22px !important; padding-right: 22px !important; }
  footer { padding-left: 22px !important; padding-right: 22px !important;
           flex-direction: column !important; align-items: flex-start !important; gap: 22px !important; }

  [style*="padding: 0 56px"], [style*="padding: 0 48px"],
  [style*="padding: 4px 56px 0"], [style*="padding: 0px 56px"],
  [style*="px 56px"], [style*="px 48px"] {
    padding-left: 22px !important; padding-right: 22px !important;
  }

  .hero-content { padding: 84px 22px !important; }
  .hero-content h1 { font-size: clamp(42px, 16vw, 74px) !important; }

  /* pull stacked grid columns closer together */
  [style*="grid-template-columns"] { gap: 22px !important; }
  /* trim oversized inner margins between stacked items */
  [style*="margin-top: 56px"], [style*="margin-top: 80px"], [style*="margin-top: 64px"] { margin-top: 0 !important; }

  /* contact form stacks on mobile */
  form[data-netlify] [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* hero side hints can crowd a narrow screen */
  .hero-scrollcue { display: none !important; }

  /* PROJECT (Work) gallery: full-bleed images, minimal gaps on phone */
  .project-gallery [style*="padding: 0 56px"],
  .project-gallery [style*="padding: 0px 56px"] {
    padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important;
  }
  .project-gallery [style*="gap: 40px"] { gap: 6px !important; }
  .project-gallery [style*="margin-bottom: 60px"] { margin-bottom: 6px !important; }
  .project-gallery [style*="margin-bottom: 40px"] { margin-bottom: 6px !important; }
  .project-gallery [style*="auto 60px"] { margin-bottom: 6px !important; }
  .project-gallery [style*="auto 40px"] { margin-bottom: 6px !important; }
  .project-gallery [style*="margin-top: 56px"] { margin-top: 0 !important; }
  .project-gallery [style*="margin-top: 56px"] [style*="margin-top"] { margin-top: 0 !important; }
}