/* Day-by-day as an alternating timeline with a spine that draws itself as you
   scroll. Layered on top of exp-days.css: the .day-card buttons keep their
   click handlers (and therefore the existing popup), they are just re-parented
   into timeline rows and restyled to be media-only.

   Everything is scoped under .exp-timeline, and the desktop layout is driven by
   @container, not viewport width, because the body column sits beside the
   320px enquiry sidebar. */

/* Hide the plain grid between first paint and the moment the timeline is
   built, so the cards do not visibly jump. The inline head script drops
   .tl-js after 3s as a failsafe if the JS below never runs. */
.tl-js .days[data-days]:not(.tl-ready) { opacity: 0 }

/* .exp-timeline lands on the same element as .days, so the grid rules from
   exp-days.css and the flex rules from grid-center.css have to be switched off
   here. grid-center.css uses div.days, so this needs two classes to outrank it. */
div.days.exp-timeline {
    display: block;
    grid-template-columns: none;
    gap: 0;
}

.exp-timeline {
    position: relative;
    container-type: inline-size;
    margin-top: 1.75rem;
    padding-block: 1rem 2rem;
    transition: opacity .3s ease;
}

/* ---- intro: subtitle + departures pill ---------------------------------- */
.tl-intro { text-align: center; margin-bottom: 2.25rem; position: relative; z-index: 2 }
.tl-intro__lead {
    margin: 0 auto 1.15rem; max-width: 34rem;
    font-size: 1rem; line-height: 1.6; color: var(--color-ink-soft);
}
.tl-pill {
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .45rem 1rem; background: #fff;
    border: 1px solid var(--color-rule); border-radius: var(--radius-pill);
    font-size: .84rem; font-weight: 600; color: var(--color-sage-deep);
    box-shadow: var(--shadow-soft);
}
.tl-pill__dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--color-sage) }

/* ---- decorative float layer --------------------------------------------- */
.tl-decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0 }
.tl-decor svg { position: absolute; display: block }
.tl-decor__plane    { top: 5rem;  left: 2.5rem;  width: 2rem;   height: 2rem;   color: var(--color-sienna);    opacity: .18 }
.tl-decor__mountain { top: 8rem;  right: 4rem;   width: 2.5rem; height: 2.5rem; color: var(--color-stormy);    opacity: .20 }
.tl-decor__compass  { top: 16rem; left: 5rem;    width: 1.5rem; height: 1.5rem; color: var(--color-sage);      opacity: .22 }
.tl-decor__sun      { bottom: 10rem; right: 3rem; width: 3rem;  height: 3rem;   color: var(--color-sienna);    opacity: .14 }
.tl-decor__tent     { bottom: 5rem; left: 4rem;   width: 2rem;  height: 2rem;   color: var(--color-sage-deep); opacity: .18 }
.tl-decor__fade { position: absolute; left: 0; width: 100%; height: 8rem }
.tl-decor__fade--top    { top: 0;    background: linear-gradient(to bottom, rgba(255,255,255,.75), transparent) }
.tl-decor__fade--bottom { bottom: 0; background: linear-gradient(to top,    rgba(255,255,255,.75), transparent) }
@container (max-width: 719px) { .tl-decor { display: none } }

/* ---- the spine ----------------------------------------------------------- */
.tl-track { position: absolute; top: 0; left: 1.5rem; width: 2px; height: 100%; z-index: 0 }
.tl-rail {
    width: 100%; height: 100%; border-radius: var(--radius-pill);
    background: linear-gradient(to bottom,
        transparent 2%, var(--color-rule) 12%, var(--color-rule) 88%, transparent 98%);
    opacity: .5;
}
.tl-seg {
    position: absolute; left: 0; right: 0; width: 100%;
    height: 0; border-radius: var(--radius-pill);
    will-change: height;
}

/* ---- rows ---------------------------------------------------------------- */
.tl-row { position: relative; display: flex; align-items: center; flex-direction: row }
.tl-row + .tl-row { margin-top: 2rem }

/* Centred on the row, so the row's own overlap margin carries the dot with it. */
.tl-marker {
    position: absolute; top: 50%; left: 1rem; z-index: 20;
    display: flex; align-items: center; transform-origin: center;
}
.tl-dot {
    width: 1rem; height: 1rem; border-radius: 50%;
    background: #fff; border: 2px solid var(--day, var(--color-sage));
    box-shadow: 0 4px 10px rgba(0,0,0,.18);
    transform: translateY(-50%);
}
.tl-num { display: none }

/* flex-basis rather than width:100%, so the 3.5rem gutter beside the rail is
   taken out of the card instead of pushing it off the right edge.
   z-index outranks the marker so a long watermark number tucks behind the
   card rather than printing over it. */
.tl-col { flex: 1 1 auto; min-width: 0; margin-left: 3.5rem; position: relative; z-index: 21 }

/* ---- desktop: alternating sides, interlocking rows ----------------------- */
@container (min-width: 720px) {
    .tl-track { left: 50%; width: 4px; transform: translateX(-50%) }

    .tl-row--left  { flex-direction: row }
    .tl-row--right { flex-direction: row-reverse }
    .tl-row + .tl-row { margin-top: -8rem }

    .tl-marker { left: 50%; transform: translateX(-50%) }
    .tl-dot { width: 1.5rem; height: 1.5rem; border-width: 4px }

    .tl-num {
        display: block; position: absolute; top: 0;
        font-family: var(--font-display); font-size: 3rem; font-weight: 800; line-height: 1;
        color: var(--color-ivory-tint);
        transform: translateY(-50%);
        user-select: none; pointer-events: none; white-space: nowrap;
    }
    /* The gutter between the spine and the card is 110px at the 920px body
       width; a two-digit number is ~80px, so 1.5rem is the most offset that
       still clears the card edge. */
    .tl-row--left  .tl-num { right: 1.5rem }
    .tl-row--right .tl-num { left:  1.5rem }

    .tl-col { flex: 0 0 auto; width: 42%; max-width: 400px; margin-left: 0 }
    .tl-row--left  .tl-col { margin-right: auto; padding-right: 2.25rem }
    .tl-row--right .tl-col { margin-left:  auto; padding-left:  2.25rem }
}
@container (min-width: 900px) { .tl-num { font-size: 3.5rem } }

/* ---- the card ------------------------------------------------------------ */
.tl-card {
    position: relative; overflow: hidden;
    background: #fff;
    border: 2px solid var(--day, var(--color-sage));
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(0,0,0,.10);
    transition: box-shadow .3s ease, transform .3s ease;
}
.tl-card:hover { box-shadow: 0 24px 55px rgba(0,0,0,.18) }

/* the original .day-card button, demoted to the photo header */
.exp-timeline .day-card {
    display: block; width: 100%; height: 12rem;
    padding: 0; border: 0; border-radius: 0; background: none;
    box-shadow: none; overflow: hidden; position: relative;
}
.exp-timeline .day-card:hover,
.exp-timeline .day-card:focus-visible { transform: none; box-shadow: none }
.exp-timeline .day-card:focus-visible { outline: 3px solid var(--color-sage-deep); outline-offset: -3px }
.exp-timeline .day-card__media { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0 }
.exp-timeline .day-card:hover .day-card__media img { transform: scale(1.05) }
.exp-timeline .day-card__num { background: var(--day, var(--color-sienna)) }
.exp-timeline .day-card__title { font-size: 1.05rem }
@container (min-width: 720px) {
    .exp-timeline .day-card { height: 14rem }
    .exp-timeline .day-card__title { font-size: 1.15rem }
}

/* stat pill next to the Day N badge */
.tl-stat {
    display: inline-flex; align-items: center; gap: .3rem;
    background: rgba(0,0,0,.34); color: #fff;
    font-size: .7rem; font-weight: 600;
    padding: .28rem .7rem; border-radius: var(--radius-pill);
    -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}
.tl-stat svg { width: .8rem; height: .8rem }

/* ---- activity icon strip -------------------------------------------------- */
.tl-strip {
    display: flex; align-items: center; justify-content: center;
    gap: .55rem; flex-wrap: wrap;
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--color-ivory-tint);
    background: #f7faf8;
    background: color-mix(in srgb, var(--day, var(--color-sage)) 8%, #fff);
}
.tl-icon {
    display: grid; place-items: center;
    width: 2rem; height: 2rem; border-radius: 50%;
    background: #fff; color: var(--day, var(--color-sage-deep));
    box-shadow: 0 2px 6px rgba(0,0,0,.13);
    transition: transform .2s ease, box-shadow .2s ease;
}
.tl-icon svg { width: 1rem; height: 1rem }
.tl-icon:hover { transform: scale(1.1); box-shadow: 0 5px 14px rgba(0,0,0,.20) }
@container (min-width: 720px) {
    .tl-icon { width: 2.25rem; height: 2.25rem }
    .tl-icon svg { width: 1.15rem; height: 1.15rem }
}

/* ---- card body ------------------------------------------------------------ */
.tl-body { padding: 1rem 1.15rem 1.2rem; display: flex; flex-direction: column; gap: .7rem }
.exp-timeline .day-card__excerpt { margin: 0 }
.tl-acts__head {
    margin: 0; font-size: .8rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--color-ink);
}
.tl-acts__list { list-style: none; margin: .45rem 0 0; padding: 0; display: grid; gap: .3rem }
.tl-acts__list li {
    display: flex; align-items: center; gap: .5rem;
    font-size: .86rem; color: var(--color-ink-soft);
}
.tl-acts__list li::before {
    content: ""; flex: none; width: .375rem; height: .375rem; border-radius: 50%;
    background: var(--day, var(--color-sage)); opacity: .65;
}
.tl-stay {
    margin-top: auto; padding-top: .7rem; border-top: 1px solid var(--color-ivory-tint);
    font-size: .84rem; font-weight: 600; color: var(--color-sage-deep);
}
.exp-timeline .day-card__more {
    font-size: .76rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--color-sage-deep);
}

/* ---- reveal start states (only while JS is driving) ----------------------- */
.exp-timeline.is-anim .tl-row    { opacity: 0 }
.exp-timeline.is-anim .tl-dot    { opacity: 0; transform: translateY(-50%) scale(0) }
.exp-timeline.is-anim .tl-num    { opacity: 0 }
.exp-timeline.is-anim .tl-card   { opacity: 0 }
.exp-timeline.is-anim .tl-icon   { opacity: 0 }

/* CSS-transition fallback used when the Motion CDN is unreachable */
.exp-timeline.is-css .tl-row,
.exp-timeline.is-css .tl-card,
.exp-timeline.is-css .tl-num,
.exp-timeline.is-css .tl-icon { transition: opacity .6s ease-out, transform .6s ease-out }
.exp-timeline.is-css .tl-dot  { transition: opacity .35s ease-out, transform .35s cubic-bezier(.34,1.56,.64,1) }
.exp-timeline.is-css .tl-row  { transform: translateY(50px) }
.exp-timeline.is-css .tl-row--left  .tl-card { transform: translateX(-50px) }
.exp-timeline.is-css .tl-row--right .tl-card { transform: translateX(50px) }
.exp-timeline.is-css .tl-num  { transform: translateY(-50%) scale(.8) }
.exp-timeline.is-css .tl-icon { transform: scale(0) rotate(-180deg) }
.exp-timeline.is-css .tl-row.is-in,
.exp-timeline.is-css .tl-row.is-in .tl-card,
.exp-timeline.is-css .tl-row.is-in .tl-icon { opacity: 1; transform: none }
.exp-timeline.is-css .tl-row.is-in .tl-num { opacity: 1; transform: translateY(-50%) scale(1) }
.exp-timeline.is-css .tl-row.is-in .tl-dot { opacity: 1; transform: translateY(-50%) scale(1) }

/* ---- reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .exp-timeline.is-anim .tl-row,
    .exp-timeline.is-anim .tl-card,
    .exp-timeline.is-anim .tl-num,
    .exp-timeline.is-anim .tl-icon { opacity: 1; transform: none }
    .exp-timeline.is-anim .tl-dot  { opacity: 1; transform: translateY(-50%) scale(1) }
    .exp-timeline .tl-card,
    .exp-timeline .tl-icon,
    .exp-timeline .day-card__media img { transition: none }
    .tl-decor svg { animation: none !important }
}