/**
 * Mobile Responsiveness Fixes
 * =============================================================================
 * Minimal, targeted mobile styles that don't interfere with web components.
 * Only add rules here that are absolutely necessary and well-tested.
 */

/* =============================================================================
   TYPOGRAPHY SCALING - Safe to override as these are standard HTML elements
   ============================================================================= */

@media (max-width: 480px) {
  /* Scale down large inline font sizes in content areas */
  .page-content h1:not([class]) {
    font-size: 28px;
    line-height: 1.2;
  }

  .page-content h2:not([class]) {
    font-size: 24px;
    line-height: 1.25;
  }
}

/* =============================================================================
   ERX LANDING PAGE - Scoped styles that won't affect other pages
   ============================================================================= */

@media (max-width: 768px) {
  .erx-landing-container {
    padding: 100px 24px 48px 24px;
  }
}

@media (max-width: 480px) {
  .erx-landing-container {
    padding: 100px 20px 40px 20px;
  }
}

@media (max-width: 390px) {
  .erx-landing-container {
    padding: 90px 16px 32px 16px;
  }
}

/* =============================================================================
   MASONRY CARDS - Only target cards with specific classes we control
   ============================================================================= */

@media (max-width: 900px) {
  .masonry-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .masonry-grid .workflow-card {
    grid-column: span 1;
  }

  .masonry-grid .connected-card {
    grid-row: span 1;
  }
}

/* =============================================================================
   DOCS PAGE - Scoped to docs-specific classes
   ============================================================================= */

@media (max-width: 768px) {
  .docs-page {
    padding: 100px 20px 64px;
  }
}

@media (max-width: 480px) {
  .docs-page {
    padding: 90px 16px 48px;
  }

  .docs-article__title {
    font-size: 22px;
  }

  .docs-article__body {
    font-size: 15px;
  }
}

/* =============================================================================
   BLOG PAGE - Scoped to blog-specific classes
   ============================================================================= */

@media (max-width: 768px) {
  .blog-container {
    padding: 100px 20px 48px 20px;
  }

  .blog-post-container {
    padding: 100px 20px 48px 20px;
  }
}

@media (max-width: 480px) {
  .blog-container {
    padding: 90px 16px 40px 16px;
  }

  .blog-post-container {
    padding: 90px 16px 40px 16px;
  }
}

/* =============================================================================
   LEGAL PAGES - Scoped to legal-specific classes
   ============================================================================= */

@media (max-width: 768px) {
  .legal-page {
    padding: 100px 20px 64px;
  }
}

@media (max-width: 480px) {
  .legal-page {
    padding: 90px 16px 48px;
  }
}

/* =============================================================================
   CHECKOUT PAGES - Scoped to checkout-specific classes
   ============================================================================= */

@media (max-width: 768px) {
  .checkout-form-container {
    flex-direction: column-reverse;
  }
}

@media (max-width: 480px) {
  .checkout-container,
  .checkout-container--free,
  .checkout-container--enterprise,
  .checkout-container--clinical-pro {
    padding: 90px 16px 40px 16px;
  }
}