/* ==========================================================================
   Sheetlz Numerologgy — responsive.css
   Tablet & mobile breakpoints + hard guards against horizontal scrolling.
   Loaded AFTER style.css so these rules override.
   ========================================================================== */

/* ---------- Overflow guards ----------
   NOTE: do NOT cap .container / .about-grid / .hero-content here — they carry
   intended desktop max-widths (1180 / 1000 / 860). A blanket max-width:100%
   would override those and stretch the whole layout edge-to-edge.
   Horizontal scroll is already prevented by html/body overflow-x:hidden and
   img/svg max-width:100% in style.css. */
.founder, .lead-form { max-width: 100%; }

/* ---------- Large tablet / small desktop ---------- */
@media (max-width: 1024px) {
  .hero-title { font-size: 52px; }                 /* tablet heading */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .sg-wheel--tr { width: 380px; height: 380px; right: -7rem; }
  .sg-wheel--l  { width: 400px; height: 400px; left: -8rem; }
  .gallery-grid { columns: 2; }                    /* masonry: 2 columns */
  .nav-links { gap: 20px; font-size: .86rem; }     /* keep 9 links from crowding */
}

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
  /* collapse nav into hamburger */
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-toggle { display: block; }
  .mobile-menu:not([hidden]) { display: block; }

  /* service & feature cards: 2 columns on tablet */
  .grid-3 { grid-template-columns: repeat(2, 1fr); }

  .about-grid { grid-template-columns: 1fr; gap: 36px; }
  .about-text { text-align: center; }
  .eyebrow--left { text-align: center; }
  .divider--left { justify-content: center; }
  .lead { font-size: 1.25rem; }

  .contact-grid { grid-template-columns: 1fr; }
  .section { padding: 76px 0; }
  .combined-panel { padding: 40px 26px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
  .hero { padding: 124px 18px 84px; min-height: 90vh; }
  .hero-title { font-size: 38px; letter-spacing: -.5px; }   /* mobile heading */
  .hero-sub { font-size: 1.05rem; }

  /* CTA buttons: full-width stacked */
  .hero-cta { flex-direction: column; gap: 12px; }
  .hero-cta .btn { width: 100%; }

  /* trust signal: keep stars + label tidy on one line */
  .hero-stars { flex-direction: column; gap: 4px; }

  /* all card grids: single column */
  .grid-3 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }

  /* gallery masonry → single column, payment card tightens */
  .gallery-grid { columns: 1; }
  .gallery-tab { padding: 9px 20px; font-size: .76rem; }
  .pay-card { padding: 38px 22px; }
  .pay-qr { width: 220px; height: 220px; }

  /* lightbox: smaller controls, side nav tucks to bottom corners */
  .lightbox { padding: 16px; }
  .lb-close { top: 14px; right: 14px; width: 42px; height: 42px; font-size: 1.5rem; }
  .lb-nav { width: 44px; height: 44px; top: auto; bottom: 18px; transform: none; }
  .lb-prev { left: 24px; }
  .lb-next { right: 24px; }
  .lb-prev:hover, .lb-next:hover { transform: scale(1.08); }
  .lb-content img, .lb-content video { max-height: 70vh; }
  .lb-caption { font-size: 1rem; }

  .stats { gap: 10px; }
  .stat-num { font-size: 1.25rem; }

  /* founder portrait scales down (svg max-width:100% already clips the ring) */
  .founder { width: 260px; height: 340px; }
  .founder-ring { width: 320px; height: 320px; }
  .founder-frame { width: 240px; height: 310px; }

  .info-actions .btn { flex: 1 1 100%; }
  .field-row { grid-template-columns: 1fr; }
  .lead-form { padding: 26px 20px; }

  /* room for the fixed WhatsApp/Call stack */
  .site-footer { padding-bottom: 96px; }
  .float-btn { width: 52px; height: 52px; }

  .section-head { margin-bottom: 40px; }
  .combined-item span.txt { font-size: 1.05rem; }
}

/* ---------- Very small phones ---------- */
@media (max-width: 380px) {
  .hero-title { font-size: 32px; }                 /* smallest heading */
  .nav-brand-name { display: none; }               /* keep just the logo */
  .container { padding-left: 16px; padding-right: 16px; }
}