/* Article list page. All rules are scoped so the shared Halo header/footer keep their global styling. */
.news-page {
  --news-blue: #4d6ff9;
  --news-blue-dark: #3b5de0;
  --news-blue-light: #ecf1ff;
  --news-heading: #0f172a;
  --news-body: #334155;
  --news-muted: #64748b;
  --news-light: #94a3b8;
  --news-border: #F6F8FE;
  --news-card: #fff;
  --news-shadow: 0 10px 30px rgba(78, 100, 150, .06), 0 2px 8px rgba(78, 100, 150, .03);
  --news-shadow-hover: 0 14px 34px rgba(77, 111, 249, .10), 0 3px 10px rgba(78, 100, 150, .04);
  min-height: 100vh;
  padding: 76px 0 24px;
  background: #ffffff;
  color: var(--news-body);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Noto Sans SC", sans-serif;
  font-size: 14px;
  line-height: 1.6;
}
.news-page *, .news-page *::before, .news-page *::after { box-sizing: border-box; }
.news-container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 12px; }
.news-page button, .news-page input, .news-page select { font: inherit; }
.news-page button { cursor: pointer; }
.news-page .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Hero */
.hero-banner-section { position: relative; min-height: 380px; padding: 96px 0 120px; background: var(--news-hero-image, url('../images/article-support-banner-bg.png')) center center / cover no-repeat; overflow: hidden; }
.banner-content { max-width: 600px; }
html.enterprise-list-motion-pending .news-page .banner-content,
html.enterprise-list-motion-pending .news-page .filter-card-wrapper,
html.enterprise-list-motion-pending .news-page .sidebar-col,
html.enterprise-list-motion-pending .news-page .articles-col { opacity: 0; transform: translateY(32px) scale(.985); }
.banner-sub { margin-bottom: 10px; color: var(--news-light); font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.banner-title { margin: 0 0 14px; color: var(--news-heading); font-size: 38px; font-weight: 800; letter-spacing: 0; line-height: 1.25; }
.banner-desc { margin: 0; color: var(--news-muted); font-size: 16px; line-height: 1.65; }

/* Floating controls */
.filter-card-wrapper { position: relative; z-index: 2; width: 100%; max-width: 1400px; margin: -36px auto 0; padding: 0 12px; }
.filter-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; padding: 10px 16px 10px 24px; border: 1px solid var(--news-border); border-radius: 30px; background: #fff; box-shadow: 0 10px 30px rgba(77,111,249,.12); }
.search-input-group { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.search-icon { flex: 0 0 auto; color: var(--news-light); }
.search-input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--news-heading); font-size: 14px; }
.search-input::placeholder { color: var(--news-light); }
.filter-controls-group { display: flex; align-items: center; gap: 12px; }
.select-pill { min-width: 116px; padding: 9px 34px 9px 14px; border: 1px solid var(--news-border); border-radius: 20px; outline: 0; appearance: none; color: var(--news-body); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") right 14px center no-repeat; }
.select-pill:focus { border-color: var(--news-blue); box-shadow: 0 0 0 3px rgba(77,111,249,.1); }
.view-mode-buttons { display: flex; padding: 3px; border: 1px solid var(--news-border); border-radius: 10px; background: #f8fafc; }
.view-btn { display: grid; place-items: center; width: 32px; height: 30px; border: 0; border-radius: 7px; color: var(--news-light); background: transparent; }
.view-btn.active { color: var(--news-blue); background: #fff; box-shadow: 0 2px 6px rgba(15,23,42,.08); }

/* Main content */
.main-content-layout { display: flex; align-items: flex-start; gap: 28px; margin: 40px 0 12px; }
.sidebar-col { display: flex; flex: 0 0 260px; flex-direction: column; gap: 20px; }
.sidebar-card, .sidebar-help-card { padding: 20px; border: 1px solid var(--news-border); border-radius: 12px; background: #fff; box-shadow: var(--news-shadow); }
.sidebar-card-title { margin: 0 0 16px; color: var(--news-heading); font-size: 15px; font-weight: 700; }
.cat-list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.cat-row { display: flex; align-items: center; min-width: 0; border-radius: 8px; }
.cat-row:hover, .cat-item.active > .cat-row { color: var(--news-blue); background: var(--news-blue-light); }
.cat-toggle, .cat-toggle-placeholder { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 38px; border: 0; color: var(--news-light); background: transparent; }
.cat-toggle { transition: transform .2s ease, color .2s ease; }
.cat-toggle[aria-expanded="true"] { color: var(--news-blue); transform: rotate(90deg); }
.cat-toggle:hover { color: var(--news-blue); }
.cat-filter { display: flex; align-items: center; min-width: 0; flex: 1; padding: 10px 0 10px 14px; border: 0; color: var(--news-body); background: transparent; text-align: left; text-decoration: none; }
.cat-filter:hover, .cat-item.active > .cat-row .cat-filter { color: var(--news-blue); }
.cat-item.active > .cat-row .cat-filter { font-weight: 600; }
.cat-item-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cat-icon { width: 15px; color: var(--news-light); }
.cat-row:hover .cat-icon, .cat-item.active .cat-icon { color: var(--news-blue); }
.cat-sub-list { display: none; margin: 2px 0 2px 14px; padding-left: 10px; border-left: 1px solid var(--news-border); }
.cat-item.is-expanded > .cat-sub-list { display: flex; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-pill { padding: 6px 12px; border: 0; border-radius: 6px; color: var(--news-body); background: #f1f5f9; font-size: 12px; text-decoration: none; }
.tag-pill:hover, .tag-pill.active { color: var(--news-blue); background: var(--news-blue-light); }
.sidebar-help-card { display: flex; flex-direction: column; align-items: center; padding: 24px 18px; text-align: center; }
.sidebar-help-icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 14px; border-radius: 50%; color: var(--news-blue); background: var(--news-blue-light); font-size: 26px; }
.sidebar-help-title { margin: 0 0 6px; color: var(--news-heading); font-size: 16px; font-weight: 700; }
.sidebar-help-desc { margin: 0 0 16px; color: var(--news-muted); font-size: 12px; line-height: 1.5; }
.sidebar-help-btn { width: 100%; padding: 8px 0; border: 1.5px solid var(--news-blue); border-radius: 20px; color: var(--news-blue); background: #fff; font-size: 13px; font-weight: 600; text-decoration: none; }
.sidebar-help-btn:hover { color: #fff; background: var(--news-blue); }
.articles-col { display: flex; flex: 1; min-width: 0; flex-direction: column; }
.articles-count-header { margin-bottom: 16px; color: var(--news-muted); font-size: 14px; font-weight: 600; }
.articles-count-header strong { color: var(--news-heading); }
.article-cards-list { display: flex; flex-direction: column; gap: 16px; }
.article-item-card { position: relative; display: flex; gap: 24px; padding: 24px; border: 1px solid var(--news-border); border-radius: 12px; background: #fff; box-shadow: var(--news-shadow); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.article-item-card:hover { border-color: #c7d5ff; box-shadow: var(--news-shadow-hover); transform: translateY(-2px); }
.article-thumb { display: grid; place-items: center; flex: 0 0 160px; width: 160px; height: 112px; overflow: hidden; border-radius: 8px; background: #f1f5f9; }
.article-thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb-graphic-box { display: grid; place-items: center; width: 100%; height: 100%; color: var(--news-blue); background: linear-gradient(135deg, #ecf1ff, #e2ebff); font-size: 32px; }
.article-info { display: flex; min-width: 0; flex: 1; flex-direction: column; justify-content: space-between; }
.article-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.article-item-title { margin: 0; color: var(--news-heading); font-size: 17px; font-weight: 700; line-height: 1.4; }
.article-item-card:hover .article-item-title { color: var(--news-blue); }
.article-item-date { margin-top: 2px; color: var(--news-light); font-size: 12px; white-space: nowrap; }
.article-item-desc { display: -webkit-box; overflow: hidden; margin: 0 0 12px; color: var(--news-muted); font-size: 13px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.article-item-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.article-tags-group { display: flex; flex-wrap: wrap; gap: 8px; }
.article-tag-pill { padding: 3px 8px; border-radius: 4px; color: var(--news-blue); background: var(--news-blue-light); font-size: 11px; }
.article-tag-pill.muted { color: var(--news-muted); background: #f1f5f9; }
.article-views { display: flex; align-items: center; gap: 4px; color: var(--news-light); font-size: 12px; white-space: nowrap; }
.filter-token, .filter-category-token { display: none; }
.article-item-card[hidden] { display: none; }

/* Grid mode and states */
.article-cards-list.grid-mode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.article-cards-list.grid-mode .article-item-card { flex-direction: column; gap: 0; height: 100%; padding: 0; overflow: hidden; }
.article-cards-list.grid-mode .article-thumb { width: 100%; height: 160px; border-radius: 0; }
.article-cards-list.grid-mode .article-info { padding: 18px 20px; }
.article-cards-list.grid-mode .article-title-row { flex-direction: column; gap: 4px; }
.article-cards-list.grid-mode .article-item-title { font-size: 15px; }
.news-empty-state, .news-filter-empty { padding: 72px 24px; border: 1px solid var(--news-border); border-radius: 12px; background: #fff; color: var(--news-muted); text-align: center; }
.news-empty-state i, .news-filter-empty i { margin-bottom: 14px; color: var(--news-blue); font-size: 34px; }
.news-empty-state h2, .news-filter-empty h2 { margin: 0 0 6px; color: var(--news-heading); font-size: 20px; }
.news-empty-state p, .news-filter-empty p { margin: 0; }
.pagination-container { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 36px; }
.news-page .main-content-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); column-gap: 28px; row-gap: 36px; }
.news-page .sidebar-col { grid-column: 1; grid-row: 1 / span 2; }
.news-page .articles-col { grid-column: 2; grid-row: 1; }
.news-page .pagination-container { grid-column: 2; grid-row: 2; margin-top: 0; }
.page-nav-btn, .page-num-btn { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--news-border); border-radius: 8px; color: var(--news-blue); background: #fff; text-decoration: none; }
.page-nav-btn:hover, .page-num-btn:hover { border-color: var(--news-blue); background: var(--news-blue-light); }
.page-num-btn.active { border-color: var(--news-blue); color: #fff; background: var(--news-blue); box-shadow: 0 4px 10px rgba(77,111,249,.25); }
.page-dots { color: var(--news-light); }

/* Entrance animation, replayed when filters change. */
.news-page [data-news-reveal], .news-page .article-item-card { opacity: 1; }
.news-page [data-news-reveal].is-revealed, .news-page .article-item-card.is-revealed { opacity: 1; transform: none; }
.news-page .article-item-card.is-revealed { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; transition-delay: 0s; }
.news-page .article-item-card.is-revealed:hover { border-color: #c7d5ff; box-shadow: var(--news-shadow-hover); transform: translateY(-2px); }
.news-page .article-item-card.is-filter-entering { animation: news-filter-enter .5s cubic-bezier(.22,1,.36,1) backwards; animation-delay: var(--news-filter-delay, 0ms); }
.news-page .is-reveal-entering { animation: news-filter-enter .72s cubic-bezier(.22,1,.36,1) both; animation-delay: var(--news-reveal-delay, 0ms); }
.news-page .hero-banner-section.is-reveal-entering { animation: none; }
.news-page .hero-banner-section.is-reveal-entering .banner-content { animation: news-hero-enter .78s cubic-bezier(.22,1,.36,1) both; animation-delay: var(--news-reveal-delay, 0ms); }
@keyframes news-filter-enter { from { opacity: 0; transform: translateY(32px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes news-hero-enter { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .news-page [data-news-reveal], .news-page .article-item-card, .news-page .is-reveal-entering, .news-page .article-item-card.is-filter-entering { opacity: 1; transform: none; animation: none; transition: none; } }

@media (max-width: 992px) {
  .main-content-layout { flex-direction: column; }
  .news-page .main-content-layout { display: flex; gap: 22px; }
  .news-page .sidebar-col, .news-page .articles-col, .news-page .pagination-container { grid-column: auto; grid-row: auto; }
  .news-page .pagination-container { margin-top: 14px; }
  .sidebar-col { width: 100%; flex-basis: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sidebar-help-card { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .hero-banner-section { background-image: var(--news-hero-image-mobile, var(--news-hero-image, url('../images/article-support-banner-bg.png'))); }
  .news-page { padding-top: 76px; }
  .news-container { padding: 0 16px; }
  .hero-banner-section { min-height: 300px; padding: 72px 0 96px; }
  .banner-title { font-size: 30px; }
  .filter-card-wrapper { margin-top: -28px; padding: 0 16px; }
  .filter-card { flex-direction: column; align-items: stretch; padding: 14px 16px; border-radius: 18px; }
  .filter-controls-group { justify-content: space-between; }
  .select-pill { min-width: 0; flex: 1; }
  .main-content-layout { gap: 22px; margin-top: 28px; }
  .sidebar-col { display: flex; }
  .article-cards-list.grid-mode { grid-template-columns: 1fr; }
  .article-item-card { flex-direction: column; gap: 14px; padding: 14px; }
  .article-thumb { width: 100%; height: 150px; flex-basis: auto; }
  .article-title-row { flex-direction: column; gap: 4px; }
  .article-item-footer { align-items: flex-end; }
}