/* ==========================================================================
   Phones (≤ 899px) — one type scale and one spacing rhythm for every page that uses
   the shared layout. Loaded last (see includes/layout/head.php), so it only has to state
   the phone sizes; desktop is untouched. Page-specific tweaks stay in their own files.
   Scale:  body 15 · small 13 · h1 22 · h2 18 · h3 16 · card padding 14 · section gap 18
   ========================================================================== */
@media (max-width: 899px) {
  body { font-size: 15px; line-height: 1.45; }
  h1 { font-size: 22px; line-height: 1.2; }
  h2 { font-size: 18px; }
  h3 { font-size: 16px; }
  h4 { font-size: 15px; }
  small { font-size: 12.5px; }

  /* rhythm */
  .pb-shell { gap: 18px; padding-top: 12px; }
  .pb-content { gap: 18px; }
  .pb-rail { gap: 18px; }
  #pb-feed { gap: 16px; }
  .pb-container { padding-left: 14px; padding-right: 14px; }

  /* cards + headings */
  .pb-card { padding: 14px; }
  .pb-card--xl { border-radius: 16px; }
  .pb-sec-hd { margin-bottom: 12px; }
  .pb-sec-hd__title, .pb-sec-hd--sm .pb-sec-hd__title { font-size: 16.5px; gap: 8px; }
  .pb-sec-hd__title i { font-size: 18px; }
  .pb-link-more, .pb-sec-hd--sm .pb-link-more { font-size: 13.5px; gap: 6px; }
  .pb-widget-title { font-size: 12.5px; }

  /* buttons + form controls */
  .pb-btn { height: 40px; padding: 0 18px; font-size: 14px; border-radius: 20px; }
  .pb-btn--sm { height: 36px; padding: 0 15px; font-size: 13.5px; }
  .pb-btn--xs { height: 30px; padding: 0 14px; font-size: 13px; }
  input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="url"], input[type="number"], input[type="date"], select, textarea { font-size: 16px; } /* ≥16px stops iOS zooming on focus */

  /* modal + toast */
  .pb-modal__box h3 { font-size: 19px; }
  .pb-modal__box p { font-size: 14px; }
  .pb-toast { font-size: 13.5px; bottom: 92px; }

  /* home sections: a bit more air between each block */
  .pb-stories, .pb-composer, .pb-hero, .pb-ask, .pb-chips, .pb-sponsored { margin: 0; }
  .pb-chips { margin-inline: -10px; }
  .pb-feedtabs { margin: 0; }
  .pb-post { padding: 12px 14px 10px; }
  .pb-post__title { font-size: 16px; }
  .pb-post__text { font-size: 14.5px; }
  .pb-post__actions { margin-top: 8px; }

  /* generic page headers */
  .pb-page-title, .pb-pagehd h1 { font-size: 22px; }
  .pb-page-sub, .pb-pagehd p { font-size: 14px; }
}