/* Itineraries — day-by-day routes across existing guides and articles. */

.itin-wrap { max-width: var(--max-w); margin: 0 auto; padding: 40px 32px 80px; }

.itin-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 46px);
  letter-spacing: -.02em;
  line-height: 1.12;
  color: var(--ink);
  margin: 8px 0 10px;
  text-wrap: balance;
}

.itin-meta { margin: 0 0 18px; font-size: 13px; color: var(--muted); }

.itin-intro { max-width: 720px; margin-bottom: 26px; }
.itin-intro p { margin: 0 0 .9em; font-size: 16px; line-height: 1.75; color: var(--ink-soft); }
.itin-intro p:last-child { margin-bottom: 0; }

.itin-empty { color: var(--muted); font-style: italic; }

/* ── Day nav ───────────────────────────────── */

.itin-daynav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.itin-daynav__item {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .15s, color .15s;
}

.itin-daynav__item:hover { border-color: var(--coral); color: var(--coral); }

/* ── Days ──────────────────────────────────── */

.itin-day { margin-bottom: 44px; scroll-margin-top: 24px; }

.itin-day__title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  color: var(--coral);
  font-size: 26px;
  letter-spacing: -.01em;
  margin: 0 0 10px;
}

.itin-day__blurb { max-width: 720px; margin-bottom: 18px; }
.itin-day__blurb p { margin: 0 0 .7em; font-size: 15px; line-height: 1.7; color: var(--ink-soft); }
.itin-day__blurb p:last-child { margin-bottom: 0; }

/* A day is always ONE row that scrolls sideways when it outgrows the column.
   Wrapping to a second row broke the timeline: the bar spans the first row's
   tracks, so anything that wrapped ended up beneath a line that did not
   describe it. One row keeps every card under its own hour.

   Below ~4 items the track is narrower than the container, so nothing scrolls
   and it looks exactly like a plain row. */
.itin-day__items {
  display: grid;
  grid-auto-flow: column;
  /* A fixed track, not minmax(0,340px): the minmax lets the browser shrink
     every column to fit the container instead of overflowing, which squeezed
     five cards into one row and clipped their names. Fixed width means the
     row genuinely outgrows the column and scrolls. */
  grid-auto-columns: 340px;
  grid-template-rows: auto auto;
  justify-content: start;
  gap: 8px 22px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: 8px;
  /* Hidden: the edge fades and the prev/next buttons say the row scrolls, and
     a permanent grey bar under every day was louder than either. */
  scrollbar-width: none;
  -ms-overflow-style: none;

  /* Both edges fade out instead of being cut off. The widths are 0 until the
     script decides the row actually scrolls — and each side clears on its own,
     so nothing is dimmed once you have reached that end. */
  --fade-l: 0px;
  --fade-r: 0px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
}

.itin-day__items::-webkit-scrollbar { width: 0; height: 0; }

/* Narrower than the first attempt: 48px reached well into the second card and
   visibly greyed its text. This only softens the boundary. */
.itin-day__items.can-left  { --fade-l: 28px; }
.itin-day__items.can-right { --fade-r: 28px; }

/* ── Scroll buttons (desktop, added by JS only when needed) ── */

.itin-day { position: relative; }

.itin-scroll {
  position: absolute;
  /* `top` is set by the script to the middle of the card row. 50% of the day
     block would sit too high, because the block also contains the heading,
     blurb, timeline and the notes under the cards. */
  z-index: 2;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--coral);
  border-radius: 50%;
  background: var(--coral);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .14);
  transition: background .15s, color .15s;
}

.itin-scroll:hover { background: #fff; color: var(--coral); }
.itin-scroll:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.itin-scroll[hidden] { display: none; }
.itin-scroll--prev { left: -20px; }
.itin-scroll--next { right: -20px; }

@media (max-width: 900px) {
  /* Touch scrolling is the interaction here; the buttons would only cover
     the cards. */
  .itin-scroll { display: none; }
}

.itin-day__items > .itin-clock {
  grid-row: 1;
  /* Spans every item, so the arc always covers the whole day. */
  grid-column: 1 / span var(--itin-n, 1);
}

.itin-day__items > .itin-item {
  grid-row: 2;
  scroll-snap-align: start;
}

/* ── Article card (guides reuse the site's guide card) ─────────────── */

.itin-post__thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ph, #ece7dc); }
.itin-post__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.itin-post__body { display: flex; flex-direction: column; flex: 1; padding: 14px 16px 16px; }

.itin-post__kicker {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: 5px;
}

.itin-post__title { font-family: var(--serif); font-weight: 700; font-size: 17px; line-height: 1.3; margin: 0; }

/* ── Archive cards ─────────────────────────── */

.itin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 26px;
  margin-top: 26px;
}

.itin-card__link {
  display: block;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--paper);
  transition: border-color .15s;
}

.itin-card__link:hover { border-color: var(--coral); }

.itin-card__thumb { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--ph, #ece7dc); }
.itin-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.itin-card__body { display: block; padding: 16px 18px; }

.itin-card__kicker {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--coral);
  margin-bottom: 6px;
}

.itin-card__title { font-family: var(--serif); font-weight: 700; font-size: 19px; line-height: 1.25; margin: 0 0 6px; }
.itin-card__sub { display: block; font-size: 14px; line-height: 1.5; color: var(--muted); }

@media (max-width: 700px) {
  .itin-wrap { padding: 28px 20px 60px; }
  .itin-day__title { font-size: 22px; }
  .itin-day { margin-bottom: 42px; }
  .itin-grid { grid-template-columns: 1fr; gap: 18px; }

  /* Same one-row scroller as desktop — only the card width and the
     full-bleed edges change. */
  .itin-day__items {
    grid-auto-columns: min(78vw, 320px);
    gap: 18px 16px;
    margin-inline: -20px;
    padding: 0 20px 10px;

    /* A touch of left fade even at the start, so the row reads as something
       that came from somewhere rather than a hard-edged block. */
    --fade-l: 14px;
    --fade-r: 22px;

    /* Snapped cards land on the text margin, not the bleed edge — without
       this a swipe settles 20px off and feels slightly wrong every time. */
    scroll-padding-left: 20px;
  }

  .itin-day__items.can-left  { --fade-l: 26px; }
  .itin-day__items.can-right { --fade-r: 26px; }
}

/* ── Guide card, stops variant (itinerary pages) ─────────────────────────
   The map is decoration here, not the subject: what sells the guide is the
   list of places inside it. */

.pg-cards {
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--paper);
  transition: border-color .15s;
}

.pg-cards:hover { border-color: var(--coral); }

.pg-cards__body { padding: 16px; display: flex; flex-direction: column; }

.pg-cards__curator { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }

.pg-cards__avatar {
  width: 26px; height: 26px; flex: none;
  border-radius: 50%; overflow: hidden;
  background: var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--ink);
}

.pg-cards__avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.pg-cards__curator-name { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }

.pg-cards__title { font-family: var(--serif); font-weight: 700; font-size: 18px; line-height: 1.25; margin: 0 0 9px; }

/* Quick facts — real links to term archives, so they read as clickable. */
.pg-cards__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.pg-cards__chip {
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .15s, color .15s;
}

a.pg-cards__chip:hover { border-color: var(--coral); color: var(--coral); }

.pg-cards__chip--cat  { color: #3a6b45; border-color: #d9e3cf; background: #eef3e8; }
.pg-cards__chip--dist { color: #2f5a96; border-color: #cfe0f7; background: #eef3fb; }

/* Not a link — the count has no archive to point at. */
.pg-cards__chip--count { color: var(--muted); background: var(--paper); }
.pg-cards__title a { color: var(--ink); text-decoration: none; }
.pg-cards__title a:hover { color: var(--coral); }

/* Table of contents: names and links, never prose. */
.pg-cards__stops { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 2px; }

/* min-width:0 all the way down: a flex or grid item defaults to min-width
   auto, which refuses to shrink below its content — so a long venue name
   pushed past the card instead of ellipsing. */
.pg-cards__stop { min-width: 0; }

.pg-cards__stop a {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 6px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.35;
  transition: background .15s, color .15s;
}

.pg-cards__stop a:hover { background: #fff; color: var(--ink); }

.pg-cards__stop-thumb {
  width: 30px; height: 30px; flex: none;
  border-radius: 6px; overflow: hidden;
  background: var(--ph, #ece7dc);
}

.pg-cards__stop-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Two lines before clamping: one line ellipsed most Vietnamese venue names
   halfway through, which is worse than a slightly taller row. */
.pg-cards__stop-name {
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
          line-clamp: 2;
  overflow: hidden;
}

.pg-cards__stop--more a { padding-left: 45px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.pg-cards__stop--more a:hover { color: var(--coral); }

.pg-cards__cta {
  margin-top: auto;
  align-self: flex-start;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--coral);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  transition: background .15s;
}

.pg-cards__cta:hover { background: #c14a24; }

/* ── Article card ──────────────────────────── */

.itin-post {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--paper);
  transition: border-color .15s;
}

.itin-post:hover { border-color: var(--coral); }
.itin-post__thumblink { display: block; }
.itin-post__excerpt { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }

.itin-post__cta {
  margin-top: auto;
  align-self: flex-start;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--coral);
  text-decoration: none;
}

.itin-post__cta:hover { text-decoration: underline; }
.itin-post__title a { color: var(--ink); text-decoration: none; }
.itin-post__title a:hover { color: var(--coral); }

/* Day number above an authored label. */
.itin-day__n {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted);
  margin-bottom: 3px;
}

/* Card + its curator note travel together in the grid. */
.itin-item { min-width: 0; display: flex; flex-direction: column; }
.itin-item > .pg-cards,
.itin-item > .itin-post { flex: 1; }

/* The note is the itinerary's own writing — set apart from the linked card so
   it never reads as part of the guide's own copy. */
.itin-item__note {
  margin: 10px 0 0;
  padding-left: 12px;
  border-left: 3px solid var(--coral);
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* Category pin standing in for a missing photo. */
.pg-cards__stop-thumb.is-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  border: 1px solid var(--line);
}

.pg-cards__stop-pin { width: 18px; height: 18px; object-fit: contain; }

/* ── Day arc: morning → late night ───────────────────────────────────────
   Gradient runs the full day regardless of which slots are used, so the
   markers sit at true positions on a real scale rather than being spread to
   fill. Colour stops match the slot order in pg_itin_slots(). */

.itin-clock {
  position: relative;
  height: 40px;
  margin: 0 0 8px;
}

/* Spans the card row; the gradient carries the time information. */
.itin-clock__band { position: absolute; bottom: 0; left: 0; right: 0; }

.itin-clock__line {
  height: 6px;
  border-radius: 999px;
  /* Ends fade rather than stopping dead, so the band reads as a span of time
     rather than a bar with hard edges. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6px, #000 calc(100% - 6px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6px, #000 calc(100% - 6px), transparent 100%);
}

/* The label's position on the band is the marker — no dots. */
.itin-clock__mark {
  position: absolute;
  bottom: 10px;
  transform: translateX(-50%);
  line-height: 0;
}

/* First and last pull inside so their labels never overhang the band. */
.itin-clock__mark[style*="left:0%"]   { transform: none; left: 0 !important; text-align: left; }
.itin-clock__mark[style*="left:100%"] { transform: translateX(-100%); text-align: right; }

.itin-clock__icon { display: block; color: var(--ink-soft); }

.itin-clock__mark.is-sunset .itin-clock__icon { color: #c0432c; }

/* ── Slot badge on each card ───────────────── */

.itin-item__slot {
  align-self: flex-start;
  margin-bottom: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #fff;
  background: var(--ink);
}


.itin-item__slot--morning   { background: #d9a418; }
.itin-item__slot--lunch     { background: #d18a1e; }
.itin-item__slot--afternoon { background: #e07b28; }
.itin-item__slot--sunset    { background: #e2553d; }
.itin-item__slot--evening   { background: #8e4a8e; }
.itin-item__slot--night     { background: #4a2d6b; }
.itin-item__slot--late      { background: #241540; }

@media (max-width: 700px) {
  /* Labels collide well before this width — the line and dots still carry the
     arc, and each card states its own time on the badge. */
  /* Seven labels cannot fit across a phone; the gradient still carries the
     arc, and every card states its own time on its badge. */
  /* Symbols are narrow enough to survive phone width, unlike the words they
     replaced — so the arc keeps its meaning here. */
  .itin-clock { height: 34px; margin-bottom: 0; }
}