/* ==========================================================================
   Trekking Nepal — Home page styles — page-specific styles
   Shared tokens, reset, navbar, footer, and buttons live in base.css
   ========================================================================== 

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  background-color: var(--pine-950);
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--pine-950), rgba(13, 31, 22, 0.7), rgba(13, 31, 22, 0.3));
}
.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* The hero was 5–9rem of padding around an already-tall stack, which pushed
     the search bar and the trust line below the fold on a laptop. The whole
     block is now sized to sit inside one screen. */
  padding-block: 3.25rem;
}
@media (min-width: 640px) {
  .hero__inner { padding-block: 4.25rem; }
}
@media (min-width: 1024px) {
  .hero__inner { padding-block: 5.5rem; }
}

.hero__eyebrow {
  margin-bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.12);
  padding: 0.4rem 0.9rem;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--amber-100);
  backdrop-filter: blur(4px);
}

.hero__title {
  max-width: 30rem;
  margin: 0;
  font-size: var(--text-hero);
  font-weight: 600;
  color: var(--parchment);
}
.hero__title em {
  font-style: italic;
  color: var(--amber-400);
}

.hero__desc {
  margin-top: 1rem;
  max-width: 30rem;
  font-size: var(--text-md);
  line-height: 1.55;
  color: rgba(220, 236, 226, 0.85);
}

/* --------------------------------------------------------------------------
   Search bar
   Was a 0.625rem-padded shell around a 0.625rem-padded field around a 44px
   button — three nested paddings stacking to ~78px tall. It is now a single
   pill: one row, one padding, a button sized to the row rather than to the
   shell.
   -------------------------------------------------------------------------- */
.hero__search {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 30rem;
  gap: 0.5rem;
  border-radius: 0.75rem;
  background-color: rgba(255, 255, 255, 0.96);
  padding: 0.3rem 0.3rem 0.3rem 0.85rem;
  box-shadow: var(--shadow-lift);
}
.hero__search-field {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
}
.hero__search-field svg {
  flex-shrink: 0;
  color: var(--ink-soft);
}
.hero__search-field input {
  width: 100%;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: var(--text-base);
  color: var(--ink);
  outline: none;
  padding: 0.5rem 0;
}
.hero__search-field input::placeholder {
  color: rgba(74, 83, 70, 0.7);
}
.hero__search-btn {
  flex-shrink: 0;
  min-height: 2.4rem;
  border-radius: 0.55rem;
  background-color: var(--pine-800);
  color: var(--parchment);
  padding: 0.5rem 1.15rem;
  font-size: var(--text-base);
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.hero__search-btn:hover {
  background-color: var(--pine-700);
}
.hero__search-btn:focus-visible {
  outline: 2px solid var(--amber-400);
  outline-offset: 2px;
}

.hero__stats {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1.75rem;
  font-size: var(--text-base);
  color: rgba(220, 236, 226, 0.85);
}
.hero__stats span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* On a phone the search row still fits, but the button gets its own line so
   the input keeps a usable width. */
@media (max-width: 479px) {
  .hero__search {
    flex-wrap: wrap;
    padding: 0.5rem;
    gap: 0.4rem;
  }
  .hero__search-field { flex: 1 1 100%; padding-inline: 0.35rem; }
  .hero__search-btn { flex: 1 1 100%; }
  .hero__stats { gap: 0.5rem 1.25rem; }
}

/* Sub-page hero / page header */
.page-header {
  border-bottom: 1px solid rgba(18, 51, 34, 0.05);
  background-color: var(--pine-50);
  padding-block: 3.5rem;
}
@media (min-width: 640px) {
  .page-header { padding-block: 4rem; }
}
.breadcrumb {
  font-size: 0.9375rem;
  color: var(--ink-soft);
}
.breadcrumb a:hover {
  color: var(--pine-700);
}
.page-header__eyebrow {
  margin-top: 1rem;
  display: inline-block;
  font-size: 0.9375rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--amber-600);
}
.page-header__title {
  margin-top: 0.5rem;
  max-width: 42rem;
  font-size: var(--text-h1);
  font-weight: 600;
  color: var(--pine-950);
}
.page-header__title em {
  font-style: italic;
}
.page-header__desc {
  margin-top: 0.75rem;
  max-width: 36rem;
  color: var(--ink-soft);
}

/* Hero on dark trip-detail page header */
.trip-header {
  position: relative;
  overflow: hidden;
  background-color: var(--pine-950);
}
.trip-header__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}
.trip-header__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--pine-950), rgba(13, 31, 22, 0.7), rgba(13, 31, 22, 0.4));
}
.trip-header__inner {
  position: relative;
  padding-block: 4rem;
}
@media (min-width: 640px) {
  .trip-header__inner { padding-block: 5rem; }
}
.trip-header .breadcrumb { color: rgba(220, 236, 226, 0.7); }
.trip-header .breadcrumb a:hover { color: var(--parchment); }

.trip-header__badges {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
}
.pill--ghost {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--parchment);
  backdrop-filter: blur(4px);
}
.pill--amber {
  background-color: var(--amber-500);
  color: #fff;
}
.pill--dark {
  background-color: rgba(13, 31, 22, 0.8);
  color: var(--parchment);
  backdrop-filter: blur(4px);
}

.trip-header__title {
  margin-top: 1rem;
  max-width: 42rem;
  font-size: var(--text-h1);
  font-weight: 600;
  color: var(--parchment);
}
.trip-header__desc {
  margin-top: 1rem;
  max-width: 36rem;
  color: rgba(220, 236, 226, 0.85);
}

.trip-header__meta {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  font-size: 0.9375rem;
  color: rgba(220, 236, 226, 0.85);
}
.trip-header__meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* ==========================================================================
   CTA sections
   ========================================================================== */
.cta-dark {
  background-color: var(--pine-950);
  padding-block: 4rem;
  text-align: center;
}
@media (min-width: 640px) {
  .cta-dark { padding-block: 5rem; }
}
.cta-dark__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
.cta-dark__title {
  max-width: 32rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--parchment);
}
@media (min-width: 640px) {
  .cta-dark__title { font-size: 1.875rem; }
}
.cta-dark__desc {
  max-width: 28rem;
  color: rgba(220, 236, 226, 0.8);
}

/* ==========================================================================
   Grids
   ========================================================================== */
.grid { display: grid; gap: 1.5rem; }
.grid-cols-1 { grid-template-columns: 1fr; }

@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1280px) {
  .xl\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
}

.flex-between {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  justify-content: space-between;
}
@media (min-width: 640px) {
  .flex-between { flex-direction: row; align-items: flex-end; }
}

/* ==========================================================================
   Feature cards (Why Us / Values)
   ========================================================================== */
.feature-card {
  border-radius: 1rem;
  background-color: #fff;
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(18, 51, 34, 0.05);
}
.feature-card--center { text-align: center; }
.feature-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  background-color: var(--pine-800);
  color: var(--parchment);
}
.feature-card--center .feature-card__icon { margin-inline: auto; }
.feature-card__title {
  margin-top: 1.25rem;
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 600;
  color: var(--pine-950);
}
.feature-card__text {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ==========================================================================
   Trip cards
   ========================================================================== */
.trip-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1rem;
  background-color: #fff;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(18, 51, 34, 0.05);
  transition: transform 0.3s ease;
}
.trip-card:hover {
  transform: translateY(-4px);
}
.trip-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.trip-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.trip-card:hover .trip-card__media img {
  transform: scale(1.05);
}
.trip-card__badges {
  position: absolute;
  inset-inline: 0;
  top: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0.75rem;
}
.trip-card__wishlist {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  border: none;
  background-color: rgba(13, 31, 22, 0.55);
  color: var(--parchment);
  backdrop-filter: blur(4px);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(13, 31, 22, 0.25);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.trip-card__wishlist:hover {
  background-color: rgba(13, 31, 22, 0.75);
  transform: scale(1.06);
}
.trip-card__wishlist.is-active {
  background-color: rgba(255, 255, 255, 0.92);
  color: #e0554f;
}
.trip-card__wishlist.is-active:hover {
  background-color: #fff;
}
.trip-card__wishlist.is-loading {
  opacity: 0.6;
  pointer-events: none;
}
.trip-card__wishlist svg {
  width: 15px;
  height: 15px;
  fill-opacity: 0;
  transition: fill-opacity 0.15s ease;
}
.trip-card__wishlist.is-active svg {
  fill-opacity: 1;
}
.trip-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.25rem;
}
.trip-card__title {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 600;
  color: var(--pine-950);
}
.trip-card__meta {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1rem;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}
.trip-card__meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.trip-card__footer {
  margin-top: 1.25rem;
  display: flex;
  flex: 1;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
}
.trip-card__price {
  font-size: 0.9375rem;
  color: var(--ink-soft);
}
.trip-card__price strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--pine-950);
}
.trip-card__cta {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 0.375rem;
  border-radius: 9999px;
  background-color: var(--pine-50);
  color: var(--pine-800);
  padding: 0.5rem 1rem;
  font-size: 0.9375rem;
  font-weight: 600;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.trip-card:hover .trip-card__cta {
  background-color: var(--pine-800);
  color: var(--parchment);
}

/* ==========================================================================
   Departures table
   ========================================================================== */
.departures-table-wrap {
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid rgba(18, 51, 34, 0.1);
  background-color: #fff;
  box-shadow: var(--shadow-card);
}
.departures-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  display: none;
}

.departures-cards {
  display: flex;
  flex-direction: column;
}
@media (min-width: 640px) {
  .departures-table { display: table; }
  .departures-cards { display: none; }
}

.departures-table thead {
  background-color: var(--pine-50);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}
.departures-table th, .departures-table td {
  padding: 1rem 1.5rem;
  font-size: 0.9375rem;
}
.departures-table tbody tr {
  border-top: 1px solid rgba(18, 51, 34, 0.1);
}
.departures-table td:first-child {
  font-weight: 600;
  color: var(--pine-950);
}
.departures-table td { color: var(--ink-soft); }
.departures-table td.price-cell {
  font-weight: 600;
  color: var(--pine-950);
}
.departures-table td.actions-cell { text-align: right; }

.availability-pill {
  display: inline-flex;
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  background-color: var(--pine-100);
  color: var(--pine-800);
}
.availability-pill--warn {
  background-color: var(--amber-100);
  color: var(--amber-600);
}

.table-book-btn {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  border-radius: 9999px;
  background-color: var(--pine-800);
  color: var(--parchment);
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
}
.table-book-btn:hover { background-color: var(--pine-700); }


.departures-cards li {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem;
  border-top: 1px solid rgba(18, 51, 34, 0.1);
}
.departures-cards li:first-child { border-top: none; }
.departures-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.departures-card__head p {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--pine-950);
}
.departures-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}
.departures-card__meta strong { color: var(--pine-950); }
.departures-cards .table-book-btn {
  justify-content: center;
  min-height: 44px;
  width: 100%;
}

/* ==========================================================================
   Reviews
   ========================================================================== */
.review-card {
  display: flex;
  flex-direction: column;
  border-radius: 1rem;
  background-color: #fff;
  padding: 1.75rem;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(18, 51, 34, 0.05);
}
.star-rating {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}
.star-rating svg { color: rgba(18, 51, 34, 0.2); }
.star-rating svg.is-filled { color: var(--amber-500); fill: var(--amber-500); }

.review-card__quote {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--pine-950);
}
.review-card__author {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.review-card__author img {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  object-fit: cover;
}
.review-card__author strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--pine-950);
}
.review-card__author span {
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

/* ==========================================================================
   Misc: dashboard placeholder cards, 404, contact page
   ========================================================================== */
.placeholder-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  border-radius: 1rem;
  border: 1px dashed rgba(18, 51, 34, 0.2);
  background-color: #fff;
  padding: 2rem;
}
.placeholder-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  background-color: var(--pine-100);
  color: var(--pine-800);
}
.placeholder-card h2 {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 600;
  color: var(--pine-950);
}
.placeholder-card p { font-size: 0.9375rem; color: var(--ink-soft); }

.not-found {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 5rem 1rem;
}
.not-found__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  background-color: var(--pine-100);
  color: var(--pine-800);
}
.not-found h1 {
  margin-top: 1.5rem;
  font-size: var(--text-h2);
  font-weight: 600;
  color: var(--pine-950);
}
.not-found p {
  margin-top: 0.75rem;
  max-width: 28rem;
  color: var(--ink-soft);
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.contact-detail-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  border-radius: 1rem;
  background-color: #fff;
  padding: 1.25rem;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(18, 51, 34, 0.05);
}
.contact-detail-card__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background-color: var(--pine-800);
  color: var(--parchment);
}
.contact-detail-card p:first-of-type {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}
.contact-detail-card p:last-of-type {
  margin-top: 0.25rem;
  font-weight: 500;
  color: var(--pine-950);
}
.contact-image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 1rem;
}
.contact-image img { width: 100%; height: 100%; object-fit: cover; }

.contact-form-card {
  border-radius: 1rem;
  background-color: #fff;
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(18, 51, 34, 0.05);
}
@media (min-width: 640px) {
  .contact-form-card { padding: 2rem; }
}
.contact-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2rem 0;
  text-align: center;
}
.contact-success svg { color: var(--pine-600); }
.contact-success h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--pine-950);
}
.contact-success p { max-width: 22rem; font-size: 0.9375rem; color: var(--ink-soft); }

.two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 1024px) {
  .two-col { grid-template-columns: 1fr 1.2fr; }
}
.two-col--filters {
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .two-col--filters { grid-template-columns: 280px 1fr; }
}

.hidden { display: none !important; }

/* Utility text/color helpers used inline in markup */
.text-center { text-align: center; }
.mt-8 { margin-top: 2rem; }

/* ==========================================================================
   Testimonial carousel — "From the trail"
   --------------------------------------------------------------------------
   An infinite right-to-left marquee. The track contains two identical sets of
   cards and slides exactly one set's width (-50%), so the loop point lands
   the second set precisely where the first began and there is no visible
   jump. Duration scales with the number of cards, keeping the apparent speed
   constant whether there are three testimonials or thirty.

   Cards keep a real, readable width — the point of the carousel is that more
   reviews fit on screen over time, not that each one gets smaller.
   ========================================================================== */
.testimonial-carousel {
  --testimonial-gap: 1.25rem;
  --testimonial-speed: 7s;      /* seconds per card */
  margin-top: 2.5rem;
  overflow: hidden;
  /* Fade the edges so cards enter and leave rather than being chopped off. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.testimonial-carousel__track {
  display: flex;
  gap: var(--testimonial-gap);
  width: max-content;
  animation: testimonial-scroll calc(var(--testimonial-count, 3) * var(--testimonial-speed)) linear infinite;
  will-change: transform;
}

@keyframes testimonial-scroll {
  from { transform: translate3d(0, 0, 0); }
  /* Half the track = one full set of cards. The gap after the last card of
     the first set is included, which is why this lands seamlessly. */
  to   { transform: translate3d(calc(-50% - (var(--testimonial-gap) / 2)), 0, 0); }
}

/* Reading a moving card is annoying; hovering stops it. */
.testimonial-carousel:hover .testimonial-carousel__track,
.testimonial-carousel:focus-within .testimonial-carousel__track {
  animation-play-state: paused;
}

/* Set by testimonials-carousel.js while the visitor is dragging. */
.testimonial-carousel.is-dragging .testimonial-carousel__track { animation-play-state: paused; }
.testimonial-carousel.is-dragging { cursor: grabbing; }

.testimonial-card {
  flex: 0 0 auto;
  width: min(24rem, 82vw);
  margin: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(18, 51, 34, 0.1);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
}
.testimonial-card .review-card__quote {
  flex: 1 1 auto;
  margin: 0.9rem 0 1.25rem;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--ink);
}
.testimonial-card .review-card__author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
}
.testimonial-card .review-card__author img {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  object-fit: cover;
  flex: 0 0 auto;
}
.testimonial-card .review-card__author strong {
  display: block;
  font-size: var(--text-base);
  color: var(--pine-950);
}
.testimonial-card .review-card__author span {
  display: block;
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

/* Touch: the script converts the track into a real scroller so it can be
   swiped, and the marquee is turned off while the finger is down. */
.testimonial-carousel.is-swipeable {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.testimonial-carousel.is-swipeable::-webkit-scrollbar { display: none; }
.testimonial-carousel.is-swipeable .testimonial-card { scroll-snap-align: center; }

@media (prefers-reduced-motion: reduce) {
  /* Motion off entirely: fall back to a hand-scrollable row. */
  .testimonial-carousel__track { animation: none; }
  .testimonial-carousel {
    overflow-x: auto;
    -webkit-mask-image: none;
            mask-image: none;
  }
}

/* ==========================================================================
   Nepal trekking regions
   --------------------------------------------------------------------------
   Three doorways into the filtered trek list. The card is one <a>, so the
   whole tile is the hit area; the image sits in a fixed 4:3 frame with
   object-fit so a portrait or panoramic upload is cropped rather than
   stretched.
   ========================================================================== */
.region-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 2.25rem;
}

.region-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0.9rem;
  background-color: #fff;
  border: 1px solid rgba(18, 51, 34, 0.08);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.region-card:hover,
.region-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: rgba(18, 51, 34, 0.18);
}
.region-card:focus-visible { outline: 2px solid var(--pine-600); outline-offset: 3px; }

.region-card__media {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  background-color: var(--pine-100);
  overflow: hidden;
}
.region-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.region-card:hover .region-card__media img { transform: scale(1.04); }

.region-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem 1.1rem 1.1rem;
  flex: 1;
}
.region-card__name {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: 600;
  color: var(--pine-950);
  line-height: 1.2;
}
.region-card__meta {
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.region-card__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 0.75rem;
}
.region-card__price { font-size: var(--text-sm); color: var(--ink-soft); }
.region-card__price strong {
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--pine-900);
}
.region-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--pine-800);
}
.region-card:hover .region-card__cta svg { transform: translateX(2px); }
.region-card__cta svg { transition: transform 0.2s ease; }

@media (max-width: 900px) {
  .region-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .region-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .region-card__media { aspect-ratio: 16 / 9; }
}