/* ============================================================
   Unique Picks page styles.
   Linked AFTER responsive.css so these rules win by source order.
   Scoped to this page's sections; does not touch shared CSS.
   ============================================================ */

/* Shared stamp/perforated-edge mask helpers ------------------ */
.up-stamp-mask-24 {
  -webkit-mask-image: radial-gradient(7px at 50% 0, transparent 97%, #000), radial-gradient(7px at 50% 100%, transparent 97%, #000), radial-gradient(7px at 0 50%, transparent 97%, #000), radial-gradient(7px at 100% 50%, transparent 97%, #000);
  mask-image: radial-gradient(7px at 50% 0, transparent 97%, #000), radial-gradient(7px at 50% 100%, transparent 97%, #000), radial-gradient(7px at 0 50%, transparent 97%, #000), radial-gradient(7px at 100% 50%, transparent 97%, #000);
}

/* ============================================================
   1) DISCOVER KERALA  (two-column layout + restored photo)
   ============================================================ */
.destination-intro .up-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(40px, 6vw, 84px);
  align-items: center;
}

.destination-intro .up-intro-title {
  margin: 0 0 22px;
}

.destination-intro .up-intro-p {
  color: oklch(53% 0.032 46deg);
  margin: 0 0 20px;
  max-width: 58ch;
  line-height: 1.65;
}
.destination-intro .up-intro-p:last-of-type {
  margin-bottom: 30px;
}

.destination-intro .up-facet-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 26px;
  max-width: 52ch;
}

.destination-intro .up-facet {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid oklch(87% 0.022 62deg);
}

.destination-intro .up-facet-icon {
  color: #7f2d1f;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
}
.destination-intro .up-facet-icon svg {
  width: 28px;
  height: 28px;
  animation: up-icon-float 3.6s ease-in-out infinite;
}

.destination-intro .up-facet-label {
  font-size: 0.9375rem;
  font-weight: 500;
  color: #420d08;
}

/* Framed photo (postcard border) */
.destination-intro .up-intro-media {
  position: relative;
}
.destination-intro .up-photo-frame {
  background: #f6ede2;
  padding: 15px;
  filter: drop-shadow(0 0 0.5px oklch(31% 0.09 32deg / 0.34)) drop-shadow(0 2px 3px oklch(31% 0.09 32deg / 0.2)) drop-shadow(0 10px 18px oklch(31% 0.09 32deg / 0.12));
  -webkit-mask-image: radial-gradient(7px at 50% 0, transparent 97%, #000), radial-gradient(7px at 50% 100%, transparent 97%, #000), radial-gradient(7px at 0 50%, transparent 97%, #000), radial-gradient(7px at 100% 50%, transparent 97%, #000);
  mask-image: radial-gradient(7px at 50% 0, transparent 97%, #000), radial-gradient(7px at 50% 100%, transparent 97%, #000), radial-gradient(7px at 0 50%, transparent 97%, #000), radial-gradient(7px at 100% 50%, transparent 97%, #000);
  -webkit-mask-position: 50% 0, 50% 100%, 0 50%, 100% 50%;
  mask-position: 50% 0, 50% 100%, 0 50%, 100% 50%;
  -webkit-mask-size: 24px 100%, 24px 100%, 100% 24px, 100% 24px;
  mask-size: 24px 100%, 24px 100%, 100% 24px, 100% 24px;
  -webkit-mask-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  mask-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.destination-intro .up-photo-inner {
  height: clamp(420px, 52vw, 560px);
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 0 0 1px oklch(31% 0.09 32deg / 0.1);
}
.destination-intro .up-photo-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   2) KERALA DESTINATIONS  (static 3-up grid, not a clipped carousel)
      Fixes the cropped third card and the hover border being cut.
   ============================================================ */
.kerala-tourism {
  overflow: visible;               /* let the lifted/hovered card breathe */
}
.kerala-tourism .wrapper {
  max-width: 1280px;               /* match the design container */
  padding-left: clamp(20px, 5vw, 48px);
  padding-right: clamp(20px, 5vw, 48px);
}
.kerala-tourism .up-picks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  align-items: stretch;
}
.kerala-tourism .up-picks-grid .destination-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.kerala-tourism .up-picks-grid .destination-card .destination-body {
  flex: 1 1 auto;
}

/* ============================================================
   3) WHY VISIT  (matched icons + working icon animation)
   ============================================================ */
.why-choose-us .why-item-icon {
  width: 28px;
  height: 28px;
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.25, 1);
}
.why-choose-us .why-item-icon svg {
  width: 28px;
  height: 28px;
  animation: up-icon-float 3.4s ease-in-out infinite;
}
.why-choose-us .why-item:nth-child(2n) .why-item-icon svg { animation-delay: 0.25s; }
.why-choose-us .why-item:nth-child(3n) .why-item-icon svg { animation-delay: 0.5s; }
.why-choose-us .why-item:nth-child(4n) .why-item-icon svg { animation-delay: 0.75s; }
.why-choose-us .why-item:hover .why-item-icon {
  transform: translateY(-3px);
}

@keyframes up-icon-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* ============================================================
   4) EXPERIENCES  (postage-stamp card frame, no icon disc,
      left-aligned header)
   ============================================================ */
.tourism-teaser .up-exp-header {
  max-width: 660px;
  margin: 0 0 52px;
}
.tourism-teaser .up-exp-eyebrow {
  color: oklch(83% 0.08 71deg);
  margin-bottom: 14px;
}
.tourism-teaser .up-exp-title {
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: #ffe4d2;
  margin: 0 0 14px;
}
.tourism-teaser .up-exp-desc {
  color: oklch(90% 0.05 40deg);
  max-width: 52ch;
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
}

.tourism-teaser .tourism-teaser-grid {
  gap: 30px;
}

/* Card becomes a white postage stamp with perforated edges */
.tourism-teaser .tourism-card.photo-card {
  background: #ffffff;
  border: 0;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  padding: 16px 16px 0;
  filter: drop-shadow(0 0 0.5px oklch(31% 0.09 32deg / 0.34)) drop-shadow(0 2px 3px oklch(31% 0.09 32deg / 0.2)) drop-shadow(0 10px 18px oklch(31% 0.09 32deg / 0.12));
  -webkit-mask-image: radial-gradient(7.5px at 50% 0, transparent 97%, #000), radial-gradient(7.5px at 50% 100%, transparent 97%, #000), radial-gradient(7.5px at 0 50%, transparent 97%, #000), radial-gradient(7.5px at 100% 50%, transparent 97%, #000);
  mask-image: radial-gradient(7.5px at 50% 0, transparent 97%, #000), radial-gradient(7.5px at 50% 100%, transparent 97%, #000), radial-gradient(7.5px at 0 50%, transparent 97%, #000), radial-gradient(7.5px at 100% 50%, transparent 97%, #000);
  -webkit-mask-position: 50% 0, 50% 100%, 0 50%, 100% 50%;
  mask-position: 50% 0, 50% 100%, 0 50%, 100% 50%;
  -webkit-mask-size: 26px 100%, 26px 100%, 100% 26px, 100% 26px;
  mask-size: 26px 100%, 26px 100%, 100% 26px, 100% 26px;
  -webkit-mask-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  mask-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  transition: transform 0.26s ease-out, filter 0.26s ease-out;
}
.tourism-teaser .tourism-card.photo-card:hover {
  transform: scale(1.03) !important;
}
.tourism-teaser .tourism-card.photo-card .tourism-card-media {
  aspect-ratio: 4/3;
  overflow: hidden;
  margin: 0;
  box-shadow: inset 0 0 0 1px oklch(31% 0.09 32deg / 0.12);
}
.tourism-teaser .tourism-card.photo-card .tourism-card-body {
  padding: 22px 6px 26px;
}
.tourism-teaser .tourism-card.photo-card .tourism-card-body h3 {
  margin-bottom: 8px;
}
.tourism-teaser .tourism-card.photo-card .tourism-card-body p {
  margin-bottom: 0;
}

/* ============================================================
   Responsive
   ============================================================ */
@media only screen and (max-width: 1024px) {
  .destination-intro .up-intro-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .destination-intro .up-photo-inner {
    height: clamp(340px, 60vw, 460px);
  }
  .kerala-tourism .up-picks-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (max-width: 680px) {
  .kerala-tourism .up-picks-grid {
    grid-template-columns: 1fr;
  }
  .destination-intro .up-facet-grid {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .why-choose-us .why-item-icon svg,
  .destination-intro .up-facet-icon svg {
    animation: none;
  }
}

/* ============================================================
   LOTTIE HOVER-PLAY ICONS (facet grid + why-visit grid)
   The static SVGs were swapped for the <lottie-icon> component,
   which plays once on hover of its row. Size the element to the
   same box the SVG used; its rendered <svg> fills that box, and
   the resting float is dropped so only hover playback animates.
   ============================================================ */
.destination-intro .up-facet-icon lottie-icon {
  display: block;
  width: 28px;
  height: 28px;
}
.why-choose-us .why-item-icon lottie-icon {
  display: block;
  width: 28px;
  height: 28px;
}
.destination-intro .up-facet-icon lottie-icon svg,
.why-choose-us .why-item-icon lottie-icon svg {
  width: 100%;
  height: 100%;
  animation: none;
}

/* Tablet — Discover Kerala: full-width copy and a 3-column facet grid. */
@media only screen and (min-width: 681px) and (max-width: 1024px) {
  .destination-intro .up-intro-p,
  .destination-intro .up-intro-title { max-width: none; }
  .destination-intro .up-facet-grid {
    max-width: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Tablet — destination cards in one horizontally scrolling row, with an arrow
   that shows the row scrolls (tablet only). */
.kerala-tourism .kerala-tourism-wrapper { position: relative; }
.kerala-tourism .up-scroll-next {
  display: none;
  position: absolute;
  right: -10px;
  top: 36%;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid oklch(87% 0.022 62deg);
  color: #7f2d1f;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px oklch(31% 0.09 32deg / 0.18);
  z-index: 2;
  cursor: pointer;
}
.kerala-tourism .up-scroll-next svg { transition: transform 0.3s ease; }
.kerala-tourism .up-scroll-next.is-back svg { transform: rotate(180deg); }
@media only screen and (min-width: 681px) and (max-width: 1024px) {
  .kerala-tourism .up-picks-grid {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 6px;
  }
  .kerala-tourism .up-picks-grid::-webkit-scrollbar { display: none; }
  .kerala-tourism .up-picks-grid .destination-card {
    flex: 0 0 46%;
    height: auto;
    scroll-snap-align: start;
  }
  .kerala-tourism .up-scroll-next { display: flex; }
}