/* ==========================================================================
   Cohort — Web Participation layout glue.
   Composes existing DS components (events / nom-card / avatars). This file
   adds ONLY the roster-row and tile-hero layout not covered elsewhere.
   ========================================================================== */

/* Roster (Direction 2) — dense membership rows inside one card. */
.cohort-roster {
  padding: var(--space-2) var(--space-5);
}

.cohort-roster__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.cohort-roster__row:last-child {
  border-bottom: none;
}

.cohort-roster__row--joined {
  background: var(--accent-subtle);
  box-shadow: inset 3px 0 0 var(--accent-primary);
  margin: 0 calc(-1 * var(--space-5));
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

.cohort-roster__glyph {
  width: 40px;
  height: 40px;
}

/* Cover-image variant of the glyph (Cards/Roster) — clip the photo to the
   glyph's rounded square instead of showing the default icon. */
.cohort-glyph {
  overflow: hidden;
  padding: 0;
}
.cohort-glyph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cohort-roster__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
}

.cohort-roster__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.cohort-roster__meta {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* Tiles (Direction 3) — shorter hero than the 4/5 editorial portrait. */
.cohort-tile__hero {
  aspect-ratio: 16 / 10;
}

.cohort-tile__name {
  font-size: var(--text-xl);
}

.cohort-tile__byline {
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-4);
}

/* Card shape + name voice + join-button shape follow the soul. */
.cohort-tile, .cohort-card { border-radius: var(--soul-radius-card, 12px); }
.cohort-roster__name, .cohort-tile__name { font-family: var(--soul-font-display); }
.cohort-tile__byline .btn, .cohort-roster__row .btn { border-radius: var(--soul-radius-button, 999px); }