/**
 * 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.
 */

/* =============================================================================
   NAVIGATION - Horizontal padding on mobile so logo/hamburger aren't edge-flush
   ============================================================================= */

@media (max-width: 768px) {
  op-website-navigation {
    padding: 12px 16px !important;
  }
}

@media (max-width: 480px) {
  op-website-navigation {
    padding: 12px 12px !important;
  }
}

/* =============================================================================
   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
   Note: blog-container padding is set entirely in CSS (no _stringified-props)
   ============================================================================= */

.blog-container {
  padding: 160px 120px 64px 120px;
}

.blog-post-container {
  padding: 160px 120px 96px 120px;
}

.blog-featured-container {
  padding: 48px;
}

.blog-grid-container {
  padding-top: 64px;
  padding-bottom: 64px;
}

.blog-cta-container {
  padding: 96px 120px;
}

@media (max-width: 1000px) {
  .blog-container {
    padding: 120px 32px 48px 32px;
  }

  .blog-post-container {
    padding: 120px 32px 48px 32px;
  }

  .blog-cta-container {
    padding: 64px 32px;
  }
}

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

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

  /* Blog featured post: stack and reduce padding */
  .blog-featured-container {
    flex-direction: column !important;
    padding: 24px !important;
    border-radius: 24px !important;
  }

  /* Blog grid: 2 columns on tablet */
  .blog-grid-container {
    grid-template-columns: repeat(2, 1fr) !important;
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  .blog-cta-container {
    padding: 48px 20px !important;
  }
}

/* Blog grid: single column on mobile */
@media (max-width: 600px) {
  .blog-grid-container {
    grid-template-columns: 1fr !important;
  }

  .blog-card-link {
    width: 100% !important;
  }
}

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

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

  .blog-featured-container {
    padding: 16px !important;
    border-radius: 20px !important;
  }

  .blog-card {
    padding: 16px !important;
    border-radius: 20px !important;
  }

  .blog-cta-container {
    padding: 40px 16px !important;
  }
}

@media (max-width: 390px) {
  .blog-container {
    padding: 90px 12px 32px 12px;
  }

  .blog-post-container {
    padding: 90px 12px 32px 12px !important;
  }
}

/* =============================================================================
   FOOTER CTA WRAPPER - Consistent padding for standalone CTA sections
   ============================================================================= */

.footer-cta-wrapper {
  padding: 96px 120px;
}

@media (max-width: 1000px) {
  .footer-cta-wrapper {
    padding: 64px 32px;
  }
}

@media (max-width: 768px) {
  .footer-cta-wrapper {
    padding: 48px 20px;
  }
}

@media (max-width: 480px) {
  .footer-cta-wrapper {
    padding: 40px 16px;
  }
}

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

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

  .legal-page__callout {
    border-radius: 10px;
  }

  .legal-page__body blockquote,
  .legal-page__content blockquote {
    border-radius: 10px;
  }
}

@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;
  }
}