/* =========================================================
   SAFFERGURU — DESTINATIONS PAGE STYLESHEET
   Page-specific styles only. Shared tokens, resets, header,
   footer, buttons, .booking-card/.field, .chips-wrap/.chip,
   .why-grid/.feature-card, .cta-banner and animations all
   come from assets/css/base.css — loaded before this file.

   1. Hero (destinations variant)
   2. Search Card additions
   3. Destination Chips (icon variant)
   4. Popular Destinations (cards)
   5. Explore By Region (cards)
   6. Featured Destination (spotlight)
   7. Responsive
   ========================================================= */

/* ---------- 1. HERO ---------- */
.hero--destinations {
  /* 650px wasn't tall enough for base .hero's align-items:center to clear
     the hanging logo panel on its own, so a top-only padding got added to
     hero-inner as a fix — but centering a box with one-sided padding just
     shifts its content toward the bottom instead of the true middle.
     Give the banner enough height for genuine centering (no lopsided
     padding) to clear the logo naturally on every "big device" width. */
  height: 700px;
  min-height: 700px;
  max-height: 700px;
}
.hero--destinations .hero-title {
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  margin-top: clamp(14px, 2.2vh, 24px);
}
.hero--destinations .hero-text {
  margin-top: clamp(16px, 2.5vh, 26px);
}
.hero--destinations .hero-cta {
  margin-top: clamp(24px, 3.4vh, 38px);
}

/* ---------- 2. SEARCH CARD ---------- */
.search-card-title {
  font-size: 17px;
  color: var(--dark);
  margin-bottom: 4px;
}

/* ---------- 3. DESTINATION CHIPS (icon variant) ---------- */
.chips-wrap--flat {
  margin-top: 28px;
  margin-bottom: var(--section);
}
/* Unlike the home hero's auto-scrolling .chips-marquee, this row renders
   .chips directly with no wrapping overflow container — on narrow screens
   the non-shrinking pills would silently clip under body's overflow-x:hidden.
   Make it a deliberately scrollable row below the width it can fit at. */
@media (max-width: 900px) {
  .chips-wrap--flat .chips {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 10px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .chips-wrap--flat .chips::-webkit-scrollbar {
    display: none;
  }
}
.chip--icon {
  padding: 8px clamp(14px, 1.6vw, 22px) 8px 8px;
}
.chip-icon {
  display: grid;
  place-items: center;
  height: clamp(30px, 3.6vh, 36px);
  width: clamp(30px, 3.6vh, 36px);
  border-radius: 50%;
  background: rgba(91, 61, 245, 0.1);
  color: var(--primary);
  flex-shrink: 0;
  transition: background 0.3s, color 0.3s;
}
.chip-icon i {
  width: 16px;
  height: 16px;
}
.chip--icon:hover .chip-icon {
  background: var(--primary);
  color: #fff;
}
.chip--more {
  padding: 8px clamp(14px, 1.6vw, 22px);
  color: rgba(30, 41, 59, 0.6);
}
.chip--more i {
  width: 15px;
  height: 15px;
}

/* ---------- 4. POPULAR DESTINATIONS ---------- */
.pd-grid {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  /* overflow-x: auto with no overflow-y set still clips vertically — the
     CSS overflow spec force-converts a "visible" y-axis to "auto" whenever
     the x-axis isn't visible, so this box is an (invisible-scrollbar)
     vertical clipping container whether we like it or not. Give it enough
     top/bottom padding that the card's hover-lift (translateY(-8px)) and
     drop shadow always have room, instead of getting silently sheared off. */
  padding: 12px 4px 24px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  cursor: grab;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pd-grid::-webkit-scrollbar {
  display: none;
}
.pd-grid.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}
.pd-media img {
  -webkit-user-drag: none;
}
.pd-card {
  flex: 0 0 calc((100% - 3 * 22px) / 4);
  scroll-snap-align: start;
  background: #fff;
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--sh-soft);
  transition: transform 0.45s var(--ease), box-shadow 0.45s ease;
}
.pd-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px -28px rgba(91, 61, 245, 0.45);
}
.pd-media {
  display: block;
  position: relative;
  height: 190px;
  overflow: hidden;
}
.pd-media img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.pd-card:hover .pd-media img {
  transform: scale(1.08);
}
.pd-body {
  padding: 18px 20px 20px;
}
.pd-body h3 {
  font-size: 17px;
  color: var(--dark);
}
.pd-province {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 12px;
  color: rgba(30, 41, 59, 0.55);
}
.pd-province i {
  width: 12px;
  height: 12px;
  color: var(--primary);
}
.pd-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
}
.pd-rating {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
  color: var(--dark);
}
.pd-rating i {
  width: 14px;
  height: 14px;
  color: var(--star);
  fill: var(--star);
}
.pd-rating small {
  font-weight: 500;
  color: rgba(30, 41, 59, 0.45);
}
.pd-price {
  text-align: right;
  font-size: 12px;
  color: rgba(30, 41, 59, 0.45);
}
.pd-price b {
  display: block;
  font-family: var(--f-display);
  font-size: 15px;
  color: var(--dark);
}
.pd-body .btn {
  margin-top: 16px;
}


/* ---------- 5. EXPLORE BY REGION ---------- */
.region-grid {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  cursor: grab;
  padding: 4px 4px 24px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.region-grid::-webkit-scrollbar {
  display: none;
}
.region-grid.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}
.region-arrows {
  margin-top: 10px;
}
.region-card {
  flex: 0 0 calc((100% - 4 * 18px) / 5);
  scroll-snap-align: start;
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--sh-card);
}
.region-card img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  transition: transform 0.8s var(--ease);
}
.region-card:hover img {
  transform: scale(1.09);
}
.region-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(4, 10, 18, 0) 40%,
    rgba(7, 27, 52, 0.85) 100%
  );
}
.region-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  padding: 16px;
  color: #fff;
}
.region-body h3 {
  font-size: 15.5px;
  line-height: 1.25;
}
.region-body p {
  margin-top: 4px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.75);
}
.region-arrow {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  height: 34px;
  width: 34px;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  box-shadow: 0 10px 22px -10px rgba(91, 61, 245, 0.85);
  transition: transform 0.4s var(--ease);
}
.region-card:hover .region-arrow {
  transform: rotate(-40deg) scale(1.08);
}
.region-arrow i {
  width: 15px;
  height: 15px;
}

/* ---------- 6. FEATURED DESTINATION ---------- */
.spotlight {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
}
.spotlight-image {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--sh-card);
  aspect-ratio: 4 / 3;
}
.spotlight-image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.spotlight-image:hover img {
  transform: scale(1.06);
}
.spotlight-copy .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.spotlight-copy .eyebrow i {
  width: 14px;
  height: 14px;
}
.spotlight-copy .sec-title {
  text-align: left;
  margin-inline: 0;
  margin-top: 10px;
  font-size: clamp(26px, 3vw, 36px);
}
.spotlight-copy p.spotlight-text {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.8;
  max-width: 46ch;
  color: rgba(30, 41, 59, 0.65);
}
.spotlight-stats {
  display: flex;
  gap: clamp(20px, 3vw, 40px);
  margin-top: 26px;
}
.spotlight-stat {
  display: flex;
  align-items: center;
  gap: 10px;
}
.spotlight-stat i {
  width: 18px;
  height: 18px;
  color: var(--primary);
  flex-shrink: 0;
}
.spotlight-stat span {
  display: block;
  font-size: 11px;
  color: rgba(30, 41, 59, 0.5);
}
.spotlight-stat b {
  display: block;
  margin-top: 2px;
  font-family: var(--f-display);
  font-size: 14px;
  color: var(--dark);
}
.spotlight-copy .btn {
  margin-top: 30px;
}

/* ---------- 7. RESPONSIVE ---------- */
@media (max-width: 1200px) {
  .pd-card {
    flex: 0 0 calc((100% - 22px) / 2);
  }
  .region-card {
    flex: 0 0 calc((100% - 2 * 18px) / 3);
  }
}
@media (max-width: 1024px) {
  .hero--destinations {
    height: auto;
    min-height: 0;
    max-height: none;
  }
  .hero--destinations .hero-inner {
    display: block;
    text-align: left;
    padding-block: calc(var(--logo-h) + 20px) 48px;
  }
  .hero--destinations .booking-card {
    justify-self: stretch;
    max-width: 440px;
    margin-top: 32px;
  }
  .spotlight {
    grid-template-columns: 1fr;
  }
  .spotlight-image {
    max-width: 480px;
    margin-inline: auto;
  }
}
@media (max-width: 768px) {
  .hero--destinations .hero-inner {
    padding-block: calc(var(--logo-h) + 40px) 48px;
  }
  .region-card {
    flex: 0 0 calc((100% - 18px) / 2);
  }
  .pd-card {
    /* Was 85vw — sized against the raw viewport while sitting inside
       .container's own side padding, so card + gap landed almost exactly
       at the container's visible edge with no room for the next card to
       peek through. That clipped the card's rounded corner flush against
       the edge instead of showing a scrollable peek. % is relative to the
       actual container box, so it always leaves peek room regardless of
       viewport width.
       90% (not 82%) keeps that peek to a small, deliberate-looking hint
       instead of a large slice of the next photo — the margin between the
       clipped edge and the screen edge is fixed by .container's own
       padding either way, but a smaller sliver reads as an affordance
       rather than as content getting cut off. */
    flex: 0 0 90%;
  }
  /* Single secondary CTA is redundant next to "Browse Destinations" once
     the buttons stack full-width on mobile. */
  .hero--destinations .hero-cta .btn--glass {
    display: none;
  }
  /* The desktop overlay was tuned for the split layout (dark strip behind
     the text on the left, photo left bright on the right) — on mobile the
     text runs the full width, so that bright band sits right behind it.
     Wash the whole photo with an even, darker tint so the copy stays
     legible. */
  .hero--destinations .hero-overlay2 {
    background: linear-gradient(
      180deg,
      rgba(7, 27, 52, 0.75) 0%,
      rgba(7, 27, 52, 0.5) 34%,
      rgba(7, 27, 52, 0.5) 62%,
      rgba(7, 27, 52, 0.7) 100%
    );
  }
  .hero--destinations .hero-text {
    font-size: 15px;
  }
}
@media (max-width: 560px) {
  .region-card {
    flex: 0 0 90%;
  }
  .spotlight-stats {
    flex-wrap: wrap;
    gap: 18px;
  }
}