/* =====================================================================
   Hang Fa'ao Robotics — Responsive Styles
   Breakpoints: 1920 · 1440 · 1024 · 768 · 480 · 360
   Mobile-safe: no horizontal scroll at any width.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1920px+ — large desktops: widen container, scale rhythm up
   --------------------------------------------------------------------- */
@media (min-width: 1920px) {
  :root { --container: 1520px; }
  body { font-size: 1.125rem; }
}

/* ---------------------------------------------------------------------
   1440px — standard laptop (container already caps; light tuning)
   --------------------------------------------------------------------- */
@media (max-width: 1440px) {
  :root { --container: 1200px; }
}

/* ---------------------------------------------------------------------
   1024px — tablet landscape / small laptop
   Collapse two-column layouts, keep 2-up service grid.
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root { --nav-h: 68px; }

  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .software__grid { grid-template-columns: repeat(3, 1fr); }

  /* Hero: keep image but give text more room */
  .hero__content { grid-template-columns: 1.15fr 0.85fr; }
  .hero__img { max-width: 360px; }

  .about__grid,
  .why__grid,
  .contact__grid { grid-template-columns: 1fr; }
  .about__intro { position: static; }

  .stats { grid-template-columns: repeat(2, 1fr); row-gap: 2.25rem; }

  .about__meta > div { grid-template-columns: 160px 1fr; }
  .glass-card__row { grid-template-columns: 170px 1fr; }
}

/* ---------------------------------------------------------------------
   768px — tablet portrait / large phone
   Mobile navigation panel; single-column grids.
   --------------------------------------------------------------------- */
@media (max-width: 768px) {
  .nav__burger { display: flex; }

  /* Full-screen mobile menu panel */
  .nav__links {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(82vw, 380px);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1.5rem;
    padding: var(--nav-h) 2rem 2rem;
    background: rgba(255,255,255,0.9);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    box-shadow: var(--shadow-xl);
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
  }
  .nav.is-open .nav__links { transform: translateX(0); opacity: 1; visibility: visible; }

  /* Menu links always dark on the light panel, even over hero */
  .nav:not(.is-scrolled) .nav__link { color: var(--text); }
  .nav__link { font-size: 1.35rem; font-weight: 600; }
  .nav__link::after { display: none; }
  .nav__cta { margin-top: 0.5rem; font-size: var(--fs-sm) !important; }
  .nav:not(.is-scrolled) .nav__cta { --btn-fg:#fff; background: var(--c-black); border-color: var(--c-black); }

  /* Backdrop scrim behind the panel */
  .nav.is-open::after {
    content: ""; position: fixed; inset: 0; z-index: -1;
    background: rgba(0,0,0,.4); animation: fade-in-simple .3s var(--ease);
  }

  .services__grid { grid-template-columns: 1fr; }
  .features__grid { grid-template-columns: 1fr; }
  .software__grid { grid-template-columns: repeat(2, 1fr); }

  /* Hero stacks: text first, robot below */
  .hero { min-height: auto; padding-block: calc(var(--nav-h) + 3rem) 5rem; }
  .hero__content { grid-template-columns: 1fr; text-align: center; gap: 2.5rem; }
  .hero__text { display: flex; flex-direction: column; align-items: center; }
  .hero__actions { justify-content: center; }
  .hero__img { max-width: 300px; }
  .service-banner { flex-direction: column; align-items: flex-start; text-align: left; }

  .about__meta > div,
  .contact__details li { grid-template-columns: 1fr; gap: 0.35rem; }

  .glass-card__row { grid-template-columns: 1fr; gap: 0.5rem; }
  .glass-card__label { font-size: var(--fs-xs); }

  .footer__inner { grid-template-columns: 1fr; }
  .footer__nav { grid-template-columns: 1fr 1fr; }

  .hero__subtitle { font-size: 1.05rem; }

  /* Disable custom cursor cost on touch-ish widths */
  .cursor { display: none; }
}

/* ---------------------------------------------------------------------
   480px — phones
   --------------------------------------------------------------------- */
@media (max-width: 480px) {
  :root { --gutter: 1.25rem; }

  .hero__title { line-height: 0.98; }
  .hero__eyebrow { font-size: 0.62rem; padding: 0.45rem 0.75rem; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { justify-content: center; }

  .form__row { grid-template-columns: 1fr; }
  .software__grid { grid-template-columns: 1fr; }

  .stats { grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; }

  .footer__nav { grid-template-columns: 1fr; gap: 1.75rem; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 0.5rem; }

  .social__link { width: 42px; height: 42px; }
  .map__label { left: 1rem; right: 1rem; bottom: 1rem; }
}

/* ---------------------------------------------------------------------
   360px — small phones: tighten spacing, prevent overflow
   --------------------------------------------------------------------- */
@media (max-width: 360px) {
  :root { --gutter: 1rem; }

  .stats { grid-template-columns: 1fr; }
  .nav__logo-text { font-size: 0.82rem; }
  .service-card { min-height: 0; padding: 1.5rem; }
  .contact__form-wrap { padding: 1.4rem; }
  .glass-card { padding: 1.5rem; }

  /* Guard against any wide inline strings (e.g., long address) */
  .glass-card__value,
  .about__meta dd,
  .contact__detail-value { word-break: break-word; overflow-wrap: anywhere; }
}

/* ---------------------------------------------------------------------
   Orientation / short viewports — keep hero usable on landscape phones
   --------------------------------------------------------------------- */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { min-height: auto; padding-block: calc(var(--nav-h) + 2rem) 3rem; }
  .hero__scroll { display: none; }
}