/* =========================================================
   TextBases Card Component System V1
   Shared card primitives for tools, articles, FAQ, examples,
   related sections, stats, and troubleshooting.
   ========================================================= */

.tb-card,
.tb-panel,
.tb-mini-card,
.tb-callout,
.tb-stat-card,
.tb-related-card,
.tb-faq-item,
.tb-tool-cta-card,
.tb-example-card {
  position: relative;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--tb-border);
  border-radius: var(--tb-radius-xl);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
    var(--tb-surface);
  box-shadow: var(--tb-shadow-sm);
  overflow: hidden;
}

.tb-card,
.tb-mini-card,
.tb-callout,
.tb-faq-item,
.tb-tool-cta-card,
.tb-example-card {
  padding: var(--tb-card-pad);
}

.tb-card:hover,
.tb-mini-card:hover,
.tb-callout:hover,
.tb-related-card:hover {
  border-color: var(--tb-border-strong);
}

.tb-mini-card strong,
.tb-callout strong,
.tb-related-card strong,
.tb-faq-item h3,
.tb-stat-card strong {
  color: var(--tb-text);
}

.tb-mini-card p,
.tb-callout p,
.tb-related-card p,
.tb-faq-item p {
  margin-bottom: 0;
}

.tb-grid-2,
.tb-grid-3,
.tb-related-grid,
.tb-stats-grid {
  display: grid;
  gap: 16px;
  min-width: 0;
}

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

.tb-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tb-related-title {
  margin-top: var(--tb-section-gap);
}

.tb-related-title p {
  max-width: 720px;
}

.tb-related-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 16px;
}

.tb-related-card {
  display: grid;
  gap: 8px;
  padding: 22px;
  color: inherit;
  text-decoration: none;
}

.tb-faq {
  display: grid;
  gap: 14px;
}

.tb-stat-card {
  padding: 18px;
}

.tb-stat-card strong {
  display: block;
  font-size: clamp(1.35rem, 3vw, 2rem);
  letter-spacing: -0.04em;
}

.tb-stat-card span {
  color: var(--tb-muted);
}

@media (max-width: 820px) {
  .tb-grid-2,
  .tb-grid-3,
  .tb-related-grid,
  .tb-stats-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}