/* profile-mobile.css: shared phone layout for every therapist profile page.
 *
 * Linked from profile-template.html and every therapist/<slug>.html and
 * <name>-profile.html (tools/add_profile_mobile_css.py keeps the link in place).
 * One file instead of 25 inline <style> variants, so a mobile fix lands on all
 * 179 profiles at once.
 *
 * The bug this fixes (2026-10-21): below 900px the hero collapses to one grid
 * column, but a grid item's min-width defaults to its content's min-content
 * width. The section tabs (Specialties · Bio · Approach · Contact · Education
 * · ...) are nowrap, so that one row stretched the column to ~553px and every
 * phone rendered the page ~577px wide: text cut off on the right, the whole
 * page sitting off to the side. The rates table's INLINE repeat(3, 1fr) beat the
 * stylesheet's one-column rule and did the same.
 */

@media (max-width: 900px) {
  /* Never let anything push the page sideways. `clip`, not `hidden`, so the
     body does not become a scroll container. */
  html, body { overflow-x: clip; }

  /* The fix: let the single column shrink to the screen. */
  .profile-hero-inner { grid-template-columns: minmax(0, 1fr); }
  .profile-hero-inner > * { min-width: 0; }

  /* Photo column: centred, not hugging the left edge. */
  .photo-card { width: 100%; max-width: 340px; margin-left: auto; margin-right: auto; }
  .photo-certified { justify-content: center; }

  /* Name block centred under the photo; the reading sections below stay left. */
  .profile-specialty, .profile-name, .profile-creds { text-align: center; }
  .profile-location, .profile-session-type, .profile-languages { justify-content: center; }
  .profile-divider { margin-left: auto; margin-right: auto; }
  .profile-creds { overflow-wrap: anywhere; }

  /* Section tabs: swipe sideways inside their own strip, no visible scrollbar. */
  .profile-nav { max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .profile-nav::-webkit-scrollbar { display: none; }
  .profile-nav a { white-space: nowrap; flex-shrink: 0; }

  /* Tables and lists that carried fixed or inline multi-column grids. */
  .rates-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .contact-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .education-item { grid-template-columns: minmax(0, 1fr) !important; }
  .education-year { white-space: normal; }
  .license-item { min-width: 0; flex-wrap: wrap; }
  .contact-item-value, .contact-item-value a { overflow-wrap: anywhere; }
  .specialty-tags, .insurance-tags { flex-wrap: wrap; }

  /* Long words and pasted URLs in the bio. */
  .profile-section p, .profile-section li { overflow-wrap: break-word; }
  .profile-section img, .profile-section iframe { max-width: 100%; height: auto; }
}

@media (max-width: 600px) {
  .profile-hero { padding-left: 20px; padding-right: 20px; }
  .profile-name { font-size: 40px; }

  /* "Get Matched" form at the bottom of the page. */
  .profile-cta { padding-left: 20px !important; padding-right: 20px !important; }
  .cta-form-wrap { width: 100%; max-width: 100%; }
  .cta-form-row { grid-template-columns: minmax(0, 1fr) !important; gap: 0; margin-bottom: 0; }
  .cta-form-input { font-size: 16px; }  /* 16px stops iOS zooming into the field */
}