/* =========================================================================
   pp-featured.css
   Featured Course, redesigned as one immersive showcase.

   Deep ground with accent blooms, image bleeding off the right edge,
   price as display type beside the CTA, counters on a hairline strip.
   ========================================================================= */

/* Padding lives on the section module now (Design > Spacing). */
.et_pb_section.pp-featured-course {
  position: relative;
  overflow: hidden;
  background-color: #1E2A44;
  background-image:
    radial-gradient(980px 620px at 88% -18%, rgba(118, 75, 162, .55), transparent 64%),
    radial-gradient(820px 520px at -8% 108%, rgba(102, 126, 234, .42), transparent 64%);
}

/* --- Layout -------------------------------------------------------------- */
.et_pb_row.pp-feature-main {
  display: grid;
  grid-template-columns: .98fr 1.02fr;
  gap: 64px;
  align-items: center;
}
.et_pb_row.pp-feature-main > .et_pb_column { width: 100%; margin: 0; padding: 0; }

/* --- The one eyebrow on the page ---------------------------------------- */


/* --- Type ---------------------------------------------------------------- */




/* --- Highlights: two columns so the panel stays compact ------------------ */
.pp-featured-course .et_pb_text_inner ul.pp-feature-list {
  list-style: none; margin: 0 0 2rem; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: 1.75rem; row-gap: .6rem;
}
.pp-featured-course .et_pb_text_inner ul.pp-feature-list li {
  position: relative; padding: 0 0 0 1.6rem;
  color: #D6DEEA; font-size: .93rem; line-height: 1.45;
}
.pp-featured-course .et_pb_text_inner ul.pp-feature-list li::before {
  content: ''; position: absolute; left: 0; top: .42em;
  width: 8px; height: 8px; border-radius: 999px;
  background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
}
/* --- Price beside the CTA: dramatic scale contrast ----------------------- */
.et_pb_group.pp-feature-buy {
  display: flex; flex-direction: row; align-items: center;
  gap: 1.5rem; flex-wrap: wrap; margin: 0 0 1rem;
}
.pp-featured-course .pp-price { display: flex; flex-direction: column; line-height: 1; }
.pp-featured-course .pp-price-amount {
  color: #FFFFFF; font-size: 2.9rem; font-weight: 800;
  letter-spacing: -.03em; line-height: 1;
}
.pp-featured-course .pp-price-note {
  color: #A9B6CC; font-size: .78rem; font-weight: 500;
  letter-spacing: .02em; margin-top: .4rem;
}



.pp-featured-course .et_pb_text_inner p.pp-feature-alt {
  color: #8FA0BC; font-size: .88rem; margin: 0;
}
.pp-featured-course .et_pb_text_inner p.pp-feature-alt a {
  color: #FFFFFF; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .35);
  transition: text-decoration-color .3s ease;
}
.pp-featured-course .et_pb_text_inner p.pp-feature-alt a:hover {
  text-decoration-color: #FFFFFF;
}

/* --- Image: breaks the container, bleeds toward the viewport edge -------- */
.et_pb_column.pp-feature-media { position: relative; }
.et_pb_image.pp-feature-image { margin: 0; position: relative; }
.et_pb_image.pp-feature-image::before {
  content: ''; position: absolute; inset: 26px -30px -26px 34px;
  border-radius: 24px; background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
  opacity: .55; z-index: 0;
}
.et_pb_image.pp-feature-image .et_pb_image_wrap {
  display: block; position: relative; z-index: 1;
  border-radius: 24px; overflow: hidden;
  box-shadow: 0 34px 70px rgba(5, 12, 28, .55);
}
.et_pb_image.pp-feature-image img { display: block; width: 100%; height: auto; }

/* --- Stats strip along the bottom of the panel --------------------------- */
.et_pb_row.pp-feature-stats { margin-top: 64px; }
.et_pb_group.pp-stats-strip {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
  padding-top: 2.25rem; border-top: 1px solid rgba(255, 255, 255, .14);
}
.pp-stats-strip .et_pb_number_counter { margin: 0; }
.pp-stats-strip .et_pb_number_counter .percent p { text-align: left; }
.pp-stats-strip .et_pb_number_counter h3.title { text-align: left; }

/* --- Mobile collapse, declared ------------------------------------------ */
@media (max-width: 980px) {
  .et_pb_row.pp-feature-main { grid-template-columns: 1fr; gap: 40px; }
  .et_pb_column.pp-feature-media { order: -1; }
  .et_pb_image.pp-feature-image::before { inset: 20px -14px -20px 18px; }
  .et_pb_row.pp-feature-stats { margin-top: 44px; }
}
@media (max-width: 640px) {
  .pp-featured-course .et_pb_text_inner ul.pp-feature-list { grid-template-columns: 1fr; }
  .et_pb_group.pp-stats-strip { grid-template-columns: 1fr; gap: 1.25rem; }
  .pp-featured-course .pp-price-amount { font-size: 2.4rem; }
}
/* --- Counter internals ---------------------------------------------------
   Divi's counter ships a progress bar and generous margins between the
   number and its title; neither is wanted here. ------------------------- */
.pp-stats-strip .et_pb_number_counter .percent { margin: 0; }
.pp-stats-strip .et_pb_number_counter .percent p { margin: 0; line-height: 1.05; }
.pp-stats-strip .et_pb_number_counter h3.title { margin: .5rem 0 0; }
.pp-stats-strip .et_pb_number_counter .et_pb_counter_amount,
.pp-stats-strip .et_pb_number_counter .et_pb_counter_container { display: none; }

/* The "+" suffix on counters that are not percentages. */
.pp-stats-strip .pp-stat-plus .percent p::after { content: '+'; }
/* Divi reserves a fixed height on .percent for the circle/bar it draws.
   With the bar hidden that height is dead space above the label. */
.pp-stats-strip .et_pb_number_counter .percent { height: auto; min-height: 0; }
.pp-stats-strip .et_pb_number_counter h3.title { padding-bottom: 0; }
/* --- Image on the left, copy on the right --------------------------------
   DOM order stays copy-then-image so screen readers and the mobile stack
   still lead with the course name. --------------------------------------- */
.et_pb_row.pp-feature-main > .et_pb_column.pp-feature-media { order: -1; }

/* The offset plane and the shadow lean the other way now. */
.et_pb_image.pp-feature-image::before { inset: 26px 34px -26px -30px; }

@media (max-width: 980px) {
  .et_pb_image.pp-feature-image::before { inset: 20px 18px -20px -14px; }
}