/* =========================================================================
   pp-upgrade.css
   The "Evidence Blue" modernisation layer. Loads last, on top of
   pp-styles.css (the faithful port) and pp-divi-compat.css (the bridge).

   Keeping it separate means the original look is still one file away:
   dequeue this stylesheet and the page returns to the ported design.

   Tokens (from the active design):
     bg #FFFFFF   surface #F5F7FA   deep #1E2A44
     ink #2C3E50  muted #5A6C7D
     accent #2C5AA0  accentAlt #764BA2  accentLift #667EEA
     radius: pill / 16px cards / 24px panels
     shadows tinted with the accent hue, never pure black
   ========================================================================= */

/* --- Hero: asymmetric split on a soft gradient ground --------------------
   Padding lives on the section module now (Design > Spacing), not here. */
.et_pb_section.pp-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1100px 620px at 88% -12%, rgba(118, 75, 162, .17), transparent 62%),
    radial-gradient(900px 540px at -6% 8%,   rgba(102, 126, 234, .19), transparent 62%),
    linear-gradient(180deg, #FFFFFF 0%, #F5F7FA 100%);
}

.et_pb_row.pp-hero-row {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 48px;
  align-items: center;
}
.et_pb_row.pp-hero-row > .et_pb_column { width: 100%; margin: 0; padding: 0; }

.et_pb_column.pp-hero-content { text-align: left; }





.et_pb_group.pp-hero-cta {
  justify-content: flex-start;
  margin-bottom: 0 !important;
}

/* --- Hero visual: gradient panel behind, image breaking the frame -------- */
.et_pb_group.pp-hero-stack { position: relative; display: block; }

.et_pb_group.pp-hero-stack::before {
  content: '';
  position: absolute;
  inset: 34px -34px -34px 46px;
  border-radius: 24px;
  background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
  z-index: 0;
}

.et_pb_image.pp-hero-image { position: relative; z-index: 1; margin: 0; }

.et_pb_image.pp-hero-image .et_pb_image_wrap {
  display: block;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(44, 90, 160, .26);
}
.et_pb_image.pp-hero-image img { display: block; width: 100%; height: auto; }

/* --- Trust strip: its own thin band under the hero ----------------------- */
.et_pb_section.pp-proof {
  padding: 22px 0;
  background: #FFFFFF;
  border-top: 1px solid rgba(44, 90, 160, .10);
  border-bottom: 1px solid rgba(44, 90, 160, .10);
}
.pp-proof .pp-social-proof {
  display: flex;
  gap: 46px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  color: #5A6C7D;
  font-size: .95rem;
}
.pp-proof .pp-social-proof strong { color: #2C3E50; font-weight: 700; }

/* --- Mobile collapse, declared explicitly ------------------------------- */
@media (max-width: 980px) {
  .et_pb_row.pp-hero-row { grid-template-columns: 1fr; gap: 40px; }
  .et_pb_column.pp-hero-content { text-align: center; }
  
  .et_pb_group.pp-hero-cta { justify-content: center; }
  .et_pb_group.pp-hero-stack::before { inset: 22px -18px -22px 20px; }
  .pp-proof .pp-social-proof { gap: 20px; font-size: .9rem; }
}

/* --- Reduced motion: everything collapses to static and visible --------- */
@media (prefers-reduced-motion: reduce) {
  .pp-section *,
  .pp-section *::before,
  .pp-section *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .pp-section .et_pb_module {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --- Rhythm: tighter vertical spacing (density 0.55) --------------------- */
.et_pb_section.pp-courses,
.et_pb_section.pp-benefits,
.et_pb_section.pp-testimonials,


.et_pb_group.pp-courses-grid,
.et_pb_group.pp-benefits-grid,
.et_pb_group.pp-testimonial-grid { margin-top: 0 !important; }
.et_pb_row.pp-course-showcase    { gap: 3rem; }

/* --- Section grounds: alternate so the page is not six white bands ------- */
.et_pb_section.pp-courses         { background: #F5F7FA; }
.et_pb_section.pp-testimonials    { background: #FFFFFF; }
.et_pb_section.pp-preview-section { background: #F5F7FA; }
.et_pb_section.pp-cta {
  background:
    radial-gradient(820px 420px at 18% -35%, rgba(255, 255, 255, .18), transparent 62%),
    linear-gradient(135deg, #2C5AA0 0%, #764BA2 100%);
}

/* --- Course cards: real hover feedback ---------------------------------- */
.et_pb_group.pp-course-card {
  border-radius: 16px;
  border: 1px solid rgba(44, 90, 160, .09);
  box-shadow: 0 6px 24px rgba(44, 90, 160, .09);
  transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease, border-color .35s ease;
}
.et_pb_group.pp-course-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 46px rgba(44, 90, 160, .20);
  border-color: rgba(44, 90, 160, .18);
}
.et_pb_image.pp-course-image img { transition: transform .6s cubic-bezier(.22, .61, .36, 1); }
.pp-course-card:hover .pp-course-image img { transform: scale(1.07); }

/* --- Benefits on the deep ground: glass cards, not six white boxes ------- */
.et_pb_section.pp-benefits {
  background-color: #1E2A44;
  background-image:
    radial-gradient(900px 520px at 10% -25%, rgba(102, 126, 234, .30), transparent 62%),
    radial-gradient(720px 440px at 94% 125%, rgba(118, 75, 162, .32), transparent 62%);
}



.et_pb_group.pp-benefit-card {
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 16px;
  padding: 2rem 1.75rem;
  box-shadow: none;
  transition: transform .35s cubic-bezier(.22, .61, .36, 1), background .35s ease, border-color .35s ease;
}
.et_pb_group.pp-benefit-card:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .22);
}


.pp-benefits .pp-benefit-icon { box-shadow: 0 8px 22px rgba(102, 126, 234, .38); }

/* --- Testimonials ------------------------------------------------------- */
.et_pb_group.pp-testimonial {
  background: #F5F7FA;
  border: 1px solid rgba(44, 90, 160, .09);
  border-radius: 16px;
  padding: 2rem 1.9rem;
  transition: transform .35s ease, box-shadow .35s ease;
}
.et_pb_group.pp-testimonial:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(44, 90, 160, .14);
}

/* --- Stats: Divi Number Counters inside the gradient panel --------------- */
.et_pb_column.pp-course-visual { border-radius: 24px; }
.pp-course-stats .et_pb_number_counter { margin: 0; }
.pp-course-stats .et_pb_number_counter .percent p {
  font-size: 2.15rem; font-weight: 800; color: #FFFFFF; line-height: 1.05; margin: 0;
}
.pp-course-stats .pp-stat-plus .percent p::after { content: '+'; }
.pp-course-stats .et_pb_number_counter h3.title {
  font-size: .85rem; font-weight: 500; line-height: 1.35;
  color: rgba(255, 255, 255, .86); margin: .35rem 0 0;
}

/* --- Ghost button (the non-certificated option) -------------------------- */
body #page-container .et_pb_section a.et_pb_button.pp-btn-ghost {
  background: transparent; color: #2C5AA0 !important;
  padding: 14px 26px !important; border: 1px solid rgba(44, 90, 160, .35);
  border-radius: 999px; font-weight: 600; font-size: 1rem;
  font-family: inherit; letter-spacing: normal; line-height: 1.6; transition: all .3s;
}
body #page-container .et_pb_section a.et_pb_button.pp-btn-ghost:hover {
  background: rgba(44, 90, 160, .07); border-color: #2C5AA0;
  color: #2C5AA0 !important; transform: translateY(-2px);
}
body #page-container .et_pb_section a.et_pb_button.pp-btn-ghost:before,
body #page-container .et_pb_section a.et_pb_button.pp-btn-ghost:after {
  display: none !important; content: none !important; margin: 0 !important;
}

/* --- Course preview: asymmetric split ----------------------------------- */
.et_pb_row.pp-preview-row {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center;
}
.et_pb_row.pp-preview-row > .et_pb_column { width: 100%; margin: 0; padding: 0; }

@media (max-width: 980px) {
  .et_pb_row.pp-preview-row { grid-template-columns: 1fr; gap: 32px; }
  .et_pb_section.pp-courses,
  .et_pb_section.pp-benefits,
  .et_pb_section.pp-testimonials,

}
/* --- Zigzag the featured showcase against the hero -----------------------
   The hero is text-left / visual-right. Flipping this row stops the two
   consecutive splits reading as the same layout family twice. --------- */
.et_pb_row.pp-course-showcase { grid-template-columns: .92fr 1.08fr; }
.et_pb_row.pp-course-showcase > .et_pb_column.pp-course-visual { order: -1; }
@media (max-width: 768px) {
  .et_pb_row.pp-course-showcase { grid-template-columns: 1fr; }
  .et_pb_row.pp-course-showcase > .et_pb_column.pp-course-visual { order: 0; }
}
/* --- Course cards: align the grid -----------------------------------------
   Two problems in the ported layout:
     1. the badge stretched to the full card width, so a long label wrapped to
        two lines and the chips came out different heights;
     2. cards without a badge left their "Learn More" at a different height.
   Fix: the badge becomes a shrink-to-fit single-line pill, and the description
   takes the slack so the bottom block sits on one baseline across the row. */
.et_pb_group.pp-course-content > .et_pb_text:nth-child(2) { flex: 1 1 auto; }

.pp-course-content .et_pb_text_inner .pp-course-badge {
  display: inline-block;
  width: auto;
  max-width: 100%;
  white-space: nowrap;
  font-size: .78rem;
  line-height: 1.3;
  padding: 7px 15px;
  margin: 0 0 1rem;
  border-radius: 999px;
  letter-spacing: .01em;
}


/* The CTA section was renamed from .pp-final-cta to .pp-cta so the legacy
   stylesheet stops out-ranking the modules. This restores the centring that
   the old rule provided. Modules can still override it from the Design tab. */
.et_pb_section.pp-cta { text-align: center; }
.et_pb_section.pp-cta .et_pb_button_module_wrapper { text-align: center; }