/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/* ============================================================
   KIDS BOOK DAY — Section Component
   Dependency: Swiper.js (swiper-bundle.min.css)
   Root.css overrides noted inline where applicable
   ============================================================ */

/* ------------------------------------------------------------
   1. SECTION CONTAINER
   ------------------------------------------------------------ */
.exams {
  --color-1: #FC466B;
  --color-2: #051253;

  padding-block: 4rem;
  margin-block: 2rem;
  isolation: isolate;
  position: relative;
}

.section-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-clip-path: inset(0 -100vw);
          clip-path: inset(0 -100vw);
  z-index: -1;
}

.section-bg img {
  width: 100%;
  height: 150%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: bottom;
     object-position: bottom;
  -webkit-animation: parallax linear;
          animation: parallax linear;
  animation-timeline: view(); 
  animation-range-start: exit-crossing;
  animation-range-end: cover;

}

.section-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #3F5EFB;
  background: -o-radial-gradient(circle,rgba(63, 94, 251, 1) 0%, rgba(252, 70, 107, 1) 100%);
  background: radial-gradient(circle,rgba(63, 94, 251, 1) 0%, rgba(252, 70, 107, 1) 100%);
  mix-blend-mode: overlay;
}

@-webkit-keyframes parallax {
  0% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }

  100% {
    -webkit-transform: translateY(50%);
            transform: translateY(50%);
  }
}

@keyframes parallax {
  0% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }

  100% {
    -webkit-transform: translateY(50%);
            transform: translateY(50%);
  }
}

/* Remove animations for users who prefer reduced motion */

@media (prefers-reduced-motion: reduce) {
  * {
    -webkit-animation: none !important;
            animation: none !important;
  }
}


/* ------------------------------------------------------------
   2. HEADER — logo, heading, intro paragraph
   ------------------------------------------------------------ */

.exams h2 {
  /* fluid: 1.8rem (29px) @ 320px → 5.5rem (88px) @ 1440px */
  font-size: clamp(1.8rem, 4.3vw + 0.94rem, 5.5rem);
  font-weight: 300;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  max-width: 20ch;
  margin-inline: auto;
  margin-bottom: 0.5rem;
  color: var(--color-1);
}

.exams p {
  /* fluid: 1rem (16px) → 1.4rem (22px) @ 1440px */
  font-size: clamp(1rem, 0.5vw + 0.9rem, 1.4rem);
  font-weight: 500;
  text-align: center;
  max-width: 50ch;
  margin-inline: auto;
  margin-bottom: 3rem;
  color: var(--color-2);
}

/* ------------------------------------------------------------
   3. SWIPER LAYOUT — equal-height slides
   ------------------------------------------------------------ */
.exams .swiper-wrapper {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

.exams .swiper-slide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: auto;
}

/* ------------------------------------------------------------
   4. CARD ANATOMY
   .card-item → .card-link → .card-image / h3 / .cta
   ------------------------------------------------------------ */
.exams .card-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}

.exams .card-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  height: 100%;
  gap: 1rem;
  padding-bottom: 2rem;
  overflow: hidden;
  background: #fff;
  border-radius: 2rem;
  text-decoration: none;
  color: inherit;
}

.exams .card-image {
  aspect-ratio: 3 / 3.5;
  overflow: hidden;
  border-radius: 2rem;
  /* revealed on hover — creates green tint via img opacity */
  background-color: var(--color-2);
}

.exams .card-image img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.exams .card-item h3 {
  /* fluid: 0.875rem (14px) → 1.2rem (19px) @ 1440px */
  font-size: clamp(0.875rem, 0.45vw + 0.73rem, 1.12rem);
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  padding-inline: 0.75rem;
  color: var(--color-2);
}

.exams .card-item .cta {
  font-size: 0.9rem;
  font-weight: 700;
  width: -webkit-fit-content; /* Safari < 15 */
  width: -moz-fit-content;
  width: fit-content;
  min-width: 70%;
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  margin-top: auto;
  margin-inline: auto;
  background-color: var(--color-1);
  color: white;
  text-align: center;
  -webkit-transition: background-color 0.3s ease;
  -o-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}

/* ------------------------------------------------------------
   5. NAVIGATION BUTTONS
   Desktop: absolute left/right of swiper, vertically centered
   Mobile:  static row, centered below the slides
   ------------------------------------------------------------ */

/* wrapper gives buttons a positioning context outside the swiper clip */
.exams-swiper-nav {
  position: relative;
}

/* swiper keeps overflow: hidden — slides stay clipped */

.exams-button--next,
.exams-button--prev {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 10;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;

  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  border: none;
  background-color: white;
  -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
          box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  -webkit-transition:
    background-color 0.25s ease,
    -webkit-box-shadow 0.25s ease;
  transition:
    background-color 0.25s ease,
    -webkit-box-shadow 0.25s ease;
  -o-transition:
    background-color 0.25s ease,
    box-shadow 0.25s ease;
  transition:
    background-color 0.25s ease,
    box-shadow 0.25s ease;
  transition:
    background-color 0.25s ease,
    box-shadow 0.25s ease,
    -webkit-box-shadow 0.25s ease;
}

/*
  Fluid positioning: fully outside at 1280px → flush inside at 768px
  right/left: clamp(-4.5rem, -14vw + 7.25rem, 0.5rem)
  At 1280px → -4rem (button fully outside + gap)
  At  768px →  0.5rem (just inside the edge)
  Below 768px → clamped to 0.5rem (then mobile overrides kick in)
*/
.exams-button--next {
  right: clamp(-4.5rem, -14vw + 7.25rem, 0.5rem);
}
.exams-button--prev {
  left: clamp(-4.5rem, -14vw + 7.25rem, 0.5rem);
}

/* SVG arrow via mask-image — color controlled with background-color */
.exams-button--next::after,
.exams-button--prev::after {
  content: "";
  display: block;
  width: 1.1rem;
  height: 1.1rem;
  background-color: var(--color-1);
  -webkit-mask-image: url("../Assets/arrow-right-solid.svg");
  mask-image: url("../Assets/arrow-right-solid.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-transition: background-color 0.25s ease;
  -o-transition: background-color 0.25s ease;
  transition: background-color 0.25s ease;
}

/* flip horizontally for the left/prev arrow */
.exams-button--prev::after {
  -webkit-transform: scaleX(-1);
      -ms-transform: scaleX(-1);
          transform: scaleX(-1);
}

/* disabled state — Swiper adds this class automatically */
.exams-button--next.swiper-button-disabled,
.exams-button--prev.swiper-button-disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

/* ------------------------------------------------------------
   7. INTERACTIONS — pointer devices only (not touch)
   Overrides global a:hover { opacity: 0.7 } from Root.css
   ------------------------------------------------------------ */
@media (hover: hover) {
  .exams .card-link:hover {
    opacity: 1; /* cancel Root.css global a:hover opacity */
  }

  .exams .card-link:hover .card-image img {
    opacity: 0.82; /* green background bleeds through for tint */
  }

  .exams .card-link:hover .cta {
    background-color: var(--color-2);
  }

  .exams-button--next:hover,
  .exams-button--prev:hover {
    background-color: var(--color-1);
    -webkit-box-shadow: 0 4px 16px rgba(125, 61, 149, 0.35);
            box-shadow: 0 4px 16px rgba(125, 61, 149, 0.35);
  }

  .exams-button--next:hover::after,
  .exams-button--prev:hover::after {
    background-color: white;
  }
}

/* ------------------------------------------------------------
   8. RESPONSIVE
   ------------------------------------------------------------ */

/* background-attachment: fixed is broken on iOS Safari — reset */
@media (hover: none) and (pointer: coarse) {
  .exams {
    background-attachment: scroll;
  }
}

@media (max-width: 767px) {
  .exams .swiper-wrapper {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }

  /* collapse flex to block for single-column layout */
  .exams .swiper-slide,
  .exams .card-item {
    display: block;
    height: auto;
  }

  .exams .card-link {
    height: auto;
  }

  /* buttons move below the slides — add bottom padding to wrapper */
  .exams-swiper-nav {
    padding-bottom: 4.5rem;
  }

  .exams-button--next,
  .exams-button--prev {
    top: auto;
    bottom: 0.75rem;
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
  }

  /* center both buttons: total width = 3.5rem + 1rem gap + 3.5rem = 8rem */
  .exams-button--prev {
    left: calc(50% - 4rem);
    right: auto;
  }
  .exams-button--next {
    left: calc(50% + 0.5rem);
    right: auto;
  }
}