/* Insightful mobile optimization layer — additive only */
@media (max-width: 767.98px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  body { -webkit-text-size-adjust: 100%; }
  img, video, iframe { max-width: 100%; height: auto; }

  .container-custom {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .row { margin-left: -8px; margin-right: -8px; }
  .row > [class*="col-"] { padding-left: 8px; padding-right: 8px; }

  .navbar { max-height: none !important; min-height: 56px; }
  .navbar .container-custom, .navbar .container, .navbar .container-fluid { padding-left: 12px !important; padding-right: 12px !important; }
  .navbar-brand img { width: 132px !important; height: auto !important; padding-top: 0 !important; margin-left: 0 !important; }
  .search-icon-btn { min-width: 0; }
  .search-icon-btn.active .search-input { width: min(70vw, 260px) !important; }
  .search-results { position: fixed !important; left: 12px !important; right: 12px !important; top: 62px !important; width: auto !important; z-index: 2000; }

  .main-article { min-height: 260px; overflow: hidden; }
  .main-article > img { width: 100%; height: 260px !important; object-fit: cover; object-position: center; }
  .thumbnail-describe { padding: 0 14px 14px; }
  .thumbnail-describe h2 { font-size: 18px; line-height: 1.25; }

  .article-card { border-radius: 14px; overflow: hidden; margin-bottom: 18px; }
  .article-card > a, .article-card .article-image-wrap { display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 12px; background: #eef2f7; }
  .article-image {
    display: block;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: center;
    border-radius: 12px !important;
  }
  .article-content { padding: 10px 2px 4px; }
  .article-title { font-size: 15px; line-height: 1.35; -webkit-line-clamp: 3; line-clamp: 3; }
  .article-excerpt { font-size: 13px; line-height: 1.45; }
  .author-date-line, .small-article-meta { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }

  .small-article { gap: 10px; align-items: flex-start; }
  .small-article-image { width: 104px !important; height: 76px !important; object-fit: cover; border-radius: 10px; }
  .small-article-title { font-size: 14px; line-height: 1.35; -webkit-line-clamp: 3; line-clamp: 3; }

  .insight-section { padding: 14px !important; border-radius: 16px; }
  .insight-large-img { height: auto !important; aspect-ratio: 16 / 10; object-fit: cover; }

  .hot-item { gap: 12px; }
  .hot-number { font-size: 2rem; min-width: 34px; }
  .authors-sidebar { padding: 1rem; }

  .footer .row { row-gap: 22px; }
  .footer input, .footer button { width: 100%; }
}

@media (max-width: 575.98px) {
  .container-custom { padding-left: 12px !important; padding-right: 12px !important; }
  .main-article, .main-article > img { min-height: 230px; height: 230px !important; }
  .article-card > a, .article-card .article-image-wrap, .article-image { aspect-ratio: 4 / 3; }
  .small-article-image { width: 96px !important; height: 72px !important; }
}

/* Article detail mobile */
@media (max-width: 767.98px) {
  .article-detail { max-width: 100% !important; padding: 0 4px 24px !important; }
  .article-hero-image {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 16 / 10;
    object-fit: contain !important;
    object-position: center;
    background: #f1f5f9;
    border-radius: 14px !important;
    margin-bottom: 20px !important;
  }
  .article-title-full { font-size: clamp(26px, 7vw, 34px) !important; line-height: 1.15 !important; margin-bottom: 14px !important; }
  .article-excerpt-full { font-size: 16px !important; line-height: 1.55 !important; margin-bottom: 20px !important; padding-left: 14px !important; }
  .article-meta { padding: 14px !important; margin-bottom: 22px !important; }
  .author-info-detail { align-items: flex-start !important; flex-wrap: wrap; gap: 10px !important; }
  .category-badge { display: inline-flex; margin-top: 4px; }
  .engagement-actions { gap: 8px !important; flex-wrap: wrap; }
  .engagement-button { flex: 1 1 calc(50% - 8px); justify-content: center; padding: 9px 10px !important; font-size: 14px; }
  .article-content { font-size: 17px !important; line-height: 1.75 !important; overflow-wrap: anywhere; }
  .article-content h2 { font-size: 24px !important; line-height: 1.25 !important; margin-top: 28px; }
  .article-content h3 { font-size: 20px !important; line-height: 1.3 !important; }
  .article-content img {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    border-radius: 12px !important;
  }
  #relatedArticlesList, .related-articles-list { display: grid; grid-template-columns: 1fr !important; gap: 14px; }
}