/*
  forRoleTeam — the FOR / ROLE / TEAM facts at the bottom of a case study hero
  (component.json forRoleTeam, 8 tokens). A hairline above, then a row of three
  label + answer blocks. The gap coming in from the H1 belongs to the hero.
  Built as a description list (dl): screen readers announce each label with its answer.
*/

.for-role-team {
  border-block-start: var(--for-role-team-divider-width-all) solid var(--for-role-team-divider-all);
  padding-block-start: var(--for-role-team-padding-top-all);
  display: flex;
  flex-wrap: wrap; /* one row when the column has room (about 603px today); otherwise they wrap */
  column-gap: var(--for-role-team-block-gap-all); /* 48px side by side */
  row-gap: var(--for-role-team-row-gap-all);      /* 32px when they wrap (decided by Vivek, build step 2) */
  color: var(--for-role-team-content-all);
}

.for-role-team__block {
  display: flex;
  flex-direction: column;
}

/* ONE ROLE PER LINE (decided by Vivek 2026-09-26): each role or name is its own answer (dd),
   stacked with no gap, never a comma list. Each block is as wide as its longest line.
   The label gap sits only between the label and the first answer. */
.for-role-team__label + .for-role-team__answer {
  margin-block-start: var(--for-role-team-label-gap-all);
}

/* Label: written "For" in the HTML and shown in capitals here, so screen readers
   say the word instead of spelling out F-O-R. */
.for-role-team__label {
  font-family: var(--for-role-team-label-text-style-all-font-family);
  font-size: var(--for-role-team-label-text-style-all-font-size);
  font-weight: var(--for-role-team-label-text-style-all-font-weight);
  line-height: var(--for-role-team-label-text-style-all-line-height);
  letter-spacing: var(--for-role-team-label-text-style-all-letter-spacing);
  text-transform: uppercase;
}

.for-role-team__answer {
  margin: 0;
  font-family: var(--for-role-team-answer-text-style-all-font-family);
  font-size: var(--for-role-team-answer-text-style-all-font-size);
  font-weight: var(--for-role-team-answer-text-style-all-font-weight);
  line-height: var(--for-role-team-answer-text-style-all-line-height);
}