/* ==========================================================================
   people.css
   Styles used only on the People page (people.html).

   Contents
     1. People: round portraits in a grid, name and interests below
     2. Past CoDesign-ers: the list in columns (the folding block: components.css)
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. People
   -------------------------------------------------------------------------- */

.people {
  padding-top: clamp(1rem, 3vw, 2rem);
}

.people-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2.5rem);
  margin: 0 0 clamp(3rem, 7vw, 5rem);
  padding: 0;
  list-style: none;
  text-align: center;
}

/* Portraits: in black and white with a gentle pine tint, all alike (Mehul, 7 October 2026: option 2 of
   preview/people-tint-options.html). The tint is a layer of --portrait-tint (base.css) in "colour" blend:
   it keeps the photo's light and shade and takes on the hue. */
.person-frame {
  position: relative;
  display: block;
  width: min(100%, 13rem);
  aspect-ratio: 1;
  margin: 0 auto 1.1rem;
  overflow: hidden;
  isolation: isolate;
  border-radius: 50%;
}

.person-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--portrait-tint);
  opacity: var(--portrait-tint-strength);
  mix-blend-mode: color;
  pointer-events: none;
}

.person-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
}

.person-name {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--accent);
}

.person-topics {
  margin: .4rem 0 0;
  font-size: var(--fs-small);
  color: var(--ink-soft);
}

@media (max-width: 900px) {
  .people-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .people-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .person-name {
    font-size: 1.05rem;
  }
}


/* --------------------------------------------------------------------------
   2. Past CoDesign-ers
   -------------------------------------------------------------------------- */

.past-list {
  columns: 3 16rem;
  column-gap: clamp(1.5rem, 4vw, 3rem);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
  line-height: 1.45;
}

.past-list li {
  break-inside: avoid;
  padding: .55rem 0;
  border-bottom: 1px solid var(--line);
}

/* name on the first line, the details in brackets on the next */
.past-name {
  display: block;
  font-weight: 600;
  color: var(--ink);
}

.past-details {
  display: block;
  color: var(--ink-soft);
}

@media print {
  .people-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}