/**
 * chitralekha-mobile.css — shared mobile-first polish layer
 *
 * Loaded AFTER each page's inline CSS on every public page. Conservative,
 * additive overrides only: comfortable tap targets, readable type, breathing
 * room, no horizontal scroll, chat widget clearance. Desktop (≥1024px) is
 * touched only for max-width containment and consistent section rhythm.
 *
 * Breakpoints: 360 / 480 (small phones), 767 (phones), 1023 (tablets),
 * 1366+ (large desktop).
 */

/* ── Global guards (all sizes) ──────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img { max-width: 100%; height: auto; }

/* Comfortable tap targets everywhere */
a.btn, .btn, button.btn,
.sc-btn, .offer-cta, .banner-btn, .chitra-campaign-cta,
input[type="submit"], button[type="submit"] {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Forms: 16px input font prevents iOS auto-zoom; consistent fields */
input[type="text"], input[type="tel"], input[type="email"],
select, textarea {
  font-size: 16px !important;
  min-height: 44px;
}
textarea { min-height: 96px; }

/* Keyboard focus visibility (a11y) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #b89c6e;
  outline-offset: 2px;
}

/* Anchor targets clear sticky headers */
[id] { scroll-margin-top: 84px; }

/* Reduced motion: stop marquees/carousels for those who ask */
@media (prefers-reduced-motion: reduce) {
  .brands-track, .ticker-track, .tk-track { animation: none !important; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ── Tablets and below (≤1023px) ────────────────────────────────────── */
@media (max-width: 1023px) {
  /* Section rhythm: consistent vertical padding instead of page-specific extremes */
  .sec { padding-top: clamp(44px, 8vw, 64px) !important; padding-bottom: clamp(44px, 8vw, 64px) !important; }
  .wrap { padding-left: 20px !important; padding-right: 20px !important; }
}

/* ── Phones (≤767px) ────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Hero: don't burn the whole first screen; keep brand visible fast */
  .hero { min-height: 86svh !important; padding-bottom: 48px !important; }
  .hero-c { padding-left: 20px !important; padding-right: 20px !important; }
  .hero h1 { font-size: clamp(38px, 11vw, 52px) !important; line-height: 1.06 !important; }
  .hero-sub { font-size: 14px !important; max-width: 100% !important; margin-bottom: 28px !important; }
  .hero-yr { display: none !important; }              /* decorative year wastes paint */
  .hero-stats { width: 100% !important; flex-wrap: wrap !important; }
  .hero-stats > * { flex: 1 1 50% !important; min-width: 120px; }

  /* Cards & grids: one comfortable column, consistent gaps */
  .sc { border-radius: 10px; }
  .sc-actions { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; }
  .sc-actions .sc-btn { flex: 1 1 calc(50% - 10px) !important; text-align: center; }
  .sc-img-wrap, .sc-img { height: auto !important; min-height: 180px; max-height: 230px; }

  /* Offer slides stack with image first (already in loader CSS — reinforce) */
  .offer-content { padding: 26px 20px !important; }
  .offer-title { font-size: 1.55rem !important; }

  /* Type scale: cap display sizes, keep body readable */
  .h2 { font-size: clamp(26px, 7.5vw, 34px) !important; }
  p, li { font-size: 15px; line-height: 1.7; }

  /* Tables become horizontally scrollable instead of breaking layout */
  .table-scroll, .cmp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { max-width: 100%; }
  .wrap table { display: block; overflow-x: auto; white-space: nowrap; }

  /* Brand strip logo sizing */
  .brand-logo-item { width: 110px !important; height: 46px !important; }
  .brand-logo-item img { max-width: 100px !important; max-height: 38px !important; }

  /* Chat widget: keep clear of content and thumbs; don't cover CTAs */
  .cl-chat-btn {
    bottom: calc(14px + env(safe-area-inset-bottom)) !important;
    right: 14px !important;
    min-height: 48px;
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
  }
  .cl-chat-panel {
    width: calc(100vw - 16px) !important;
    right: 8px !important;
    left: 8px !important;
    max-height: 78svh !important;
    bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    border-radius: 14px !important;
  }
  /* Pages get bottom padding so the FAB never covers the last CTA/footer link */
  body { padding-bottom: 74px; }

  /* Campaign popup: never taller than the screen, always dismissible */
  .chitra-campaign-card { max-height: 86svh; overflow-y: auto; }
  .chitra-campaign-close { min-width: 44px; min-height: 44px; }

  /* Footer link columns stack with touch spacing */
  footer li, .footer li { margin-bottom: 4px; }
  footer a, .footer a { display: inline-block; padding: 6px 0; }

  /* Maps iframes: fixed comfortable height */
  iframe[src*="google.com/maps"] { width: 100% !important; height: 260px !important; }
}

/* ── Small phones (≤400px) ──────────────────────────────────────────── */
@media (max-width: 400px) {
  .hero h1 { font-size: 34px !important; }
  .wrap { padding-left: 16px !important; padding-right: 16px !important; }
  .sc-actions .sc-btn { flex: 1 1 100% !important; }
  .cl-chat-btn { font-size: 13px; padding: 10px 14px; }
}

/* ── Desktop containment (≥1366px) ──────────────────────────────────── */
@media (min-width: 1366px) {
  .wrap { max-width: 1240px; margin-left: auto; margin-right: auto; }
  .hero-c { max-width: 1240px; }
  /* Sections shouldn't balloon on tall monitors */
  .sec { padding-top: 96px; padding-bottom: 96px; }
}