/*
 * PMI Certifications — certifications.css v1.0.0
 *
 * Pixel measurements from reference screenshot:
 *
 * SECTION
 *   bg:                  #ffffff (pure white)
 *   padding:             64px top / 0 bottom (why panel extends to bottom)
 *
 * HEADING
 *   left-aligned (NOT centered)
 *   font-size:           43px
 *   font-weight:         800
 *   color:               #111111
 *   margin-bottom:       12px
 *
 * INTRO PARAGRAPH
 *   font-size:           15px
 *   color:               #3d3d3d
 *   max-width:           580px
 *   line-height:         1.60
 *   margin-bottom:       44px
 *
 * CERT CARD GRID
 *   columns:             5
 *   gap:                 16px
 *   card bg:             #f4f6f9
 *   card border:         1px solid #dfe4ed
 *   card border-radius:  6px
 *   card padding:        24px
 *   card hover:          white bg, shadow lift
 *
 * BADGE CIRCLE
 *   size:                46px
 *   bg:                  #ffffff
 *   border-radius:       50%
 *   icon color:          #1a5fa8 (PMI blue)
 *   icon size:           22px
 *   margin-bottom:       16px
 *
 * CERT TITLE
 *   font-size:           16.5px
 *   font-weight:         700
 *   color:               #1a5fa8  (PMI blue)
 *   margin-bottom:       4px
 *
 * CERT SUBTITLE
 *   font-size:           10px
 *   font-weight:         600
 *   color:               #8a9bb5
 *   letter-spacing:      0.08em
 *   text-transform:      uppercase
 *   margin-bottom:       14px
 *
 * CERT DESCRIPTION
 *   font-size:           13.5px
 *   color:               #44464f
 *   line-height:         1.52
 *
 * WHY PANEL
 *   bg:                  #0f2d58
 *   border-radius:       8px
 *   margin-top:          40px
 *   padding:             52px 48px
 *   layout:              3-column: [items 2-col] [items 2-col] [buttons]
 *
 * WHY ITEM
 *   icon:                24px circle, stroke #4a9fe8, checkmark inside
 *   title:               14.5px, 700, #ffffff
 *   desc:                12.5px, 400, rgba(255,255,255,0.62)
 *   item gap:             20px vertical
 *
 * WHY BUTTONS
 *   primary bg:          #1a8fe8
 *   primary color:       #ffffff
 *   primary radius:      4px
 *   primary padding:     13px 28px
 *   primary font:        14px 600
 *   outline border:      1px solid rgba(255,255,255,0.75)
 *   outline color:       #ffffff
 */

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

/* ── Elementor isolation ────────────────────────────────────────────────────── */
.elementor-widget-pmi_certifications_section .elementor-widget-container {
  padding: 0 !important;
  margin:  0 !important;
}
.elementor-section:has(.pmic-section),
.e-con:has(.pmic-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 ────────────────────────────────────────────────────────── */
.pmic-section {
  background-color: #ffffff;
  padding-top:    64px;
  padding-bottom: 0;          /* why panel forms the visual bottom */
  width: 100%;
  display: block;
}

/* ── Inner container ─────────────────────────────────────────────────────────
   1200px max-width, side gutters of 32px.                               */
.pmic-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px 64px;       /* bottom padding on inner — accounts for why panel margin */
}

/* ══════════════════════════════════════════════════════════════════
   SECTION HEADER — left-aligned
   Screenshot: heading left, NOT centered.
══════════════════════════════════════════════════════════════════ */
.pmic-header {
  margin-bottom: 44px;        /* gap from header to card grid */
}

.pmic-heading {
  font-family:    'DM Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size:      43px;
  font-weight:    800;
  line-height:    1.08;
  letter-spacing: -0.02em;
  color:          #111111;
  text-align:     left;       /* LEFT — confirmed from screenshot */
  margin-bottom:  12px;
  /* WP guard */
  text-transform: none;
  border: none;
  padding: 0;
}

.pmic-intro {
  font-family:  'DM Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size:    15px;
  font-weight:  400;
  line-height:  1.60;
  color:        #3d3d3d;
  max-width:    580px;        /* ~600px wraps at 2 lines as in screenshot */
  text-align:   left;
  /* WP guard */
  padding: 0;
}

/* ══════════════════════════════════════════════════════════════════
   5-COLUMN CERT CARD GRID
   Screenshot: 5 equal columns, 16px gap, left-aligned in container.
══════════════════════════════════════════════════════════════════ */
.pmic-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  align-items: stretch;
}

/* ══════════════════════════════════════════════════════════════════
   CERTIFICATION CARD
   - bg: #f4f6f9 (light grey-blue)
   - border: 1px solid #dfe4ed
   - border-radius: 6px
   - padding: 24px
   - Full card is an <a> link
══════════════════════════════════════════════════════════════════ */
.pmic-card {
  display:        flex;
  flex-direction: column;
  background:     #f4f6f9;
  border:         1px solid #dfe4ed;
  border-radius:  6px;
  padding:        24px;
  text-decoration: none;
  cursor:         pointer;
  /* Smooth hover lift */
  transition:
    background-color 0.20s ease,
    border-color     0.20s ease,
    box-shadow       0.20s ease,
    transform        0.20s ease;
}

/* Hover: card lifts to white, gains subtle shadow */
.pmic-card:hover {
  background:   #ffffff;
  border-color: #c8d0df;
  box-shadow:   0 4px 20px rgba(0, 43, 100, 0.10);
  transform:    translateY(-2px);
}

.pmic-card:focus-visible {
  outline:        3px solid #1a8fe8;
  outline-offset: 2px;
}

/* ── Badge circle ─────────────────────────────────────────────────────────────
   White circle, ~46×46px, icon inside is PMI blue.                    */
.pmic-card__badge-wrap {
  width:           46px;
  height:          46px;
  background:      #ffffff;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin-bottom:   16px;
  flex-shrink:     0;
  box-shadow:      0 1px 4px rgba(0, 43, 100, 0.08);
}

.pmic-card__badge-img {
  width:  26px;
  height: 26px;
  object-fit: contain;
}

/* Default medal SVG — PMI blue, matches screenshot shield/badge icon */
.pmic-card__badge-svg {
  width:  22px;
  height: 22px;
  color:  #1a5fa8;            /* PMI blue — matches screenshot icon colour */
  display: block;
}

/* ── Cert card text ───────────────────────────────────────────────────────────
   Title: PMP®, CAPM®, PfMP® etc. in PMI blue.                        */
.pmic-card__title {
  font-family:    'DM Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size:      16.5px;
  font-weight:    700;
  line-height:    1.20;
  color:          #1a5fa8;    /* PMI blue — confirmed from screenshot */
  margin-bottom:  4px;
  letter-spacing: -0.005em;
  /* WP guard */
  text-transform: none;
  border: none;
  padding: 0;
}

/* Subtitle: PROJECT MANAGEMENT PROFESSIONAL — spaced grey uppercase */
.pmic-card__subtitle {
  font-family:    'DM Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          #8a9bb5;    /* muted blue-grey — matches screenshot */
  margin-bottom:  14px;
  line-height:    1.35;
  padding: 0;
}

/* Description paragraph */
.pmic-card__desc {
  font-family:  'DM Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size:    13.5px;
  font-weight:  400;
  line-height:  1.52;
  color:        #44464f;      /* dark grey — matches screenshot body text */
  flex:         1;            /* stretches to push nothing, but ensures equal height */
  padding: 0;
}

/* ══════════════════════════════════════════════════════════════════
   "WHY CERTIFICATION MATTERS" DARK PANEL

   Screenshot: deep navy rounded panel, contains a 3-col layout:
   [col1: 2 items] [col2: 2 items] [col3: 2 buttons]
══════════════════════════════════════════════════════════════════ */
.pmic-why {
  background:    #0f2d58;     /* deep PMI navy — measured from screenshot */
  border-radius: 8px;
  margin-top:    40px;
  padding:       52px 48px;
  display:       grid;
  grid-template-columns: 1fr 1fr auto; /* 2 item cols + 1 button col */
  gap:           0 40px;               /* no row gap, 40px column gap */
  align-items:   center;
}

/* ── Why items area (col 1 + col 2) ─────────────────────────────────────────
   Screenshot shows a 2×2 grid of items. We use 2 separate grid columns,
   each holding 2 items stacked, to match the screenshot layout.        */
.pmic-why__items {
  display:               grid;
  grid-template-columns: 1fr 1fr;   /* 2 cols of items */
  grid-column:           1 / 3;     /* spans first 2 grid columns */
  gap:                   20px 40px; /* row-gap 20px, col-gap 40px */
  align-items:           start;
}

/* Single why-item: icon + text side-by-side */
.pmic-why__item {
  display:    flex;
  align-items: flex-start;
  gap:        11px;
}

/* Checkmark-circle icon */
.pmic-why__icon {
  width:       26px;
  height:      26px;
  flex-shrink: 0;
  color:       #4a9fe8;       /* bright blue — matches screenshot icon colour */
  margin-top:  1px;           /* optical alignment with title */
}
.pmic-why__icon svg {
  width:  100%;
  height: 100%;
  display: block;
}

/* Why item title */
.pmic-why__title {
  font-family: 'DM Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size:   14.5px;
  font-weight: 700;
  color:       #ffffff;
  line-height: 1.25;
  margin-bottom: 3px;
  padding: 0;
}

/* Why item sub-description */
.pmic-why__desc {
  font-family: 'DM Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size:   12.5px;
  font-weight: 400;
  color:       rgba(255, 255, 255, 0.62); /* muted white — matches screenshot */
  line-height: 1.45;
  padding: 0;
}

/* ── CTA buttons column ───────────────────────────────────────────────────────
   Right-most column: 2 buttons stacked vertically.
   Screenshot: both buttons same width, flush right.                   */
.pmic-why__ctas {
  display:         flex;
  flex-direction:  column;
  gap:             12px;
  align-items:     stretch;
  justify-content: center;
  min-width:       190px;     /* prevents buttons from being too narrow */
}

/* Base button styles */
.pmic-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         13px 28px;
  border-radius:   4px;
  font-family:     'DM Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size:       14px;
  font-weight:     600;
  line-height:     1;
  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;
}

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

/* Primary — bright blue solid */
.pmic-btn--primary {
  background:   #1a8fe8;      /* electric/sky blue — measured from screenshot */
  border:       2px solid #1a8fe8;
  color:        #ffffff;
}
.pmic-btn--primary:hover {
  background:   #1279cc;
  border-color: #1279cc;
  box-shadow:   0 4px 16px rgba(26, 143, 232, 0.40);
}
.pmic-btn--primary:focus-visible {
  outline:        3px solid rgba(255,255,255,0.7);
  outline-offset: 2px;
}

/* Outline — transparent with white border */
.pmic-btn--outline {
  background:   transparent;
  border:       1px solid rgba(255, 255, 255, 0.75);
  color:        #ffffff;
}
.pmic-btn--outline:hover {
  background:   rgba(255, 255, 255, 0.10);
  border-color: #ffffff;
  box-shadow:   0 4px 16px rgba(0, 0, 0, 0.20);
}
.pmic-btn--outline:focus-visible {
  outline:        3px solid rgba(255,255,255,0.7);
  outline-offset: 2px;
}

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

/* ≤ 1200px — 4 cert cols */
@media (max-width: 1200px) {
  .pmic-inner   { padding: 0 24px 56px; }
  .pmic-heading { font-size: 38px; }
}

/* ≤ 1050px — 3 cert cols, why panel 2-col */
@media (max-width: 1050px) {
  .pmic-grid             { grid-template-columns: repeat(3, 1fr); }
  .pmic-why              { grid-template-columns: 1fr 1fr; gap: 32px; }
  .pmic-why__items       { grid-column: 1 / -1; }
  .pmic-why__ctas        { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; }
}

/* ≤ 900px — 2 cert cols + stack why panel */
@media (max-width: 900px) {
  .pmic-section          { padding-top: 48px; }
  .pmic-heading          { font-size: 32px; }
  .pmic-grid             { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .pmic-why              { padding: 40px 32px; grid-template-columns: 1fr; gap: 28px; }
  .pmic-why__items       { grid-template-columns: 1fr; grid-column: auto; gap: 20px; }
  .pmic-why__ctas        { flex-direction: row; flex-wrap: wrap; gap: 12px; }
}

/* ≤ 640px — single column cert, compact */
@media (max-width: 640px) {
  .pmic-inner            { padding: 0 20px 48px; }
  .pmic-section          { padding-top: 40px; }
  .pmic-heading          { font-size: 26px; margin-bottom: 10px; }
  .pmic-header           { margin-bottom: 32px; }
  .pmic-grid             { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .pmic-why              { padding: 32px 24px; gap: 24px; }
  .pmic-why__ctas        { flex-direction: column; }
  .pmic-btn              { width: 100%; }
}

/* ≤ 420px */
@media (max-width: 420px) {
  .pmic-inner  { padding: 0 16px 40px; }
  .pmic-grid   { grid-template-columns: 1fr; }
  .pmic-why    { padding: 28px 20px; }
}

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