/* =========================================================================
 * CHTTI Course Completed page — dynamic clusters rendered by child-theme
 * shortcodes ([chtti_certificate_card], [chtti_course_stats]). The surrounding
 * hero + CTA cards are built in Elementor. All values use design tokens.
 * Reuses the global .chtti-btn styles from student-dashboard.css.
 * ====================================================================== */

/* --- Certificate card ------------------------------------------------ */
.chtti-cc-cert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  background: var(--chtti-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-4) var(--space-5);
}
.chtti-cc-cert__date {
  font-weight: 500;
  color: color-mix(in srgb, var(--chtti-dark) 75%, transparent);
}
.chtti-cc-cert__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.chtti-cc-cert .chtti-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* --- Stat cards ------------------------------------------------------ */
.chtti-cc-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.chtti-cc-stat {
  background: var(--chtti-light);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-align: center;
}
.chtti-cc-stat__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h1);
  line-height: 1;
  color: var(--chtti-dark);
  margin-bottom: var(--space-1);
}
.chtti-cc-stat__num--teal {
  color: var(--chtti-teal);
}
.chtti-cc-stat__label {
  font-size: var(--text-small);
  color: color-mix(in srgb, var(--chtti-dark) 70%, transparent);
}

/* --- Responsive ------------------------------------------------------ */
@media (max-width: 600px) {
  .chtti-cc-stats {
    grid-template-columns: 1fr;
  }
  .chtti-cc-cert {
    justify-content: center;
    text-align: center;
  }
}