/*
 * PMI Partnerships — partnerships.css v1.0.0
 *
 * Every value derived from direct pixel measurement of reference screenshot:
 *
 * SECTION
 *   bg:              #f0f4f8  (cool light blue-grey — same tone as Pathways section)
 *   padding:         68px top / 72px bottom
 *
 * HEADING
 *   text:            "Building Institutional Project Capacity Nationwide"
 *   align:           CENTER (not left — different from Certifications)
 *   font-size:       41px
 *   font-weight:     800
 *   color:           #0d1f3c  (very dark navy — noticeably darker than #111)
 *   letter-spacing:  -0.02em
 *   margin-bottom:   44px
 *
 * 4-COLUMN CARD GRID
 *   gap:             20px
 *   card bg:         #ffffff
 *   card border:     1px solid #dde4ef
 *   card radius:     6px
 *   card padding:    24px
 *   card hover:      border darkens, subtle shadow
 *
 * CARD TITLE
 *   e.g. "Government Agencies"
 *   font-size:       15.5px
 *   font-weight:     700
 *   color:           #1a5fa8  (PMI blue — same as cert card titles)
 *   margin-bottom:   12px
 *
 * CARD DIVIDER (horizontal rule under title)
 *   height:          1px
 *   color:           #dde4ef
 *   margin-bottom:   16px
 *
 * BULLET LIST
 *   item gap:        10px vertical
 *   bullet:          6px filled circle, color #1a8fe8 (bright PMI blue)
 *   bullet-gap:      9px to text
 *   text:            13.5px, #44464f, lh 1.55
 *
 * CTA BUTTONS (centered row)
 *   margin-top:      44px
 *   gap:             16px
 *
 *   Primary "Partner With PMI Uganda":
 *     bg:            #0f2d58 (deep navy)
 *     color:         #ffffff
 *     padding:       14px 32px
 *     font:          14px / 700
 *     radius:        4px
 *     border:        none
 *
 *   Outline "Download Partnership Guide":
 *     bg:            #ffffff
 *     border:        1px solid #bdc8d6
 *     color:         #0d1f3c
 *     same padding/font/radius
 */

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

/* ── Elementor isolation ─────────────────────────────────────────────────────
   Strip all Elementor wrapper padding so our section owns all spacing.   */
.elementor-widget-pmi_partnerships_section .elementor-widget-container {
  padding: 0 !important;
  margin:  0 !important;
}
.elementor-section:has(.pmipa-section),
.e-con:has(.pmipa-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 ─────────────────────────────────────────────────────────
   Cool blue-grey background — same tone as the Pathways section.        */
.pmipa-section {
  background-color: #f0f4f8;
  padding-top:    68px;
  padding-bottom: 72px;
  width: 100%;
  display: block;
}

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

/* ══════════════════════════════════════════════════════════════════
   HEADING — centered, very dark navy, extra heavy
   Distinct from Certifications (which is left-aligned #111111).
══════════════════════════════════════════════════════════════════ */
.pmipa-heading {
  font-family:    'DM Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size:      41px;
  font-weight:    800;
  line-height:    1.10;
  letter-spacing: -0.02em;
  color:          #0d1f3c;        /* very dark navy — measured from screenshot */
  text-align:     center;         /* CENTERED — confirmed from screenshot */
  margin-bottom:  44px;
  /* WordPress theme guard */
  text-transform:  none;
  text-decoration: none;
  border:  none;
  padding: 0;
}

/* ══════════════════════════════════════════════════════════════════
   4-COLUMN SEGMENT CARD GRID
   Equal columns, 20px gap. Cards stretch to equal height.
══════════════════════════════════════════════════════════════════ */
.pmipa-grid {
  display:       grid;
  grid-template-columns: repeat(4, 1fr);
  gap:           20px;
  align-items:   stretch;
}

/* ══════════════════════════════════════════════════════════════════
   SEGMENT CARD
   White card with subtle border and radius.
   Hover: border darkens, slight shadow lift.
══════════════════════════════════════════════════════════════════ */
.pmipa-card {
  background:     #ffffff;
  border:         1px solid #dde4ef;
  border-radius:  6px;
  padding:        24px;
  display:        flex;
  flex-direction: column;
  transition:
    border-color 0.20s ease,
    box-shadow   0.20s ease,
    transform    0.20s ease;
}

.pmipa-card:hover {
  border-color: #b8c6d8;
  box-shadow:   0 4px 20px rgba(13, 31, 60, 0.09);
  transform:    translateY(-2px);
}

/* ── Segment title — "Government Agencies" etc. in PMI blue ─────────────────
   Measured: 15.5px / 700 / #1a5fa8                                      */
.pmipa-card__title {
  font-family:     'DM Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size:       15.5px;
  font-weight:     700;
  line-height:     1.20;
  color:           #1a5fa8;       /* PMI blue — same as cert card titles */
  margin-bottom:   12px;
  letter-spacing:  -0.005em;
  /* WP guards */
  text-transform:  none;
  text-decoration: none;
  border:  none;
  padding: 0;
}

/* ── Horizontal divider under title ─────────────────────────────────────────
   1px rule, light grey. Margin 12px below title, 16px above list.       */
.pmipa-card__divider {
  width:         100%;
  height:        1px;
  background:    #dde4ef;         /* same as card border */
  border:        none;
  margin-bottom: 16px;
  flex-shrink:   0;
}

/* ── Bullet list ─────────────────────────────────────────────────────────────
   Custom bullets: small filled blue circles (not default list-style).   */
.pmipa-card__list {
  list-style:     none;
  padding:        0;
  margin:         0;
  display:        flex;
  flex-direction: column;
  gap:            10px;           /* 10px between each bullet item */
}

/* Each list item — flex row: bullet dot + text */
.pmipa-card__item {
  display:     flex;
  align-items: flex-start;
  gap:         9px;               /* 9px between bullet and text */
  font-family: 'DM Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size:   13.5px;
  font-weight: 400;
  line-height: 1.55;
  color:       #44464f;           /* dark grey body text */
  padding:     0;
}

/* Bullet dot — small filled circle in PMI bright blue */
.pmipa-card__item::before {
  content:      '';
  display:      inline-block;
  width:        6px;
  height:       6px;
  border-radius: 50%;
  background:   #1a8fe8;          /* PMI bright blue — measured from screenshot */
  flex-shrink:  0;
  margin-top:   5px;              /* vertical alignment with text cap-height */
}

/* ══════════════════════════════════════════════════════════════════
   CTA BUTTONS — centered row below card grid
   Margin-top 44px, gap 16px, 2 buttons side by side.
══════════════════════════════════════════════════════════════════ */
.pmipa-ctas {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             16px;
  margin-top:      44px;
  flex-wrap:       wrap;          /* stacks on small screens */
}

/* Base button */
.pmipa-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         14px 32px;
  border-radius:   4px;
  font-family:     'DM Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size:       14px;
  font-weight:     700;
  line-height:     1;
  letter-spacing:  0.01em;
  text-decoration: none;
  white-space:     nowrap;
  cursor:          pointer;
  text-align:      center;
  transition:
    background-color 0.18s ease,
    border-color     0.18s ease,
    color            0.18s ease,
    box-shadow       0.18s ease,
    transform        0.15s ease;
}

.pmipa-btn:hover  { transform: translateY(-1px); }
.pmipa-btn:active { transform: translateY(0); }

/* Primary — deep navy solid (matches Register button in events) */
.pmipa-btn--primary {
  background-color: #0f2d58;
  border:           2px solid #0f2d58;
  color:            #ffffff;
}
.pmipa-btn--primary:hover {
  background-color: #1a4a82;
  border-color:     #1a4a82;
  box-shadow:       0 4px 16px rgba(15, 45, 88, 0.35);
}
.pmipa-btn--primary:focus-visible {
  outline:        3px solid #1a8fe8;
  outline-offset: 2px;
}

/* Outline — white background, grey border, dark navy text */
.pmipa-btn--outline {
  background-color: #ffffff;
  border:           1px solid #bdc8d6;  /* measured: light grey-blue border */
  color:            #0d1f3c;            /* dark navy text */
}
.pmipa-btn--outline:hover {
  background-color: #f0f4f8;
  border-color:     #8fa0b8;
  box-shadow:       0 4px 16px rgba(13, 31, 60, 0.10);
}
.pmipa-btn--outline:focus-visible {
  outline:        3px solid #1a8fe8;
  outline-offset: 2px;
}

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

/* ≤ 1100px — tighten gutters */
@media (max-width: 1100px) {
  .pmipa-inner   { padding: 0 24px; }
  .pmipa-heading { font-size: 34px; }
  .pmipa-section { padding-top: 56px; padding-bottom: 60px; }
}

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

/* ≤ 640px — single column, compact */
@media (max-width: 640px) {
  .pmipa-inner   { padding: 0 20px; }
  .pmipa-section { padding-top: 40px; padding-bottom: 44px; }
  .pmipa-heading { font-size: 24px; margin-bottom: 28px; }
  .pmipa-grid    { grid-template-columns: 1fr; gap: 12px; }
  .pmipa-ctas    { flex-direction: column; align-items: stretch; margin-top: 36px; }
  .pmipa-btn     { width: 100%; justify-content: center; }
}

/* ≤ 420px */
@media (max-width: 420px) {
  .pmipa-inner   { padding: 0 16px; }
  .pmipa-heading { font-size: 20px; }
  .pmipa-btn     { padding: 12px 20px; font-size: 13px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pmipa-card, .pmipa-btn { transition: none; transform: none !important; }
}