/* Departure Details page — shares almost everything with trip.css
   (hero, sections, itinerary, includes grid, booking card) and adds
   the traveler grid, guide card, stats grid, and timeline below. */
@import url('trip.css');

/* ---- Joined travelers ---- */
.traveler-grid {
  margin-top: 1.25rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.85rem;
}
.traveler-card {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  border: 1px solid rgba(18, 51, 34, 0.1);
  border-radius: 0.75rem;
  padding: 0.6rem 0.75rem;
  background: #fff;
}
.traveler-card__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.traveler-card__avatar--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pine-100);
  color: var(--pine-700);
  font-weight: 700;
  font-size: 0.8rem;
}
.traveler-card__name { font-size: 0.85rem; font-weight: 600; color: var(--pine-950); }
.traveler-card__nationality { font-size: 0.78rem; color: var(--ink-soft); }

/* ---- Assigned guide ---- */
.guide-card {
  margin-top: 1.25rem;
  display: flex;
  gap: 1.25rem;
  border: 1px solid rgba(18, 51, 34, 0.1);
  border-radius: 1rem;
  padding: 1.5rem;
  background: #fff;
  box-shadow: var(--shadow-lift);
}
.guide-card__photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.guide-card__name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--pine-950); }
.guide-card__title { font-size: 0.85rem; color: var(--amber-600); font-weight: 600; margin-top: 0.15rem; }
.guide-card__bio { margin-top: 0.6rem; font-size: 0.9rem; color: var(--ink-soft); }
.guide-card__facts {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.guide-card__facts strong { color: var(--pine-900); }
.guide-card__license { margin-top: 0.6rem; font-size: 0.8rem; color: var(--pine-700); font-weight: 600; }
.guide-card__certs {
  margin-top: 0.5rem;
  padding-left: 1.1rem;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.guide-card__certs li { margin-bottom: 0.2rem; }

@media (max-width: 640px) {
  .guide-card { flex-direction: column; align-items: flex-start; }
}

/* ---- Booking statistics ---- */
.stats-grid {
  margin-top: 1.25rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
}
.stat-box {
  border: 1px solid rgba(18, 51, 34, 0.1);
  border-radius: 0.85rem;
  padding: 1rem;
  text-align: center;
  background: var(--pine-50);
}
.stat-box__value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--pine-950);
}
.stat-box__label { font-size: 0.75rem; color: var(--ink-soft); }

/* ---- Booking timeline ---- */
.timeline {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.timeline-step {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.6rem 0;
  border-left: 2px solid rgba(18, 51, 34, 0.12);
  margin-left: 5px;
  padding-left: 1.25rem;
  position: relative;
}
.timeline-step:last-child { border-left-color: transparent; }
.timeline-step__dot {
  position: absolute;
  left: -6px;
  top: 0.7rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d8ddd9;
  border: 2px solid #fff;
}
.timeline-step.is-done .timeline-step__dot { background: var(--pine-600); }
.timeline-step__label { font-size: 0.88rem; font-weight: 600; color: var(--pine-950); }
.timeline-step__date { font-size: 0.78rem; color: var(--ink-soft); }
.timeline-step.is-done .timeline-step__label { color: var(--pine-700); }