/* ==========================================================
   team.css - Board of Directors / Management Team cards + profile dialog
   (banner and tabs come from pages.css)
   ========================================================== */
.about-tabs.three ul { grid-template-columns: 1fr; }
@media (min-width: 640px) { .about-tabs.three ul { grid-template-columns: repeat(3, 1fr); } }

.team-section { padding: 48px 0 72px; background: var(--light-bg); }
.team-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 56px 0; color: var(--muted-color); text-align: center; }
.team-empty svg { color: #c5ccd6; }

.team-grid { display: grid; gap: 22px; grid-template-columns: 1fr; }
.member-card { display: flex; flex-direction: column; overflow: hidden; background: var(--white); border: 1px solid var(--border-color); border-bottom: 4px solid var(--primary-color); border-radius: 14px; transition: transform var(--transition), box-shadow var(--transition), border-bottom-color var(--transition); }
.member-card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(0, 0, 0, .1); border-bottom-color: var(--secondary-color); }

.member-photo { position: relative; aspect-ratio: 4 / 4.4; overflow: hidden; background: linear-gradient(140deg, var(--primary-dark), var(--primary-color)); }
.member-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .5s ease; }
.member-card:hover .member-photo img { transform: scale(1.04); }
.member-initials { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 3.2rem; font-weight: 700; color: var(--secondary-color); letter-spacing: .04em; }

.member-body { flex: 1; padding: 18px 16px 20px; text-align: center; }
.member-body h2 { margin: 0 0 2px; font-family: var(--font-heading); font-size: 1.2rem; line-height: 1.25; color: var(--text-color); }
.member-position { margin: 4px 0 0; font-size: .9rem; font-weight: 600; color: var(--secondary-dark); }

@media (min-width: 600px)  { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px)  { .team-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
@media (min-width: 1200px) { .team-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Governance structure diagram (corporate-governance.php) ---------- */
.gov-structure { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 0; list-style: none; }
.gov-structure li:not(.gs-arrow) { display: flex; align-items: center; gap: 16px; padding: 16px 18px; background: var(--white); border: 1px solid var(--border-color); border-left: 5px solid var(--primary-color); border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, .05); }
.gov-structure .gs-ico { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex-shrink: 0; border-radius: 14px; background: var(--primary-light); color: var(--primary-color); }
.gov-structure strong { display: block; font-family: var(--font-heading); font-size: 1.05rem; }
.gov-structure small { color: var(--muted-color); }
.gov-structure .gs-arrow { display: flex; justify-content: center; padding: 6px 0; color: var(--secondary-dark); }