/* ---- Topic cards (ERP / AI / Cloud / Career row) ---- */
.topic-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.topic-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.topic-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  flex-shrink: 0;
  font-size: var(--fs-lg);
}

.topic-card--erp .topic-card__icon { background: var(--color-secondary); }
.topic-card--ai .topic-card__icon { background: var(--color-ai); }
.topic-card--cloud .topic-card__icon { background: var(--color-success); }
.topic-card--career .topic-card__icon { background: var(--color-accent); }

.topic-card__title { font-size: var(--fs-md); margin-bottom: var(--space-1); }
.topic-card__desc { font-size: var(--fs-sm); margin-bottom: var(--space-2); }
.topic-card__link { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-secondary); }
.topic-card__link:hover { color: var(--color-primary); }

/* ---- Small topic pills (Explore by Topic block) ---- */
.pill-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.pill-card:hover {
  border-color: var(--color-secondary);
  background: var(--color-surface);
}

.pill-card__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  color: var(--color-secondary);
  flex-shrink: 0;
}

.pill-card__label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.pill-card__count { font-size: var(--fs-xs); color: var(--color-text-muted); }

/* ---- Article / blog card ---- */
.article-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.article-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.article-card__image {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
  background: var(--color-surface);
}

.article-card__body { padding: var(--space-4); }

.article-card__tag {
  display: inline-block;
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-secondary);
  background: rgba(25, 118, 210, 0.1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-2);
}

.article-card__title {
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
  margin-bottom: var(--space-2);
}

.article-card__meta {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

/* ---- Resource / certification card ---- */
.resource-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-align: center;
  background: var(--color-white);
}

.resource-card__icon {
  width: 44px;
  height: 44px;
  margin-inline: auto;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-secondary);
}

.resource-card__title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.resource-card__subtitle { font-size: var(--fs-xs); color: var(--color-text-muted); }

/* ---- Job card ---- */
.job-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border-soft);
}

.job-card:last-child { border-bottom: none; }

.job-card__title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.job-card__meta { font-size: var(--fs-xs); color: var(--color-text-muted); }

.job-card__logo {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--color-text-muted);
}

/* ---- Homepage panel layout (Explore/Paths/Trending, Jobs/Community rows) ---- */
.homepage-split {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.homepage-split--2 {
  grid-template-columns: repeat(2, 1fr);
}

.homepage-panel {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

/* ---- Article row (used in Trending Articles panel) ---- */
.article-row {
  display: flex;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-border-soft);
}

.article-row:last-child { border-bottom: none; }

.article-row__thumb {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-surface);
}

.article-row__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-row__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  margin-block: var(--space-1);
}

/* ---- Community discussion card ---- */
.discussion-card {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border-soft);
}

.discussion-card:last-child { border-bottom: none; }

.discussion-card__title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); margin-bottom: var(--space-1); }
.discussion-card__meta { font-size: var(--fs-xs); color: var(--color-text-muted); }

/* ---- Learning path progress row ---- */
.path-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border-soft);
}

.path-row:last-child { border-bottom: none; }

.path-row__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.path-row__content { flex: 1; min-width: 0; }
.path-row__title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); margin-bottom: var(--space-2); }

.progress-bar {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-border-soft);
  overflow: hidden;
}

.progress-bar__fill {
  height: 100%;
  background: var(--color-secondary);
  border-radius: var(--radius-full);
}

.path-row__level {
  font-size: 10px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  padding: 3px var(--space-2);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.path-row__level--beginner { background: rgba(34, 197, 94, 0.12); color: #16803C; }
.path-row__level--intermediate { background: rgba(245, 158, 11, 0.14); color: #B45309; }
.path-row__level--advanced { background: rgba(239, 68, 68, 0.12); color: #B91C1C; }

/* ---- Article row (used inside the Trending Articles homepage panel) ---- */
.article-row {
  display: flex;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-border-soft);
}

.article-row:last-child { border-bottom: none; }

.article-row__thumb {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-surface);
}

.article-row__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-row__body { min-width: 0; }
.article-row__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  margin: var(--space-1) 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Category card (Explore Top Categories grid, CPT-driven) ---- */
.category-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.category-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.category-card__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  margin-bottom: var(--space-3);
}

.category-card--secondary .category-card__icon { background: var(--color-secondary); }
.category-card--ai .category-card__icon { background: var(--color-ai); }
.category-card--success .category-card__icon { background: var(--color-success); }
.category-card--accent .category-card__icon { background: var(--color-accent); }

.category-card__title { font-size: var(--fs-md); margin-bottom: var(--space-3); }

.category-card__list {
  margin-bottom: var(--space-4);
}

.category-card__list li {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  padding-block: 2px;
}

.category-card__link {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-secondary);
}

.category-card__link:hover { color: var(--color-primary); }

/* article card image overlay tag (Latest Articles grid) */
.article-card__image-wrap {
  position: relative;
  display: block;
}

.article-card__image--placeholder {
  display: block;
  aspect-ratio: 16 / 9;
  width: 100%;
  background: linear-gradient(135deg, var(--color-surface), var(--color-border-soft));
}

.article-card__tag--overlay {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  background: var(--color-ink);
  color: var(--color-white);
}

/* ---- Job card, full list variant (Jobs page) ---- */
.job-card--full {
  padding-block: var(--space-5);
}

.job-list-full {
  border-top: 1px solid var(--color-border-soft);
}

/* ---- Forum row (Community page) ---- */
.forum-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.forum-row:hover {
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-sm);
}

.forum-row__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.forum-row__body { flex: 1; min-width: 0; }
.forum-row__title { font-size: var(--fs-md); font-weight: var(--fw-semibold); margin-bottom: 2px; }
.forum-row__stats { text-align: right; flex-shrink: 0; line-height: 1.4; }

/* ---- ERP System card (Explore ERP Systems row) ---- */
.erp-system-grid { grid-template-columns: repeat(6, 1fr); }

.erp-system-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  position: relative;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.erp-system-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.erp-system-card__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
}

.erp-system-card--secondary .erp-system-card__icon { background: var(--color-secondary); }
.erp-system-card--ai .erp-system-card__icon { background: var(--color-ai); }
.erp-system-card--success .erp-system-card__icon { background: var(--color-success); }
.erp-system-card--accent .erp-system-card__icon { background: var(--color-accent); }

.erp-system-card__title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.erp-system-card__desc { font-size: var(--fs-xs); color: var(--color-text-muted); }
.erp-system-card__arrow {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  color: var(--color-text-muted);
  transition: transform var(--transition-fast), color var(--transition-fast);
}
.erp-system-card:hover .erp-system-card__arrow { transform: translateX(3px); color: var(--color-secondary); }

/* ---- Tutorial card (Latest Tutorials grid) ---- */
.tutorial-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-border);
}

.tutorial-card__image-wrap { position: relative; display: block; }

.tutorial-card__image {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: linear-gradient(135deg, var(--color-hero-dark-1), var(--color-hero-dark-2));
}

.tutorial-card__image--placeholder { display: block; }

.tutorial-card__tag {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  font-size: 10px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-secondary);
  color: var(--color-white);
}

.tutorial-card__bookmark {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  background: rgba(11, 18, 32, 0.6);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tutorial-card__body { padding: var(--space-4); }
.tutorial-card__title { font-size: var(--fs-base); line-height: var(--lh-snug); margin-bottom: var(--space-2); }
.tutorial-card__title a:hover { color: var(--color-secondary); }
.tutorial-card__meta { font-size: var(--fs-xs); color: var(--color-text-muted); }

.tutorial-grid.grid--2 { grid-template-columns: repeat(2, 1fr); }

/* ---- Path card (Learning Paths row) ---- */
.path-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

.path-card:hover { box-shadow: var(--shadow-md); }

.path-card__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-1);
}

.path-card__title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }

/* ---- Certification roadmap rows ---- */
.cert-list { display: flex; flex-direction: column; gap: var(--space-1); }

.cert-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-soft);
}
.cert-row:last-child { border-bottom: none; }

.cert-row__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  flex-shrink: 0;
}
.cert-row__icon--secondary { background: var(--color-secondary); }
.cert-row__icon--ai { background: var(--color-ai); }
.cert-row__icon--success { background: var(--color-success); }
.cert-row__icon--accent { background: var(--color-accent); }

.cert-row__content { flex: 1; min-width: 0; }
.cert-row__title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.cert-row__progress { width: 90px; text-align: right; }
.cert-row__progress .progress-bar { margin-bottom: 2px; }

/* ---- Top Resources icon row ---- */
.top-resource-grid { grid-template-columns: repeat(6, 1fr); }

.top-resource-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  text-align: left;
}

.top-resource-card:hover { border-color: var(--color-secondary); box-shadow: var(--shadow-sm); }

.top-resource-card__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.top-resource-card__title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }

/* ---- Job card, full variant (avatar + pills) ---- */
.job-card--full {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border-soft);
}
.job-card--full:last-child { border-bottom: none; }

.job-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  flex-shrink: 0;
}
.job-card__avatar--secondary { background: var(--color-secondary); }
.job-card__avatar--success { background: var(--color-success); }
.job-card__avatar--accent { background: var(--color-accent); }
.job-card__avatar--ai { background: var(--color-ai); }

.job-card__info { flex: 1; min-width: 0; }
.job-card__tags { display: flex; gap: var(--space-2); flex-shrink: 0; }
.job-card__pill {
  font-size: var(--fs-xs);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.job-card__posted { flex-shrink: 0; white-space: nowrap; }

/* ---- Community spotlight ---- */
.community-spotlight__stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}
.community-spotlight__stat { text-align: center; }
.community-spotlight__stat-number {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
}

.cs-recent-label { font-weight: var(--fw-semibold); margin-bottom: var(--space-3); }

.discussion-list { display: flex; flex-direction: column; margin-bottom: var(--space-4); }
.discussion-row { padding-block: var(--space-3); border-bottom: 1px solid var(--color-border-soft); }
.discussion-row:last-child { border-bottom: none; }
.discussion-row__title { display: block; font-size: var(--fs-sm); font-weight: var(--fw-medium); margin-bottom: 2px; }
.discussion-row:hover .discussion-row__title { color: var(--color-secondary); }

/* ---- Comment list with report/block actions ---- */
.comment-item__row { display: flex; gap: var(--space-3); }
.comment-item__row img { border-radius: var(--radius-full); flex-shrink: 0; }
.comment-item__body { flex: 1; min-width: 0; }
.comment-item__meta { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); }
.comment-item__text { font-size: var(--fs-sm); color: var(--color-ink-soft); margin-bottom: var(--space-2); }

.comment-item__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.report-block-form {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.report-block-form__reason {
  width: 140px;
  padding: 2px var(--space-2);
  font-size: var(--fs-xs);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.report-block-form__link {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.report-block-form__link:hover { color: var(--color-secondary); }

/* ---- Account page: manage-list (My Projects / My Portfolio) ---- */
.manage-list { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-4); }
.manage-list__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border-soft);
  font-size: var(--fs-sm);
}
.manage-list__row:last-child { border-bottom: none; }
.manage-list__row a { color: var(--color-ink); }
.manage-list__row a:hover { color: var(--color-secondary); }
.manage-list__delete {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 var(--space-2);
}
.manage-list__delete:hover { color: #B91C1C; }