/* =============================================
   CATEGORY.CSS — Article List Page
   ============================================= */

.category-hero {
  background: var(--navy); padding: 44px 0 48px;
  position: relative; overflow: hidden;
}
.category-hero::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(8,145,178,.12), transparent 60%);
}
.category-hero::after {
  content: ''; position: absolute;
  top: -100px; right: -60px;
  width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, rgba(8,145,178,.1), transparent 70%);
}
.category-hero-inner { position: relative; z-index: 1; }
.category-hero-nav {
  margin-bottom: 24px;
}
.category-hero-tag {
  font-size: .75rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal); margin-bottom: 10px;
}
.category-hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  color: #fff; margin-bottom: 10px; line-height: 1.2;
}
.category-hero-desc {
  color: rgba(255,255,255,.58); font-size: .95rem;
  max-width: 500px; line-height: 1.65;
}

/* ─── Toolbar ─── */
.category-body { padding: 40px 0 80px; }
.category-toolbar {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: 28px; flex-wrap: wrap; gap: 12px;
}
.article-count-label { font-size: .88rem; color: var(--text-muted); }
.article-count-label strong { color: var(--text); font-weight: 600; }

/* ─── Article cards ─── */
.articles-grid { display: flex; flex-direction: column; gap: 18px; }

.article-card {
  background: var(--surface); border-radius: var(--radius-md);
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  overflow: hidden; display: flex; cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  animation: fadeInUp .4s var(--ease) both;
}
.article-card:nth-child(1) { animation-delay: .04s; }
.article-card:nth-child(2) { animation-delay: .10s; }
.article-card:nth-child(3) { animation-delay: .16s; }
.article-card:nth-child(4) { animation-delay: .22s; }
.article-card:nth-child(5) { animation-delay: .28s; }
.article-card:nth-child(6) { animation-delay: .34s; }
.article-card:nth-child(n+7) { animation-delay: .40s; }

.article-card:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-md);
}
.article-card:hover .safe-img-wrap img { transform: scale(1.05); }

.article-card-thumb { width: 230px; flex-shrink: 0; }
.article-card-thumb .safe-img-wrap { height: 100%; min-height: 170px; }

.article-card-body {
  padding: 22px 26px; display: flex;
  flex-direction: column; gap: 10px; flex: 1; min-width: 0;
}
.article-card-meta {
  display: flex; align-items: center;
  gap: 10px; flex-wrap: wrap;
}
.article-card-date { font-size: .76rem; color: var(--text-muted); }
.article-card-title {
  font-family: var(--font-serif); font-size: 1.08rem;
  font-weight: 700; color: var(--text); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
  transition: color var(--dur) var(--ease);
}
.article-card:hover .article-card-title { color: var(--teal-dark); }
.article-card-summary {
  font-size: .85rem; color: var(--text-mid); line-height: 1.65;
  display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
}
.article-card-footer {
  margin-top: auto; display: flex;
  align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
}
.read-more {
  font-size: .82rem; color: var(--teal); font-weight: 500;
  display: inline-flex; align-items: center; gap: 4px;
  transition: gap var(--dur) var(--ease);
}
.article-card:hover .read-more { gap: 8px; }

@media (max-width: 640px) {
  .article-card { flex-direction: column; }
  .article-card-thumb { width: 100%; height: 190px; }
  .article-card-body { padding: 16px; }
  .category-body { padding: 28px 0 60px; }
}