/* ==========================================================================
   responsive.css — safe, additive responsive helpers (CrazyGKTrick)
   Replaces the old (missing) desktop.css / mobile.css references.
   Keeps existing layout intact; only adds mobile-friendly safeguards.
   ========================================================================== */

/* Never let media or embeds overflow their container on small screens */
img, video, iframe, table { max-width: 100%; }
img { height: auto; }

/* Tables in blog/article content scroll instead of breaking layout */
.blog-content table,
.article-content table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Tablets */
@media (max-width: 1024px) {
  .container { padding-left: 16px; padding-right: 16px; }
}

/* Phones */
@media (max-width: 768px) {
  html { -webkit-text-size-adjust: 100%; }

  h1 { font-size: clamp(1.5rem, 6vw, 2rem); line-height: 1.25; }
  h2 { font-size: clamp(1.25rem, 5vw, 1.6rem); }

  /* Prevent horizontal page scroll from stray wide elements */
  body { overflow-x: hidden; }

  /* Stack any simple two/three column flex rows */
  .platform-grid,
  .app-grid,
  .footer-content { gap: 16px; }
}

/* Small phones */
@media (max-width: 480px) {
  .container { padding-left: 14px; padding-right: 14px; }
}