/* Shared mobile layout rules for the public research pages. */
@media (max-width: 767.98px) {
  body { font-size: 16px; line-height: 1.5; }

  body > .container,
  main.container,
  .container.my-5,
  .container.py-4 {
    width: min(100% - 24px, 620px) !important;
    margin: 24px auto !important;
    padding: 0 !important;
  }

  .card,
  .page-card,
  .about-section {
    border-radius: 18px !important;
    box-shadow: 0 12px 28px rgba(0, 10, 31, .22) !important;
  }

  .card-body { padding: 20px !important; }
  .card-body > .d-flex,
  .card-body > form.d-flex { gap: 14px !important; }

  .card h2,
  .page-card h2,
  .about-section h2 {
    font-size: clamp(1.45rem, 7vw, 1.8rem) !important;
    line-height: 1.2 !important;
  }

  .about-section { margin-bottom: 24px !important; padding: 24px 20px !important; }
  .about-section p,
  .about-section .feature-card p {
    font-size: 1rem !important;
    line-height: 1.72 !important;
    text-align: left !important;
    word-spacing: normal !important;
  }

  .feature-card { padding: 20px !important; }

  form.d-flex {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  form.d-flex .form-control,
  form.d-flex .form-select,
  form.d-flex .btn,
  form.d-flex a.btn {
    width: 100% !important;
    max-width: none !important;
    min-height: 46px;
  }

  .form-control,
  .form-select { font-size: 16px !important; }
  .table-responsive { margin-top: 18px !important; border-radius: 12px; }
  .table-responsive .table { min-width: 680px; margin-bottom: 0; font-size: .84rem; }
  .table-responsive::after { content: 'Swipe to view more'; display: block; padding: 9px 12px; color: var(--text-secondary, #9fb1c9); background: var(--surface-primary, #071d3a); font-size: .8rem; font-weight: 600; }
}

@media (max-width: 420px) {
  body > .container,
  main.container,
  .container.my-5,
  .container.py-4 { width: min(100% - 20px, 420px) !important; margin-block: 18px !important; }
  .card-body { padding: 18px !important; }
  .about-section { padding: 22px 18px !important; }
  .card h2,
  .page-card h2,
  .about-section h2 { font-size: 1.4rem !important; }
}