/* mobile-consistency.css
   Site-wide mobile defaults — loaded after main.css so it overrides.
   Goal: every page on shrutam.ai uses the same mobile font-scale / spacing
   so users don't experience one page feeling huge and the next feeling tiny. */

@media (max-width: 640px) {
  /* ── Section / container / grid spacing ──────────────────────────── */
  .section {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .gap-8 { gap: 1rem !important; }
  .gap-6 { gap: .75rem !important; }
  .gap-4 { gap: .6rem !important; }
  .gap-3 { gap: .5rem !important; }
  .mb-12 { margin-bottom: 1.25rem !important; }
  .mb-8  { margin-bottom: .9rem  !important; }
  .mb-6  { margin-bottom: .7rem  !important; }
  .mb-4  { margin-bottom: .5rem  !important; }
  .mt-8  { margin-top: .9rem !important; }
  .mt-6  { margin-top: .7rem !important; }

  /* ── Typography — scale down Tailwind text-* classes ──────────────── */
  .text-7xl { font-size: 2rem   !important; line-height: 1.15 !important; }
  .text-6xl { font-size: 1.85rem !important; line-height: 1.18 !important; }
  .text-5xl { font-size: 1.65rem !important; line-height: 1.2  !important; }
  .text-4xl { font-size: 1.4rem  !important; line-height: 1.25 !important; }
  .text-3xl { font-size: 1.25rem !important; line-height: 1.3  !important; }
  .text-2xl { font-size: 1.1rem  !important; line-height: 1.35 !important; }
  .text-xl  { font-size: 1rem    !important; line-height: 1.5  !important; }
  .text-lg  { font-size: .95rem  !important; }
  .text-base{ font-size: .9rem   !important; }

  /* ── Buttons ──────────────────────────────────────────────────────── */
  .btn {
    padding: .55rem 1rem !important;
    font-size: .88rem !important;
    min-height: 42px !important;
    border-radius: .55rem !important;
  }

  /* ── Badges ───────────────────────────────────────────────────────── */
  .badge { font-size: .68rem !important; padding: 3px 10px !important; }

  /* ── Cards ────────────────────────────────────────────────────────── */
  .card { padding: 1rem !important; border-radius: .85rem !important; }

  /* ── Nav (sticky top) ─────────────────────────────────────────────── */
  nav.topnav, .site-nav, header.nav {
    padding-top: .55rem !important;
    padding-bottom: .55rem !important;
  }
}

@media (max-width: 480px) {
  .text-5xl { font-size: 1.5rem !important; }
  .text-4xl { font-size: 1.3rem !important; }
  .text-3xl { font-size: 1.15rem !important; }
  .btn { padding: .5rem .9rem !important; font-size: .85rem !important; }
  .section { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
}

/* Telugu glyphs render larger than Latin/Devanagari — shrink once more */
@media (max-width: 640px) {
  html[lang^="te"] .text-5xl { font-size: 1.4rem !important; }
  html[lang^="te"] .text-4xl { font-size: 1.2rem !important; }
  html[lang^="te"] .text-3xl { font-size: 1.1rem !important; }
  html[lang^="te"] .text-2xl { font-size: 1rem !important; }
  html[lang^="te"] .text-xl  { font-size: .92rem !important; }
  html[lang^="te"] .text-lg  { font-size: .88rem !important; }
  html[lang^="te"] .btn      { font-size: .8rem !important; }
}