/**
 * ============================================================================
 * ARTICLE DISPLAY RESPONSIVE - MOBILE CONTENT ADJUSTMENTS
 * ============================================================================
 * Optimizes article content for mobile and small screens.
 * ============================================================================
 */

/* MOBILE - UP TO 768px */
@media (max-width: 768px) {
  .article-display {
    padding: 20px; /* Reduced padding */
  }

  .article-display__title {
    font-size: 28px; /* Smaller title */
  }

  .article-display__meta {
    flex-direction: column; /* Stack metadata */
    align-items: flex-start; /* Left align */
    gap: 10px; /* Reduced gap */
  }

  .article-display__thumbnail {
    max-height: 300px; /* Limit image height */
  }

  .article-display__content {
    font-size: 16px; /* Adjusted text size */
  }

  .article-display__content h2 {
    font-size: 24px; /* Smaller heading */
    margin: 30px 0 15px 0; /* Adjusted spacing */
  }

  .article-display__content h3 {
    font-size: 20px; /* Smaller heading */
    margin: 20px 0 10px 0; /* Adjusted spacing */
  }

  .article-display__empty {
    padding: 40px 20px; /* Reduced padding */
  }

  .article-display__empty-title {
    font-size: 24px; /* Smaller title */
  }

  .article-display__empty-message {
    font-size: 16px; /* Adjusted text */
  }
}

/* SMALL MOBILE - UP TO 480px */
@media (max-width: 480px) {
  .article-display {
    padding: 15px; /* Minimal padding */
  }

  .article-display__title {
    font-size: 24px; /* Smaller title */
  }

  .article-display__category {
    font-size: 10px; /* Smaller badge */
    padding: 6px 12px; /* Reduced padding */
  }

  .article-display__content {
    font-size: 15px; /* Smaller text */
  }

  .article-display__content h2 {
    font-size: 20px; /* Smaller heading */
  }

  .article-display__content h3 {
    font-size: 18px; /* Smaller heading */
  }
}