/* ============================================================
   Phone & tablet layout fixes. Loaded after styles.css.
   ============================================================ */

/* Single-column grids must be allowed to shrink below their content's
   min width (plain 1fr can't), otherwise headings and copy spill out of cards. */
@media (max-width: 900px) {
  .hero-card, .journey-grid, .blog-feature, .contact-card,
  .pulse-grid, .ph-lav .page-head-grid { grid-template-columns: minmax(0, 1fr); }
  .pulse-grid { gap: 36px; }

  /* Layouts whose columns are set inline in JSX */
  .m-stack { grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; }
}

@media (max-width: 760px) {
  /* Section headings: stack the intro paragraph under the title */
  .section-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .section-head .right { max-width: none; text-align: left; }

  /* Journey steps: number + title, meta wraps underneath */
  .journey-step { grid-template-columns: 32px minmax(0, 1fr); gap: 4px 12px; padding: 14px 16px; }
  .journey-step > :last-child { grid-column: 2; }

  /* Pulse dashboard mock */
  .pulse-mock { padding: 16px; }
  .pulse-mock-head { flex-wrap: wrap; gap: 12px; }
  .pulse-feed-item { grid-template-columns: 40px minmax(0, 1fr); gap: 6px 12px; }
  .pulse-feed-item > :last-child { grid-column: 2; justify-self: start; }

  /* Cards with heavy inline padding */
  .m-pad { padding: 36px 22px !important; }

  /* Article author row: let the button drop to its own line */
  .m-wrap { flex-wrap: wrap; }
  .m-wrap > .avatar { flex: none; }
  .m-wrap > .btn { margin-left: 0 !important; }

  /* Careers: role title above its Apply button */
  .role-row { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* Family stories: avatars in a band above the heading, review card and
   remaining avatars below it, so nothing sits on top of the text. */
@media (max-width: 600px) {
  .testimonials { min-height: 1070px !important; padding: 230px 20px 0 !important; }
  .fv.fv-n1 { left: 4% !important; top: 28px !important; }
  .fv.fv-n2 { left: 42% !important; top: 100px !important; }
  .fv.fv-n3 { left: auto !important; right: 4% !important; top: 22px !important; }
  .fv.fv-n4 { left: 4% !important; top: 870px !important; }
  .fv.fv-n5 { left: 40% !important; top: 940px !important; }
  .fv.fv-n6 { left: auto !important; right: 3% !important; top: 860px !important; }
  .fv-mpop { top: 628px !important; }
}

@media (max-width: 560px) {
  /* Hero stats: three equal columns that fit, slightly smaller numbers */
  .hero-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .hero-meta .stat { padding-right: 0; }
  .hero-meta .num { font-size: 24px; }

  /* Article filters: tabs scroll sideways, count sits underneath */
  .m-filters { flex-direction: column; align-items: stretch !important; gap: 12px; }
  .m-filters > .tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .m-filters > .tabs::-webkit-scrollbar { display: none; }
  .m-filters .tab { flex: none; white-space: nowrap; }
}

/* Online page app previews: the compact mode hides the sidebar, so the main
   panel must take the only column (it was landing in the empty 0px one). */
.pm-fit.compact .pm-cam { grid-template-columns: minmax(0, 1fr); }