/* PSM Expert — Responsividade (mobile / tablet)
   Sobrescreve os grids inline (CSS-in-JS) via ganchos de classe.
   Carregado em todas as páginas do site, depois de colors_and_type.css. */

/* ───────── Tablet (≤ 900px) ───────── */
@media (max-width: 900px) {
  .psm-hero-h1 { font-size: 46px !important; }
  .psm-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .psm-grid-5 { grid-template-columns: repeat(3, 1fr) !important; }
  .psm-hero-diffs { grid-template-columns: repeat(2, 1fr) !important; row-gap: 18px !important; }
  .psm-hero-diffs > div { border-left: none !important; }
}

/* ───────── Mobile grande (≤ 760px) ───────── */
@media (max-width: 760px) {
  .psm-stack-2 { grid-template-columns: 1fr !important; gap: 28px !important; }
  .psm-grid-2 { grid-template-columns: 1fr !important; }
  .psm-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 30px !important; }

  /* stepper "Como funciona": deixa de ser linha e vira blocos empilhados */
  .psm-stepper { flex-wrap: wrap !important; justify-content: center !important; gap: 6px !important; }
  .psm-step-conn { display: none !important; }
  .psm-step-node { flex: 0 0 44% !important; margin-bottom: 24px !important; }

  /* card de blog em destaque: empilha imagem + texto */
  .psm-blog-feat { flex-direction: column !important; }
  .psm-blog-feat > div:first-child { width: auto !important; min-height: 170px !important; }

  .psm-hero-h1 { font-size: 40px !important; }
  .psm-pagehero-h1 { font-size: 34px !important; }
}

/* ───────── Mobile (≤ 560px) ───────── */
@media (max-width: 560px) {
  .psm-grid-3, .psm-grid-5 { grid-template-columns: 1fr !important; }
  .psm-hero-diffs { grid-template-columns: 1fr !important; }
  .psm-row2 { grid-template-columns: 1fr !important; }
  .psm-footer-grid { grid-template-columns: 1fr !important; }
  .psm-step-node { flex: 0 0 100% !important; }

  .psm-hero-h1 { font-size: 33px !important; }
  .psm-hero-inner { padding: 46px 22px 40px !important; }
  .psm-hero-stats { gap: 20px !important; }
  .psm-pagehero-h1 { font-size: 30px !important; }

  /* respiro lateral menor nas seções em telas bem estreitas */
  .psm-sec-pad { padding-left: 20px !important; padding-right: 20px !important; }
}