/* =====================================================================
   #agenda — «La travesía, día a día»  (FINAL.md §8.3 · lane C)
   Mobile-first. Sticky media stack + vertical Nile + day sheets.
   ===================================================================== */

#agenda {
  position: relative;
  padding-block: var(--section-pad);
}

/* ---------- header plaque + travel tickets ---------- */
.agenda__head {
  display: grid;
  gap: var(--sp-5);
  align-items: end;
  margin-inline: auto;
}
.agenda__head::before { grid-column: 1 / -1; }   /* the plaque's tile rule spans both columns */
.agenda__head h2 {
  font: 700 var(--fs-h1) / var(--lh-display) var(--ff-display);
  font-optical-sizing: auto;
  letter-spacing: 0;
  color: var(--c-navy);
  margin: var(--sp-2) 0 0;
  text-wrap: balance;
}

.tickets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.ticket {
  position: relative;
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4) var(--sp-3) calc(var(--sp-4) + 10px);
  background: var(--c-cream-light);
  border: 1px solid var(--c-cream-dark);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-1);
  min-width: 9.5rem;
  transform: rotate(var(--rot, -1deg));
  transform-origin: 50% 50%;
}
.ticket + .ticket { --rot: 1.2deg; }
/* perforated stub */
.ticket::before {
  content: "";
  position: absolute;
  inset: 6px auto 6px 9px;
  border-left: 1px dashed var(--c-cream-dark);
}
.ticket::after {
  content: "";
  position: absolute;
  left: -5px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-cream);
  border: 1px solid var(--c-cream-dark);
  translate: 0 -50%;
}
.ticket b {
  font: 700 var(--fs-h3) / 1 var(--ff-display);
  color: var(--c-gold-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.ticket span {
  font: 600 var(--fs-eyebrow) / 1.3 var(--ff-body);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--c-ink-soft);
}

/* ---------- daybar (sticky) ---------- */
.daybar {
  position: sticky;
  top: var(--nav-h);
  z-index: 10;
  display: flex;
  flex-wrap: wrap;                 /* mobile: label row (20 px) over the full-width day-number row (44 px) */
  align-items: center;
  gap: 0 var(--sp-3);
  min-height: 56px;
  margin: var(--sp-6) 0 var(--sp-5);
  padding: var(--sp-1) var(--gutter);
  background: rgba(23, 11, 28, .94);
  color: var(--c-cream);
  box-shadow: var(--sh-2);
}
.daybar__today {
  flex: 1 0 100%;
  min-width: 0;
  font: 600 .6875rem / 20px var(--ff-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
  color: var(--c-gold);
}
.daybar__nums {
  flex: 1 1 100%;
  min-width: 0;
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
}
.daybar__nums::-webkit-scrollbar { display: none; }
.daybar__nums a {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding-inline: var(--sp-1);
  font: 700 1rem / 1 var(--ff-display);
  font-variant-numeric: tabular-nums;
  color: var(--c-paper-soft);
  text-decoration: none;
  border-radius: var(--r-sm);
  transition: color var(--t-ui) var(--ease-out), background-color var(--t-ui) var(--ease-out);
}
.daybar__nums a:hover { color: var(--c-gold-light); }
.daybar__nums a[aria-current] { color: var(--c-navy); background: var(--c-gold); }
.daybar__nums a:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }
.daybar__ink {
  display: none;
  position: absolute;
  left: 0;
  bottom: 6px;
  width: 100px;
  height: 2px;
  background: var(--c-gold);
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events: none;
}
.daybar__line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--c-teal);
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events: none;
}
html.no-js .daybar__line,
html.reduce .daybar__line { transform: none; }

/* ---------- body: media + nile + days ---------- */
.agenda__body {
  position: relative;
  margin-inline: auto;
}

/* sticky media stack (desktop only) */
.agenda__media { display: none; }

/* colossal day number */
.agenda__num {
  position: absolute;
  left: 2.5vw;
  bottom: -.06em;
  z-index: 3;
  font: 900 var(--fs-display) / var(--lh-tight) var(--ff-display);
  font-optical-sizing: auto;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
  color: var(--c-cream);
  opacity: .55;
  pointer-events: none;
  user-select: none;
}

/* time-of-day tint over the sticky media */
.agenda__tint {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--g-day);
  opacity: 0;
  pointer-events: none;
}
.agenda__tint.tint--golden { background: var(--g-golden); }
.agenda__tint.tint--dusk   { background: var(--g-dusk); }
.agenda__tint.tint--teal   { background: var(--c-teal); }
.agenda__tint.tint--gold   { background: var(--c-gold); }

/* ---------- Nile ribbon ---------- */
.nile {
  position: absolute;
  top: 0;
  left: var(--gutter);              /* JS refines this to .days' offsetLeft on mobile */
  width: 32px;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 4;
}
.nile__bed {
  fill: none;
  stroke: var(--c-teal-mist);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: .55;
}
.nile__flow {
  fill: none;
  stroke: var(--c-teal);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html.no-js .nile { display: none; }
.nile__stop circle {
  fill: var(--c-cream);
  stroke: var(--c-teal-mist);
  stroke-width: 2;
  transition: fill var(--t-ui) var(--ease-out), stroke var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out);
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.nile__stop.is-passed circle { fill: var(--c-teal); stroke: var(--c-cream); transform: scale(1.15); }
.nile__stop text {
  font: 600 10px / 1 var(--ff-body);
  letter-spacing: .22em;
  text-transform: uppercase;
  fill: var(--c-teal-ink);
  opacity: .85;
  transition: opacity var(--t-ui) var(--ease-out);
}
.nile__stop.is-passed text { opacity: 1; fill: var(--c-teal-ink); }
/* .nile__boat will-change is set by agenda.js only while the section is in view (§12) */
.boat__cat { color: var(--c-navy); }

/* ---------- days ---------- */
.days {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 36px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* explicit track: a wide child can never widen the sheet */
  gap: clamp(2rem, 6vw, 4rem);
}

.day {
  --day-pad: clamp(1.25rem, 3vw, 2.5rem);
  position: relative;
  min-width: 0;
  padding: var(--day-pad);
  display: grid;
  gap: var(--sp-4);
  color: var(--c-navy);
  contain: layout paint;
}
.day:focus { outline: none; }
.day:focus-visible { outline: 2px solid var(--c-terracotta-deep); outline-offset: 4px; }

/* per-day photo (mobile only) — mounted inside the sheet (paint containment forbids bleeding) */
.day__photo {
  margin: 0 0 var(--sp-1);
  --ar: 4/3;
  border-radius: var(--r-sm);
  box-shadow: var(--sh-1);
}
.day__photo img { transform-origin: 50% 50%; }

.day__kicker { margin: 0; }
.day__title {
  margin: 0;
  font: 700 var(--fs-h2) / var(--lh-heading) var(--ff-display);
  font-optical-sizing: auto;
  letter-spacing: 0;
  color: var(--c-navy);
  text-wrap: balance;
}
.day__sub {
  margin: .2em 0 0;
  font: italic 400 var(--fs-lead) / 1.3 var(--ff-display);
  color: var(--c-ink-soft);
}
.day__exp {
  margin: 0;
  max-width: var(--measure);
  font: 400 var(--fs-lead) / 1.5 var(--ff-body);
  color: var(--c-navy);
}
.day__stamp {
  position: absolute;
  top: calc(var(--day-pad) + var(--sp-3));
  right: calc(var(--day-pad) + var(--sp-3));
  z-index: 2;
  background: rgba(239, 227, 203, .92);     /* sticker on the photo (mobile); plain ink stamp on desktop */
  box-shadow: var(--sh-1);
}

/* pills */
.day__pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.day__pills .pill { color: var(--c-teal-ink); font-variant-numeric: tabular-nums; }
/* narrow screens: long pills («Hotel en El Cairo (por confirmar)») wrap instead of widening the sheet */
@media (max-width: 1023px) {
  .day__pills .pill { white-space: normal; text-align: left; line-height: 1.25; }
}
.day__pills .pill:first-child { color: var(--c-gold-ink); }
.day__pills .ico { width: 1.1em; height: 1.1em; flex: none; }

/* schedule */
.sched {
  list-style: none;
  margin: var(--sp-2) 0 0;
  padding: 0;
  display: grid;
  border-top: 1px solid var(--c-cream-dark);
}
.sched li {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: var(--sp-3);
  align-items: baseline;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--c-cream-dark);
  font: 400 var(--fs-body) / 1.45 var(--ff-body);
}
.sched__when {
  display: inline-flex;
  align-items: baseline;
  gap: .15em;
  font: 600 var(--fs-small) / 1 var(--ff-body);
  font-variant-numeric: tabular-nums;
  color: var(--c-gold-ink);
  letter-spacing: .02em;
  white-space: nowrap;
}
.sched__dash { color: var(--c-ink-soft); }
.sched__label {
  font: 600 var(--fs-eyebrow) / 1 var(--ff-body);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--c-terracotta-text);
  align-self: center;
}
.sched__what { color: var(--c-navy); }
.sched__what small {
  display: block;
  font-size: var(--fs-small);
  color: var(--c-ink-soft);
  margin-top: .15em;
}
.sched__note { font-style: italic; color: var(--c-ink-soft); }
.sched__note::before {
  content: "✶";
  font-style: normal;
  color: var(--c-gold-ink);
  text-align: right;
  padding-right: .35rem;
  font-size: var(--fs-small);
  align-self: center;
}
.sched__note .sched__what { color: var(--c-ink-soft); }

/* ¿Sabías que…? */
.sabias {
  position: relative;
  margin: var(--sp-2) 0 0;
  padding: var(--sp-4) var(--sp-5) var(--sp-4) calc(var(--sp-5) + 3px);
  background: var(--c-cream-light);
  border-radius: var(--r-sm);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
}
.sabias::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  background: var(--c-gold);
  transform-origin: 50% 0;
  transition: transform .8s var(--ease-out);
}
html.js .sabias:not(.is-in)::before { transform: scaleY(0); }
.sabias__cat {
  position: absolute;
  right: var(--sp-4);
  top: var(--sp-3);
  width: 22px;
  height: 36px;
  color: var(--c-terracotta);
  opacity: .8;
}
.sabias h4 {
  margin: 0;
  padding-right: 2.5rem;
  font: 400 italic var(--fs-h3) / 1.15 var(--ff-display);
  color: var(--c-terracotta-text);
}
.sabias p {
  margin: 0;
  max-width: var(--measure);
  font: 400 var(--fs-body) / var(--lh-body) var(--ff-body);
  color: var(--c-navy);
}
.sabias mark.hl {
  position: relative;
  background: transparent;
  color: inherit;
  font-weight: 600;
}
.sabias mark.hl::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.05em;
  height: 3px;
  background: var(--c-gold);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .6s var(--ease-out) .4s;
}
html.no-js .sabias mark.hl::after,
.sabias.is-in mark.hl::after { transform: scaleX(1); }

/* secondary photo mosaic (mobile: native snap row) */
.day__mosaic {
  display: flex;
  gap: var(--sp-3);
  margin: var(--sp-2) 0 0;
  padding: 0 0 var(--sp-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.day__mosaic::-webkit-scrollbar { display: none; }
.mosaic__photo {
  flex: 0 0 72%;
  scroll-snap-align: start;
  border-radius: var(--r-sm);
  box-shadow: var(--sh-paper);
}
.mosaic__photo.photo--archive { flex-basis: 240px; }
.mosaic__photo .photo__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: var(--sp-5) var(--sp-3) var(--sp-3);
  font: 500 var(--fs-eyebrow) / 1.3 var(--ff-body);
  letter-spacing: .08em;
  color: var(--c-cream);
  background: var(--g-scrim);
  text-shadow: 0 1px 2px rgba(23, 11, 28, .6);
}

/* ---------- tablet ---------- */
@media (min-width: 640px) {
  .tickets { justify-content: flex-end; margin-top: calc(-1 * var(--sp-3)); }
  .daybar { flex-wrap: nowrap; gap: var(--sp-5); height: 56px; padding-block: 0; }
  .daybar__today { flex: 0 0 auto; }
  .daybar__nums { flex: 1 1 auto; }
  .days { padding-left: 44px; }
}

/* ---------- desktop ---------- */
@media (min-width: 1024px) {
  .daybar {
    width: max-content;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
    margin-bottom: var(--sp-7);
    padding: var(--sp-2) var(--sp-4);
    justify-content: center;
    border-radius: var(--r-pill);
    border: 1px solid rgba(217, 164, 65, .35);
    background: rgba(23, 11, 28, .86);
    box-shadow: var(--sh-2);
  }
  .daybar__today,
  .daybar__line { display: none; }
  .daybar__nums {
    flex: 0 0 auto;
    overflow: visible;
    mask-image: none;
    gap: var(--sp-2);
  }
  .daybar__nums a {
    min-width: 52px;
    height: 48px;
    font-size: 1.25rem;
  }
  .daybar__nums a[aria-current] { color: var(--c-gold-light); background: transparent; }
  .daybar__ink { display: block; bottom: 4px; }

  .agenda__body {
    display: grid;
    grid-template-columns: 52% 4rem 1fr;
    align-items: start;
  }
  .agenda__media {
    display: block;
    position: sticky;
    top: var(--nav-h);
    align-self: start;
    height: calc(100svh - var(--nav-h));
    overflow: hidden;
    grid-column: 1;
    grid-row: 1;
    background: var(--c-navy);
    box-shadow: var(--sh-3);
    contain: layout paint;
  }
  .agenda__fig {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    height: 100%;
    opacity: 0;
    transform-origin: 50% 50%;
  }
  .agenda__fig.is-active { opacity: 1; will-change: transform, opacity; }
  .agenda__fig img { transform-origin: 50% 50%; }

  .nile {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    align-self: stretch;
    top: auto;
    left: auto;
    width: 100%;
    height: 100%;
  }
  .nile__bed, .nile__flow { stroke-width: 3; }

  .days {
    grid-column: 3;
    grid-row: 1;
    padding-left: 0;
    gap: clamp(3rem, 8vh, 6rem);
  }
  .day { gap: var(--sp-5); }
  .day__photo { display: none; }
  .day__kicker { padding-right: 9rem; }
  .day__title { padding-right: 8rem; }
  .day__sub { padding-right: 8rem; }
  .day__stamp { top: var(--day-pad); right: var(--day-pad); background: transparent; box-shadow: none; }

  .day__mosaic {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--sp-3);
    margin: var(--sp-2) 0 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }
  .mosaic__photo { flex: none; }
  .mosaic__photo.photo--archive { max-width: 240px; }
}

@media (min-width: 1280px) {
  .agenda__num { font-size: clamp(8rem, 18vw, 22rem); }
  .day { --day-pad: clamp(1.75rem, 3vw, 3rem); }
}

/* ---------- reduced motion (base.css carries the global safety net) ---------- */
html.reduce .sabias::before,
html.reduce .sabias mark.hl::after,
html.reduce .nile__stop circle,
html.reduce .nile__stop text { transition: none; }