/* ==========================================================================
   Reliever website v4 · Who We Serve
   Three role cards, each with its photo (W2, W3) · four organization
   cards with the drawn corner bracket (W4, W5, Q4).
   Page head and closing band are shared and live in /styles.css.
   Loads after /styles.css; tokens and shell classes come from there.
   ========================================================================== */

/* ------------------------------------------------------------ roles -- */
/* A lineup of three: the words first, then each role's photo inset at the
   foot of its card like a trading card, all three on one baseline, so the
   page is about the people who do the job (G3). Below the fold on load, so
   no photo is the LCP and none has to load eagerly. */
.people {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.person {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-l);
  padding: 10px;
  display: flex;
  flex-direction: column;
}
.person__photo {
  position: relative;
  /* the three photos share one baseline at the foot of the lineup */
  margin-top: auto;
  aspect-ratio: 4 / 5;
  border-radius: calc(var(--radius-l) - 8px);
  overflow: hidden;
  background: #d9d4cc;
  /* keeps the rounded clip on the scaled image in Safari */
  isolation: isolate;
}
.person__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* the three subjects sit in different parts of their frames */
.person__photo--treasurer img {
  object-position: 44% 50%;
}
.person__photo--board img {
  object-position: 34% 50%;
}
.person__photo--manager img {
  object-position: 50% 40%;
}

.person__body {
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 2vw, 24px) clamp(14px, 1.6vw, 20px)
    clamp(22px, 2.4vw, 30px);
}
.person .eyebrow,
.org .eyebrow {
  margin-bottom: 16px;
}
.person h3 {
  font-size: clamp(1.1rem, 1.5vw, 1.25rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}
.person__body p:not(.eyebrow) {
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* Desktop: two lines reserved for the role label and the heading so every
   card's body copy starts on the same line. */
@media (min-width: 901px) {
  .person .eyebrow {
    min-height: 34px;
  }
  .person h3 {
    min-height: 2.4em;
  }
}

/* one column: a landscape crop keeps each card to about a screen */
@media (max-width: 900px) {
  .people {
    grid-template-columns: 1fr;
    max-width: 560px;
  }
  .person__photo {
    aspect-ratio: 4 / 3;
  }
  .person__photo--treasurer img {
    object-position: 44% 42%;
  }
  .person__photo--manager img {
    object-position: 50% 30%;
  }
}

/* ------------------------------------------------------- organizations -- */
.orgs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.org {
  position: relative;
  background: var(--field);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-l);
  padding: clamp(24px, 2.4vw, 30px);
  display: flex;
  flex-direction: column;
}
.org h3 {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}
.org p:not(.eyebrow) {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}
@media (min-width: 641px) {
  .org .eyebrow {
    min-height: 34px;
  }
  .org h3 {
    min-height: 2.5em;
  }
}

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

/* =========================================================================
   Motion (v3 layer, kept) · all final states live above
   ========================================================================= */

/* the corner bracket that draws itself on each organization card */
.orgs .org__bracket {
  position: absolute;
  top: 9px;
  left: 9px;
  width: 20px;
  height: 20px;
  color: rgba(17, 17, 17, 0.5);
}

/* Each role photo settles from a slight zoom as its card rises, once.
   The delays follow the grid's 90ms stagger. Reduced motion and no-JS
   never see the start state. */
@media (prefers-reduced-motion: no-preference) {
  .js .people[data-stagger] .person__photo img {
    transform: scale(1.06);
  }
  .js .people[data-stagger].is-in .person__photo img {
    transform: none;
    transition: transform 1400ms var(--ease);
  }
  .js .people[data-stagger].is-in .person:nth-child(2) .person__photo img {
    transition-delay: 90ms;
  }
  .js .people[data-stagger].is-in .person:nth-child(3) .person__photo img {
    transition-delay: 180ms;
  }
}