/* ==========================================================================
   Timeline Scroller (single-card viewport, centered year)
   ========================================================================== */

/* ----------------------------------------------------------
   1) Section wrapper
   ---------------------------------------------------------- */
.acf-timeline-scroller {
  padding: clamp(2.5rem, 4vw, 4rem) 0;
  --tl-header-offset: 0px;
  --tl-center-shift: 120px;
  --tl-rail-offset: -80px;      /* nudge the whole list if needed */
  --tl-rail-marker: 0.30;       /* 30% of rail height */
}
.acf-timeline-scroller .timeline-inner {
  max-width: 1250px;
  margin: auto;
}
.timeline-title {
  margin: 0 0 1.25rem;
  font-style: italic;
}

/* ----------------------------------------------------------
   2) Background tints (module wrapper)
   ---------------------------------------------------------- */
.bg-white      { background: #ffffff; }
.bg-tint-ivory { background: #fffaf0; }
.bg-tint-mint  { background: #edf7f7; }
.bg-tint-peach { background: #fff0d9; }
.bg-tint-sand  { background: #f5e0b0; }
.bg-tint-green { background: #d6f5eb; }
.bg-tint-teal  { background: #8ac9c2; }

/* ----------------------------------------------------------
   3) Layout shell
   ---------------------------------------------------------- */
.timeline-shell {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: clamp(1rem, 3vw, 2rem);
  align-items: stretch;
}
@media (max-width: 900px){
  .timeline-shell { grid-template-columns: 1fr; }
}

/* Sticky rail (auto height, keeps center marker visible) */
.timeline-rail {
  position: sticky;
  top: 7rem;                          /* adjust for sticky header */
  align-self: start;
  height: calc(100vh - 7rem);         /* viewport minus header */
  min-height: 600px;
  padding-left: .25rem;
  overflow: visible;
}

/* vertical line */
.rail-line {
  position: absolute;
  left: 1.2rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #F0B040;
}

/* center tick marker: stays visible within the sticky viewport */
.rail-center-marker {
  position: sticky;
  top: 29.6%;
  transform: translateY(-30%);
  left: .65rem;
  width: 1.9rem;
  height: 3px;
  background: #5C2D73;
  border-radius: 2px;
  z-index: 0;
}

/* ----------------------------------------------------------
   4) Years rail (list)
   ---------------------------------------------------------- */
.rail-years {
  list-style: none;
  margin: 0;
  padding: 0 0 0 2rem;                /* room for dots/line */
  display: grid;
  gap: clamp(1.1rem, 3vh, 2rem);
  will-change: transform;
  transform: translateY(0);
  transition: transform .28s cubic-bezier(.2,.6,.2,1);
}

/* (optional slack — currently disabled)
.rail-years::before,
.rail-years::after { content: ""; display: block; height: 0vh; }
*/

/* each year row */
.rail-year { position: relative; }

/* year button text (fixed size/padding to prevent reflow) */
.rail-btn {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  font-weight: 800;
  color: #BA3357;
  font-size: 1.1rem;                 /* constant */
  line-height: 1.8;                   /* constant */
  white-space: nowrap;
  padding-left: 1rem;               /* constant; space for dot */
  transition: transform .2s ease, color .2s ease, opacity .2s ease;
}

/* dot — vertically centered regardless of text size */
.rail-year::before {
  content: "";
  position: absolute;
  left: -1.35rem;                     /* aligns over the vertical rail */
  top: 50%;
  transform: translateY(-50%) scale(1);
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #BA3357;
  transition: transform .2s ease, background-color .2s ease, opacity .2s ease;
}

/* inactive subtle dim (optional) */
.rail-year:not(.is-active) .rail-btn { opacity: .9; }
.rail-year:not(.is-active)::before   { opacity: .95; }

/* ----------------------------------------------------------
   Active year (pop without shifting layout)
   ---------------------------------------------------------- */
.rail-year.is-active .rail-btn {
  color: #F0B040;
  transform: translateX(8px)translateY(-4px) scale(1.48);  /* emphasis, no reflow */
  transform-origin: left center;
}
.rail-year.is-active::before {
  background: #F0B040;
  transform:translateY(-80%) translateX(30px)scale(1.35);  /* bigger dot, stays centered */
}

/* ----------------------------------------------------------
   5) Panels — one visible at a time (sticky, centered)
   ---------------------------------------------------------- */
.timeline-panels {
  position: relative;
  display: block;
}

/* scroll space before/after card stack */
.timeline-panels::before {
  content: "";
  display: block;
  height: 10vh;                         /* visual gap above first card */
}
.timeline-panels::after {
  content: "";
  display: block;
  height: calc(40vh - var(--tl-header-offset));
}

.timeline-panel { height: 60vh; }
@media (max-width: 900px){
	.timeline-title {
		padding-left: 1.6rem;
	}
  .timeline-panel { height: 85vh; }
}

/* sticky card container */
.panel-layer {
  position: sticky;
  top: calc(50% + var(--tl-center-shift));   /* lower than center so image isn’t clipped */
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
  z-index: 1;
  max-width: 700px;
  margin: 0;
}

/* reveal only when section engaged and this panel is current */
.acf-timeline-scroller.is-engaged .timeline-panel.is-current .panel-layer {
  opacity: 1;
  visibility: visible;
}

/* ----------------------------------------------------------
   6) Media + card
   ---------------------------------------------------------- */
.panel-media {
  margin: 0;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  position: relative;
}
.panel-img {
  display: block;
  width: 100%;
  height: auto;
}

.panel-card {
  --card-bg: #5C2D73;
  background: var(--card-bg);
  color: #fff;
  border-radius: 0 0 10px 10px;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
.panel-headline { margin: 0 0 .5rem; font-family: 'gotham', sans-serif; }
.panel-copy { margin: 0; }
.panel-actions { margin-top: 1rem; }

/* Card color presets (override default) */
.panel-card.card-bg-white     { --card-bg:#ffffff; background:#ffffff; color:#222; }
.panel-card.card-bg-ddo-green { --card-bg:#055745; background:#055745; color:#fff; }
.panel-card.card-bg-dk-purple { --card-bg:#662b80; background:#662b80; color:#fff; }
.panel-card.card-bg-ddo-purple{ --card-bg:#5c4099; background:#5c4099; color:#fff; }
.panel-card.card-bg-ddo-red   { --card-bg:#ba3357; background:#ba3357; color:#fff; }
.panel-card.card-bg-ddo-orange{ --card-bg:#de4d3b; background:#de4d3b; color:#fff; }
.panel-card.card-bg-ddo-gold  { --card-bg:#f0b040; background:#f0b040; color:#222; }

/* ----------------------------------------------------------
   7) Responsive tweaks
   ---------------------------------------------------------- */
@media (max-width: 900px){
  /* Active year: slightly smaller transform to fit narrow view */
  .rail-year.is-active .rail-btn {
    transform: translateX(0px)translateY(-4px) scale(1.05);
  }
  .rail-year.is-active::before {
    transform: translateY(-80%) scale(1.45);
    z-index: 1;
  }
.rail-center-marker {
  width:1.3rem;
}
  /* Reduce panel height and disable top/bottom spacer tails if needed */
  .timeline-panel { height: 55vh; }
  .timeline-panels::after,
  .timeline-panels::before { height: 0; }

  /* Card container sizing for small screens */
  .panel-layer {
    top: auto;                /* allow natural flow on mobile */
    max-width: 260px;
    margin-right:1rem;
    margin-left:auto;
  }
}
/* base: hidden until engaged/current */
.acf-timeline-scroller .timeline-panel .panel-layer {
  transition: opacity .35s ease, visibility .35s ease, transform .35s ease;
  opacity: 0;
  visibility: hidden;
  z-index: 0;
}

/* fully visible current */
.acf-timeline-scroller.is-engaged .timeline-panel.is-current .panel-layer {
  opacity: 1;
  visibility: visible;
  z-index: 3;
}

/* linger/overlap for neighbors */
.acf-timeline-scroller.is-engaged .timeline-panel.is-near .panel-layer {
  opacity: 1;          /* tweak overlap strength */
  visibility: visible;
  z-index: 2;
}

/* optional depth cue */
.acf-timeline-scroller.is-engaged .timeline-panel.is-near:not(.is-current) .panel-layer {
  transform: scale(.985);
}