.xb-day-route { padding-block: 0 clamp(2rem, 4vw, 3rem); }
.xb-day-route-title { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 0; font-size: clamp(1.75rem, 2.6vw, 2.5rem); text-align: center; }
.xb-day-route-title::before, .xb-day-route-title::after { content: ""; width: 8rem; max-width: 16%; height: 1px; background: var(--xb-accent-gold); }
.xb-day-route-subtitle { margin: .25rem 0 .625rem; color: var(--xb-accent-gold); font-size: clamp(.875rem, 1.3vw, 1.125rem); line-height: 1.4; letter-spacing: .08em; text-align: center; text-wrap: balance; }
.xb-day-route-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.75rem; margin: 0; padding: 0; list-style: none; }
.xb-day-route-stop { position: relative; min-width: 0; text-align: center; }
.xb-day-route-pin { display: block; width: 2rem; height: 2.5rem; margin: 0 auto .375rem; color: var(--xb-accent-gold); }
.xb-day-route-stop h3 { margin: 0; font-size: .8125rem; font-weight: 600; line-height: 1.4; text-transform: uppercase; white-space: nowrap; }
.xb-day-route-stop p { margin: .25rem 0 0; font-size: .8125rem; line-height: 1.45; text-wrap: balance; }
.xb-day-route-arrow { position: absolute; top: 2rem; right: -1.5rem; width: 1.25rem; height: 1.25rem; color: var(--xb-accent-gold); }
.xb-route-mobile-path { display: none; }
@media (max-width: 1100px) {
  .xb-day-route-list { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; max-width: 32rem; margin-inline: auto; }
  .xb-day-route-subtitle { margin-bottom: 1.25rem; }
  .xb-day-route-stop { display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: 1rem; text-align: start; }
  .xb-day-route-pin { grid-row: 1 / 3; margin: 0; }
  .xb-day-route-stop h3 { font-size: .9375rem; white-space: normal; text-wrap: balance; }
  .xb-day-route-stop p { font-size: .875rem; }
  .xb-day-route-arrow { top: auto; bottom: -1.75rem; left: .375rem; right: auto; transform: rotate(90deg); }
}
@media (max-width: 600px) {
  .xb-day-route { overflow: hidden; padding-bottom: 1.5rem; }
  .xb-day-route-title { gap: .625rem; font-size: clamp(1.625rem, 8vw, 2rem); }
  .xb-day-route-title::before, .xb-day-route-title::after { width: 3rem; max-width: 12%; }
  .xb-day-route-subtitle { margin: .25rem auto .75rem; max-width: 22rem; font-size: .75rem; line-height: 1.35; }
  .xb-day-route .xb-container { position: relative; }
  .xb-day-route .xb-route-mobile-path {
    position: absolute;
    z-index: 0;
    display: block;
    overflow: visible;
    pointer-events: none;
  }
  .xb-route-mobile-path path {
    fill: none;
    stroke: var(--xb-accent-gold);
    stroke-width: 1.25;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    opacity: .72;
  }
  .xb-day-route .xb-route-mobile-path {
    inset: 5.25rem 1rem 1.75rem;
    width: calc(100% - 2rem);
    height: calc(100% - 7rem);
  }
  .xb-day-route-list {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    min-height: 19rem;
    max-width: 24rem;
    margin-inline: auto;
  }
  .xb-day-route-stop {
    position: absolute;
    inset-inline: 0;
    display: block;
    min-height: 3.5rem;
    text-align: start;
  }
  .xb-day-route-stop:nth-child(1) { top: 0; --xb-route-pin-x: 42%; }
  .xb-day-route-stop:nth-child(2) { top: 16%; --xb-route-pin-x: 64%; }
  .xb-day-route-stop:nth-child(3) { top: 32%; --xb-route-pin-x: 39%; }
  .xb-day-route-stop:nth-child(4) { top: 48%; --xb-route-pin-x: 62%; }
  .xb-day-route-stop:nth-child(5) { top: 64%; --xb-route-pin-x: 44%; }
  .xb-day-route-stop:nth-child(6) { top: 80%; --xb-route-pin-x: 61%; }
  .xb-day-route-pin {
    position: absolute;
    top: .125rem;
    left: var(--xb-route-pin-x);
    width: 1.5rem;
    height: 1.875rem;
    margin: 0;
    transform: translateX(-50%);
  }
  .xb-day-route-copy {
    width: 43%;
    background: var(--xb-background);
    box-shadow: 0 0 .35rem .2rem var(--xb-background);
  }
  .xb-day-route-stop:nth-child(odd) .xb-day-route-copy { margin-inline-start: auto; text-align: start; }
  .xb-day-route-stop:nth-child(even) .xb-day-route-copy { margin-inline-end: auto; text-align: end; }
  .xb-day-route-stop h3,
  .xb-day-route-stop p { width: auto; }
  .xb-day-route-stop h3 { font-size: .75rem; line-height: 1.25; }
  .xb-day-route-stop p { margin-top: .125rem; font-size: .6875rem; line-height: 1.25; }
  .xb-day-route-arrow { display: none; }
}
