/**
 * ============================================================================
 * ARTICLE PAGE LAYOUT RESPONSIVE - TWO-COLUMN TO SINGLE-COLUMN LAYOUT
 * ============================================================================
 * Media queries for responsive article page layout adaptation.
 * Switches from two-column (article + sidebar) to single-column on tablets.
 * ============================================================================
 */

/* ========================================================================== */
/* LARGE DESKTOP - 1440px AND ABOVE */
/* ========================================================================== */
@media (min-width: 1440px) {
  .article-page-layout {
    max-width: 1400px; /* Limit width on large screens */
    gap: 50px; /* Larger gap between columns */
  }
}

/* DESKTOP - UP TO 1199px */
@media (max-width: 1199px) {
  .article-page-layout {
    max-width: 100%; /* Full width */
    padding-inline: 30px; /* Horizontal padding */
    gap: 35px; /* Reduced gap */
  }

  .article-page-layout__main {
    max-width: calc(100% - 335px); /* Adjust for sidebar */
  }
}

/* TABLET - UP TO 1023px (SINGLE COLUMN) */
@media (max-width: 1023px) {
  .article-page-layout {
    flex-direction: column; /* Stack vertically */
    padding-inline: 24px; /* Reduced padding */
    gap: 30px; /* Reduced gap */
  }

  .article-page-layout__main {
    max-width: 100%; /* Full width */
    width: 100%; /* Full width */
  }

  .article-page-layout__sidebar {
    width: 100%; /* Full width sidebar */
    max-width: 100%; /* Full width sidebar */
  }
}

/* MOBILE - UP TO 767px */
@media (max-width: 767px) {
  .article-page-layout {
    padding-inline: 20px; /* Reduced padding */
    gap: 24px; /* Reduced gap */
  }
}

/* SMALL MOBILE - UP TO 480px */
@media (max-width: 480px) {
  .article-page-layout {
    padding-inline: 16px; /* Minimal padding */
    gap: 20px; /* Minimal gap */
  }
}

/* EXTRA SMALL MOBILE - UP TO 375px */
@media (max-width: 375px) {
  .article-page-layout {
    padding-inline: 12px; /* Minimal padding */
    gap: 16px; /* Minimal gap */
  }
}

/* TABLET LANDSCAPE */
@media (max-width: 1023px) and (orientation: landscape) {
  .article-page-layout {
    gap: 24px; /* Adjusted gap */
  }
}