/* =========================================================
   SAFFERGURU — TRIPS PAGE STYLESHEET
   Page-specific styles only. Shared tokens, resets, header,
   footer, buttons, cards, animations, .masonry-gallery and
   .cta-banner all come from assets/css/base.css — loaded
   before this file.

   1. Trip Search Card (hero)
   2. Trip Categories
   3. Popular Destinations (6-up variant)
   4. Why Choose (checklist + gallery grid)
   5. Booking Process Timeline
   6. FAQ Help Card
   7. Responsive
   ========================================================= */

/* ---------- 1. TRIP SEARCH CARD ----------
   At desktop widths the shared .hero-inner has no padding-block
   (it relies on the hero's flex centering), which sits the hero
   copy right up against the fixed header. Home's hero content is
   short enough that this reads fine; Trips' content pushes closer
   to the header, so give it a little breathing room — scoped to
   this page's hero only via .hero--trips. */


   .hero--trips{
    padding-top: 30px;
   }

@media (min-width: 1025px) {
  .hero--trips .hero-inner {
    padding-top: clamp(24px, 4vh, 56px);
  }
}

.search-card .field-row select {
  color: rgba(30, 41, 59, 0.85);
}
.search-card .booking-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(7px, 1.1vh, 12px);
}
.search-card .booking-form .btn {
  grid-column: 1 / -1;
}

/* ---------- 2. TRIP CATEGORIES ---------- */
.category-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
}
.category-card {
  text-align: center;
  padding: 28px 20px;
}
.category-card .feature-icon {
  margin-inline: auto;
}
.category-card h3 {
  margin-top: 20px;
  font-size: 15px;
}
.category-card p {
  margin-inline: auto;
  font-size: 12.5px;
}

/* ---------- 3. POPULAR DESTINATIONS (6-up variant) ---------- */
.dest-grid--six {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}
.dest-grid--six .dest-card {
  height: 220px;
  border-radius: 16px;
}
.dest-grid--six .dest-body {
  padding: 14px;
}
.dest-grid--six .dest-body h3 {
  font-size: 15px;
}

/* ---------- 4. WHY CHOOSE ---------- */
.why-trips-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
}
.why-trips-copy .sec-title {
  text-align: left;
  margin-inline: 0;
}
.why-trips-copy .sec-title + .check-list {
  margin-top: 28px;
}
.check-list {
  display: grid;
  gap: 16px;
}
.check-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--dark);
}
.check-list .check-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #765aff, #4f9fff);
  color: #fff;
  box-shadow: 0 9px 20px -12px rgba(82, 75, 225, 0.85);
}
.check-list .check-icon i {
  width: 15px;
  height: 15px;
}

/* ---------- 5. BOOKING PROCESS TIMELINE ---------- */
.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 34px;
  left: calc(100% / 8);
  right: calc(100% / 8);
  height: 2px;
  background-image: linear-gradient(
    90deg,
    rgba(91, 61, 245, 0.35) 0,
    rgba(91, 61, 245, 0.35) 10px,
    transparent 10px,
    transparent 20px
  );
  background-size: 20px 2px;
  z-index: 0;
}
.timeline-step {
  position: relative;
  z-index: 1;
  text-align: center;
}
.timeline-icon {
  position: relative;
  margin: 0 auto 22px;
  display: grid;
  place-items: center;
  height: 68px;
  width: 68px;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  box-shadow: var(--sh-lift);
  transition: transform 0.4s var(--ease);
}
.timeline-step:hover .timeline-icon {
  transform: translateY(-6px) scale(1.05);
}
.timeline-icon i {
  width: 26px;
  height: 26px;
}
.timeline-icon span {
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  place-items: center;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background: var(--dark);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--f-display);
  border: 3px solid var(--white);
}
.timeline-step h3 {
  font-size: 16px;
  color: var(--dark);
}
.timeline-step p {
  margin-top: 8px;
  max-width: 220px;
  margin-inline: auto;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(30, 41, 59, 0.6);
}

/* ---------- 6. FAQ HELP CARD ----------
   Reuses .faq-trust (position/glass background from base.css) —
   this only adds the heading/paragraph/button typography. */
.faq-help {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.faq-help h3 {
  font-family: "DM Serif Display", serif;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: normal;
}
.faq-help p {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}
.faq-help .btn {
  margin-top: 12px;
}

/* ---------- 7. RESPONSIVE ---------- */
@media (max-width: 1200px) {
  .category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .dest-grid--six {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 1024px) {
  .why-trips-grid {
    grid-template-columns: 1fr;
  }
  .why-trips-copy .sec-title {
    text-align: center;
  }
  .why-trips-copy .sec-head {
    text-align: center;
  }
  .check-list {
    max-width: 420px;
    margin-inline: auto;
  }
  .timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 40px;
  }
  .timeline::before {
    display: none;
  }
}
@media (max-width: 768px) {
  .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dest-grid--six {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .category-grid {
    grid-template-columns: 1fr;
  }
  .dest-grid--six {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .timeline {
    grid-template-columns: 1fr;
  }
  .search-card .booking-form {
    grid-template-columns: 1fr;
  }
  /* These cards reuse .feature-card/.feature-icon for the base visual
     treatment, but also pick up base.css's ".why-grid .feature-card"
     mobile layout (icon-left, meant for Home's Why Choose cards) because
     this grid is also tagged .why-grid — undo it back to the centered
     icon-above-title layout .category-card actually wants. */
  .category-grid .feature-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 20px;
    border-radius: 22px;
  }
  .category-grid .feature-icon {
    grid-column: unset;
    grid-row: unset;
    margin-inline: auto;
  }
  .category-grid .feature-card h3 {
    grid-column: unset;
    grid-row: unset;
    padding-right: 0;
    margin-top: 20px;
  }
  .category-grid .feature-card p {
    grid-column: unset;
    grid-row: unset;
    padding-right: 0;
    margin-inline: auto;
  }
}