/* ============================================
   SHARED PAGE RESPONSIVE — Mobile Overrides
   Common patterns used across sub-pages
   ============================================ */

/* ── Page Heroes ── */
@media (max-width: 768px) {
  .rti-hero,
  .grievance-hero,
  .contact-hero,
  .savings-hero,
  .product-hero,
  .page-hero,
  .about-hero,
  .faq-hero,
  .careers-hero {
    padding: var(--sp-8) 0 var(--sp-6);
  }

  .rti-hero__title,
  .grievance-hero h1,
  .contact-hero__title,
  .savings-hero__title,
  .page-hero__title,
  .about-hero__title,
  .careers-hero__title {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }

  .rti-hero__desc,
  .grievance-hero p,
  .contact-hero__desc,
  .savings-hero__desc,
  .page-hero__desc {
    font-size: 0.95rem;
    padding: 0 var(--sp-2);
  }

  /* ── Grids → single column ── */
  .authorities-grid,
  .offices-grid,
  .procedure-steps,
  .features-grid,
  .benefits-grid,
  .steps-grid,
  .info-grid,
  .scheme-grid,
  .product-grid {
    grid-template-columns: 1fr !important;
    gap: var(--sp-4);
  }

  /* ── Cards — reduce padding ── */
  .rti-card,
  .authority-card,
  .office-card,
  .step-card,
  .tracking-card,
  .grievance-form-container,
  .info-card,
  .benefit-card,
  .scheme-card {
    padding: var(--sp-5);
  }

  .rti-card {
    margin-top: -2rem;
  }

  .grievance-form-container {
    margin-top: -2rem;
    padding: var(--sp-5);
  }

  /* ── Section Padding ── */
  .grievance-section,
  .offices-section,
  .rti-section,
  .product-section,
  .about-section,
  .faq-section {
    padding: var(--sp-8) 0;
  }

  /* ── Section titles ── */
  .section-title {
    font-size: clamp(1.3rem, 5vw, 1.6rem) !important;
    margin-bottom: var(--sp-6);
  }

  /* ── Form elements ── */
  .form-control {
    font-size: 16px; /* Prevents iOS zoom on focus */
    padding: var(--sp-3);
  }

  .form-label {
    font-size: 0.9rem;
  }

  /* ── Tracking form — stack vertically ── */
  .tracking-form {
    flex-direction: column;
    gap: var(--sp-3);
  }

  .tracking-form input {
    width: 100%;
  }

  .tracking-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
  }

  /* ── Captcha ── */
  .captcha-content {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-3);
  }

  .captcha-input {
    width: 100% !important;
  }

  /* ── Tables — horizontal scroll ── */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * var(--sp-4));
    padding: 0 var(--sp-4);
  }

  .suo-moto-table th,
  .suo-moto-table td {
    padding: 10px 12px;
    font-size: 0.85rem;
    white-space: nowrap;
  }

  /* ── Support banner ── */
  .support-banner-inner {
    gap: var(--sp-5);
    flex-direction: column;
    align-items: center;
  }

  .support-item {
    flex-direction: column;
    text-align: center;
    gap: var(--sp-2);
  }

  .support-text p {
    font-size: 0.95rem;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* ── Office cards ── */
  .office-card--head {
    grid-template-columns: 1fr;
  }

  .office-card--head .office-icon {
    display: none;
  }

  .office-card--head .office-title {
    font-size: 1.3rem;
  }

  .office-title {
    font-size: 1.1rem;
    flex-direction: column;
    gap: var(--sp-2);
  }

  /* ── Modals ── */
  .modal-content {
    width: 95%;
    max-height: 85vh;
    border-radius: var(--radius-lg);
  }

  .modal-header h2 {
    font-size: 1.2rem;
  }

  .modal-body {
    padding: var(--sp-4);
    font-size: 0.9rem;
  }

  /* ── FAQ accordion ── */
  .accordion-btn,
  .faq-question {
    font-size: 0.95rem;
    padding: var(--sp-4);
  }

  .faq-answer,
  .accordion-body {
    padding: 0 var(--sp-4) var(--sp-4);
    font-size: 0.9rem;
  }

  /* ── Exemption box ── */
  .exemption-box {
    padding: var(--sp-4);
  }

  .exemption-box h3 {
    font-size: 1.05rem;
  }

  /* ── RTI card paragraphs ── */
  .rti-card p {
    font-size: 0.95rem;
  }

  .rti-card h2 {
    font-size: 1.3rem;
  }

  /* ── Alert messages ── */
  .alert {
    padding: var(--sp-3);
    font-size: 0.9rem;
  }

  /* ── Buttons — full-width on mobile ── */
  .btn-submit {
    font-size: 1rem;
    padding: var(--sp-3);
  }

  /* ── About page timeline ── */
  .timeline-item {
    padding-left: var(--sp-6);
  }

  /* ── Notices ── */
  .notice-card {
    padding: var(--sp-4);
  }

  /* ── Product pages (savings, fd, rd, etc.) ── */
  .product-hero__actions {
    flex-direction: column;
    gap: var(--sp-3);
  }

  .product-hero__actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* ── Icon/feature grids on product pages ── */
  .feature-box,
  .benefit-box {
    flex-direction: column;
    text-align: center;
  }

  /* ── Stat/number grids ── */
  .stats-row,
  .key-features-row {
    flex-direction: column;
    gap: var(--sp-4);
  }
}

/* ============================================
   Small phones (≤ 480px)
   ============================================ */
@media (max-width: 480px) {
  .rti-hero,
  .grievance-hero,
  .contact-hero,
  .savings-hero,
  .product-hero,
  .page-hero {
    padding: var(--sp-6) 0 var(--sp-5);
  }

  .rti-hero__title,
  .grievance-hero h1,
  .contact-hero__title,
  .savings-hero__title,
  .page-hero__title {
    font-size: clamp(1.3rem, 6vw, 1.7rem);
  }

  .rti-card,
  .authority-card,
  .office-card,
  .grievance-form-container,
  .tracking-card {
    padding: var(--sp-4);
    border-radius: var(--radius-lg);
  }

  .authority-card__icon {
    width: 48px;
    height: 48px;
  }

  .authority-card__icon svg {
    width: 24px;
    height: 24px;
  }

  .authority-card h3 {
    font-size: 1.1rem;
  }

  .step-card {
    padding: var(--sp-4);
  }

  .step-number {
    font-size: 3.5rem;
  }

  .modal-content {
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }

  .captcha-question {
    font-size: 1.2rem;
  }
}