/*
 * PMI Pathways — pathways.css v1.0.0
 * Every value below is derived from direct pixel measurement of the
 * Replit reference screenshot. Do not change without comparing to image.
 *
 * Screenshot measurements:
 *   Section bg:        #eef0f4  (very light blue-grey)
 *   Section padding:   ~68px top / ~76px bottom
 *   Heading:           ~42px, weight 800, color #111, centered
 *   Heading→grid gap:  ~46px
 *   Card border:       1px solid #d2d8e2
 *   Card border-radius: 0 (square)
 *   Image height:      ~185px
 *   Card body padding: 20px
 *   Title:             18px, weight 800, color #111
 *   Title→desc gap:    9px
 *   Desc:              13.5px, color #606672, line-height 1.58
 *   Desc→btn gap:      18px
 *   Button height:     ~42px
 *   Button border:     1px solid #c4cad4
 *   Button text:       10.5px, uppercase, letter-spacing 0.16em, weight 700, color #111
 *   Button border-radius: 0 (square)
 *   Card gap:          20px
 */

/* ── Box-sizing scope ─────────────────────────────────────────────────────── */
.pmip-pathways-section,
.pmip-pathways-section *,
.pmip-pathways-section *::before,
.pmip-pathways-section *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Elementor isolation — strip all wrapper padding ─────────────────────── */
.elementor-widget-pmi_pathways_section .elementor-widget-container {
  padding: 0 !important;
  margin:  0 !important;
}
.elementor-section:has(.pmip-pathways-section),
.e-con:has(.pmip-pathways-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 ──────────────────────────────────────────────────────────
   Background: measured from screenshot — very subtle cool light grey.
   NOT pure white, NOT blue — somewhere around #edf0f4.
   Padding: generous top/bottom matching the Replit reference.           */
.pmip-pathways-section {
  background-color: #edf0f4;
  padding-top:    68px;
  padding-bottom: 76px;
  width: 100%;
  display: block;
}

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

/* ── Section heading ──────────────────────────────────────────────────────────
   "Structured Pathways Across the Project Economy"
   
   Measured: approximately 42px, weight 800, near-black #111111.
   Centered. Margin below: 46px to the card grid.
   Font: DM Sans 800 — loaded via Google Fonts — matches the
   slightly compressed, wide grotesque in the screenshot.               */
.pmip-heading {
  font-family: 'DM Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size:      42px;
  font-weight:    800;
  line-height:    1.10;
  letter-spacing: -0.015em;
  color:          #111111;
  text-align:     center;
  margin-bottom:  46px;
  /* WordPress theme resets */
  text-transform: none;
  text-decoration: none;
  border: none;
  padding: 0;
}

/* ── 4-column card grid ───────────────────────────────────────────────────────
   Exactly 4 equal columns at desktop.
   Gap: 20px between cards (measured from screenshot).
   No background on the grid itself — grey shows through.               */
.pmip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: stretch; /* all cards equal height */
}

/* ── Card ─────────────────────────────────────────────────────────────────────
   White background, 1px solid grey border, ZERO border-radius.
   flex column so photo is on top, body below, button pinned to bottom.  */
.pmip-card {
  background:    #ffffff;
  border:        1px solid #d2d8e2;
  border-radius: 0;           /* square — screenshot confirms no rounding */
  display:       flex;
  flex-direction: column;
  overflow:      hidden;      /* clips image to card edges */
}

/* ── Card photo ───────────────────────────────────────────────────────────────
   Fixed height container. Image bleeds edge-to-edge — no padding.
   Height: 185px measured from screenshot.                               */
.pmip-card__photo {
  width:       100%;
  height:      185px;         /* measured from screenshot */
  overflow:    hidden;
  flex-shrink: 0;
  display:     block;
  background:  #c8cfd9;       /* fallback while loading */
}

/* The <img> fills the photo container entirely */
.pmip-card__img {
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center center;
  display:         block;
}

/* Greyscale — black & white filter, exactly as in screenshot */
.pmip-card__img--bw {
  filter:         grayscale(100%);
  -webkit-filter: grayscale(100%);
}

/* Placeholder when no image is uploaded */
.pmip-card__placeholder {
  width:      100%;
  height:     100%;
  background: #bfc6d0;
}

/* ── Card body ────────────────────────────────────────────────────────────────
   White area below the image.
   Padding: 20px all sides — measured from screenshot.
   flex: 1 + flex column so button always sits at bottom.               */
.pmip-card__body {
  padding:        20px;
  display:        flex;
  flex-direction: column;
  flex:           1;
}

/* ── Card title ───────────────────────────────────────────────────────────────
   "Professionals", "Organizations", "Students & Academia", "Corporate Partners"
   
   Measured: ~18-19px, weight 800, near-black #111.
   Margin below: 9px to description paragraph.                          */
.pmip-card__title {
  font-family:    'DM Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size:      18px;
  font-weight:    800;
  line-height:    1.15;
  letter-spacing: -0.005em;
  color:          #111111;
  margin-bottom:  9px;
  /* WordPress theme override guards */
  text-transform: none;
  text-decoration: none;
  border: none;
  padding: 0;
}

/* ── Card description ─────────────────────────────────────────────────────────
   Body text below title.
   
   Measured: ~13-14px, colour #606672 (medium grey), line-height ~1.58.
   flex: 1 so it stretches — pushes button to bottom of card body.
   Margin below: 18px to button.                                        */
.pmip-card__desc {
  font-family:  'DM Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size:    13.5px;
  font-weight:  400;
  line-height:  1.58;
  color:        #606672;
  flex:         1;
  margin-bottom: 18px;
  /* WordPress reset guards */
  text-transform: none;
  padding: 0;
}

/* ── CTA Button ───────────────────────────────────────────────────────────────
   "ACCESS STANDARDS", "INSTITUTIONAL CAPACITY", etc.
   
   Measured:
   - Full width of card body (minus body padding)
   - Height: ~42px
   - Background: white
   - Border: 1px solid #c4cad4
   - Border-radius: 0 (perfectly square)
   - Text: ALL CAPS, ~10.5px, very wide letter-spacing 0.16em, weight 700, #111
   - Centered text
   
   On hover: dark navy fill, white text (institutional feel).           */
.pmip-card__btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           100%;
  height:          42px;
  padding:         0 12px;

  background:    #ffffff;
  border:        1px solid #c4cad4;
  border-radius: 0;               /* square — confirmed from screenshot */

  font-family:    'DM Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size:      10.5px;
  font-weight:    700;
  letter-spacing: 0.16em;         /* very wide — "ACCESS STANDARDS" feel */
  text-transform: uppercase;
  text-decoration: none;
  color:          #111111;
  text-align:     center;
  white-space:    nowrap;
  cursor:         pointer;

  transition:
    background-color 0.18s ease,
    border-color     0.18s ease,
    color            0.18s ease;

  /* pin to bottom of card body via flex parent */
  margin-top: auto;
}

.pmip-card__btn:hover,
.pmip-card__btn:focus-visible {
  background-color: #003B75;   /* PMI navy */
  border-color:     #003B75;
  color:            #ffffff;
}
.pmip-card__btn:focus-visible {
  outline:        3px solid #C8993A;
  outline-offset: 2px;
}

/* ── WordPress content scope guards ──────────────────────────────────────────
   Prevent common WP themes from injecting styles into our component.    */
.pmip-pathways-section h2.pmip-heading,
.pmip-pathways-section h3.pmip-card__title {
  margin-top: 0;
}

.pmip-pathways-section p.pmip-card__desc {
  margin-top: 0;
}

.pmip-pathways-section a.pmip-card__btn {
  display: flex;
}

/* ── Responsive breakpoints ───────────────────────────────────────────────── */

/* ≤ 1100px — tighten gutters */
@media (max-width: 1100px) {
  .pmip-inner   { padding-left: 24px; padding-right: 24px; }
  .pmip-heading { font-size: 36px; margin-bottom: 40px; }
  .pmip-pathways-section { padding-top: 56px; padding-bottom: 64px; }
}

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

/* ≤ 640px — single column, compact */
@media (max-width: 640px) {
  .pmip-inner   { padding-left: 20px; padding-right: 20px; }
  .pmip-grid    { grid-template-columns: 1fr; gap: 12px; }
  .pmip-heading { font-size: 26px; margin-bottom: 28px; }
  .pmip-pathways-section { padding-top: 40px; padding-bottom: 48px; }
  .pmip-card__photo { height: 160px; }
}

/* ≤ 420px — smallest screens */
@media (max-width: 420px) {
  .pmip-inner { padding-left: 16px; padding-right: 16px; }
  .pmip-heading { font-size: 22px; }
  .pmip-card__btn { letter-spacing: 0.10em; font-size: 10px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pmip-card__btn { transition: none; }
}