/* ================================================================
   AmplioraTech Insights — responsive.css
   Supporting mobile-first styles (layout handled via JS hooks)
   ================================================================ */

/* ── Base mobile safety ─────────────────────────────────────── */
html, body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

img, svg { max-width: 100%; height: auto; }

/* ── Container ──────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
  box-sizing: border-box;
}

/* ── Sections ───────────────────────────────────────────────── */
.section { padding: 88px 0; }

/* ── Tablet (≤ 1024px) ─────────────────────────────────────── */
@media (max-width: 1024px) {
  .container { padding: 0 20px; }
  .section   { padding: 72px 0; }
}

/* ── Mobile (≤ 768px) ──────────────────────────────────────── */
@media (max-width: 768px) {
  .container { padding: 0 16px; }
  .section   { padding: 52px 0; }

  .wa-float  { bottom: 20px; right: 20px; width: 48px; height: 48px; }
  .ld-logo   { width: 160px; }
  #scroll-progress { height: 2px; }

  /* Buttons — full width when stacked */
  .btn-pri, .btn-amber, .btn-sec, .btn-out {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .tag { font-size: .65rem; padding: 4px 12px; }

  /* Prevent iOS zoom on input focus */
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* ── Small Mobile (≤ 480px) ────────────────────────────────── */
@media (max-width: 480px) {
  .container { padding: 0 14px; }
  .section   { padding: 44px 0; }
  .ld-logo   { width: 130px; }
  .ld-tag    { font-size: .68rem; }
}