/**
 * @file
 * Organizational structure — modern HTML organogram (who26).
 *
 * A responsive, accessible card-based org chart used on
 * page--about-us--organizational-structure. Replaces the flat image with
 * structured tiers: Regional Director → offices reporting to the RD →
 * cluster cards (each listing its units). Uses WHO design tokens throughout.
 */

.org-chart {
  --org-gap: 18px;
}

/* Download + intro row */
.org-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 28px;
}
.org-toolbar-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--who-gray-700);
  max-width: 60ch;
  margin: 0;
}
.org-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 700;
  color: var(--who-white);
  background: var(--who-navy);
  border-radius: var(--who-radius-sm);
  text-decoration: none;
  transition: background var(--who-transition);
}
.org-download:hover {
  background: var(--who-blue);
  color: var(--who-white);
}

/* Tier labels */
.org-tier-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--who-blue-d, var(--who-blue));
  margin: 32px 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.org-tier-label::before {
  content: "";
  width: 26px;
  height: 3px;
  background: var(--who-gold);
  border-radius: 2px;
}

/* ── Regional Director banner ──────────────────────────────── */
.org-rd {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 22px 24px;
  background: linear-gradient(135deg, var(--who-navy) 0%, var(--who-blue) 100%);
  border-radius: var(--who-radius-md);
  color: var(--who-white);
}
.org-rd-name {
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 800;
  line-height: 1.1;
}
.org-rd-code {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .85);
}

/* ── Offices reporting to the RD ───────────────────────────── */
.org-offices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--org-gap);
}
.org-office {
  background: var(--who-white);
  border: 1px solid var(--who-gray-200);
  border-radius: var(--who-radius-md);
  overflow: hidden;
}
.org-office-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--who-gray-100);
}
.org-office-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--who-navy);
  line-height: 1.25;
}
.org-office-note {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--who-gray-600);
  margin-top: 2px;
}
.org-code {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .03em;
  color: var(--who-blue);
  background: var(--who-blue-light);
  border-radius: var(--who-radius-sm);
}

/* ── Cluster cards ─────────────────────────────────────────── */
.org-clusters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--org-gap);
}
.org-cluster {
  display: flex;
  flex-direction: column;
  background: var(--who-white);
  border: 1px solid var(--who-gray-200);
  border-radius: var(--who-radius-md);
  overflow: hidden;
}
.org-cluster-head {
  padding: 16px 18px;
  background: linear-gradient(135deg, var(--who-navy) 0%, var(--who-blue) 100%);
  color: var(--who-white);
}
.org-cluster-name {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
}
.org-cluster-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
}
.org-cluster-code {
  padding: 2px 8px;
  background: rgba(255, 255, 255, .18);
  border-radius: var(--who-radius-sm);
}
.org-cluster-parent {
  color: rgba(255, 255, 255, .8);
  text-transform: uppercase;
}

/* Units list */
.org-units {
  display: flex;
  flex-direction: column;
  padding: 6px 0;
}
.org-unit {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 18px;
  border-bottom: 1px solid var(--who-gray-100);
}
.org-unit:last-child { border-bottom: none; }
.org-unit-code {
  flex-shrink: 0;
  min-width: 64px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--who-blue);
}
.org-unit-desc {
  font-size: 13px;
  line-height: 1.45;
  color: var(--who-gray-800);
}

/* keep an embedded image organogram (fallback) tidy if ever used */
.org-fallback-img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--who-gray-200);
  border-radius: var(--who-radius-md);
}