/* component-bookable-concept-card.css
 * Theme variants: .c-concept--world, .c-concept--identity, .c-concept--learning
 * Used on theme pages and on /for-companies. Sets the index number in the theme color. */

.c-concept {
  background: var(--color-paper);
  border: var(--border-hairline);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}
.c-concept__idx {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--color-ink-quiet);
}
.c-concept--world    .c-concept__idx { color: var(--color-world); }
.c-concept--identity .c-concept__idx { color: var(--color-identity); }
.c-concept--learning .c-concept__idx { color: var(--color-learning-ink); }

.c-concept__title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
}
.c-concept__body {
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}
.c-concept__meta {
  margin-top: auto;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}
.c-concept__link { margin-top: 12px; align-self: flex-start; }

@container page (min-width: 1024px) {
  .c-concept { padding: 44px; min-height: 320px; }
}