/* ============================================================
   50-wwt-grid — condition/topic card grid, white section. Scoped
   under .sec-50-wwt-grid. Reused across 12 pages with item counts
   from 3 to 28, so this is a centering flex row (fixed columns per
   breakpoint) rather than a grid: repeat(auto-fit, minmax(...))
   still left-packs an incomplete last row against empty grid
   tracks whenever the count isn't a clean multiple of whatever
   column count fits that viewport.
   ============================================================ */

.sec-50-wwt-grid {
  background: var(--white);
}

.sec-50-wwt-grid__grid {
  --gap: clamp(1.1rem, 1.8vw, 1.5rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
}

.sec-50-wwt-grid__card {
  flex: 0 1 calc(25% - var(--gap));
  min-width: 240px;
  background: var(--bone);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: clamp(1.4rem, 2vw, 1.9rem);
  border: 1.5px solid transparent;
  transition: border-color 250ms var(--ease-out), box-shadow 250ms var(--ease-out),
    transform 300ms var(--ease-spring);
}

@media (max-width: 900px) {
  .sec-50-wwt-grid__card { flex-basis: calc(50% - var(--gap)); }
}
@media (max-width: 560px) {
  .sec-50-wwt-grid__card { flex-basis: 100%; }
}

.sec-50-wwt-grid__card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-lift);
  transform: translateY(-4px);
}

.sec-50-wwt-grid__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.85rem;
  margin-bottom: 1rem;
  transition: background 250ms var(--ease-out), color 250ms var(--ease-out);
}

.sec-50-wwt-grid__card:hover .sec-50-wwt-grid__num {
  background: var(--accent);
  color: var(--accent-on);
}

.sec-50-wwt-grid__card h3 {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

.sec-50-wwt-grid__card p {
  color: var(--text-on-bone-dim);
  font-size: 0.92rem;
  line-height: 1.55;
}

.sec-50-wwt-grid__link {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--accent-strong);
  text-decoration: none;
  transition: gap 200ms var(--ease-spring), color 200ms var(--ease-out);
}

.sec-50-wwt-grid__link:hover {
  gap: 0.65rem;
  color: var(--accent);
}

html.reduced-motion .sec-50-wwt-grid__card {
  transition: none;
}

/* --- Staff-card variant: hexagon portrait in place of the numbered badge --- */
.sec-50-wwt-grid__card--staff {
  text-align: center;
}

.sec-50-wwt-grid__photo-wrap {
  width: min(160px, 60%);
  margin: 0 auto 1.1rem;
  aspect-ratio: 361 / 413;
  overflow: hidden;
  clip-path: polygon(50% 1.5%, 98% 25%, 98% 75%, 50% 98.5%, 2% 75%, 2% 25%);
  border: 3px solid var(--accent);
  background: var(--bone-2);
}

.sec-50-wwt-grid__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(0.98);
}

.sec-50-wwt-grid .bm-cta--row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}