/* =========================================================
   MOBILE ARTICLES OVERRIDES (≤768px)
   Only true differences from desktop
========================================================= */

@media (max-width: 768px) {

  /* ================= HEADER STACK ================= */

  .articles-header-top {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  .articles-header h2 {
    text-align: center;
  }

  .search-wrap input {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }


  /* ================= YEAR + TAG SCROLL SPACING ================= */
  /* Desktop breakout already exists → only adjust padding */

  .year-scroll {
    padding: 0 16px 10px;
  }

  .tag-scroll {
    padding: 6px 16px 12px;
  }


  /* ================= MOBILE GRID ================= */

  .articles-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .article-thumb {
    aspect-ratio: 1 / 1;
  }

  .article-thumb img {
    height: 100%;
  }

}