/* ==========================================================================
   schedule.css — schedule / itinerary timeline (PLAN §6.2)
   Shared classes for B's #schedule markup. Vertical timeline of events with a
   thin sepia/gold spine echoing the travel line-art motif.
   ========================================================================== */

.wf-schedule {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  position: relative;
}

/* The timeline list. */
.wf-schedule__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* A single event row: time | marker | details.
   The time column is a FIXED width (not auto) so the marker dots and the
   title/desc column line up on every row regardless of how long the time
   label is ("17:00" vs "dopo mezzanotte" vs "después de medianoche"). Long
   labels wrap within the fixed column instead of pushing the markers out of
   line. */
.wf-schedule__item {
  --wf-sched-time: 6rem;
  --wf-sched-marker-col: 1.25rem;
  --wf-sched-col-gap: var(--space-sm);
  --wf-sched-row-gap: var(--space-lg);
  position: relative;
  display: grid;
  grid-template-columns: var(--wf-sched-time) var(--wf-sched-marker-col) 1fr;
  gap: var(--wf-sched-col-gap);
  align-items: start;
}

.wf-schedule__time {
  font-family: var(--font-serif);
  font-variant-caps: small-caps;
  letter-spacing: 0.06em;
  color: var(--c-terracotta-dk);
  /* Right-align the time inside its fixed column so each time sits snug against
     the marker/spine instead of floating out at the far-left edge. */
  text-align: end;
  /* Allow long textual times to wrap so the fixed column keeps the markers
     aligned (was nowrap, which only worked when the column was auto-width). */
  overflow-wrap: break-word;
  padding-block-start: 0.1em;
}

/* Marker dot + connecting spine (dotted = travel motif). */
.wf-schedule__marker {
  position: relative;
  justify-self: center;
  width: 0.85rem; height: 0.85rem;
  margin-block-start: 0.35em;
  border-radius: 50%;
  background: var(--c-mustard);
  border: 2px solid var(--c-clay);
}
/* Dotted spine. Drawn on the ROW (not the dot), so it can span the row's full
   height — descriptions included — plus the list gap, landing exactly on the
   next dot: from just under this dot to the next row's dot top (that row's
   dot sits 0.35em below its top, hence the extra 0.35em). */
.wf-schedule__item:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-start: calc(var(--wf-sched-time) + var(--wf-sched-col-gap) + var(--wf-sched-marker-col) / 2 - 1px);
  top: calc(0.35em + 0.85rem);
  bottom: calc(-1 * var(--wf-sched-row-gap) - 0.35em);
  border-inline-start: 2px dotted var(--c-clay);
}

.wf-schedule__title {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  color: var(--c-burgundy);
}
.wf-schedule__desc { color: var(--c-sepia); }

/* #dresscode — small section right under the schedule. */
.wf-dresscode__attire {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  color: var(--c-burgundy);
  letter-spacing: 0.04em;
}
.wf-dresscode__p {
  max-inline-size: var(--maxw-prose);
  margin-inline: auto;
  color: var(--c-sepia);
}
.wf-dresscode__p strong { color: var(--c-burgundy); }
.wf-dresscode__note {
  font-size: var(--step--1);
  font-style: italic;
  color: var(--c-sepia-soft);
}

/* Time-zone note (CEST) shown prominently (research 01). */
.wf-schedule__tz {
  font-size: var(--step--1);
  color: var(--c-sepia-soft);
  font-style: italic;
}

/* Compact mobile layout: tighter vertical rhythm and a touch smaller type, so
   the timeline takes noticeably less scrolling on phones. Only the custom
   properties change; the spine rule above recomputes from them. */
@media (max-width: 47.99rem) {
  .wf-schedule__list { gap: var(--space-md); }
  .wf-schedule__item {
    --wf-sched-time: 4.5rem;
    --wf-sched-marker-col: 1.1rem;
    --wf-sched-col-gap: var(--space-xs);
    --wf-sched-row-gap: var(--space-md);
  }
  .wf-schedule__title { font-size: var(--step-0); }
  .wf-schedule__desc { font-size: var(--step--1); }
}