/**
 * ResultsHindi — mobile.css
 * Mobile-First Overrides & Enhancements
 * Loaded as supplemental stylesheet (non-critical)
 */

/* =====================================================
   MOBILE BASE (≤ 768px)
   ===================================================== */
@media (max-width: 768px) {

  /* Typography Scale */
  h1 { font-size: 20px; }
  h2 { font-size: 17px; }
  h3 { font-size: 14px; }

  /* Layout */
  .rh-wrap { padding: 0 12px; }

  /* Grid — single column */
  .rh-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 12px 0;
  }
  .rh-sidebar { display: none !important; }

  /* ── TOP STRIP ── */
  .rh-strip { padding: 4px 0; }
  .rh-strip__links { display: none; }
  .rh-strip__live  { margin-left: auto; }

  /* ── HEADER ── */
  .rh-header__in { padding: 8px 0; gap: 8px; }
  .rh-logo__mark { width: 38px; height: 38px; font-size: 18px; }
  .rh-logo__name strong { font-size: 16px; }
  .rh-logo__name small  { font-size: 8px; }
  .rh-alert-btn  { padding: 7px 10px; font-size: 11px; }

  /* ── HERO ── */
  .rh-hero { padding: 20px 0 0; }
  .rh-hero h2 { font-size: 20px; }
  .rh-hero__sub { font-size: 12px; }

  /* Search Card */
  .rh-search-card { padding: 12px; border-radius: 10px 10px 0 0; }
  .rh-search-card__selects { grid-template-columns: 1fr; gap: 6px; }
  .rh-search-card input[type=text],
  .rh-search-card__btn { font-size: 13px; }

  /* ── PILLS ── */
  .rh-pills { padding: 8px 0; }
  .rh-pills__in { padding: 0 12px; gap: 5px; }
  .rh-pill { font-size: 10px; padding: 4px 11px; }

  /* ── CARDS ── */
  .rh-card { padding: 10px 12px; gap: 10px; }
  .rh-card__title { font-size: 12px; }
  .rh-card__icon  { width: 32px; height: 32px; font-size: 15px; }
  .rh-badge { font-size: 8px; padding: 1px 5px; }

  /* ── ARTICLE ── */
  .rh-article { padding: 12px; }
  .rh-article__title { font-size: 18px; }
  .rh-article__meta  { gap: 8px; font-size: 10px; }
  .rh-article__content { font-size: 14px; line-height: 1.8; }
  .rh-article__content h2 { font-size: 16px; }
  .rh-article__content h3 { font-size: 14px; }

  /* ── ADS ── */
  .rh-ad--leader { display: none; }
  .rh-ad--mob    { display: flex; height: 50px; margin: 8px 0; }

  /* ── FOOTER ── */
  .rh-footer { padding: 20px 0 0; margin-top: 16px; }
  .rh-footer__grid { grid-template-columns: 1fr; gap: 14px; }
  .rh-footer__bottom {
    flex-direction: column;
    text-align: center;
    gap: 6px;
    padding: 10px 0;
  }

  /* ── 404 ── */
  .rh-404 { padding: 32px 16px; }
  .rh-404__code { font-size: 60px; }
  .rh-404 h2 { font-size: 18px; }

  /* ── Pagination ── */
  .rh-pagination a,
  .rh-pagination span { width: 30px; height: 30px; font-size: 12px; }

  /* ── Comments ── */
  .rh-comments { padding: 14px; }

  /* ── Search header ── */
  .rh-search-header { padding: 12px; }
  .rh-search-header h1 { font-size: 16px; }

  /* ── FAQ ── */
  .rh-faq__q { padding: 10px 12px; }
  .rh-faq__q-text { font-size: 12px; }
  .rh-faq__a { font-size: 12px; }
}

/* =====================================================
   SMALL PHONES (≤ 380px)
   ===================================================== */
@media (max-width: 380px) {
  .rh-logo__name small { display: none; }
  .rh-hero h2 { font-size: 18px; }
  .rh-card { padding: 8px 10px; }
  .rh-article__title { font-size: 16px; }
  .rh-404__code { font-size: 52px; }
}

/* =====================================================
   TABLET (769px – 1024px)
   ===================================================== */
@media (min-width: 769px) and (max-width: 1024px) {
  .rh-grid {
    grid-template-columns: 1fr;
  }
  .rh-sidebar { display: none !important; }
  .rh-hero h2 { font-size: 24px; }
  .rh-footer__grid { grid-template-columns: 1fr 1fr; }
}

/* =====================================================
   TOUCH INTERACTION IMPROVEMENTS
   ===================================================== */
@media (hover: none) and (pointer: coarse) {
  /* Larger tap targets */
  .rh-pill     { padding: 7px 14px; }
  .rh-wlist li { padding: 7px 0; }
  .rh-faq__q   { min-height: 44px; }
  .rh-btn      { min-height: 44px; }

  /* Remove hover-only transforms (reduces jank on touch) */
  .rh-card:hover { transform: none; }
  .rh-btn:hover  { transform: none; }

  /* Tap highlight */
  .rh-card,
  .rh-pill,
  .rh-faq__q { -webkit-tap-highlight-color: rgba(255, 107, 26, 0.08); }
}

/* =====================================================
   SAFE AREA / NOTCH SUPPORT (iPhone X+)
   ===================================================== */
@supports (padding: env(safe-area-inset-bottom)) {
  .rh-footer {
    padding-bottom: env(safe-area-inset-bottom);
  }
  .rh-header {
    padding-left:  env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* =====================================================
   REDUCED MOTION
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
  .rh-ticker__text { animation: none !important; }
  .rh-tag--live    { animation: none !important; }
  .rh-dot          { animation: none !important; }
  * { transition-duration: 0.01ms !important; }
}

/* =====================================================
   DARK MODE (optional — respects OS preference)
   ===================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --surface: #1E2235;
    --bg:      #13162A;
    --cream:   #1A1E30;
    --ink:     #E8E8EC;
    --ink2:    #B0B8D0;
    --ink3:    #6B7394;
    --border:  rgba(255,255,255,.07);
    --border2: rgba(255,255,255,.11);
    --sh1:     0 1px 4px rgba(0,0,0,.25);
    --sh2:     0 4px 16px rgba(0,0,0,.35);
  }
  .rh-search-card { background: #1E2235; }
  .rh-search-card select,
  .rh-search-card input[type=text] {
    background: #252A45;
    border-color: rgba(255,255,255,.1);
    color: var(--ink);
  }
  .rh-ad { background: rgba(255,255,255,.03); }
}