/* SJCare volunteer account area.
   Builds on the member area styles and reuses the same cloth, rule and indigo tokens. */

.volunteer-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0;
  margin-bottom: 1.4rem;
  border: 1px solid var(--ix-rule);
  background: var(--ix-cloth);
}

.volunteer-stat {
  display: grid;
  gap: 0.3rem;
  padding: clamp(0.95rem, 1.8vw, 1.35rem);
  border-right: 1px solid var(--ix-rule);
}

.volunteer-stat:last-child {
  border-right: 0;
}

.volunteer-stat__label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ix-muted);
}

.volunteer-stat__value {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  line-height: 1.1;
  color: var(--ix-ink);
}

.volunteer-stat__value--text {
  font-family: var(--font-text);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.35;
}

.volunteer-participation {
  margin-bottom: 1.4rem;
}

.volunteer-participation .panel__note {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ix-muted);
}

.volunteer-details .field__help {
  color: var(--ix-muted);
}

@media (max-width: 640px) {
  .volunteer-stat {
    border-right: 0;
    border-bottom: 1px solid var(--ix-rule);
  }

  .volunteer-stat:last-child {
    border-bottom: 0;
  }
}