/* =========================
   ARTICLES - MOBILE CLEAN FIX
========================= */

@media (max-width: 768px) {

  /* ===== SECTION ===== */
  #articles {
    padding: 60px 5%;
  }

  #articles h2 {
    font-size: 2rem;
  }

  /* ===== WRAPPER ===== */
  .articles-wrapper::before,
  .articles-wrapper::after {
    display: none !important;
  }

  /* ===== GRID (SAFE SWIPE) ===== */
  .articles-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    touch-action: auto;
    overscroll-behavior-x: contain;
  }

  /* ===== CARD ===== */
  .article-card {
    width: 260px;
    flex: 0 0 auto;

    padding: 18px;
    border-radius: 14px;

    background: #fff;

    scroll-snap-align: start;

    cursor: pointer;
    -webkit-tap-highlight-color: transparent;

    user-select: none;
    touch-action: manipulation;

    transition: transform 0.15s ease;
  }

  .article-card:active {
    transform: scale(0.98);
  }

  .article-card h3 {
    font-size: 1rem;
  }

  .article-card p {
    font-size: 0.88rem;
  }

  /* ===== MODAL (BOTTOM SHEET) ===== */
  .article-modal {
    align-items: flex-end;
    padding: 0;
  }

  .article-modal-content {
    width: 90%;
    height: 90vh;

    border-radius: 18px 18px 0 0;
    padding: 18px;

    position: relative;
  }

  .article-modal-body {
    font-size: 0.95rem;
    padding-right: 6px;
  }

  .article-close {
    font-size: 28px;
    top: 10px;
    right: 14px;
  }
}

/* ===== MODAL TEXT SIZE FIX ===== */

.article-modal-content h1,
.article-modal-content h2 {
  font-size: 1.4rem;
  line-height: 1.3;
  margin-bottom: 10px;
}

.article-modal-body {
  font-size: 0.9rem;
  line-height: 1.6;
}