.page-intro{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.search{ display:flex; gap:8px; }
.search input{ padding:10px 12px; border-radius:12px; border:1px solid var(--line); min-width: 240px; background:#fff; font-weight:700; }
.filters{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 4px; }
.pill{ border:1px solid var(--line); background:#fff; color:#0b0d13; font-weight:800; padding:6px 10px; border-radius:999px; cursor:pointer; }
.pill.is-active{ background: linear-gradient(90deg, var(--accent), var(--accent-2)); color:#0b0d13; border-color: transparent; }
.articles .card{ text-align:start; }
.articles .card h3{ margin:0 0 6px; font-size:18px; }
.articles .card .excerpt{ color: var(--ink-muted); margin:0 0 8px; }
.articles .card .meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-weight:800; color: var(--ink-muted); margin-bottom:8px; }
.see-more{ text-align:center; margin-top:16px; }

/* Bottom nav active */
.bottom-nav .bottom-link.active,
.bottom-nav .bottom-link.active i{ color: var(--accent) !important; }
.bottom-nav .bottom-link.active{ font-weight: 900; transform: translateY(-1px); }

@media (max-width:680px){
  .page-intro{ flex-direction:column; align-items:stretch; }
  .section-title{ text-align:center; }
  .search{ display:grid; grid-template-columns:1fr auto; }
  .search input{ min-width:0; }
}


/* ===== Responsive cards grid ===== */
.cards.articles{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px; }
@media (max-width:1024px){
  .cards.articles{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width:680px){
  .cards.articles{ grid-template-columns: 1fr; gap:12px; }
  .articles .card{ padding:12px; }
  .articles .card h3{ font-size:17px; }
  .articles .card .excerpt{ font-size:.95rem; }
  .articles .card .meta{ display:grid; grid-template-columns: 1fr; gap:6px; }
  .articles .card .btn{ width:100%; justify-content:center; }
  /* space for bottom nav on phones */
  body{ padding-bottom: 88px; }
}