/* Unique World Holidays — Home page "Seasonal Favorites" section.
   Badge+heading pattern matches What Sets Us Apart (same site-wide
   convention). Slider shell (track/nav) mirrors home-team-section.css's
   structure — see that file for the carousel-specific reasoning. The
   flip mechanics below are new: a plain CSS 3D transform on an inner
   wrapper, kept separate from the GSAP translateX transform JS applies
   to the outer .uwh-sf-card so the two never fight over the same
   `transform` property. */

.uwh-sf {
  width: 100%;
  background-color: #ffffff;
  padding: 80px 0;
  overflow: hidden;
}

.uwh-sf-heading {
  text-align: center;
  margin: 0 0 56px;
  padding: 0 24px;
}

.uwh-sf-badge {
  display: inline-block;
  width: fit-content;
  font-family: Poppins, sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #ffffff;
  background: linear-gradient(120deg, #012245, #43597a);
  padding: 10px 20px;
  border-radius: 50px;
  box-shadow: 0 0 7px 0.3px rgba(0, 0, 0, 0.5);
  margin: 0 0 18px;
}

.uwh-sf-title {
  margin: 0;
  max-width: 780px;
  margin-inline: auto;
  font-family: Poppins, sans-serif;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.3;
  color: #012245;
}

/* ---- Carousel shell: arrows sit in a dedicated side gutter outside the
   card row (matches the reference slider — arrows never overlay the
   images), same idea as the Team carousel just without needing to sit
   inside a deliberately huge inter-card gap. ---- */
.uwh-sf-carousel {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 76px;
}

.uwh-sf-track {
  position: relative;
  height: 440px;
  overflow: hidden;
}

.uwh-sf-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 48px;
  height: 48px;
  padding: 0;
  box-sizing: border-box;
  border-radius: 50%;
  background: #feae02;
  border: none;
  box-shadow: 0 4px 14px rgba(1, 34, 69, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.uwh-sf-nav:hover,
.uwh-sf-nav:focus {
  background: #012245;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(1, 34, 69, 0.35);
  border: none;
  outline: none;
}
.uwh-sf-nav span:hover,
.uwh-sf-nav span:focus,
.uwh-sf-nav span:active {
  color: #ffffff;
}
.uwh-sf-nav:hover span,
.uwh-sf-nav:focus span,
.uwh-sf-nav:active span {
  color: #ffffff;
}
.uwh-sf-nav:focus-visible {
  outline: 2px solid #012245;
  outline-offset: 2px;
}
.uwh-sf-nav-prev {
  left: 0;
}
.uwh-sf-nav-next {
  right: 0;
}

/* ---- Cards: all rendered, JS positions/shows only 3 (prev/active/next)
   exactly like the Team carousel. `perspective` lives on the outer card
   (not the inner face wrapper) so the flip has real 3D depth instead of
   a flat squash. ---- */
.uwh-sf-card {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  cursor: pointer;
  -webkit-perspective: 1600px;
  perspective: 1600px;
}

.uwh-sf-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}
.uwh-sf-card.is-flipped .uwh-sf-card-inner {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

/* Both faces stacked on top of each other via position:absolute so the
   card's own height never changes between states — nothing here is
   driven by face content height. backface-visibility:hidden is what
   stops the "mirror text showing through" glitch mid-flip: without it
   the back face is visible (reversed) right through the front face
   during the middle of the rotation. */
.uwh-sf-card-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* Safari: the face's own backface-visibility:hidden does NOT flatten its
   positioned descendants (scrim / title / back-face text) inside the
   preserve-3d inner wrapper — they stay backface-visibility:visible and
   show MIRRORED once the card is flipped (Safari-only; Chrome flattens
   them). Push it onto every descendant. Matches the same rule in the
   shared tour-card-faces.css. */
.uwh-sf-card-face * {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.uwh-sf-card-front {
  background-size: cover;
  background-position: center;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.uwh-sf-card-front-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(1, 34, 69, 0.85) 0%,
    rgba(1, 34, 69, 0.15) 45%,
    rgba(1, 34, 69, 0) 70%
  );
}
.uwh-sf-card-front-title {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 24px;
  font-family: Poppins, sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: #ffffff;
  text-align: left;
  line-height: 1.35;
}

.uwh-sf-card-back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  background-color: #012245;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.uwh-sf-card-back-title {
  margin: 0;
  font-family: Poppins, sans-serif;
  font-size: 24px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.35;
}
.uwh-sf-card-duration {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: Roboto, sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  padding: 8px 16px;
  border-radius: 50px;
}
.uwh-sf-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  background: #ffffff;
  color: #012245;
  font-family: Poppins, sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 50px;
  transition: filter 0.2s ease;
}
.uwh-sf-card-cta:hover,
.uwh-sf-card-cta:focus {
  filter: brightness(0.94);
  color: #012245;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .uwh-sf-title {
    font-size: 30px;
  }
  .uwh-sf-track {
    height: 400px;
  }
  .uwh-sf-carousel {
    padding: 0 60px;
  }
}

@media (max-width: 782px) {
  .uwh-sf {
    padding: 56px 0;
  }
  .uwh-sf-heading {
    margin-bottom: 36px;
  }
  .uwh-sf-title {
    font-size: 24px;
  }
  .uwh-sf-track {
    height: 420px;
  }
  .uwh-sf-carousel {
    padding: 0 52px;
  }
  .uwh-sf-nav {
    width: 40px;
    height: 40px;
  }
  .uwh-sf-card-front-title {
    font-size: 19px;
    padding: 20px;
  }
  .uwh-sf-card-back {
    padding: 24px;
  }
}