/*
 * PMI Leadership — leadership.css v1.0.0
 *
 * Measurements from reference screenshot:
 *
 * SECTION
 *   bg:              #f0f4f8 (cool grey — same as Pathways/Partnerships)
 *   padding:         72px top / 80px bottom
 *
 * HEADING (centered)
 *   "Institutional Leadership and Strategic Oversight"
 *   font-size:       39px
 *   font-weight:     800
 *   color:           #0d1f3c (dark navy)
 *   margin-bottom:   12px
 *
 * SUBHEADING (centered)
 *   "Custodians of global standards within Uganda..."
 *   font-size:       15px
 *   font-weight:     400
 *   color:           #5a6880 (muted blue-grey)
 *   max-width:       540px (wraps to 2 lines)
 *   line-height:     1.60
 *   text-align:      center
 *   margin-bottom:   48px
 *
 * 5-COLUMN GRID — NO card borders, just photo + text
 *   gap:             20px
 *   align:           stretch
 *
 * PHOTO
 *   width:           100% (fills column)
 *   height:          285px
 *   object-fit:      cover
 *   object-position: top center
 *   filter:          grayscale(100%)
 *   border-radius:   0  ← square corners confirmed
 *   margin-bottom:   12px
 *
 * NAME "Dr. James Okello, PMP"
 *   font-size:       14.5px
 *   font-weight:     700
 *   color:           #111111
 *   margin-bottom:   3px
 *
 * ROLE "CHAPTER PRESIDENT"
 *   font-size:       9.5px
 *   font-weight:     700
 *   text-transform:  uppercase
 *   letter-spacing:  0.10em
 *   color:           #1a8fe8  ← PMI BRIGHT BLUE (not navy, not grey)
 *
 * "VIEW FULL BOARD" BUTTON
 *   border:          1px solid #c8d2de
 *   bg:              white
 *   color:           #111111
 *   padding:         12px 32px
 *   font:            14px 500
 *   radius:          4px
 *   margin-top:      48px
 *   centered (flex justify-center)
 */

/* ── Scope & reset ─────────────────────────────────────────────────────────── */
.pmiled-section,
.pmiled-section *,
.pmiled-section *::before,
.pmiled-section *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Elementor isolation ────────────────────────────────────────────────────── */
.elementor-widget-pmi_leadership_section .elementor-widget-container {
  padding: 0 !important;
  margin:  0 !important;
}
.elementor-section:has(.pmiled-section),
.e-con:has(.pmiled-section) {
  padding-top: 0 !important; padding-bottom: 0 !important;
  padding-left: 0 !important; padding-right: 0 !important;
  --padding-top: 0 !important; --padding-bottom: 0 !important;
  --padding-left: 0 !important; --padding-right: 0 !important;
}

/* ── Section wrapper ────────────────────────────────────────────────────────── */
.pmiled-section {
  background-color: #f0f4f8;  /* same cool grey as Pathways + Partnerships */
  padding-top:    72px;
  padding-bottom: 80px;
  width: 100%;
  display: block;
}

/* ── Inner container ─────────────────────────────────────────────────────────── */
.pmiled-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ══════════════════════════════════════════════════════════════════
   SECTION HEADER — centered
══════════════════════════════════════════════════════════════════ */
.pmiled-header {
  text-align:    center;
  margin-bottom: 48px;
}

.pmiled-heading {
  font-family:    'DM Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size:      39px;
  font-weight:    800;
  line-height:    1.10;
  letter-spacing: -0.02em;
  color:          #0d1f3c;      /* very dark navy */
  text-align:     center;
  margin-bottom:  12px;
  /* WP guard */
  text-transform: none;
  border:  none;
  padding: 0;
}

.pmiled-subheading {
  font-family:  'DM Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size:    15px;
  font-weight:  400;
  line-height:  1.60;
  color:        #5a6880;        /* muted blue-grey — measured from screenshot */
  text-align:   center;
  max-width:    540px;
  margin:       0 auto;         /* centre the capped-width paragraph */
  padding: 0;
}

/* ══════════════════════════════════════════════════════════════════
   5-COLUMN MEMBER GRID
   No card borders — just portrait + text below, clean on grey bg.
══════════════════════════════════════════════════════════════════ */
.pmiled-grid {
  display:       grid;
  grid-template-columns: repeat(5, 1fr);
  gap:           20px;
  align-items:   start;        /* don't stretch — let height be content-driven */
}

/* ── Individual member block ───────────────────────────────────────────────── */
.pmiled-member {
  display:        flex;
  flex-direction: column;
}

/* ── Portrait photo ────────────────────────────────────────────────────────────
   Rectangular, NOT circular. Square corners. Greyscale B&W.             */
.pmiled__photo {
  width:       100%;
  height:      285px;           /* measured: ~285px portrait height */
  overflow:    hidden;
  margin-bottom: 12px;
  flex-shrink: 0;
  background:  #c0c8d8;        /* placeholder colour */
}

.pmiled__img {
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: top center; /* crop from top — shows face, not feet */
  display:         block;
  border-radius:   0;          /* square corners — confirmed */
  transition:      filter 0.25s ease, transform 0.25s ease;
}

/* B&W greyscale */
.pmiled__img--bw {
  filter:         grayscale(100%);
  -webkit-filter: grayscale(100%);
}

/* Hover: colour reveals */
.pmiled-member:hover .pmiled__img--bw {
  filter:    grayscale(40%);
  transform: scale(1.02);
}

/* Placeholder when no photo uploaded */
.pmiled__placeholder {
  width:           100%;
  height:          100%;
  background:      #d0d8e4;
  display:         flex;
  align-items:     center;
  justify-content: center;
}
.pmiled__placeholder svg {
  width:   60px;
  height:  70px;
  opacity: 0.5;
}

/* ── Member info (name + role) ────────────────────────────────────────────────
   Left-aligned below photo, no container/border.                         */
.pmiled__info {
  padding: 0;
}

/* Name: "Dr. James Okello, PMP" */
.pmiled__name {
  font-family:     'DM Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size:       14.5px;
  font-weight:     700;
  line-height:     1.25;
  color:           #111111;
  margin-bottom:   3px;
  text-decoration: none;       /* when wrapped in <a> for LinkedIn */
  display:         block;
  padding: 0;
  transition:      color 0.18s ease;
}

a.pmiled__name:hover {
  color: #1a8fe8;
}

/* Role: "CHAPTER PRESIDENT" in PMI bright blue, spaced uppercase */
.pmiled__role {
  font-family:    'DM Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size:      9.5px;
  font-weight:    700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color:          #1a8fe8;     /* PMI BRIGHT BLUE — confirmed from screenshot */
  line-height:    1.30;
  padding: 0;
}

/* ══════════════════════════════════════════════════════════════════
   FOOTER — "View Full Board of Directors" centred outline button
══════════════════════════════════════════════════════════════════ */
.pmiled-footer {
  display:         flex;
  justify-content: center;
  margin-top:      48px;
}

.pmiled-footer__btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         12px 32px;
  border:          1px solid #c8d2de;  /* light grey-blue — measured */
  border-radius:   4px;
  background:      #ffffff;
  color:           #111111;
  font-family:     'DM Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size:       14px;
  font-weight:     500;
  letter-spacing:  0.01em;
  text-decoration: none;
  white-space:     nowrap;
  cursor:          pointer;
  transition:
    border-color     0.18s ease,
    background-color 0.18s ease,
    box-shadow       0.18s ease,
    transform        0.15s ease;
}

.pmiled-footer__btn:hover {
  border-color: #8fa0b8;
  background:   #f5f8fc;
  box-shadow:   0 2px 12px rgba(13, 31, 60, 0.10);
  transform:    translateY(-1px);
}
.pmiled-footer__btn:active  { transform: translateY(0); }
.pmiled-footer__btn:focus-visible {
  outline:        3px solid #1a8fe8;
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════════ */

/* ≤ 1100px — tighten gutters */
@media (max-width: 1100px) {
  .pmiled-inner   { padding: 0 24px; }
  .pmiled-heading { font-size: 33px; }
  .pmiled-section { padding-top: 60px; padding-bottom: 68px; }
  .pmiled__photo  { height: 240px; }
}

/* ≤ 900px — 3-column grid */
@media (max-width: 900px) {
  .pmiled-grid    { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .pmiled-heading { font-size: 28px; }
  .pmiled-section { padding-top: 52px; padding-bottom: 60px; }
}

/* ≤ 640px — 2-column grid */
@media (max-width: 640px) {
  .pmiled-inner   { padding: 0 20px; }
  .pmiled-section { padding-top: 44px; padding-bottom: 52px; }
  .pmiled-grid    { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .pmiled-heading { font-size: 24px; margin-bottom: 10px; }
  .pmiled-header  { margin-bottom: 36px; }
  .pmiled__photo  { height: 200px; }
}

/* ≤ 420px — single column */
@media (max-width: 420px) {
  .pmiled-inner   { padding: 0 16px; }
  .pmiled-grid    { grid-template-columns: 1fr; gap: 24px; }
  .pmiled__photo  { height: 260px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pmiled__img, .pmiled-footer__btn { transition: none; transform: none !important; }
  .pmiled-member:hover .pmiled__img--bw { filter: grayscale(100%); transform: none; }
}