/* =============================================================================
   mod_serenade_timeline — Meilensteine (horizontal milestone slider)
   -----------------------------------------------------------------------------
   Figma: Serenade Screendesign oQhmhUU0axPdFzvhmTaKPg, node 31:249
   (Geschichte frame). All positions, sizes, and proportions below are
   derived 1:1 from get_design_context on this node and translated into the
   local 1128 px inner container (Figma canvas x=300 → local x=0).

   Two display modes:
     • Single-page (≤ 4 milestones): one .__page, no slider chrome.
     • Slider (> 4 milestones):     N .__page elements stacked in a
       horizontally scrollable .__pages container with scroll-snap,
       plus a side-nav chevron and a row of pagination dots. The
       --slider modifier on the root toggles these styles on.

   Vertical structure of the rail (rail top = local y 0):
     dot row     0 → 30 px               (Figma y 1595–1625)
     gap         30 → 54 px              (margin 24 px below dot)
     year row    54 → 95 px              (Figma y 1647 + line-height 1.7)
     caption row 95 → variable           (Figma y 1688)
   Side chevron sits at caption level (Figma y 1683 ≈ local 88 px).

   Horizontal column geometry per page (4 milestones, exact Figma edges):
     col 1   0 →  306 px
     col 2  306 →  584 px
     col 3  584 →  855 px
     col 4  855 → 1128 px

   Allow-listed literals: 0, 100%, none, block, transparent (CSS keywords).
   ============================================================================= */

.mod-serenade-timeline {
    /* Layout values derived from Figma node 31:249. Module-local because
       they are intrinsic to this design and not reused elsewhere. */
    --timeline-col-1: 306px;
    --timeline-col-2: 278px;
    --timeline-col-3: 271px;
    --timeline-col-4: 273px;

    /* Caption text-box widths from Figma (nodes 31:230 / 31:236 / 31:239).
       Each caption is narrower than its dot column so the text wraps exactly
       like the design: col 1 → 3 lines, cols 3 & 4 → 2 lines. Col 2 is a
       single short word that fits its column, so it gets no cap. */
    --timeline-cap-1:    278px;
    --timeline-cap-wrap: 230px;

    --timeline-line-start: var(--s-3); /* 15 px — line begins at dot 1 centre  */
    --timeline-line-end:   var(--s-1); /* 5 px — line runs INTO the arrowhead  */

    /* ">" chevron (Figma Vector1, node 31:243) drawn as a mask so it scales to
       its button and is painted with currentColor — used for the side-nav
       chevron. viewBox is 1:1 with the 20×40 button; 2.5px stroke ≈ the 2px
       design line. */
    --timeline-chevron: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2020%2040'%20fill='none'%20stroke='%23000'%20stroke-width='2.5'%3E%3Cpath%20d='M2%204%2018%2020%202%2036'/%3E%3C/svg%3E");

    --marker-color:      var(--c-wasser);
    --marker-color-fade: rgba(50, 174, 171, 0.1);

    width: 100%;
    max-width: var(--layout-inner);
    margin: 0 auto;
    padding: 0;
    color: var(--c-petrol);
}

/* --- Section title (Figma node 31:244) ----------------------------------- */

.mod-serenade-timeline__title {
    margin: 0 0 var(--s-7);
    font-family: var(--ff-display);
    font-size: var(--fs-h2);
    font-weight: var(--fw-bold);
    line-height: var(--lh-display);
    letter-spacing: 0;
}

.mod-serenade-timeline__title--petrol { color: var(--c-petrol); }
.mod-serenade-timeline__title--wasser { color: var(--c-wasser); }
.mod-serenade-timeline__title--wiese  { color: var(--c-wiese);  }
.mod-serenade-timeline__title--schilf { color: var(--c-schilf); }

/* --- Rail (positioning context for track + pages + side chevron) --------- */

.mod-serenade-timeline__rail {
    position: relative;
}

/* --- Track: horizontal line with terminus arrow (Figma Line 6, 31:234) ---- */
/* The track is rendered once per timeline (NOT per page) and absolute-
   positioned over row 1 of the rail. As pages scroll horizontally beneath
   it, the line stays put and the dots of whatever page is in view line up
   with it (the dot column positions are identical across pages). */

.mod-serenade-timeline__track {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--s-6);
    pointer-events: none;
    z-index: 0;
}

.mod-serenade-timeline__line {
    position: absolute;
    top: 50%;
    left:  var(--timeline-line-start);
    right: var(--timeline-line-end);
    height: var(--bw-marker);
    transform: translateY(-50%);
    background-color: currentColor;
    color: var(--c-wasser);
}

.mod-serenade-timeline--dot-petrol .mod-serenade-timeline__line { color: var(--c-petrol); }
.mod-serenade-timeline--dot-wasser .mod-serenade-timeline__line { color: var(--c-wasser); }
.mod-serenade-timeline--dot-wiese  .mod-serenade-timeline__line { color: var(--c-wiese);  }
.mod-serenade-timeline--dot-schilf .mod-serenade-timeline__line { color: var(--c-schilf); }

/* Small ">" terminus at the line's right end. */

/* ">" terminus drawn with the shared chevron mask and pinned to the right
   end so it reads as one continuous graphic with the line (the line ends just
   5 px short, running into the chevron's throat — no detached floating arrow
   like before). */
.mod-serenade-timeline__arrow {
    position: absolute;
    top: 50%;
    right: 0;
    width:  var(--s-2);
    height: var(--s-4);
    transform: translateY(-50%);
    background-color: currentColor;
    color: var(--c-wasser);
    -webkit-mask: var(--timeline-chevron) no-repeat right center / contain;
            mask: var(--timeline-chevron) no-repeat right center / contain;
}

.mod-serenade-timeline--dot-petrol .mod-serenade-timeline__arrow { color: var(--c-petrol); }
.mod-serenade-timeline--dot-wasser .mod-serenade-timeline__arrow { color: var(--c-wasser); }
.mod-serenade-timeline--dot-wiese  .mod-serenade-timeline__arrow { color: var(--c-wiese);  }
.mod-serenade-timeline--dot-schilf .mod-serenade-timeline__arrow { color: var(--c-schilf); }

/* --- Side navigation chevron (Figma Vector1, node 31:243) ---------------- */
/* Caption-level ">" affordance at the right edge (Figma x=1408–1428,
   y=1683–1722). Real <button> in slider mode so it's keyboard-reachable
   and announces correctly. Hidden in single-page mode (no .__navnext is
   emitted by the template when has_slider is false). */

.mod-serenade-timeline__navnext {
    position: absolute;
    right: 0;
    top: calc(var(--s-6) + var(--s-9));
    /* Above .__pages (z-index:1) so the chevron is actually clickable — the
       pages container otherwise overlaps and swallows the pointer events. */
    z-index: 2;
    width:  var(--s-4);
    height: var(--s-7);
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--c-wasser);
    cursor: pointer;
    -webkit-appearance: none;
            appearance: none;
}

/* Full-height ">" filling the 20×40 button (Figma Vector1 is 20×39), painted
   with currentColor via the shared chevron mask — replaces the small rotated-
   square glyph so the side chevron matches the design's taller affordance. */
.mod-serenade-timeline__navnext-glyph {
    position: absolute;
    inset: 0;
    background-color: currentColor;
    -webkit-mask: var(--timeline-chevron) no-repeat center / contain;
            mask: var(--timeline-chevron) no-repeat center / contain;
}

/* On the last page the chevron flips to "<" so the slider can step back
   (JS toggles --back and swaps the aria-label). */
.mod-serenade-timeline__navnext--back .mod-serenade-timeline__navnext-glyph {
    transform: scaleX(-1);
}

.mod-serenade-timeline__navnext:hover,
.mod-serenade-timeline__navnext:focus-visible {
    color: var(--c-petrol);
}

.mod-serenade-timeline__navnext:focus-visible {
    outline: var(--bw-marker) solid currentColor;
    outline-offset: var(--s-1);
    border-radius: var(--rad-dot);
}

.mod-serenade-timeline--dot-petrol .mod-serenade-timeline__navnext { color: var(--c-petrol); }
.mod-serenade-timeline--dot-wasser .mod-serenade-timeline__navnext { color: var(--c-wasser); }
.mod-serenade-timeline--dot-wiese  .mod-serenade-timeline__navnext { color: var(--c-wiese);  }
.mod-serenade-timeline--dot-schilf .mod-serenade-timeline__navnext { color: var(--c-schilf); }

/* --- Pages container ---------------------------------------------------- */
/* Single-page (no --slider): a plain block — the page renders at the
   natural width of its grid. Slider mode: flex row, horizontally
   scrollable with mandatory snap, scrollbar hidden (pagination dots are
   the visual indicator instead). */

.mod-serenade-timeline__pages {
    position: relative;
    z-index: 1;
}

.mod-serenade-timeline--slider .mod-serenade-timeline__pages {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* Hide the native scrollbar — the pagination dot row replaces it. */
    scrollbar-width: none;
}

.mod-serenade-timeline--slider .mod-serenade-timeline__pages::-webkit-scrollbar {
    display: none;
}

.mod-serenade-timeline--slider .mod-serenade-timeline__pages:focus-visible {
    outline: var(--bw-marker) solid var(--c-petrol);
    outline-offset: var(--s-1);
}

/* --- Page: a 4-column Figma-proportion grid ------------------------------ */
/* Every page is always 4 columns wide regardless of how many entries it
   contains. The last page in a 6-entry timeline therefore renders with two
   filled cells and two empty trailing cells — preserving the dot positions
   so the track line still reads correctly. */

.mod-serenade-timeline__page {
    display: grid;
    grid-template-columns:
        var(--timeline-col-1)
        var(--timeline-col-2)
        var(--timeline-col-3)
        var(--timeline-col-4);
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mod-serenade-timeline--slider .mod-serenade-timeline__page {
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.mod-serenade-timeline__entry {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    padding: 0;
    list-style: none;
}

/* --- Milestone dot (Figma Ellipse1 instances, 30 px, gradient ring) ------ */
/* Same masked ::before ring technique as mod_serenade_team_grid __marker —
   solid colour at the bottom fading to 10 % at the top, masked out to
   leave only a 3 px ring. */

.mod-serenade-timeline__dot {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width:  var(--s-6);
    height: var(--s-6);
    margin: 0 0 var(--s-5);
    /* Opaque page-background disc so the track line (which runs underneath at
       a lower z-index) is hidden inside the ring — in Figma the line connects
       to each dot's edge and does NOT bisect it. Matches the flat body bg
       (--c-bg-light) so the fill is seamless. */
    background: var(--c-bg-light);
    border-radius: 50%;
}

.mod-serenade-timeline__dot::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    padding: var(--bw-card);
    background: linear-gradient(
        to top,
        var(--marker-color)      24.5%,
        var(--marker-color-fade) 100%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
            mask-composite: exclude;
    pointer-events: none;
}

.mod-serenade-timeline--dot-petrol {
    --marker-color:      var(--c-petrol);
    --marker-color-fade: rgba(68, 112, 115, 0.1);
}
.mod-serenade-timeline--dot-wasser {
    --marker-color:      var(--c-wasser);
    --marker-color-fade: rgba(50, 174, 171, 0.1);
}
.mod-serenade-timeline--dot-wiese {
    --marker-color:      var(--c-wiese);
    --marker-color-fade: rgba(190, 211, 57, 0.1);
}
.mod-serenade-timeline--dot-schilf {
    --marker-color:      var(--c-schilf);
    --marker-color-fade: rgba(254, 203, 60, 0.1);
}

/* --- Year + caption (Figma nodes 31:144 etc. / 31:230 etc.) -------------- */

.mod-serenade-timeline__year {
    font-family: var(--ff-text);
    font-size:   var(--fs-h3);
    font-weight: var(--fw-bold);
    line-height: var(--lh-text);
    color: var(--c-petrol);
}

.mod-serenade-timeline__caption {
    margin: 0;
    font-family: var(--ff-text);
    font-size:   var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-text);
    color: var(--c-petrol);
}

/* Constrain captions to their Figma text-box widths so they wrap exactly as
   designed. The four <li> per page map to the four columns via nth-child;
   col 2 is a short single word and keeps the full column width. */
.mod-serenade-timeline__entry:nth-child(1) .mod-serenade-timeline__caption {
    max-width: var(--timeline-cap-1);
}
.mod-serenade-timeline__entry:nth-child(3) .mod-serenade-timeline__caption,
.mod-serenade-timeline__entry:nth-child(4) .mod-serenade-timeline__caption {
    max-width: var(--timeline-cap-wrap);
}

/* --- Pagination dots (Figma Ellipse5/6/7, 15 px) ------------------------- */
/* Real <button> elements in slider mode (click + keyboard tab to a page).
   Centred horizontally beneath the rail — Figma midpoint 863.5 ≈ container
   centre 864 in the 1128 px inner area. */

.mod-serenade-timeline__more {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--s-2);
    margin-top: var(--s-7);
}

.mod-serenade-timeline__more-dot {
    display: inline-block;
    flex-shrink: 0;
    width:  var(--s-3);
    height: var(--s-3);
    padding: 0;
    border-radius: var(--rad-dot);
    border: var(--bw-marker) solid var(--c-wasser);
    background: transparent;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-appearance: none;
            appearance: none;
    transition: background var(--tr-fast), border-color var(--tr-fast);
}

.mod-serenade-timeline__more-dot--filled {
    background: var(--c-wasser);
}

.mod-serenade-timeline__more-dot:hover,
.mod-serenade-timeline__more-dot:focus-visible {
    background: var(--c-wasser);
    opacity: 0.85;
}

.mod-serenade-timeline__more-dot:focus-visible {
    outline: var(--bw-marker) solid var(--c-petrol);
    outline-offset: var(--s-1);
    opacity: 1;
}

.mod-serenade-timeline--dot-petrol .mod-serenade-timeline__more-dot          { border-color: var(--c-petrol); }
.mod-serenade-timeline--dot-petrol .mod-serenade-timeline__more-dot--filled  { background:   var(--c-petrol); }
.mod-serenade-timeline--dot-petrol .mod-serenade-timeline__more-dot:hover    { background:   var(--c-petrol); }
.mod-serenade-timeline--dot-wasser .mod-serenade-timeline__more-dot          { border-color: var(--c-wasser); }
.mod-serenade-timeline--dot-wasser .mod-serenade-timeline__more-dot--filled  { background:   var(--c-wasser); }
.mod-serenade-timeline--dot-wasser .mod-serenade-timeline__more-dot:hover    { background:   var(--c-wasser); }
.mod-serenade-timeline--dot-wiese  .mod-serenade-timeline__more-dot          { border-color: var(--c-wiese);  }
.mod-serenade-timeline--dot-wiese  .mod-serenade-timeline__more-dot--filled  { background:   var(--c-wiese);  }
.mod-serenade-timeline--dot-wiese  .mod-serenade-timeline__more-dot:hover    { background:   var(--c-wiese);  }
.mod-serenade-timeline--dot-schilf .mod-serenade-timeline__more-dot          { border-color: var(--c-schilf); }
.mod-serenade-timeline--dot-schilf .mod-serenade-timeline__more-dot--filled  { background:   var(--c-schilf); }
.mod-serenade-timeline--dot-schilf .mod-serenade-timeline__more-dot:hover    { background:   var(--c-schilf); }

/* --- Reduced motion ----------------------------------------------------- */
/* Honour prefers-reduced-motion by disabling smooth-scroll and snap
   animations — the slider still snaps, just instantaneously. */

@media (prefers-reduced-motion: reduce) {
    .mod-serenade-timeline--slider .mod-serenade-timeline__pages {
        scroll-behavior: auto;
    }
    .mod-serenade-timeline__more-dot {
        transition: none;
    }
}

/* --- Responsive --------------------------------------------------------- */

/* Tablet (≤ 1024 px): the four fixed Figma column widths no longer add up
   to the viewport — fall back to equal fractions so captions stay
   readable while the timeline still reads horizontally. */
@media (max-width: 1024px) {
    .mod-serenade-timeline__page {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    /* Equal-fraction columns now drive the wrapping — drop the fixed Figma
       caption caps so captions fill their (narrower) tablet columns. */
    .mod-serenade-timeline__entry .mod-serenade-timeline__caption {
        max-width: none;
    }
}

/* Mobile (≤ 768 px): collapse to a single column per page. The horizontal
   track and side chevron become meaningless once entries stack vertically,
   but the slider itself can still page through groups of milestones. */
@media (max-width: 768px) {
    .mod-serenade-timeline__title {
        margin-bottom: var(--s-6);
    }

    .mod-serenade-timeline__page {
        grid-template-columns: 1fr;
        row-gap: var(--s-6);
    }

    .mod-serenade-timeline__track,
    .mod-serenade-timeline__navnext {
        display: none;
    }

    .mod-serenade-timeline__dot {
        margin-bottom: var(--s-4);
    }

    .mod-serenade-timeline__more {
        margin-top: var(--s-6);
    }
}