/**
 * Applari Path (prosessipolku)
 * A numbered step path: markers connected by a line, revealed one step at a
 * time. Brand-neutral and portable — every colour, size and timing is a
 * custom property with a neutral default, meant to be overridden per project.
 *
 * Derived from the KTN concept D (mockups/ktn-bubble-d), with the brand-bound
 * parts removed: the growing diameter, the two-colour alternation and the
 * horizontal orientation are all opt-in modifiers here, because each of them
 * carried a KTN-specific meaning rather than being generally useful.
 *
 * GenerateBlocks structural model (matches this project's convention):
 *   <div class="gb-container alignfull applari-path">
 *     <div class="gb-container ap-inner">
 *       <div class="gb-container ap-track observe-visibility">
 *         <div class="gb-container ap-step">
 *           <span class="ap-step__marker">1</span>
 *           <div class="gb-container ap-step__body">
 *             <h3 class="ap-step__title">…</h3>
 *             <p class="ap-step__text">…</p>
 *           </div>
 *         </div>
 *       </div>
 *     </div>
 *   </div>
 * Containers render WITHOUT an inner wrapper (blockVersion >= 3), so layout is
 * applied directly to the Global Class on each .gb-container.
 *
 * Modifiers on the root:
 *   .applari-path--grow        markers grow along the path (last one largest)
 *   .applari-path--alternate   every second marker uses the accent colour
 *   .applari-path--vertical    stays vertical on desktop too
 *
 * Motion: no JS dependency beyond a class toggle. The stagger is pure CSS
 * (`--ap-i` + animation-delay) off a single `.is-visible` on `.ap-track`.
 * In this theme that class comes from element-visibility-observer's auto mode
 * (`.observe-visibility`); any equivalent IntersectionObserver works.
 *
 * No-JS fallback: the hidden start state is gated on `html.js`. Without that
 * class the block renders complete and static, which is also what the block
 * editor shows, since the editor never runs the frontend observer.
 */

@media only screen and (min-width: 320px) {

    /* ---- Tokens. Neutral placeholders; override these per project. ---- */
    .applari-path,
    .editor-styles-wrapper .applari-path {
        --ap-marker-from: #2f3336;
        --ap-marker-to: #565c60;
        --ap-marker-alt: #8c9296;
        --ap-marker-ink: #ffffff;
        --ap-marker-size: 3.6rem;

        /* Footprint reserved for every marker. Equal to the largest marker, so
           the growing sizes stay on one centre line and connectors do not
           zigzag. With --grow the last marker is always the largest, which is
           why this can stay a single value regardless of how many steps
           there are. */
        --ap-col: var(--ap-marker-size);

        --ap-line-color: rgba(47, 51, 54, 0.26);
        --ap-max-width: 1180px;
        --ap-gap: clamp(2rem, 4vw, 3rem);
        --ap-ease: cubic-bezier(0.16, 1, 0.3, 1);
        --ap-dur: 0.5s;
        --ap-stagger: 0.18s;

        font-family: inherit;
    }

    /* Content width for the full-width root. Outer padding is left to the
       container's own block settings, as elsewhere in this theme. */
    .applari-path .ap-inner,
    .editor-styles-wrapper .applari-path .ap-inner {
        max-width: var(--ap-max-width);
        margin-inline: auto;
    }

    /* ---- Track ---- */
    .applari-path .ap-track,
    .editor-styles-wrapper .applari-path .ap-track {
        display: flex;
        flex-direction: column;
    }

    /* ---- Step ---- */
    .applari-path .ap-step,
    .editor-styles-wrapper .applari-path .ap-step {
        position: relative;
        display: flex;
        align-items: flex-start;
        gap: 1.25rem;
        padding-bottom: var(--ap-gap);
    }

    .applari-path .ap-step:last-child,
    .editor-styles-wrapper .applari-path .ap-step:last-child {
        padding-bottom: 0;
    }

    /* Order index, used only by the animation delays */
    .applari-path .ap-step:nth-child(1) { --ap-i: 0; }
    .applari-path .ap-step:nth-child(2) { --ap-i: 1; }
    .applari-path .ap-step:nth-child(3) { --ap-i: 2; }
    .applari-path .ap-step:nth-child(4) { --ap-i: 3; }
    .applari-path .ap-step:nth-child(5) { --ap-i: 4; }
    .applari-path .ap-step:nth-child(6) { --ap-i: 5; }
    .applari-path .ap-step:nth-child(7) { --ap-i: 6; }
    .applari-path .ap-step:nth-child(8) { --ap-i: 7; }

    /* Default: every marker the same size */
    .applari-path .ap-step,
    .editor-styles-wrapper .applari-path .ap-step {
        --ap-step-size: var(--ap-marker-size);
    }

    /* ---- Modifier: growing markers ----
       Sized backwards from the last step, so the largest marker is always the
       final one and --ap-col needs no knowledge of the step count. */
    .applari-path--grow .ap-step:nth-last-child(1),
    .editor-styles-wrapper .applari-path--grow .ap-step:nth-last-child(1) { --ap-step-size: var(--ap-marker-size); }

    .applari-path--grow .ap-step:nth-last-child(2),
    .editor-styles-wrapper .applari-path--grow .ap-step:nth-last-child(2) { --ap-step-size: calc(var(--ap-marker-size) * 0.87); }

    .applari-path--grow .ap-step:nth-last-child(3),
    .editor-styles-wrapper .applari-path--grow .ap-step:nth-last-child(3) { --ap-step-size: calc(var(--ap-marker-size) * 0.76); }

    .applari-path--grow .ap-step:nth-last-child(4),
    .editor-styles-wrapper .applari-path--grow .ap-step:nth-last-child(4) { --ap-step-size: calc(var(--ap-marker-size) * 0.66); }

    .applari-path--grow .ap-step:nth-last-child(5),
    .editor-styles-wrapper .applari-path--grow .ap-step:nth-last-child(5) { --ap-step-size: calc(var(--ap-marker-size) * 0.58); }

    .applari-path--grow .ap-step:nth-last-child(6),
    .editor-styles-wrapper .applari-path--grow .ap-step:nth-last-child(6) { --ap-step-size: calc(var(--ap-marker-size) * 0.52); }

    /* ---- Marker ---- */
    .applari-path .ap-step__marker,
    .editor-styles-wrapper .applari-path .ap-step__marker {
        display: grid;
        place-items: center;
        width: var(--ap-step-size);
        height: var(--ap-step-size);
        /* margin-block reset explicitly: the marker is a gb-headline in
           production and would otherwise inherit the theme's heading margin,
           which would push it off the shared centre line. */
        margin-block: 0;
        margin-inline: calc((var(--ap-col) - var(--ap-step-size)) / 2);
        border-radius: 50%;
        flex: 0 0 auto;
        color: var(--ap-marker-ink);
        font-weight: 700;
        font-size: calc(var(--ap-step-size) * 0.34);
        line-height: 1;
        background-image: linear-gradient(135deg, var(--ap-marker-from), var(--ap-marker-to));
    }

    /* ---- Modifier: alternating accent ---- */
    .applari-path--alternate .ap-step:nth-child(even) .ap-step__marker,
    .editor-styles-wrapper .applari-path--alternate .ap-step:nth-child(even) .ap-step__marker {
        background-image: none;
        background-color: var(--ap-marker-alt);
    }

    /* ---- Body ---- */
    .applari-path .ap-step__body,
    .editor-styles-wrapper .applari-path .ap-step__body {
        padding-top: 0.35rem;
    }

    .applari-path .ap-step__title,
    .editor-styles-wrapper .applari-path .ap-step__title {
        margin: 0;
        font-size: 1.15rem;
        font-weight: 700;
        line-height: 1.25;
    }

    .applari-path .ap-step__text,
    .editor-styles-wrapper .applari-path .ap-step__text {
        margin: 0.35rem 0 0;
        font-size: 0.95rem;
        line-height: 1.55;
        opacity: 0.75;
        max-width: 42ch;
    }

    /* ---- Connector ----
       Spans the full distance from this marker's bottom edge to the next
       step's top edge, so it genuinely connects rather than trailing off. */
    .applari-path .ap-step:not(:last-child)::after,
    .editor-styles-wrapper .applari-path .ap-step:not(:last-child)::after {
        content: "";
        position: absolute;
        left: calc(var(--ap-col) / 2 - 1px);
        top: var(--ap-step-size);
        width: 2px;
        height: calc(100% - var(--ap-step-size));
        background: var(--ap-line-image, var(--ap-line-color));
        transform-origin: top center;
    }

    /* ---- Motion ---- */
    @keyframes apStepIn {
        from { opacity: 0; transform: translateY(14px); }
        to   { opacity: 1; transform: none; }
    }

    @keyframes apMarkerIn {
        from { opacity: 0; transform: scale(0.86); }
        to   { opacity: 1; transform: none; }
    }

    @keyframes apDrawLine {
        from { transform: scaleY(0); }
        to   { transform: scaleY(1); }
    }

    .js .applari-path .ap-track:not(.is-visible) .ap-step {
        opacity: 0;
    }

    .js .applari-path .ap-track.is-visible .ap-step {
        animation: apStepIn var(--ap-dur) var(--ap-ease) both;
        animation-delay: calc(var(--ap-i, 0) * var(--ap-stagger));
    }

    .js .applari-path .ap-track.is-visible .ap-step__marker {
        animation: apMarkerIn calc(var(--ap-dur) * 0.9) var(--ap-ease) both;
        animation-delay: calc(var(--ap-i, 0) * var(--ap-stagger) + 0.08s);
    }

    .js .applari-path .ap-track.is-visible .ap-step:not(:last-child)::after {
        animation: apDrawLine calc(var(--ap-dur) * 0.8) var(--ap-ease) both;
        animation-delay: calc(var(--ap-i, 0) * var(--ap-stagger) + 0.22s);
    }
}

/* ---- Desktop: horizontal path ----
   Skipped entirely for .applari-path--vertical, which is the variant for
   sidebars and narrow columns. */
@media only screen and (min-width: 990px) {

    .applari-path:not(.applari-path--vertical) .ap-track,
    .editor-styles-wrapper .applari-path:not(.applari-path--vertical) .ap-track {
        flex-direction: row;
    }

    .applari-path:not(.applari-path--vertical) .ap-step,
    .editor-styles-wrapper .applari-path:not(.applari-path--vertical) .ap-step {
        flex: 1 1 0;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1rem;
        padding: 0 0.75rem;
    }

    .applari-path:not(.applari-path--vertical) .ap-step__body,
    .editor-styles-wrapper .applari-path:not(.applari-path--vertical) .ap-step__body {
        padding-top: 0;
    }

    .applari-path:not(.applari-path--vertical) .ap-step__text,
    .editor-styles-wrapper .applari-path:not(.applari-path--vertical) .ap-step__text {
        max-width: none;
    }

    /* The shared footprint becomes vertical padding instead, keeping every
       marker centre on one horizontal line. */
    .applari-path:not(.applari-path--vertical) .ap-step__marker,
    .editor-styles-wrapper .applari-path:not(.applari-path--vertical) .ap-step__marker {
        margin-inline: 0;
        margin-block: calc((var(--ap-col) - var(--ap-step-size)) / 2);
    }

    /* Reaches from this marker's edge to the next marker's edge, one column over */
    .applari-path:not(.applari-path--vertical) .ap-step:not(:last-child)::after,
    .editor-styles-wrapper .applari-path:not(.applari-path--vertical) .ap-step:not(:last-child)::after {
        left: calc(50% + var(--ap-step-size) / 2 + 0.75rem);
        right: calc(-50% + var(--ap-step-size) / 2 + 0.75rem);
        top: calc(var(--ap-col) / 2 - 1px);
        width: auto;
        height: 2px;
        transform-origin: left center;
    }

    @keyframes apDrawLine {
        from { transform: scaleX(0); }
        to   { transform: scaleX(1); }
    }
}

@media (prefers-reduced-motion: reduce) {
    .js .applari-path .ap-track .ap-step,
    .js .applari-path .ap-track.is-visible .ap-step,
    .js .applari-path .ap-track.is-visible .ap-step__marker,
    .js .applari-path .ap-track.is-visible .ap-step:not(:last-child)::after {
        animation: none;
        opacity: 1;
        transform: none;
    }
}