/* SAPA DAY TOUR - HOMEPAGE COMPANION ENHANCEMENTS */

/* Font Fallbacks */
:root {
  --font-clashDisplay: 'Clash Display', 'Quicksand', sans-serif;
  --font-svn: 'Marck Script', 'Caveat', cursive;
  --font-dmSans: 'DM Sans', sans-serif;
  --font-trip-sans: 'DM Sans', -apple-system, sans-serif;
  --Text-Title-Gradient: linear-gradient(90deg, #5bc537 0%, #007f19 100%);
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

/* Ensure font classes take effect */
.font-clashDisplay { font-family: var(--font-clashDisplay) !important; }
.font-svn { font-family: var(--font-svn) !important; }
.font-dmSans { font-family: var(--font-dmSans) !important; }
.font-tripSans { font-family: var(--font-trip-sans) !important; }

/* Title Gradient */
.title-gradient {
  background: var(--Text-Title-Gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Ensure background image loads nicely on desktop */
@media (min-width: 768px) {
  img[src*="bg-sapa.webp"] {
    min-height: 2500px;
    max-width: none !important;
    width: 100% !important;
  }
}

/* Review Marquee Vertical Scroll Animations */
@keyframes marqueeScroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

.marqueeSlide {
  animation: marqueeScroll 40s linear infinite !important;
}

.marqueeSlide-reverse {
  animation: marqueeScroll 40s linear infinite reverse !important;
}

.marqueeSlide:hover,
.marqueeSlide-reverse:hover {
  animation-play-state: paused !important;
}

/* Destination Tooltip display */
.map-pin-group:hover .pin-tooltip-card,
.map-pin-group.active .pin-tooltip-card {
  display: flex !important;
}

/* Swiper pagination bullet styling */
.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: #043424 !important;
  opacity: 0.3 !important;
  border-radius: 9999px;
  transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
  width: 24px !important;
  opacity: 1 !important;
  background: #c1e041 !important;
}

/* Handwritten cursive font for scrapbook note */
.font-svn, [class*="font-svn"] {
  font-family: 'Marck Script', 'Caveat', cursive !important;
}

/* Smoke mask for regional delicacies hero dish */
.mask-smoke-delicacy {
  -webkit-mask-image: url('../images/delicacy-mask.png');
  mask-image: url('../images/delicacy-mask.png');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center;
  mask-position: center;
}

@media (max-width: 639px) {
  .mask-smoke-delicacy {
    -webkit-mask-image: url('../images/delicacy-mask.png') !important;
    mask-image: url('../images/delicacy-mask.png') !important;
  }
}

/* ---------------------------------------------------------------------------
   Regional delicacies ribbon: explicit dish sizes.
   The arbitrary Tailwind classes (w-[16.85669rem] …) are not in the compiled
   vendor CSS, so the cards collapsed to 0×0. Sizes mirror the original design.
--------------------------------------------------------------------------- */
.swiper-delicacies .swiper-slide { display: flex !important; justify-content: center; align-items: flex-start; }
.swiper-delicacies .delicacy-card { flex-shrink: 0; }
.swiper-delicacies .delicacy-card > img:first-child { width: 100%; height: 100%; object-fit: contain; position: relative; z-index: 1; }
.swiper-delicacies .delicacy-card > img + img { width: 100%; height: auto; left: -20%; bottom: 0; filter: blur(22px); }
.swiper-delicacies .swiper-slide:nth-child(1) .delicacy-card { width: 16.85669rem; height: 11.23781rem; }
.swiper-delicacies .swiper-slide:nth-child(2) .delicacy-card { width: 27.18363rem; height: 15.74638rem; rotate: 7.485deg; translate: -2rem 0; }
.swiper-delicacies .swiper-slide:nth-child(3) .delicacy-card { width: 28.40706rem; height: 18.39263rem; }
@media (max-width: 639px) {
  .swiper-delicacies .swiper-slide:nth-child(1) .delicacy-card { width: 5.38rem; height: 3.95238rem; }
  .swiper-delicacies .swiper-slide:nth-child(2) .delicacy-card { width: 6.38rem; height: 4.2785rem; translate: -0.5rem 1rem; }
  .swiper-delicacies .swiper-slide:nth-child(3) .delicacy-card { width: 7.97956rem; height: 6.06588rem; translate: 0 1.5rem; }
}
/* Hero dish (masked) + badge sizes, same reason */
#delicacies .food-image { width: 100%; height: 100%; }
#delicacyMaskContainer { width: 40.875rem; height: 35.035rem; }
#delicacyMaskContainer img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 639px) { #delicacyMaskContainer { width: 18.82rem; height: 16.22rem; } }

/* Don't clip rotated / tall dishes at the top of the ribbon */
.swiper-delicacies, .swiper-delicacies .swiper-wrapper { overflow: visible !important; }
.swiper-delicacies .swiper-slide { overflow: visible; }

/* --- fix 2026-09-27: tour-card badges overlapping ---
   The vendor Tailwind build has .absolute + .top-3 but the .left-3 / .right-3
   offset utilities were purged, so both badges collapsed onto the top-left
   corner. Restoring the standard Tailwind values fixes the overlap. */
.left-3{left:.75rem}
.right-3{right:.75rem}