/* ======================================
   TRAVEL DESTINATION ACCORDION
   ====================================== */

.travel-dest-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.travel-dest-item {
  border: 1px solid var(--border-dim);
  border-radius: var(--radius);
  background: var(--bg-surface);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s;
}
.travel-dest-item:hover { border-color: var(--text-muted); }
.travel-dest-item.open  { border-color: var(--accent-ember); }

.travel-dest-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
}
.travel-dest-name {
  flex: 1;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-primary);
}
.travel-dest-days {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.travel-dest-chevron {
  font-size: 0.72rem;
  color: var(--text-muted);
  width: 12px;
  text-align: center;
  flex-shrink: 0;
}

/* ======================================
   THE ROW THAT CARRIES REGION ART
   The picture comes from the row's own --dest-art (set in ui/world.js); the
   veil over it, the lettering and the shadows are decided here so that light
   mode can have its own. Dark theme: near-black veil, gold name, pale day
   count, shadows cast in black. Parchment: the same veil in parchment, so the
   list stops reading as nine black bars, with the ink and the shadows inverted
   to match. Anything without art keeps the plain surface above.
   ====================================== */
.travel-dest-row.art {
  min-height: 56px;
  background:
    linear-gradient(100deg, rgba(10,8,18,0.94) 0%, rgba(10,8,18,0.8) 45%, rgba(10,8,18,0.5) 100%),
    var(--dest-art, none) center / cover no-repeat,
    linear-gradient(120deg, #1a1620 0%, var(--bg-base) 100%);
}
.travel-dest-row.art .travel-dest-name {
  font-family: var(--font-display);
  font-variant: small-caps;
  letter-spacing: 0.06em;
  font-size: 1.05rem;
  color: var(--accent-gold);
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
.travel-dest-row.art .travel-dest-days {
  font-size: 0.74rem;
  color: #E4DAC6;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85);
}
.travel-dest-row.art .travel-dest-chevron {
  color: var(--text-secondary);
  text-shadow: 0 1px 3px rgba(0,0,0,0.85);
}

:root.light-mode .travel-dest-row.art {
  background:
    linear-gradient(100deg, rgba(249,244,231,0.95) 0%, rgba(249,244,231,0.87) 45%, rgba(249,244,231,0.62) 100%),
    var(--dest-art, none) center / cover no-repeat,
    linear-gradient(120deg, var(--bg-panel) 0%, var(--bg-void) 100%);
}
:root.light-mode .travel-dest-row.art .travel-dest-name {
  color: #6B4E12;
  text-shadow: 0 1px 2px rgba(252,248,236,0.9);
}
:root.light-mode .travel-dest-row.art .travel-dest-days {
  color: #3A3226;
  text-shadow: 0 1px 2px rgba(252,248,236,0.9);
}
:root.light-mode .travel-dest-row.art .travel-dest-chevron {
  color: #5A5040;
  text-shadow: 0 1px 2px rgba(252,248,236,0.9);
}

.travel-dest-expand {
  border-top: 1px solid var(--border-dim);
  padding: 0.6rem 0.6rem 0.65rem;
  background: rgba(200,98,42,0.04);
}
.travel-dest-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 0.4rem;
}
.travel-dest-journey {
  font-size: 0.72rem;
  color: var(--accent-ember);
}