/* =============================================================
   WORKOVA STOCKS — content.css
   News, Learn, Plus, and content-heavy page styles
   ============================================================= */

.content-page { padding-top: var(--sp-8); padding-bottom: var(--sp-20); }

/* News layout */
.news-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--sp-6);
  align-items: start;
}

.news-list-item {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--border-subtle);
  text-decoration: none;
}

.news-list-item__thumb {
  width: 120px; height: 88px; border-radius: var(--radius-md);
  background: var(--surface-subtle); flex-shrink: 0; overflow: hidden;
}

.news-list-item__content { flex: 1; min-width: 0; }

.news-list-item__headline {
  font-size: var(--type-md); font-weight: 700; color: var(--text-primary);
  line-height: 1.4; margin-bottom: var(--sp-2);
}

.news-list-item__excerpt {
  font-size: var(--type-sm); color: var(--text-secondary); line-height: 1.6; margin-bottom: var(--sp-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.news-list-item__meta {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  font-size: var(--type-xs); color: var(--text-muted);
}

/* Learn hub */
.learn-hero {
  background: var(--surface-subtle);
  padding: var(--sp-16) 0;
  text-align: center;
}

.learn-path-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.learn-path-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.learn-path-card__level {
  display: inline-block; font-size: var(--type-xs); font-weight: 700;
  padding: 3px 10px; border-radius: var(--radius-pill); margin-bottom: var(--sp-3);
}

.learn-path-card__level--beginner { background: var(--clr-gain-bg); color: var(--clr-gain); }
.learn-path-card__level--intermediate { background: var(--clr-neutral-bg); color: var(--clr-neutral); }
.learn-path-card__level--advanced { background: var(--clr-loss-bg); color: var(--clr-loss); }

.learn-path-card__title { font-size: var(--type-lg); font-weight: 700; color: var(--text-primary); margin-bottom: var(--sp-2); }
.learn-path-card__desc { font-size: var(--type-sm); color: var(--text-secondary); line-height: 1.6; margin-bottom: var(--sp-4); }

.learn-path-card__meta {
  display: flex; align-items: center; gap: var(--sp-4);
  font-size: var(--type-xs); color: var(--text-muted); padding-top: var(--sp-4);
  border-top: 1px solid var(--border-subtle);
}

/* Article/blog page */
.article-page { max-width: 720px; margin: 0 auto; padding-top: var(--sp-10); padding-bottom: var(--sp-20); }
.article-hero-img {
  width: 100%; aspect-ratio: 16/9; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--clr-primary-muted), var(--surface-subtle));
  margin-bottom: var(--sp-6);
}
.article-body { font-size: var(--type-lg); line-height: 1.8; color: var(--text-secondary); }
.article-body h2 { font-size: var(--type-xl); font-weight: 700; color: var(--text-primary); margin: var(--sp-8) 0 var(--sp-4); }
.article-body p { margin-bottom: var(--sp-5); }
.article-body ul { margin: var(--sp-4) 0 var(--sp-5) var(--sp-6); }
.article-body li { margin-bottom: var(--sp-2); }

/* Plus upsell page */
.plus-hero {
  background: var(--clr-navy);
  position: relative;
  overflow: hidden;
  padding: var(--sp-20) 0;
  text-align: center;
  color: #fff;
}
.plus-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(37,99,235,0.15) 1px, transparent 1px), linear-gradient(90deg, rgba(37,99,235,0.15) 1px, transparent 1px);
  background-size: 40px 40px;
}
.plus-hero__content { position: relative; z-index: 1; }
.plus-badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: rgba(37,99,235,0.2); border: 1px solid rgba(37,99,235,0.4);
  color: #93B4FF; font-size: var(--type-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 16px; border-radius: var(--radius-pill); margin-bottom: var(--sp-5);
}

@media (max-width: 1023px) {
  .news-layout { grid-template-columns: 1fr; }
}