/* ============================================================
   Home: PROGRAMS swiper section. Owned by programs agent.
   Section root: .elementor-element-46bd02b
   "Where ARKidzoo helps kids grow." heading + 6-card service
   swiper. Each card wears one of the 5 logo accent colors,
   cycling red -> purple -> green -> yellow -> blue -> red so
   the row reads as a colorful procession of learning areas.
   ============================================================ */

/* ---- SECTION SURFACE --------------------------------------- */
/* Cream paper with a soft sunburst glow behind the heading to
   echo the brand's signature ambient lighting.                 */
body .elementor-element-46bd02b {
  background: var(--surface-page) !important;
  position: relative;
  isolation: isolate;
  padding-top: var(--space-8) !important;
  padding-bottom: var(--space-8) !important;
}

body .elementor-element-46bd02b::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 50% 12%,
    rgba(245, 197, 24, .14) 0%,
    rgba(245, 197, 24, 0) 55%);
  pointer-events: none;
}

/* ---- DECORATIVE PNGs --------------------------------------- */
/* Dotted-circle holder PNG (left) + spinning kid-flower (top
   right) get a touch of opacity so they read as ambient brand
   confetti rather than competing with the cards.               */
body .elementor-element-aaa66f8 .pxl-item--image,
body .elementor-element-1a77690 .pxl-item--image {
  opacity: .85;
  filter: saturate(1.05);
}

/* ---- HEADING + BODY INTRO ---------------------------------- */
body .elementor-element-1c2d46d .pxl-heading--text,
body .elementor-element-1c2d46d h2 {
  font-family: var(--font-display) !important;
  font-weight: var(--weight-bold) !important;
  font-size: var(--text-h1) !important;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-snug);
  color: var(--text-primary) !important;
}

body .elementor-element-2327070 .pxl-text-editor,
body .elementor-element-2327070 p {
  font-family: var(--font-body) !important;
  font-size: var(--text-body-l) !important;
  line-height: var(--leading-normal);
  color: var(--text-secondary) !important;
  max-width: 60ch;
  margin-inline: auto;
}

/* ---- SWIPER CONTAINER -------------------------------------- */
body .elementor-element-c974023,
body .elementor-element-eb888cc {
  position: relative;
}

body .pxl-service-carousel .pxl-swiper-container {
  padding-block: var(--space-5) !important;
}

/* ---- CARD BASE --------------------------------------------- */
/* White raised surface with the warm card shadow, soft round
   corners, gentle ease-out hover lift.                         */
body .pxl-service-carousel .pxl-post--inner {
  background: var(--surface-raised) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card) !important;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out) !important;
}

body .pxl-service-carousel .pxl-post--inner:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg) !important;
}

/* Featured image: gentle zoom on card hover. */
body .pxl-service-carousel .pxl-post--featured {
  overflow: hidden;
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}

body .pxl-service-carousel .pxl-post--featured img {
  transition: transform var(--duration-slow) var(--ease-out);
  display: block;
  width: 100%;
  height: auto;
}

body .pxl-service-carousel .pxl-post--inner:hover .pxl-post--featured img {
  transform: scale(1.04);
}

/* Card content padding + typography. */
body .pxl-service-carousel .pxl-post--contents {
  padding: var(--space-5) var(--space-5) var(--space-5) !important;
}

body .pxl-service-carousel .pxl-post--title,
body .pxl-service-carousel .pxl-post--title a {
  font-family: var(--font-display) !important;
  font-weight: var(--weight-bold) !important;
  font-size: var(--text-h4) !important;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  color: var(--text-primary) !important;
  margin-bottom: var(--space-2);
  transition: color var(--duration-fast) var(--ease-out);
}

body .pxl-service-carousel .pxl-post--inner:hover .pxl-post--title a {
  color: var(--color-brand) !important;
}

body .pxl-service-carousel .pxl-post--excerpt,
body .pxl-service-carousel .pxl-excerpt--holder {
  font-family: var(--font-body) !important;
  font-size: var(--text-body-s) !important;
  line-height: var(--leading-normal);
  color: var(--text-secondary) !important;
}

/* ---- ARROW LINK INSIDE EACH CARD --------------------------- */
/* The custom 2-tone SVG was retinted red+purple globally.
   Wrap it in a soft pill chip that slides on hover.            */
body .pxl-service-carousel .btn-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-red-50);
  transition: background var(--duration-fast) var(--ease-out),
              transform var(--duration-base) var(--ease-bounce);
}

body .pxl-service-carousel .btn-link:hover {
  background: var(--color-red-100);
  transform: translateX(4px);
}

body .pxl-service-carousel .btn-link svg {
  height: 28px;
  width: auto;
}

/* ---- 5-COLOR ROTATION ACROSS THE 6 CARDS ------------------- */
/* Cycle through red, purple, green, yellow, blue so the swiper
   reads as a procession of all five logo colors. The 6th card
   wraps back to red. Each card gets a colored accent strip + a
   tinted excerpt band, plus a colored shadow on hover.         */

/* Card 1 + 6 - RED */
body .pxl-service-carousel .pxl-swiper-slide:nth-child(5n+1) .pxl-post--inner {
  border-top: 6px solid var(--color-brand);
}
body .pxl-service-carousel .pxl-swiper-slide:nth-child(5n+1) .pxl-post--inner:hover {
  box-shadow: 0 16px 40px rgba(230, 59, 59, .22) !important;
}

/* Card 2 - PURPLE */
body .pxl-service-carousel .pxl-swiper-slide:nth-child(5n+2) .pxl-post--inner {
  border-top: 6px solid var(--color-purple-500);
}
body .pxl-service-carousel .pxl-swiper-slide:nth-child(5n+2) .pxl-post--inner:hover {
  box-shadow: 0 16px 40px rgba(111, 42, 140, .22) !important;
}

/* Card 3 - GREEN */
body .pxl-service-carousel .pxl-swiper-slide:nth-child(5n+3) .pxl-post--inner {
  border-top: 6px solid var(--color-green-500);
}
body .pxl-service-carousel .pxl-swiper-slide:nth-child(5n+3) .pxl-post--inner:hover {
  box-shadow: 0 16px 40px rgba(122, 197, 74, .22) !important;
}

/* Card 4 - YELLOW */
body .pxl-service-carousel .pxl-swiper-slide:nth-child(5n+4) .pxl-post--inner {
  border-top: 6px solid var(--color-yellow-500);
}
body .pxl-service-carousel .pxl-swiper-slide:nth-child(5n+4) .pxl-post--inner:hover {
  box-shadow: 0 16px 40px rgba(245, 197, 24, .28) !important;
}

/* Card 5 - BLUE */
body .pxl-service-carousel .pxl-swiper-slide:nth-child(5n) .pxl-post--inner {
  border-top: 6px solid var(--color-blue-500);
}
body .pxl-service-carousel .pxl-swiper-slide:nth-child(5n) .pxl-post--inner:hover {
  box-shadow: 0 16px 40px rgba(46, 137, 216, .22) !important;
}

/* ---- SWIPER NAVIGATION ARROWS ------------------------------ */
/* Red pill background with white icon. Position on either flank
   of the carousel, vertically centered, with a warm shadow.    */
body .pxl-service-carousel .pxl-swiper-arrow {
  width: 52px !important;
  height: 52px !important;
  border-radius: var(--radius-pill) !important;
  background: var(--color-brand) !important;
  color: var(--color-white) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  transition: background var(--duration-fast) var(--ease-out),
              transform var(--duration-base) var(--ease-bounce),
              box-shadow var(--duration-fast) var(--ease-out) !important;
  cursor: pointer;
}

body .pxl-service-carousel .pxl-swiper-arrow i,
body .pxl-service-carousel .pxl-swiper-arrow .icomoon {
  color: var(--color-white) !important;
  font-size: 18px;
}

body .pxl-service-carousel .pxl-swiper-arrow:hover {
  background: var(--color-brand-hover) !important;
  box-shadow: var(--glow-red);
  transform: scale(1.08);
}

body .pxl-service-carousel .pxl-swiper-arrow:active {
  transform: scale(.96);
}

body .pxl-service-carousel .pxl-swiper-arrow-prev:hover {
  transform: scale(1.08) translateX(-2px);
}

body .pxl-service-carousel .pxl-swiper-arrow-next:hover {
  transform: scale(1.08) translateX(2px);
}

/* No pagination dots in this section, but lock them off in case
   the template tries to render them. */
body .pxl-service-carousel .pxl-swiper-pagination,
body .pxl-service-carousel .swiper-pagination {
  display: none !important;
}

/* ---- DIVIDER PATTERN BELOW CAROUSEL ------------------------ */
/* The squiggle divider gets retinted to brand red so the wavy
   line under the swiper feels intentional.                     */
body .elementor-element-6e958a3 .elementor-divider-separator {
  border-color: var(--color-red-300) !important;
  color: var(--color-red-300) !important;
  opacity: .75;
}

body .elementor-element-6e958a3 {
  --divider-color: var(--color-red-300) !important;
  filter: hue-rotate(0deg);
}

/* ---- VIEW ALL PRODUCTS button ------------------------------ */
/* Already retinted to brand red by global button rules; here we
   guarantee pill radius + a confident hover lift.              */
body .elementor-element-1a80c16 .pxl-btn,
body .elementor-element-1a80c16 a {
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-display) !important;
  letter-spacing: var(--tracking-tight);
}

/* ---- REDUCED MOTION ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body .pxl-service-carousel .pxl-post--inner,
  body .pxl-service-carousel .pxl-post--featured img,
  body .pxl-service-carousel .btn-link,
  body .pxl-service-carousel .pxl-swiper-arrow {
    transition: none !important;
  }
  body .pxl-service-carousel .pxl-post--inner:hover {
    transform: none;
  }
  body .pxl-service-carousel .pxl-post--inner:hover .pxl-post--featured img {
    transform: none;
  }
  body .pxl-service-carousel .pxl-swiper-arrow:hover {
    transform: none;
  }
}