/* team — the people: a grid, a strip or a list of them; its card, _person_card.twig, at the end. */

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap, 1.4rem);
}

/* columns — how many in a row, the same however many people there are */
.team--columns-2 .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.team--columns-3 .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 960px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 960px) {
  .team--columns-3 .team-grid { grid-template-columns: repeat(2, 1fr); }
}

/* list — a row a person: a long roster where a grid of faces turns into wallpaper. */
.team--list .team-grid { grid-template-columns: 1fr; gap: 0; max-width: 56rem; border-top: 1px solid var(--line); }

/* strip — one scrolling row of faces; scroll-snap, no autoplay. */
.team--strip .team-grid {
  display: flex;
  gap: 1.2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* A scroller clips everything outside its box, card shadows included, so
     the box is grown by the shadow's reach and pulled back by the same
     margin — the cards stay where they were, the shadow gets room. */
  padding: 1rem 1rem 2rem;
  margin: -1rem -1rem -1.4rem;
  scroll-padding-inline: 1rem;
  scrollbar-width: thin;
}

/* A card grows to fill the row while the row has room — four people ended at ~80 % of a wide page with the rest
   empty — and keeps its width once they scroll; never wider than a face needs. */
.team--strip .team-grid .person { flex: 1 0 min(15rem, 60vw); max-width: 24rem; scroll-snap-align: start; }

/* ---------- _person_card — one person: the portrait, the name, the role, what they do, and «Book». ---------- */
.person { position: relative; display: flex; flex-direction: column; gap: .8rem; min-width: 0; }

.person__photo { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--hover-wash); }

.person__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; transition: transform .35s ease; }

.person:hover .person__photo img { transform: scale(1.03); }

.person__text { display: grid; gap: .3rem; }

.person__name { margin: 0; font-size: 1.2rem; font-weight: 600; line-height: 1.25; }

.person__link { color: var(--ink); text-decoration: none; }

.person__link::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius); }

.person:hover .person__link { color: var(--mark, var(--primary)); }

.person:has(.person__link:focus-visible) { outline: 2px solid var(--mark, var(--primary)); outline-offset: 4px; border-radius: var(--radius); }

.person__link:focus-visible { outline: none; }

.person__role { margin: 0; font-size: .93rem; color: var(--body-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.person__works { margin: 0; font-size: .82rem; color: var(--muted); }

/* At the card's foot: a role of one line and one of two put the buttons of a row at different heights. */
.person__book { position: relative; z-index: 1; align-self: flex-start; margin-top: auto; display: inline-flex; align-items: center; gap: .45rem; min-height: 2.4rem; padding: 0 1rem; border: 1px solid var(--card-line); border-radius: 999px; color: var(--ink); font-size: .9rem; font-weight: 500; text-decoration: none; }

.person__book svg { width: 1.05rem; height: 1.05rem; color: var(--mark, var(--primary)); }

.person__book:hover { border-color: var(--mark, var(--primary)); color: var(--mark, var(--primary)); }

/* No photo: a card of type — a stroke, the name large; no letter in a circle. */
.person.is-text { padding: 1.5rem; border: var(--card-border, 1px solid var(--line)); border-radius: var(--radius); background: var(--card-bg, var(--surface)); box-shadow: var(--card-shadow, none); }

.person.is-text::before { content: ''; display: block; width: 2.25rem; height: 3px; border-radius: 2px; background: var(--mark, var(--primary)); }

.person.is-text .person__name { font-size: 1.45rem; }

.person.is-text .person__role { -webkit-line-clamp: 3; }

/* A row of a list: a small portrait, the name and the whole role, «Book» at the end. */
.team--list .person { flex-direction: row; align-items: center; gap: 1.2rem; padding: 1.1rem 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }

.team--list .person.is-text { padding: 1.1rem 0; border: 0; border-bottom: 1px solid var(--line); background: none; box-shadow: none; }

/* rows, not cards */
.team--list .person.is-text::before { display: none; }

.team--list .person .person__photo { flex: none; width: 5rem; }

.team--list .person .person__text { flex: 1; min-width: 0; }

.team--list .person .person__role { -webkit-line-clamp: unset; display: block; }

.team--list .person .person__book { align-self: center; margin-top: 0; }

@media (max-width: 559px) {
  .person.is-text { padding: 1.1rem; }
  .team--list .person { flex-wrap: wrap; }
  .team--list .person .person__book { margin-left: 6.2rem; }
}