/* ── Home page: news card typography & text styles ─────────────── */

/* Category badge on main-card image overlay */
.news-card .news-cat-badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.22rem 0.6rem;
  border-radius: 20px;
  background: var(--accent-color);
  color: #fff;
  line-height: 1.4;
}

/* Meta row — shared between main and compact cards */
.news-card .news-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.7rem;
  margin-bottom: 0.55rem;
}
.news-card .news-meta span {
  font-size: 0.74rem;
  color: color-mix(in srgb, var(--default-color), transparent 42%);
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  white-space: nowrap;
}
.news-card .news-meta i {
  font-size: 0.7rem;
  color: var(--accent-color);
  opacity: 0.75;
}

/* Category pill label in compact cards */
.news-card .news-cat-text {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color), transparent 87%);
  padding: 0.15rem 0.5rem;
  border-radius: 20px;
  line-height: 1.4;
}

/* ── Main card ── */
.news-card-main .card-title {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.38;
  letter-spacing: -0.01em;
  margin-bottom: 0.6rem;
}
.news-card-main .card-title a {
  color: var(--heading-color);
  text-decoration: none;
  transition: color 0.2s ease;
}
.news-card-main .card-title a:hover {
  color: var(--accent-color);
}
.news-card-main .card-text {
  font-size: 0.93rem;
  line-height: 1.68;
  color: color-mix(in srgb, var(--default-color), transparent 22%);
  margin-bottom: 1rem;
}

/* ── Compact cards ── */
.news-card-compact .card-title {
  font-size: 0.97rem;
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: -0.005em;
  margin-bottom: 0.35rem;
}
.news-card-compact .card-title a {
  color: var(--heading-color);
  text-decoration: none;
  transition: color 0.2s ease;
}
.news-card-compact .card-title a:hover {
  color: var(--accent-color);
}
.news-card-compact .card-text {
  font-size: 0.83rem;
  line-height: 1.62;
  color: color-mix(in srgb, var(--default-color), transparent 28%);
  margin-bottom: 0.45rem;
  flex-grow: 1;
}

/* Footer row (views + shares) in compact cards */
.news-card .news-footer {
  padding-top: 0.45rem;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--default-color), transparent 42%);
  flex-wrap: wrap;
}
.news-card .news-footer span {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  white-space: nowrap;
}
.news-card .news-footer i {
  font-size: 0.68rem;
  color: var(--accent-color);
  opacity: 0.75;
}

/* "Read more" animated arrow link */
.news-card .news-readmore {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent-color);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  transition: gap 0.22s ease;
}
.news-card .news-readmore i {
  font-size: 0.82rem;
  transition: transform 0.22s ease;
}
.news-card .news-readmore:hover {
  gap: 0.55rem;
}
.news-card .news-readmore:hover i {
  transform: translateX(4px);
}