/* Team members (Tickmark). The approved member card: photo on top, name and role on the
   card's own ground. Every value is a theme token; literal numbers are unitless multipliers
   or percentages of a token. */

.tmm { --tmm-cols: 3; --tmm-ratio: var(--ratio-portrait); }
.tmm--cols-2 { --tmm-cols: 2; }
.tmm--cols-4 { --tmm-cols: 4; }
.tmm--square { --tmm-ratio: var(--ratio-square); }
.tmm--landscape { --tmm-ratio: var(--ratio-landscape); }

.tmm-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--tmm-cols), minmax(0, 1fr));
  gap: var(--grid-gap);
}

.tmm .tmm-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  border-radius: var(--card-border-radius);
  background: var(--color-manila);
  color: var(--color-text);
}
.tmm .tmm-card--white { background: var(--color-surface-raised); border: var(--card-border-width) solid var(--card-border-color); }
.tmm .tmm-card--soft { background: var(--color-card-bg); border: var(--card-border-width) solid var(--card-border-color); }
.tmm .tmm-card--dark { background: var(--color-ground-dark); color: var(--color-on-dark); }
.tmm .tmm-card--accent { background: var(--color-accent); color: var(--btn-on-dark-primary-color); }
.bg-dark .tmm .tmm-card--dark { background: var(--color-surface-on-dark); }

.tmm-photo-link { display: block; overflow: hidden; }
.tmm-photo {
  display: block;
  width: 100%;
  aspect-ratio: var(--tmm-ratio);
  object-fit: cover;
  object-position: 50% 20%;
  transition: scale var(--transition-slow);
}
.tmm-photo-link:hover .tmm-photo { scale: var(--card-media-hover-scale); }

.tmm-body { flex: 1; display: flex; flex-direction: column; padding: var(--space-xl) var(--space-2xl) var(--space-2xl); }
.tmm .tmm-card .tmm-name {
  margin: 0;
  font-size: var(--font-size-h4);
  line-height: var(--line-height-snug);
  color: var(--color-heading);
}
.tmm-name a { color: inherit; text-decoration: none; transition: color var(--transition-fast); }
.tmm-name a:hover { color: var(--color-primary); }
.tmm .tmm-card .tmm-role { margin: var(--space-2xs) 0 0; font-size: var(--font-size-sm); color: var(--color-muted); }
.tmm .tmm-card .tmm-bio { margin: var(--space-lg) 0 0; font-size: var(--font-size-sm); line-height: var(--line-height-normal); color: var(--color-text); }

.tmm-contact { display: flex; gap: var(--space-md); margin-top: auto; padding-top: var(--space-xl); }
.tmm-icon {
  display: grid;
  place-items: center;
  width: var(--btn-height-sm);
  height: var(--btn-height-sm);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  color: var(--color-primary);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.tmm-icon svg { width: var(--icon-size-menu); height: var(--icon-size-menu); }
.tmm-icon:hover { background: var(--color-primary); color: var(--btn-primary-color); }
.tmm-icon:focus-visible { outline: var(--focus-ring); outline-offset: var(--space-2xs); }
.tmm-card--white .tmm-icon,
.tmm-card--soft .tmm-icon { background: var(--color-manila); }

.tmm .tmm-card--dark .tmm-name { color: var(--color-background); }
.tmm .tmm-card--dark .tmm-role,
.tmm .tmm-card--dark .tmm-bio { color: var(--color-muted-on-dark); }
.tmm .tmm-card--dark .tmm-name a:hover { color: var(--color-accent); }
.tmm-card--dark .tmm-icon { background: var(--color-accent); color: var(--btn-on-dark-primary-color); }
.tmm-card--dark .tmm-icon:hover { background: var(--color-accent-hover); color: var(--btn-on-dark-primary-color); }
.tmm .tmm-card--accent .tmm-name,
.tmm .tmm-card--accent .tmm-role,
.tmm .tmm-card--accent .tmm-bio { color: var(--btn-on-dark-primary-color); }
.tmm-card--accent .tmm-icon { background: var(--btn-on-dark-primary-color); color: var(--color-accent); }
.tmm-card--accent .tmm-icon:hover { background: var(--color-ground-dark); color: var(--color-accent); }

.bg-dark .tmm .tm-head p { color: var(--color-muted-on-dark); }

/* Cards in a row share their row lines: photo, name, role, bio and contact sit at the same height
   in every card, whatever the length of the role or bio. */
@supports (grid-template-rows: subgrid) {
  .tmm .tmm-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
  .tmm-card > .tmm-photo-link, .tmm-card > .tmm-photo { grid-row: 1; }
  .tmm-card > .tmm-body { grid-row: 2 / span 4; display: grid; grid-template-rows: subgrid; row-gap: 0; }
  .tmm-body > .tmm-name { grid-row: 1; }
  .tmm-body > .tmm-role { grid-row: 2; }
  .tmm-body > .tmm-bio { grid-row: 3; }
  .tmm-body > .tmm-contact { grid-row: 4; align-self: end; }
}

@media (max-width: 1100px) {
  .tmm--cols-3, .tmm--cols-4 { --tmm-cols: 2; }
}
@media (max-width: 767px) {
  .tmm--cols-2, .tmm--cols-3, .tmm--cols-4 { --tmm-cols: 2; }
  .tmm-grid { gap: var(--grid-gap-mobile); }
  .tmm-body { padding: var(--space-lg) var(--space-lg) var(--space-xl); }
  .tmm .tmm-card .tmm-name { font-size: var(--font-size-body); }
  .tmm .tmm-card .tmm-role { font-size: var(--font-size-xs); }
  .tmm .tmm-card .tmm-bio { display: none; }
  .tmm-contact { gap: var(--space-sm); }
  .tmm-icon { width: var(--avatar-lg); height: var(--avatar-lg); }
}