/* Itinerary route map: the map on top, the day cards under it, the open
   day's detail under those. From the design system's Card / Day and the
   itinerary frames: on desktop every day fits in a grid of five, on a tablet
   and a phone the days are a rail with the controls in the section header. */
.dea-im {
  --im-card-w: 250px;
  --im-gap: 20px;
  background: var(--dea-bg-page);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.dea-im__map { aspect-ratio: 16 / 9; border-radius: var(--dea-radius-lg); }
@media (max-width: 767px) { .dea-im__map { aspect-ratio: 343 / 260; } }

.dea-im__railwrap { position: relative; }
.dea-im__rail {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--im-gap);
}
@media (min-width: 1024px) {
  .dea-im__head .dea-sechead__controls { display: none; }
}
@media (max-width: 1023px) {
  .dea-im__railwrap { margin-right: calc(var(--dea-gutter) * -1); }
  .dea-im__rail {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: var(--im-card-w);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    scroll-behavior: smooth;
    margin: -12px 0 -24px -12px;
    padding: 12px 0 24px 12px;
    scroll-padding-inline: 12px var(--dea-gutter);
  }
  .dea-im__rail::after { content: ""; width: max(0px, calc(var(--dea-gutter) - var(--im-gap))); }
  .dea-im__rail::-webkit-scrollbar { display: none; }
  .dea-im__card { scroll-snap-align: start; }
}
@media (max-width: 767px) { .dea-im { --im-card-w: 228px; --im-gap: 16px; } }

/* ---------------- Card / Day ---------------- */
.dea-im__card {
  background: var(--dea-bg-card);
  border-radius: var(--dea-radius-md);
  box-shadow: var(--dea-shadow-card), inset 0 0 0 1px var(--dea-border-default);
  transition: transform .35s var(--dea-ease), box-shadow .35s var(--dea-ease);
}
.dea-im__card:hover { transform: translateY(-3px); }
.dea-im__card.is-active { box-shadow: var(--dea-shadow-card), inset 0 0 0 2px var(--dea-action-primary); }

.dea-im__cardbtn {
  display: grid; gap: 12px; width: 100%; padding: 8px;
  border: 0; background: none; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.dea-im__cardbtn:hover, .dea-im__cardbtn:focus, .dea-im__cardbtn:active { background: none; color: inherit; }
.dea-im__cardbtn:focus-visible { outline: 3px solid var(--dea-border-focus); outline-offset: -3px; }

.dea-im__media { display: block; position: relative; aspect-ratio: 234 / 150; border-radius: var(--dea-radius-sm); background: var(--dea-bg-sand); overflow: hidden; }
.dea-mod .dea-im__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dea-im__badge {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--dea-accent-badge); color: var(--dea-action-on-action);
  display: grid; place-items: center;
  font: var(--dea-type-label-sm);
}
.dea-im__card.is-active .dea-im__badge { background: var(--dea-action-primary); }

.dea-im__body { display: grid; gap: 4px; padding: 0 8px 8px; }
.dea-im__day { font: var(--dea-type-label-sm); letter-spacing: var(--dea-track-label); text-transform: uppercase; color: var(--dea-action-primary); }
.dea-im__name { font: var(--dea-type-title-sm); letter-spacing: var(--dea-track-title); color: var(--dea-text-strong); min-height: 40px; }
.dea-im__sub { font: var(--dea-type-body-sm); color: var(--dea-text-meta); }

/* ---------------- the open day ---------------- */
.dea-im__panel {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px;
  padding: var(--dea-panel-pad);
  border-radius: var(--dea-radius-xl);
  background: var(--dea-bg-tint);
}
@media (min-width: 1024px) { .dea-im__panel { grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; } }
.dea-im__panel[hidden] { display: none; }

.dea-im__paneltext { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.dea-im__eyebrow { margin: 0; font: var(--dea-type-label-md); letter-spacing: var(--dea-track-label); text-transform: uppercase; color: var(--dea-action-primary); }
.dea-im__title, .dea-mod .dea-im__title { margin: 0; font: var(--dea-type-h3); letter-spacing: var(--dea-track-head); color: var(--dea-text-strong); }
.dea-im__subtitle { margin: 0; font: var(--dea-type-body-lg); color: var(--dea-text-heading); }
@media (max-width: 767px) { .dea-im__subtitle { font: var(--dea-type-body-md); } }
.dea-im__text { font: var(--dea-type-body-md); color: var(--dea-text-body); }
.dea-im__text p { margin: 0 0 16px; }
.dea-im__text p:last-child { margin-bottom: 0; }
.dea-im__text ul { margin: 0 0 16px; padding-left: 20px; }
.dea-im__text li { margin: 0 0 6px; }
.dea-im__overnight { margin: 0; font: var(--dea-type-body-md); color: var(--dea-text-strong); }

.dea-im__panelside { display: grid; gap: 20px; justify-items: start; padding: 24px; border-radius: var(--dea-radius-lg); background: var(--dea-bg-card); }
.dea-im__info { margin: 0; font: var(--dea-type-body-md); color: var(--dea-text-body); }
.dea-im__info strong { display: block; color: var(--dea-text-strong); }
.dea-im__info a { color: var(--dea-text-link); text-decoration: none; }
.dea-im__info a:hover { text-decoration: underline; }