/* ============================================
   BLOG RESPONSIVE STYLES
   Mobile, tablet, and desktop breakpoints
   ============================================ */

/* ========== LARGE DESKTOP (1200px+) ========== */
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

/* ========== DESKTOP (992px - 1199px) ========== */
@media (max-width: 1199px) {
  .blog-main-title {
    font-size: var(--blog-font-4xl);
  }
  
  .article-title {
    font-size: var(--blog-font-4xl);
  }
}

/* ========== TABLET (768px - 991px) ========== */
@media (max-width: 991px) {
  /* Typography adjustments */
  .blog-main-title {
    font-size: var(--blog-font-3xl);
  }
  
  .article-title {
    font-size: var(--blog-font-3xl);
  }
  
  .article-heading-2 {
    font-size: var(--blog-font-3xl);
  }
  
  .article-heading-3 {
    font-size: var(--blog-font-xl);
  }
  
  /* Sidebar stacks below content */
  .article-sidebar,
  .blog-sidebar {
    position: static !important;
    margin-top: var(--blog-spacing-3xl);
  }
  
  /* Blog cards - 2 columns */
  .blog-posts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Related articles - 2 columns */
  .related-articles-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Image gallery - 2 columns */
  .image-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Two column layout stacks */
  .article-two-column {
    grid-template-columns: 1fr;
    gap: var(--blog-spacing-lg);
  }
  
  /* Author bio stacks */
  .author-bio {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .author-bio-image {
    width: 100px;
    height: 100px;
  }
  
  .author-social {
    justify-content: center;
  }
  
  /* In-article ads */
  .ad-in-article {
    float: none;
    max-width: 100%;
    margin: var(--blog-spacing-xl) 0;
  }
  
  /* Category pills wrap better */
  .category-pills {
    justify-content: center;
  }
  
  /* Pagination smaller text */
  .pagination {
    gap: var(--blog-spacing-xs);
  }
  
  .page-link {
    min-width: 38px;
    height: 38px;
    padding: var(--blog-spacing-xs) var(--blog-spacing-sm);
    font-size: var(--blog-font-sm);
  }
}

/* ========== MOBILE LARGE (576px - 767px) ========== */
@media (max-width: 767px) {
  /* Typography */
  .blog-main-title {
    font-size: var(--blog-font-2xl);
  }
  
  .blog-main-subtitle {
    font-size: var(--blog-font-base);
  }
  
  .article-title {
    font-size: var(--blog-font-2xl);
  }
  
  .article-heading-2 {
    font-size: var(--blog-font-2xl);
  }
  
  .article-heading-3 {
    font-size: var(--blog-font-lg);
  }
  
  .article-body {
    font-size: var(--blog-font-base);
  }
  
  .article-intro {
    font-size: var(--blog-font-lg);
  }
  
  /* Blog cards - single column */
  .blog-posts-grid {
    grid-template-columns: 1fr;
  }
  
  /* Related articles - single column */
  .related-articles-grid {
    grid-template-columns: 1fr;
  }
  
  /* Image gallery - 2 columns */
  .image-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Header sections */
  .blog-header-section {
    padding: var(--blog-spacing-2xl) 0 var(--blog-spacing-xl);
  }
  
  .article-section {
    padding: var(--blog-spacing-2xl) 0;
  }
  
  /* Article meta stacks */
  .article-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--blog-spacing-md);
  }
  
  .article-stats {
    flex-direction: column;
    gap: var(--blog-spacing-sm);
    width: 100%;
  }
  
  /* Share buttons smaller */
  .article-share-buttons {
    flex-wrap: wrap;
  }
  
  .share-btn {
    width: 36px;
    height: 36px;
    font-size: var(--blog-font-base);
  }
  
  /* Blog card adjustments */
  .blog-card-title {
    font-size: var(--blog-font-xl);
  }
  
  .blog-card-image {
    height: 200px;
  }
  
  /* Code blocks */
  .code-block-header {
    font-size: var(--blog-font-xs);
  }
  
  pre code {
    font-size: 13px;
  }
  
  /* Tables */
  .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .article-table {
    font-size: var(--blog-font-sm);
  }
  
  .article-table th,
  .article-table td {
    padding: var(--blog-spacing-sm);
    white-space: nowrap;
  }
  
  /* Alert boxes */
  .article-alert {
    padding: var(--blog-spacing-md);
  }
  
  .alert-icon {
    font-size: var(--blog-font-xl);
  }
  
  /* Download section */
  .article-download {
    flex-direction: column;
    text-align: center;
  }
  
  .download-icon {
    font-size: 36px;
  }
  
  /* Service promo */
  .service-inline-promo {
    padding: var(--blog-spacing-xl);
  }
  
  .service-inline-promo .promo-title {
    font-size: var(--blog-font-2xl);
  }
  
  .service-inline-promo .promo-text {
    font-size: var(--blog-font-base);
  }
  
  /* Sidebar widgets */
  .sidebar-widget {
    padding: var(--blog-spacing-lg);
  }
  
  .widget-title {
    font-size: var(--blog-font-lg);
  }
  
  /* Popular posts */
  .popular-post-image {
    width: 60px;
    height: 60px;
  }
  
  /* Tags cloud */
  .tags-cloud {
    justify-content: center;
  }
  
  /* Modal */
  .modal-body {
    padding: var(--blog-spacing-xl);
  }
  
  .modal-title {
    font-size: var(--blog-font-2xl);
  }
  
  .modal-text {
    font-size: var(--blog-font-base);
  }
  
  /* Scroll to top button */
  .scroll-to-top {
    width: 44px;
    height: 44px;
    bottom: 20px;
    right: 20px;
  }
}

/* ========== MOBILE SMALL (< 576px) ========== */
@media (max-width: 575px) {
  /* Container padding */
  .container {
    padding-left: var(--blog-spacing-md);
    padding-right: var(--blog-spacing-md);
  }
  
  /* Typography */
  .blog-main-title {
    font-size: var(--blog-font-xl);
  }
  
  .blog-main-subtitle {
    font-size: var(--blog-font-sm);
  }
  
  .article-title {
    font-size: var(--blog-font-xl);
  }
  
  .article-heading-2 {
    font-size: var(--blog-font-xl);
  }
  
  .article-heading-3 {
    font-size: var(--blog-font-lg);
  }
  
  /* Breadcrumbs */
  .breadcrumb {
    font-size: var(--blog-font-xs);
  }
  
  .breadcrumb-section {
    padding: var(--blog-spacing-sm) 0;
  }
  
  /* Category filter */
  .category-filter-container {
    padding: var(--blog-spacing-md);
  }
  
  .filter-label {
    font-size: var(--blog-font-xs);
  }
  
  .category-pill {
    padding: var(--blog-spacing-xs) var(--blog-spacing-md);
    font-size: var(--blog-font-xs);
  }
  
  /* Blog cards */
  .blog-card-content {
    padding: var(--blog-spacing-lg);
  }
  
  .blog-card-title {
    font-size: var(--blog-font-lg);
  }
  
  .blog-card-excerpt {
    font-size: var(--blog-font-sm);
  }
  
  .blog-card-meta {
    flex-direction: column;
    gap: var(--blog-spacing-xs);
    align-items: flex-start;
  }
  
  .blog-card-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--blog-spacing-md);
  }
  
  /* Image gallery - single column */
  .image-gallery {
    grid-template-columns: 1fr;
  }
  
  /* Pagination */
  .pagination {
    flex-wrap: wrap;
  }
  
  .page-link {
    min-width: 34px;
    height: 34px;
    padding: var(--blog-spacing-xs);
  }
  
  .page-item:first-child .page-link,
  .page-item:last-child .page-link {
    padding: var(--blog-spacing-xs) var(--blog-spacing-sm);
    font-size: var(--blog-font-xs);
  }
  
  /* Hide middle page numbers on very small screens */
  .pagination .page-item:nth-child(n+4):nth-last-child(n+3) {
    display: none;
  }
  
  /* Article header */
  .article-category-badge {
    font-size: 10px;
    padding: 4px var(--blog-spacing-sm);
  }
  
  .author-avatar {
    width: 50px;
    height: 50px;
  }
  
  .author-name {
    font-size: var(--blog-font-base);
  }
  
  .author-title {
    font-size: var(--blog-font-xs);
  }
  
  /* Share buttons */
  .share-label {
    width: 100%;
    margin-bottom: var(--blog-spacing-xs);
  }
  
  .article-share-buttons {
    justify-content: center;
  }
  
  /* PDF export button */
  .btn-export-pdf {
    font-size: var(--blog-font-xs);
    padding: var(--blog-spacing-xs) var(--blog-spacing-md);
  }
  
  /* Article body */
  .article-intro {
    font-size: var(--blog-font-base);
  }
  
  .article-body {
    font-size: 15px;
  }
  
  /* Blockquote */
  .article-quote {
    padding: var(--blog-spacing-md) var(--blog-spacing-lg);
    font-size: var(--blog-font-base);
  }
  
  .article-quote p {
    font-size: var(--blog-font-base);
  }
  
  /* Lists */
  .article-list {
    padding-left: var(--blog-spacing-lg);
  }
  
  /* Code blocks */
  .code-block-header {
    padding: var(--blog-spacing-sm);
  }
  
  pre {
    padding: var(--blog-spacing-md);
  }
  
  pre code {
    font-size: 12px;
  }
  
  /* Alert boxes */
  .article-alert {
    flex-direction: column;
    padding: var(--blog-spacing-md);
  }
  
  .alert-title {
    font-size: var(--blog-font-base);
  }
  
  /* Author bio */
  .author-bio {
    padding: var(--blog-spacing-lg);
  }
  
  .author-bio-image {
    width: 80px;
    height: 80px;
  }
  
  .author-bio-name {
    font-size: var(--blog-font-xl);
  }
  
  .author-bio-description {
    font-size: var(--blog-font-sm);
  }
  
  /* Related articles */
  .related-title {
    font-size: var(--blog-font-2xl);
  }
  
  /* Service promo card */
  .service-promo-card {
    padding: var(--blog-spacing-xl);
    min-height: auto;
  }
  
  .service-promo-card .promo-icon {
    font-size: 36px;
  }
  
  .service-promo-card .promo-title {
    font-size: var(--blog-font-xl);
  }
  
  /* Service widget */
  .service-widget {
    padding: var(--blog-spacing-lg);
  }
  
  .service-widget .service-title {
    font-size: var(--blog-font-xl);
  }
  
  /* Sidebar */
  .sidebar-widget {
    padding: var(--blog-spacing-md);
  }
  
  /* Modal */
  .modal-body {
    padding: var(--blog-spacing-lg);
  }
  
  .modal-icon {
    font-size: 48px;
  }
  
  .modal-title {
    font-size: var(--blog-font-xl);
  }
  
  .btn-close-modal {
    width: 30px;
    height: 30px;
    top: var(--blog-spacing-sm);
    right: var(--blog-spacing-sm);
  }
  
  /* Scroll to top */
  .scroll-to-top {
    width: 40px;
    height: 40px;
    bottom: 15px;
    right: 15px;
    font-size: var(--blog-font-lg);
  }
}

/* ========== LANDSCAPE MOBILE ========== */
@media (max-height: 500px) and (orientation: landscape) {
  .blog-header-section {
    padding: var(--blog-spacing-xl) 0;
  }
  
  .modal-body {
    padding: var(--blog-spacing-md);
  }
  
  .modal-icon {
    font-size: 36px;
    margin-bottom: var(--blog-spacing-sm);
  }
}

/* ========== PRINT STYLES ========== */
@media print {
  /* Hide unnecessary elements */
  .breadcrumb-section,
  .category-filter-container,
  .blog-pagination,
  .article-share-buttons,
  .btn-export-pdf,
  .scroll-to-top,
  .ad-container,
  .service-promo-card,
  .service-inline-promo,
  .service-widget,
  .newsletter-widget,
  .modal,
  .reading-progress-bar {
    display: none !important;
  }
  
  /* Adjust typography for print */
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
  }
  
  .article-title {
    font-size: 24pt;
    color: #000;
  }
  
  .article-heading-2 {
    font-size: 18pt;
    color: #000;
  }
  
  .article-heading-3 {
    font-size: 14pt;
    color: #000;
  }
  
  /* Remove shadows and transitions */
  * {
    box-shadow: none !important;
    transition: none !important;
  }
  
  /* Page breaks */
  h2, h3 {
    page-break-after: avoid;
  }
  
  img, figure {
    page-break-inside: avoid;
  }
  
  /* Links */
  a {
    color: #000;
    text-decoration: underline;
  }
  
  /* Show link URLs */
  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 10pt;
    color: #666;
  }
  
  /* Code blocks */
  pre, code {
    border: 1px solid #000;
    page-break-inside: avoid;
  }
}

/* ========== REDUCED MOTION ========== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ========== HIGH CONTRAST MODE ========== */
@media (prefers-contrast: high) {
  .blog-card,
  .sidebar-widget,
  .article-alert {
    border: 2px solid currentColor;
  }
  
  .btn,
  .page-link {
    border: 2px solid currentColor;
  }
}