/* ============================================================
   Gill Tour & Travels — Tours Page Styles
   Extends style.css — all tokens (--color-*, --space-*, etc.)
   are inherited; only tours-specific components live here.
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   TOURS SECTION WRAPPER
   ════════════════════════════════════════════════════════════ */
.tours-section { background: var(--color-background); }

/* ════════════════════════════════════════════════════════════
   ERROR & EMPTY STATES
   ════════════════════════════════════════════════════════════ */
.tours-alert {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--space-lg);
  background:    #FFFBEB;
  border:        1px solid #FDE68A;
  border-left:   4px solid var(--color-accent);
  border-radius: var(--radius);
  padding:       var(--space-xl);
  max-width:     640px;
  margin-inline: auto;
}
.tours-alert__icon { font-size: 1.75rem; flex-shrink: 0; }
.tours-alert strong { display: block; color: var(--color-primary); margin-bottom: var(--space-xs); font-size: var(--font-size-lg); }
.tours-alert p  { color: var(--color-text-muted); font-size: var(--font-size-sm); line-height: 1.65; margin-bottom: var(--space-md); }
.tours-alert__cta { margin-top: var(--space-sm); }

.tours-empty {
  text-align:    center;
  padding:       var(--space-3xl) var(--space-lg);
  max-width:     520px;
  margin-inline: auto;
}
.tours-empty__icon  { font-size: 3.5rem; margin-bottom: var(--space-md); display: block; }
.tours-empty__title { font-size: var(--font-size-xl); font-weight: 800; color: var(--color-primary); margin-bottom: var(--space-sm); }
.tours-empty__text  { color: var(--color-text-muted); line-height: 1.7; margin-bottom: var(--space-xl); }
.tours-empty__actions {
  display:         flex;
  justify-content: center;
  flex-wrap:       wrap;
  gap:             var(--space-md);
}

/* ════════════════════════════════════════════════════════════
   TOURS GRID — responsive 3-column layout
   ════════════════════════════════════════════════════════════ */
.tours-grid {
  list-style:            none;
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--space-lg);
}
@media (min-width: 480px) {
  .tours-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .tours-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ════════════════════════════════════════════════════════════
   TOUR CARD
   ════════════════════════════════════════════════════════════ */
.tour-card {
  background:     var(--color-surface);
  border:         1px solid var(--color-border);
  border-radius:  var(--radius-lg);
  box-shadow:     var(--shadow);
  overflow:       hidden;
  display:        flex;
  flex-direction: column;
  height:         100%;
  transition:     transform var(--transition), box-shadow var(--transition);
}
.tour-card:hover {
  transform:  translateY(-6px);
  box-shadow: var(--shadow-lg);
}

/* ── Image area ── */
.tour-card__img-wrap {
  position:      relative;
  aspect-ratio:  16 / 10;
  overflow:      hidden;
  background:    var(--color-primary);
  flex-shrink:   0;
}

.tour-card__img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform var(--transition-slow);
}
.tour-card:hover .tour-card__img { transform: scale(1.06); }

/* JS-injected fallback div (replaces the <img> on onerror) */
.tour-card__img-fallback {
  width:           100%;
  height:          100%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      var(--color-primary);
}
.tour-card__img-fallback svg {
  width:  100%;
  height: 100%;
  display:block;
}

/* Duration badge — overlaid bottom-left of image */
.tour-card__duration-badge {
  position:       absolute;
  bottom:         var(--space-sm);
  left:           var(--space-sm);
  background:     var(--color-accent);
  color:          var(--color-primary);
  font-size:      var(--font-size-xs);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding:        .3rem .75rem;
  border-radius:  2rem;
  line-height:    1;
  white-space:    nowrap;
  /* subtle shadow so it reads over any image */
  box-shadow:     0 2px 8px rgba(0,0,0,.35);
}

/* ── Card body ── */
.tour-card__body {
  display:        flex;
  flex-direction: column;
  flex:           1;
  padding:        var(--space-lg);
  gap:            var(--space-sm);
}

.tour-card__title {
  font-size:   var(--font-size-lg);
  font-weight: 700;
  color:       var(--color-primary);
  line-height: 1.3;
  margin:      0;
}

.tour-card__highlight {
  font-size:   var(--font-size-sm);
  color:       var(--color-text-muted);
  line-height: 1.65;
  flex-grow:   1;
  margin:      0;
}

/* ── Footer: price + button ── */
.tour-card__footer {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-md);
  flex-wrap:       wrap;
  margin-top:      auto;
  padding-top:     var(--space-md);
  border-top:      1px solid var(--color-border);
}

.tour-card__pricing {
  display:        flex;
  flex-direction: column;
  gap:            .1rem;
  flex-shrink:    0;
}

.tour-card__price-from {
  font-size:      .7rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:          var(--color-text-muted);
  line-height:    1;
}

.tour-card__price {
  font-size:            1.25rem;
  font-weight:          800;
  color:                var(--color-accent-dark);
  font-variant-numeric: tabular-nums;
  line-height:          1.1;
}

/* Book Tour button */
.tour-card__btn {
  display:     inline-flex;
  align-items: center;
  gap:         var(--space-xs);
  padding:     var(--space-sm) var(--space-md);
  font-size:   var(--font-size-sm);
  white-space: nowrap;
  flex-shrink: 0;
}

.tour-card__wa-icon {
  flex-shrink: 0;
  opacity:     .9;
}

/* ── Responsive tweaks ── */
@media (max-width: 479px) {
  /* On very small screens let price and button stack */
  .tour-card__footer {
    flex-direction: column;
    align-items:    flex-start;
  }
  .tour-card__btn { width: 100%; justify-content: center; }
}