/* Shared mobile overrides for static HTML pages (landing, about, terms, privacy,
   son-rebenka, problemy-sna, metodiki-sna). Articles use blog-theme.css which
   has its own @media rules — this file targets the marketing/legal pages.
   Defensive selectors with !important to win over per-page inline <style> blocks. */

@media (max-width: 640px) {
  body { font-size: 15px !important; }

  /* Containers — collapse desktop padding/max-width */
  .container,
  .wrap,
  .page {
    padding: 24px 16px !important;
    max-width: 100% !important;
  }

  /* Typography scale */
  h1 { font-size: 22px !important; line-height: 1.25 !important; }
  h2 { font-size: 18px !important; line-height: 1.3 !important; }
  h3 { font-size: 15px !important; line-height: 1.35 !important; }
  .hero h1, .hero-title { font-size: 26px !important; line-height: 1.2 !important; }
  .sub, .lead, .hero-sub { font-size: 14px !important; margin-bottom: 24px !important; line-height: 1.5 !important; }
  p, li { font-size: 15px !important; line-height: 1.55 !important; }

  /* Cards — tighter padding, smaller radius */
  .card {
    padding: 16px !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
  }

  /* Row layout: collapse 2-col to single column on narrow viewports */
  .row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    padding: 10px 0 !important;
  }
  .row-label { font-size: 13px !important; }
  .row-value { font-size: 14px !important; text-align: left !important; font-weight: 500 !important; }

  /* Tables → horizontal scroll instead of breaking layout */
  table {
    font-size: 13px !important;
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  table th, table td { padding: 8px 10px !important; }

  /* Landing-specific niceties */
  .hero, .feature, .section { padding: 24px 0 !important; }
  .feature, .feature-card { padding: 16px !important; border-radius: 14px !important; }
  .features, .grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .cta {
    padding: 20px !important;
    margin: 24px 0 !important;
    border-radius: 14px !important;
  }
  .cta-button, .btn, button {
    padding: 12px 18px !important;
    font-size: 14px !important;
  }

  /* Nav-like elements: wrap, smaller */
  .nav, .nav-links { gap: 8px !important; flex-wrap: wrap !important; }
  .nav-links a, .nav a { padding: 10px 14px !important; font-size: 13px !important; }

  /* Lists — closer indent */
  ul, ol { padding-left: 22px !important; }

  /* Footer — column layout, smaller text */
  footer { padding: 20px 16px !important; font-size: 12px !important; }
  footer > div, .footer-row { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }

  /* Images / SVG — never overflow */
  img, svg { max-width: 100% !important; height: auto !important; }
}