/* tibu-afrika sections/team.css */

/*
 * The Team route's own section partial (plan 07-11): the "Board of Directors"
 * section (patterns/team-board.php, wrapping tibu/board-profiles) and the
 * "Our Consultants" section (patterns/team-consultants.php, wrapping
 * tibu/team-grid group consultant, size full). The route's photo hero is
 * styled by sections/about.css. Loaded right after theme.css on the front end
 * and in the editor (includes/assets.php), under the same rules: presets and
 * color-mix() only, no hex, no preset variable declared (D-13). Every
 * selector is scoped under .tibu-section--team-board,
 * .tibu-section--team-consultants or the companion plugin's
 * .tibu-board-profiles wrapper, whose markup ships no CSS (Phase 5 D-28).
 *
 * A board biography is printed whole by the plugin and is shown whole here
 * (TMPL-03): no rule in this file limits a height, hides overflow on text,
 * clamps lines or adds an ellipsis. Names, roles, credentials and chips wrap.
 * Board cards are one column, then two from 1024px; inside a card the
 * portrait sits above the body, then beside it from 768px (0.82fr / 1.18fr).
 * Consultant cards are one column, two from 640px and three from 1024px.
 * Core kebab-cases preset slugs for their variables, splitting digits from
 * letters, so the 2xl radius preset prints as --2-xl. The board body's 28px
 * desktop padding is the UI-SPEC component dimension kept from Astro.
 */

/* ---- Section header: eyebrow, title and intro, capped at 48rem ---- */

.tibu-section--team-board .tibu-section__header > *,
.tibu-section--team-consultants .tibu-section__header > * {
  max-width: 48rem;
  margin-block: 0;
}

.tibu-section--team-board .tibu-section__header .is-style-eyebrow + .is-style-section-title,
.tibu-section--team-consultants .tibu-section__header .is-style-eyebrow + .is-style-section-title {
  margin-block-start: var(--wp--preset--spacing--3);
}

.tibu-section--team-board .tibu-section__intro,
.tibu-section--team-consultants .tibu-section__intro {
  margin-block-start: var(--wp--preset--spacing--4);
  color: color-mix(in srgb, var(--wp--preset--color--ink-900) 80%, transparent);
  font-size: var(--wp--preset--font-size--lead);
  line-height: 1.778;
}

/* ---- Consultants band ---- */

.tibu-section--team-consultants {
  background-color: color-mix(in srgb, var(--wp--preset--color--brand-grey) 20%, transparent);
}

/* ---- Board grid ---- */

.tibu-section--team-board .tibu-board-profiles {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--wp--preset--spacing--8);
  margin-block: var(--wp--preset--spacing--10) 0;
}

@media (min-width: 1024px) {
  .tibu-section--team-board .tibu-board-profiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- One board card ---- */

.tibu-board-profiles .tibu-board-card {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--brand-maroon) 15%, transparent);
  border-radius: var(--wp--preset--border-radius--2-xl);
  background-color: var(--wp--preset--color--surface-0);
  box-shadow: var(--wp--preset--shadow--subtle);
}

@media (min-width: 768px) {
  .tibu-board-profiles .tibu-board-card {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  }
}

/* Portrait 4:5 above the body; from 768px it fills the column's full height. */
.tibu-board-profiles .tibu-board-portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  background-color: var(--wp--preset--color--brand-grey);
}

@media (min-width: 768px) {
  .tibu-board-profiles .tibu-board-portrait {
    aspect-ratio: auto;
    min-height: 100%;
  }
}

.tibu-board-profiles .tibu-board-portrait .tibu-media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tibu-board-profiles .tibu-board-portrait .tibu-monogram {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wp--preset--color--brand-maroon);
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--xx-large);
  font-weight: 800;
  line-height: 1;
}

.tibu-board-profiles .tibu-board-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--wp--preset--spacing--6);
}

@media (min-width: 768px) {
  .tibu-board-profiles .tibu-board-body {
    padding: 28px;
  }
}

/* Name: 24px 800 maroon. */
.tibu-board-profiles .tibu-item-title {
  margin: 0;
  color: var(--wp--preset--color--brand-maroon);
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--x-large);
  font-weight: 800;
  line-height: 1.333;
  overflow-wrap: break-word;
}

/* Credentials: 14px 500 at ink-900 65%. */
.tibu-board-profiles .tibu-credentials {
  margin: var(--wp--preset--spacing--2) 0 0;
  color: color-mix(in srgb, var(--wp--preset--color--ink-900) 65%, transparent);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 500;
  line-height: 1.43;
  overflow-wrap: break-word;
}

/* Role: 16px 600 at ink-900 80%. */
.tibu-board-profiles .tibu-role {
  margin: var(--wp--preset--spacing--2) 0 0;
  color: color-mix(in srgb, var(--wp--preset--color--ink-900) 80%, transparent);
  font-size: var(--wp--preset--font-size--base);
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: break-word;
}

/* Biography: the whole text, 14px with a 2.0 line height, at ink-900 80%. */
.tibu-board-profiles .tibu-bio {
  margin-block-start: var(--wp--preset--spacing--6);
  color: color-mix(in srgb, var(--wp--preset--color--ink-900) 80%, transparent);
  font-size: var(--wp--preset--font-size--small);
  line-height: 2;
  overflow-wrap: break-word;
}

.tibu-board-profiles .tibu-bio > * {
  margin-block: var(--wp--preset--spacing--4) 0;
}

.tibu-board-profiles .tibu-bio > :first-child {
  margin-block-start: 0;
}

.tibu-board-profiles .tibu-bio a {
  color: var(--wp--preset--color--brand-blue-dark);
}

/* Specialty chips: 12px 500 maroon on maroon 5%, full radius. */
.tibu-board-profiles .tibu-specialties {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--2);
  margin: var(--wp--preset--spacing--6) 0 0;
  padding: 0;
  list-style: none;
}

.tibu-board-profiles .tibu-specialty {
  min-width: 0;
  margin: 0;
  padding: var(--wp--preset--spacing--1) var(--wp--preset--spacing--3);
  border-radius: var(--wp--preset--border-radius--full);
  background-color: color-mix(in srgb, var(--wp--preset--color--brand-maroon) 5%, transparent);
  color: var(--wp--preset--color--brand-maroon);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 500;
  line-height: 1.333;
  overflow-wrap: break-word;
}

/* ---- Consultants grid (tibu/team-grid, group consultant, size full) ---- */

.tibu-section--team-consultants .tibu-team-grid {
  margin-block: var(--wp--preset--spacing--10) 0;
}

.tibu-section--team-consultants .tibu-team-grid .tibu-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--wp--preset--spacing--6);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .tibu-section--team-consultants .tibu-team-grid .tibu-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .tibu-section--team-consultants .tibu-team-grid .tibu-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/*
 * One consultant card: the 80px avatar beside the name and role, then the
 * chips across the card. The plugin prints the avatar, h3, role and chips as
 * siblings, so the card is a two-column grid rather than nested boxes.
 */
.tibu-section--team-consultants .tibu-team-grid .tibu-item {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  column-gap: var(--wp--preset--spacing--4);
  align-content: start;
  min-width: 0;
  margin: 0;
  padding: var(--wp--preset--spacing--6);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--brand-grey) 60%, transparent);
  border-radius: var(--wp--preset--border-radius--2-xl);
  background-color: var(--wp--preset--color--surface-0);
}

.tibu-section--team-consultants .tibu-team-grid .tibu-item > .tibu-media,
.tibu-section--team-consultants .tibu-team-grid .tibu-item > .tibu-monogram {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  box-sizing: border-box;
  width: 80px;
  height: 80px;
  border-radius: var(--wp--preset--border-radius--full);
  background-color: color-mix(in srgb, var(--wp--preset--color--brand-blue) 10%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--brand-blue) 20%, transparent);
}

.tibu-section--team-consultants .tibu-team-grid .tibu-item > .tibu-media {
  display: block;
  object-fit: cover;
}

.tibu-section--team-consultants .tibu-team-grid .tibu-item > .tibu-monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wp--preset--color--brand-maroon);
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--x-large);
  font-weight: 800;
  line-height: 1;
}

/* Name: 20px 700 maroon. */
.tibu-section--team-consultants .tibu-team-grid .tibu-item-title {
  grid-column: 2;
  align-self: end;
  margin: 0;
  color: var(--wp--preset--color--brand-maroon);
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--large);
  font-weight: 700;
  line-height: 1.333;
  overflow-wrap: break-word;
}

/* Role: 14px 600 at ink-900 70%. */
.tibu-section--team-consultants .tibu-team-grid .tibu-role {
  grid-column: 2;
  align-self: start;
  margin: var(--wp--preset--spacing--1) 0 0;
  color: color-mix(in srgb, var(--wp--preset--color--ink-900) 70%, transparent);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  line-height: 1.43;
  overflow-wrap: break-word;
}

/* Chips: 12px 500 maroon on brand-blue 10%, full radius. */
.tibu-section--team-consultants .tibu-team-grid .tibu-specialties {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  gap: var(--wp--preset--spacing--2);
  margin: var(--wp--preset--spacing--6) 0 0;
  padding: 0;
  list-style: none;
}

.tibu-section--team-consultants .tibu-team-grid .tibu-specialty {
  min-width: 0;
  margin: 0;
  padding: var(--wp--preset--spacing--1) var(--wp--preset--spacing--3);
  border-radius: var(--wp--preset--border-radius--full);
  background-color: color-mix(in srgb, var(--wp--preset--color--brand-blue) 10%, transparent);
  color: var(--wp--preset--color--brand-maroon);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 500;
  line-height: 1.333;
  overflow-wrap: break-word;
}