/* Mobile First Responsive CSS */
@media (max-width: 768px) {
  * { box-sizing: border-box; }
  
  body { 
    font-size: 16px !important; 
    line-height: 1.6; 
  }
  
  img { 
    max-width: 100%; 
    height: auto; 
  }
  
  button, .btn, a[role="button"], input[type="submit"] { 
    min-height: 44px; 
    min-width: 44px;
    padding: 12px 20px;
    font-size: 16px !important;
    touch-action: manipulation;
  }
  
  .container { 
    padding: 15px; 
    width: 100%; 
  }
  
  input, select, textarea { 
    font-size: 16px !important; 
  }

  /* Tables — prevent horizontal overflow */
  table { 
    display: block; 
    width: 100%; 
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
  }

  /* iframes — contain within viewport */
  iframe {
    max-width: 100%;
  }

  /* Utility: hide desktop-only decorative elements */
  .d-mobile-none { display: none !important; }

  /* Prevent long words/URLs from breaking layout */
  p, h1, h2, h3, h4, li, td, th {
    word-break: break-word;
    overflow-wrap: break-word;
  }
}

@media (max-width: 480px) {
  /* Tighter spacing on very small phones */
  .container {
    padding: 10px;
  }

  /* Hero padding-top compensation for fixed navbar */
  body {
    padding-top: 75px !important;
  }
}

@media (max-width: 320px) {
  /* Ultra-small phones (iPhone SE, older Android) */
  .container { padding: 8px; }
  .trending-card { min-width: 160px !important; }
  .tw-cat-card { min-width: 200px !important; width: 200px !important; }
  .category-pills { gap: 4px !important; }
  .cat-pill { padding: 5px 8px !important; font-size: 11px !important; min-height: 40px; }
  .tool-title { font-size: 1.2rem !important; }
  .newsletter-form { flex-direction: column; }
  .newsletter-form button { position: static !important; transform: none !important; width: 100%; margin-top: 8px; }
}