/* ==========================================================================
   HailGeeks Blog — cross-page responsive refinements
   Component-specific breakpoints live next to their components; this file
   holds the global mobile adjustments shared across pages.
   ========================================================================== */

/* Section vertical rhythm scales with viewport via clamp() paddings that are
   set inline per-section class below. */

.section-pad { padding-top: clamp(32px, 4vw, 48px); }
.section-pad-lg { padding-top: clamp(40px, 5vw, 60px); }
.section-pad-bottom { padding-bottom: clamp(44px, 5vw, 64px); }

@media (max-width: 620px) {
  /* Practical touch targets on small screens */
  .pg-link { min-width: 44px; height: 44px; }
  .article-tags .tag-pill { padding: 9px 15px; }
  .chip label { padding: 10px 16px; }

  /* Meta rows wrap instead of shrinking */
  .article-meta__read { margin-left: 0; }

  /* Banner text over button, centered spacing preserved */
  .alerts-banner { text-align: left; }
}

@media (max-width: 390px) {
  .card__body { padding: 16px 16px 18px; }
  .cornerstone-card__body { padding: 22px 20px; }
}