/* ==========================================================================
   Cards — every tour/trip card component on the site. One class family,
   .tour-card, used everywhere: tours.html grid, the homepage rail,
   and every related-tours strip. Any adjustment here applies sitewide.
   ========================================================================== */

/* ---- Tour card (.tour-card — used on every page with a tour listing) ---- */
.tour-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--slt-radius-sm);
  overflow: hidden;
  background-color: var(--slt-surface);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tour-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

/* .tour-card sets its own display: flex above, which wins over the
   browser's default [hidden] rule (author styles always beat user-agent
   styles) — without this, card.hidden = true from the filter pills left
   the card visible. */
.tour-card[hidden] {
  display: none;
}

.tour-card__media {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

.tour-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tour-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background-color: var(--slt-blue);
  color: var(--slt-white);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: var(--slt-radius-sm);
}

.tour-card__badge--green {
  background-color: var(--slt-green);
}

.tour-card__media--safari     { background: linear-gradient(135deg, #e8d9a0, #b89656); }
.tour-card__media--classic    { background: linear-gradient(135deg, #a9c7e8, #5380b5); }
.tour-card__media--premium    { background: linear-gradient(135deg, #c9b3e8, #7649c9); }
.tour-card__media--cycling    { background: linear-gradient(135deg, #9fd6c0, #2f8f6a); }
.tour-card__media--indepth    { background: linear-gradient(135deg, #b3a0d6, #5c3f99); }
.tour-card__media--food       { background: linear-gradient(135deg, #f3b89a, #d9703f); }
.tour-card__media--family     { background: linear-gradient(135deg, #f0a9c4, #c25a87); }
.tour-card__media--simply     { background: linear-gradient(135deg, #cfe0a9, #7d9c4a); }
.tour-card__media--explore    { background: linear-gradient(135deg, #b9d99a, #6b9c4a); }
.tour-card__media--adventure  { background: linear-gradient(135deg, #9bc7d6, #3d7e95); }
.tour-card__media--wildlife   { background: linear-gradient(135deg, #d8c389, #8a6d3b); }
.tour-card__media--classic2   { background: linear-gradient(135deg, #9aa8d9, #4c5fa8); }
.tour-card__media--essential  { background: linear-gradient(135deg, #e8a9a9, #c24545); }

/* ---- Map view — swaps every card image for a map-style placeholder ---- */
.tours-grid--map-view .tour-card__media {
  background-color: #d9e4c8;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.5) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0 1px, transparent 1px 22px);
}

.tours-grid--map-view .tour-card__media::after {
  content: "";
  position: absolute;
  top: 46%;
  left: 50%;
  width: 16px;
  height: 16px;
  background-color: var(--slt-red);
  border: 2px solid var(--slt-white);
  border-radius: var(--slt-radius-sm);
  transform: translate(-50%, -100%) rotate(-45deg);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* ---- Cards with a real map photo (e.g. Leopard Safari) — swap to the
   actual map image on map-view instead of the generic CSS pin pattern
   above. ---- */
.tour-card__media-photo--map {
  display: none;
}

.tours-grid--map-view .tour-card__media--has-map {
  background: none;
}

.tours-grid--map-view .tour-card__media--has-map::after {
  content: none;
}

.tours-grid--map-view .tour-card__media--has-map .tour-card__media-photo--default {
  display: none;
}

.tours-grid--map-view .tour-card__media--has-map .tour-card__media-photo--map {
  display: block;
}

.tour-card__body {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 4px;
  padding: 18px;
  background-color: var(--slt-surface-subtle);
}

.tour-card__body p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--slt-gray-600);
}

.tour-card__style {
  position: absolute;
  left: 12px;
  top: 10px;
  z-index: 2;
  padding: 3px 1px;
  font-family: 'Krona One', sans-serif;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--slt-white);
  transform: rotate(-3deg);
}

/* Background lives on ::before and blends into the photo beneath it
   (overlay) instead of just fading out — text stays fully opaque. */
.tour-card__style::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgba(18, 18, 18, 0.8);
  mix-blend-mode: overlay;
  opacity: 0.85;
}

.tour-card__style--comfort::before {
  background: linear-gradient(171deg, #1e2171 5%, #474bc2 52%, #1e2171 99%);
}

.tour-card__style--value::before {
  background: linear-gradient(21deg, #2d3853 0%, #1a6070 47%, #2d3853 99%);
}

.tour-card__style--luxury::before {
  background: linear-gradient(135deg, var(--slt-gold-400) 0%, var(--slt-gold-500) 50%, var(--slt-gold-600) 100%);
}

/* The lighter gold ramp above reads as too soft against dark theme's
   surface — dark theme instead uses the heavier gold gradient. */
:root[data-theme="dark"] .tour-card__style--luxury::before {
  background: linear-gradient(135deg, #4A3301 0%, #AA771C 45%, #B38728 55%, #674F13 100%);
}

.tour-card__body h3 {
  font-size: 1.2rem;
  font-weight: 500;
  margin: 4px 0 6px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.tour-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--slt-gray-600);
  padding-bottom: 12px;
  margin-bottom: 12px;
}

.tour-card__duration {
  display: inline-flex;
  align-items: center;
  color: var(--slt-gray-600);
  font-weight: 500;
  font-size: 1rem;
}

.tour-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
}

.tour-card__price {
  margin-left: auto;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--slt-ink);
  text-align: right;
}

.tour-card__price strong {
  color: var(--slt-slate-900);
  font-weight: 600;
  font-size: 1.3rem;
}

:root[data-theme="dark"] .tour-card__price strong {
  color: #fff;
}

.tour-card__price-unit {
  font-size: 0.6rem;
  color: var(--slt-gray-600);
}

/* ==========================================================================
   Breakpoints
   ========================================================================== */

@media (max-width: 767.98px) {
  /* Body text and title were below the mobile-readability minimum and had
     no mobile override anywhere in the file — raised to the site's 16px
     body-text / 20px h3 baseline. */
  .tour-card__body p {
    font-size: 1rem;
  }

  .tour-card__body h3 {
    font-size: 1.25rem;
  }
}