/* ============================================================
   mobile-timeline-v59.css  ·  PHONE-ONLY unified timeline
   One vertical timeline shared by every schedule on the site:
     · day-trip itineraries      .itinerary .itin-item
     · tour itineraries          .itin-v2 .itin-item
     · (legacy horizontal)       .itinerary.itin-h .itin-item
     · event / how-it-works      ul.timeline li
   A continuous gold rail on the left, an icon node per stop, then
   time / title / description stacked to the right. Reveal-on-scroll
   animation is added globally by site-enhancements.js (initTimelineFx).
   Loaded before services-hero-v61.css, which now scopes its own
   timeline rules to min-width:641px so this owns the phone layout.
   ============================================================ */
@media(max-width:640px){

  /* ---- list: relative wrapper carrying the rail ---- */
  .itinerary .itin-list,
  .itinerary.itin-h .itin-list,
  .itin-v2 .itin-list,
  ul.timeline{
    display:block!important;position:relative!important;grid-template-columns:none!important;
    grid-auto-flow:row!important;gap:0!important;overflow:visible!important;
    border:none!important;border-top:none!important;border-left:none!important;
    padding:2px 0 0!important;margin:26px 0 0!important;list-style:none!important;
    scroll-snap-type:none!important;
  }
  .itinerary .itin-list::-webkit-scrollbar,
  .itin-v2 .itin-list::-webkit-scrollbar{display:none;}
  /* the rail */
  .itinerary .itin-list::before,
  .itinerary.itin-h .itin-list::before,
  .itin-v2 .itin-list::before,
  ul.timeline::before{
    content:""!important;position:absolute!important;left:19px!important;top:6px!important;bottom:24px!important;
    width:2px!important;background:linear-gradient(#C19A4D,rgba(193,154,77,.22))!important;border-radius:2px!important;
  }

  /* ---- each stop ---- */
  .itinerary .itin-item,
  .itinerary.itin-h .itin-item,
  .itin-v2 .itin-item,
  ul.timeline li{
    display:block!important;position:relative!important;grid-template-columns:none!important;
    text-align:left!important;padding:0 0 24px 56px!important;margin:0!important;min-height:42px!important;
    border:none!important;border-top:none!important;border-bottom:none!important;border-radius:0!important;
    box-shadow:none!important;background:none!important;scroll-snap-align:none!important;
  }
  .itinerary .itin-item:last-child,
  .itinerary.itin-h .itin-item:last-child,
  .itin-v2 .itin-item:last-child,
  ul.timeline li:last-child{padding-bottom:2px!important;}

  /* ---- icon node sitting on the rail ---- */
  .itinerary .itin-item .itin-ic,
  .itinerary.itin-h .itin-item .itin-ic,
  .itin-v2 .itin-item .itin-ic{
    display:flex!important;position:absolute!important;left:0!important;top:0!important;
    width:40px!important;height:40px!important;align-items:center;justify-content:center;
    grid-column:auto!important;grid-row:auto!important;margin:0!important;padding:0!important;
    background:#F4EBD9!important;border:2px solid #fff!important;border-radius:50%!important;
    color:#A9843A!important;box-shadow:0 8px 18px -9px rgba(16,33,55,.55)!important;
  }
  .itinerary .itin-item .itin-ic svg,
  .itinerary.itin-h .itin-item .itin-ic svg,
  .itin-v2 .itin-item .itin-ic svg{width:22px!important;height:22px!important;stroke-width:1.7!important;}

  /* items that carry no icon element (events) → drop a plain gold dot */
  .itinerary .itin-item::before,
  .itinerary.itin-h .itin-item::before,
  .itin-v2 .itin-item::before{display:none!important;}
  ul.timeline li::before{
    content:""!important;display:block!important;position:absolute!important;
    left:12px!important;top:5px!important;right:auto!important;bottom:auto!important;
    width:16px!important;height:16px!important;border-radius:50%!important;
    background:#C19A4D!important;box-shadow:0 0 0 4px #fff!important;
  }
  ul.timeline li::after{display:none!important;}

  /* ---- time = gold small-caps ---- */
  .itinerary .itin-item .t,
  .itinerary.itin-h .itin-item .t,
  .itin-v2 .itin-item .t,
  ul.timeline li .t{
    display:block!important;position:static!important;grid-column:auto!important;grid-row:auto!important;
    width:auto!important;height:auto!important;min-width:0!important;padding:0!important;margin:1px 0 0!important;
    background:none!important;box-shadow:none!important;text-align:left!important;white-space:normal!important;
    color:#A9843A!important;font-family:var(--f-body,'Manrope',sans-serif)!important;
    font-weight:700!important;font-size:12px!important;letter-spacing:.15em!important;text-transform:uppercase!important;
  }

  /* ---- title ---- */
  .itinerary .itin-item h4,
  .itinerary.itin-h .itin-item h4,
  .itin-v2 .itin-item h4{
    display:block!important;grid-column:auto!important;grid-row:auto!important;
    margin:5px 0 4px!important;font-family:var(--f-display,'Archivo',sans-serif)!important;
    font-size:17.5px!important;line-height:1.2!important;font-weight:700!important;letter-spacing:-.02em!important;color:#16263a!important;
  }
  ul.timeline li strong{display:block!important;margin:5px 0 4px!important;font-size:17px!important;color:#16263a!important;}

  /* ---- description ---- */
  .itinerary .itin-item p,
  .itinerary.itin-h .itin-item p,
  .itin-v2 .itin-item p{
    display:block!important;grid-column:auto!important;grid-row:auto!important;
    margin:0!important;font-size:13.5px!important;line-height:1.55!important;color:#5c6674!important;max-width:none!important;
  }
  ul.timeline li>div{grid-column:auto!important;padding-left:0!important;margin-top:2px!important;}
  ul.timeline li small{display:block!important;font-size:13.5px!important;line-height:1.55!important;color:#5c6674!important;}

  /* no "swipe" hint anymore — it's a vertical list */
  .itinerary .section-head::after,
  .itin-v2 .section-head::after{content:none!important;display:none!important;}
}