/* =========================================================
   CATEGORIES PAGE — page-specific styles
   Builds on top of base.css tokens/utilities.
   ========================================================= */

/* ---------- Hero ----------
   No fixed height here on purpose: this hero carries more content
   (breadcrumb + tag + 2-line title + rule + text + 4-item trust list)
   than any other page's hero. A fixed height (like Destinations' 650px)
   made the vertically-centered stack taller than its box, so it
   overflowed upward past the header offset and rode up under the
   fixed header. Falling back to the base .hero's 100svh gives it
   room to breathe instead.

   Desktop gets no padding-block override at all: base .hero already
   flex-centers .hero-inner inside that generous 100svh box, with the
   logo (125px) nowhere near the vertical middle. A one-sided top
   padding here (to "clear the logo") throws that off — centering a
   box counts its padding as part of the box, so padding on only one
   side drags the actual content past true-center toward the bottom,
   which is what was pushing the trust-list off the bottom of the
   viewport on large screens. */
.hero--categories .hero-title {
  font-family: "DM Serif Display", serif;
  font-weight: 400;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 14px;
}
.breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.3s;
}
.breadcrumb a:hover {
  color: #fff;
}
.breadcrumb i {
  width: 14px;
  height: 14px;
}
.breadcrumb span {
  color: #fff;
}

/* Clean 2x2 grid instead of the default flex-wrap, which ragged-wraps
   4 items as 3-then-1 and reads as cramped/colliding at this column width. */
.hero--categories .trust-list {
  display: grid;
  grid-template-columns: repeat(2, auto);
  column-gap: clamp(20px, 3vw, 40px);
  row-gap: clamp(10px, 1.6vh, 16px);
}

/* ---------- Popular travel categories ---------- */
.cat-grid {
  display: flex;
  gap: 24px;
  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;
}
.cat-grid::-webkit-scrollbar {
  display: none;
}
.cat-grid.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}
.cat-card {
  flex: 0 0 calc((100% - 2 * 24px) / 3);
  scroll-snap-align: start;
  display: block;
  border-radius: var(--r-card);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--sh-card);
  transition: transform 0.45s var(--ease), box-shadow 0.45s ease;
}
.cat-media img {
  -webkit-user-drag: none;
}
.cat-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 34px 70px -34px rgba(7, 27, 52, 0.32);
}
.cat-media {
  position: relative;
  height: 190px;
}
.cat-media img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease);
}
.cat-card:hover .cat-media img {
  transform: scale(1.08);
}
.cat-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 27, 52, 0) 55%, rgba(7, 27, 52, 0.55) 100%);
}
.cat-icon {
  position: absolute;
  left: 20px;
  bottom: -22px;
  z-index: 2;
  display: grid;
  place-items: center;
  height: 52px;
  width: 52px;
  border-radius: 16px;
  background: var(--grad);
  /* color must live here, not on ".cat-icon i" — lucide.createIcons()
     replaces the <i data-lucide> element with an <svg>, so a tag-based
     "i" selector stops matching post-hydration. Setting color on the
     container instead works via normal inheritance (svg uses
     stroke="currentColor"), same technique as .feature-icon. */
  color: #fff;
  box-shadow: var(--sh-lift);
}
.cat-icon i,
.cat-icon svg {
  width: 22px;
  height: 22px;
}
.cat-body {
  padding: 34px 22px 22px;
}
.cat-body h3 {
  font-size: 19px;
}
.cat-body p {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(30, 41, 59, 0.6);
}
.cat-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.cat-count {
  font-size: 12px;
  font-weight: 600;
  color: rgba(30, 41, 59, 0.5);
}
.cat-explore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--grad);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  transition: transform 0.3s var(--ease);
}
.cat-card:hover .cat-explore {
  transform: translateX(3px);
}
.cat-explore i {
  width: 13px;
  height: 13px;
}
.cat-arrows {
  margin-top: 10px;
}

/* ---------- 5-up destinations row ---------- */
.dest-grid--5 {
  display: flex;
  gap: 24px;
  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;
}
.dest-grid--5::-webkit-scrollbar {
  display: none;
}
.dest-grid--5.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}
.dest-grid--5 .dest-card {
  flex: 0 0 calc((100% - 4 * 24px) / 5);
  scroll-snap-align: start;
}
.dest-grid--5 .dest-card img {
  -webkit-user-drag: none;
}
.dest-arrows {
  margin-top: 10px;
}

/* ---------- Travel by your style ---------- */
.style-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 16px;
}
.style-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 22px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: #fff;
  transition: transform 0.35s var(--ease), box-shadow 0.35s ease, border-color 0.35s;
}
.style-pill:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-card);
  border-color: transparent;
}
.style-icon {
  display: grid;
  place-items: center;
  height: 44px;
  width: 44px;
  border-radius: 12px;
  background: rgba(91, 61, 245, 0.1);
}
.style-icon i {
  width: 19px;
  height: 19px;
  color: var(--primary);
}
.style-pill h4 {
  font-size: 13px;
  font-weight: 400;
}
.style-pill small {
  font-size: 11px;
  color: rgba(30, 41, 59, 0.5);
}

/* ---------- Plan your journey CTA ---------- */
.plan-cta {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 32px;
  border-radius: var(--r-card);
  background: var(--grad);
  padding: clamp(28px, 4vw, 56px);
  overflow: hidden;
  isolation: isolate;
}
.plan-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 40% 60% at 90% 10%, rgba(255, 255, 255, 0.18), transparent 70%),
    radial-gradient(ellipse 40% 60% at 10% 100%, rgba(255, 255, 255, 0.1), transparent 70%);
}
.plan-cta-copy h2 {
  color: #fff;
  font-size: clamp(20px, 2.6vw, 34px);
  line-height: 1.15;
}
.plan-cta-copy p {
  margin-top: 14px;
  max-width: 420px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
}
.plan-cta-actions {
  display: flex;
  gap: 12px;
  margin-top: 26px;
  flex-wrap: wrap;
}
.plan-cta-media {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  height: 280px;
}
.plan-cta-media img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.plan-cta-stat {
  position: absolute;
  /* .plan-cta-media (this card's positioned ancestor) has its own
     overflow:hidden for the rounded image corners — a negative offset
     here hung the card partly outside that box, so its own right edge
     and shadow got silently clipped square instead of floating free. */
  right: 12px;
  top: 20px;
  background: #fff;
  border-radius: var(--r-md);
  padding: 14px 18px;
  box-shadow: var(--sh-glass);
  display: flex;
  align-items: center;
  gap: 12px;
}
.plan-cta-stat b {
  display: block;
  font-size: 20px;
  color: var(--ink);
}
.plan-cta-stat small {
  display: block;
  font-size: 11px;
  color: rgba(30, 41, 59, 0.55);
}
.plan-cta-avatars {
  display: flex;
}
.plan-cta-avatars img {
  height: 28px;
  width: 28px;
  border-radius: 50%;
  border: 2px solid #fff;
  object-fit: cover;
  margin-left: -8px;
}
.plan-cta-avatars img:first-child {
  margin-left: 0;
}
.plan-cta-stars {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
}
.plan-cta-stars i {
  width: 12px;
  height: 12px;
  color: var(--star);
  fill: var(--star);
}

/* ---------- FAQ + newsletter ---------- */
.faq-help-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r-card);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: url("/assets/image/naranbanner.png") center/cover no-repeat;
  box-shadow: var(--sh-card);
  padding: clamp(24px, 3vw, 40px);
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.faq-help-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(7, 27, 52, 0.5) 0%, rgba(7, 27, 52, 0.72) 100%);
}
.faq-help-card h2 {
  color: #fff;
  font-size: 20px;
}
.faq-help-card p {
  margin-top: 8px;
  max-width: 320px;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
}
.faq-help-form {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 6px;
  width: 100%;
  max-width: 360px;
  margin-top: 22px;
  box-shadow: var(--sh-soft);
}
.faq-help-form input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  padding-inline: 16px;
  font-size: 13px;
  color: var(--ink);
}
.faq-help-form input::placeholder {
  color: rgba(30, 41, 59, 0.4);
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .cat-card {
    flex: 0 0 calc((100% - 24px) / 2);
  }
  .dest-grid--5 .dest-card {
    flex: 0 0 calc((100% - 2 * 24px) / 3);
  }
  .style-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .plan-cta {
    grid-template-columns: 1fr;
  }
  .plan-cta-media {
    height: 220px;
  }
}
@media (max-width: 1024px) {
  .hero--categories {
    height: auto;
    min-height: 0;
    max-height: none;
  }
  /* Below this width the hero stops being flex-centered (base .hero
     switches to height:auto) and the content stacks top-to-bottom
     instead, so it needs its own top+bottom padding to clear the logo
     and keep breathing room at the section edge. */
  .hero--categories .hero-inner {
    padding-block: calc(var(--logo-h) + 20px) clamp(24px, 4vh, 44px);
  }
  /* .faq-layout (base.css) stacks to a single column here, and unlike
     .faq-visual (home FAQ) this card has no min-height of its own — with
     no text content its height:100% collapses against an auto row, so
     the background banner shrinks to a thin sliver. Match .faq-visual's
     breakpoints. */
  .faq-help-card {
    min-height: 500px;
  }
}
@media (max-width: 768px) {
  .hero--categories .hero-inner {
    padding-block: calc(var(--logo-h) + 40px) clamp(24px, 4vh, 44px);
  }
  .faq-help-card {
    min-height: 420px;
  }
  .cat-card {
    flex: 0 0 85vw;
  }
  .dest-grid--5 .dest-card {
    flex: 0 0 calc((100% - 22px) / 2);
  }
  .style-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Two stacked pill buttons plus the floating stat card below made this
     CTA needlessly tall on phones — "Explore Packages" already covers the
     section's own message ("plan your journey"), so drop the second,
     redundant "Contact Us" action (it's already one tap away in the header). */
  .plan-cta-secondary {
    display: none;
  }
}
@media (max-width: 480px) {
  /* The pill-shaped email+button row has no room for both on a phone —
     the button never shrinks, squeezing the input to ~120px. Stack them. */
  .faq-help-form {
    flex-direction: column;
    align-items: stretch;
    border-radius: var(--r-md);
    padding: 8px;
  }
  .faq-help-form input {
    padding: 8px 10px;
  }
  .faq-help-form .btn {
    width: 100%;
    justify-content: center;
  }

  .plan-cta-media {
    display: none;
    /* height: 180px; */
  }
}
@media (max-width: 560px) {
  .dest-grid--5 .dest-card {
    flex: 0 0 85vw;
  }
}