/**
 * Homepage overrides — "Certified Awesome!" circle carousel.
 *
 * Client request (Vibha, 25 Aug 2026): replace the horizontal white stat cards
 * with the coloured-circle treatment she shared.
 *
 * Loaded from the Orbrick Campaign Pages plugin on the front page only, rather
 * than edited into the theme's 256KB style.css — a file that size cannot be
 * round-tripped through the WP Theme File Editor without risking the whole
 * site's stylesheet. Every selector here is scoped to .or-hm-certified.
 *
 * The markup is unchanged apart from the two nav arrows: the card goes from a
 * flex row (percent | text) to a column (circle above text) purely in CSS.
 */

.or-hm-certified .stats-swiper {
  height: auto;
  padding-bottom: 8px;
}

.or-hm-certified .stats-swiper .swiper-slide {
  height: auto !important;
}

.or-hm-certified .stat-card {
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 8px 4px 0;
  background: transparent;
  border-radius: 0;
  text-align: center;
}

.or-hm-certified .stat-percent {
  display: grid;
  place-items: center;
  width: 118px;
  height: 118px;
  min-width: 0;
  border-radius: 50%;
  font-size: 26px;
  line-height: 1;
  color: #2b1640;
}

/* Purple-to-gold ramp, in the order the certifications are listed. Repeats
   every six slides so extra rows still land on a brand colour. */
.or-hm-certified .swiper-slide:nth-child(6n + 1) .stat-percent {
  background: #ead6f6;
}
.or-hm-certified .swiper-slide:nth-child(6n + 2) .stat-percent {
  background: #c9a0e8;
}
.or-hm-certified .swiper-slide:nth-child(6n + 3) .stat-percent {
  background: #5b2a86;
  color: #fff;
}
.or-hm-certified .swiper-slide:nth-child(6n + 4) .stat-percent {
  background: #f08519;
  color: #fff;
}
.or-hm-certified .swiper-slide:nth-child(6n + 5) .stat-percent {
  background: #f5c33b;
}
.or-hm-certified .swiper-slide:nth-child(6n + 6) .stat-percent {
  background: #fbe9a8;
}

.or-hm-certified .stat-text h3 {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.35;
  color: #5f5862;
}

.or-hm-certified .stat-text p {
  margin-top: 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: #1e1921;
}

/* Arrows sit outside the track, vertically centred on the circles. */
.or-hm-certified .stats-nav {
  position: absolute;
  top: 59px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-top: -17px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(48, 34, 55, 0.55);
  color: #fff;
  cursor: pointer;
  transition: background 0.18s ease;
  z-index: 2;
}

.or-hm-certified .stats-nav:hover {
  background: rgba(48, 34, 55, 0.8);
}

.or-hm-certified .stats-nav.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
}

.or-hm-certified .stats-prev {
  left: -14px;
}

.or-hm-certified .stats-next {
  right: -14px;
}

.or-hm-certified .stats-nav svg {
  width: 16px;
  height: 16px;
}

/* The vertical layout used a pagination rail off to the right; the horizontal
   carousel puts it under the track instead. */
.or-hm-certified .swiper-pagination {
  position: static;
  right: auto;
  margin-top: 22px;
  text-align: center;
}

@media (max-width: 991px) {
  .or-hm-certified .stat-percent {
    width: 104px;
    height: 104px;
    font-size: 23px;
  }

  .or-hm-certified .stats-nav {
    top: 52px;
  }

  .or-hm-certified .stats-prev {
    left: -6px;
  }

  .or-hm-certified .stats-next {
    right: -6px;
  }
}