/* =================================================================
   MOBILE-5 — news-hub page
   Requires: mobile-common.css
   ================================================================= */

@media (max-width: 768px) {

  /* ─── INNER ──────────────────────────────────────────────────  */
  .news-inner { width: 100% !important; padding: 0 16px !important; }

  /* ─── HERO ───────────────────────────────────────────────────  */
  .news-hero { height: 180px !important; }

  /* ─── FILTER BAR ─────────────────────────────────────────────  */
  .filterbar {
    margin: 0 0 24px !important;
    justify-content: flex-start !important;
  }

  .filterbar-right {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
  }

  .filters { width: 100%; display: flex; gap: 8px; }

  .filter-btn {
    flex: 1;
    font-size: 13px !important;
    padding: 10px 12px !important;
  }

  .adv-btn { width: 40px; height: 40px; }

  /* ─── TOP NEWS (STACK) ───────────────────────────────────────  */
  .news-row-top { grid-template-columns: 1fr !important; gap: 16px !important; }
  .news-row-top .card .card-body { padding: 20px !important; }
  .news-row-top .title  { font-size: 18px !important; line-height: 1.4; }
  .news-row-top .excerpt{ font-size: 13px !important; line-height: 1.6; }

  /* ─── BOTTOM ROW → STACK (removes slider on mobile) ─────────  */
  .news-row-bottom {
    flex-direction: column !important;
    gap: 16px !important;
    overflow: visible !important;
  }

  .news-row-bottom .card {
    flex: none !important;
    width: 100% !important;
  }

  .news-row-bottom .card .card-body { padding: 20px !important; }
  .news-row-bottom .title { font-size: 16px !important; }

  .slider-nav { display: none !important; }

  /* ─── META / TAGS ────────────────────────────────────────────  */
  .meta       { margin-bottom: 12px !important; }
  .kicker     { font-size: 13px !important; }
  .date       { font-size: 12px !important; }
  .tags       { gap: 8px !important; margin-bottom: 16px !important; }
  .tag        { font-size: 11px !important; padding: 6px 10px !important; }
  .readmore   { font-size: 13px !important; }

  /* ─── CLARITY SECTION ────────────────────────────────────────  */
  .clarity          { padding: 40px 0 !important; }
  .clarity-title    { font-size: 20px !important; }
  .clarity-sub      { font-size: 14px !important; line-height: 1.6; }
  .clarity-btn      { font-size: 14px !important; padding: 12px 18px !important; }

  /* ─── QUOTE ──────────────────────────────────────────────────  */
  .quote      { padding: 30px 0 !important; }
  .quote-text { font-size: 16px !important; }

  /* ─── STAY SECTION ───────────────────────────────────────────  */
  .stay       { padding: 40px 0 !important; }
  .stay-title { font-size: 20px !important; }
  .stay-sub   { font-size: 14px !important; line-height: 1.6; }

  .stay-form { flex-direction: column !important; gap: 10px; }
  .stay-form input  { height: 44px; font-size: 14px; }
  .stay-form button { height: 44px; font-size: 14px; }

}