/**
 * Reittikartta (route map)
 * A map panel with a curved dashed route and numbered stops on it; a card opens next to the
 * active stop. Used on the Index front page section "Miten autamme sinua?" (direction C).
 * Structure:
 *   .gb-container.reittikartta                 (chain-animated; route reveals, pins stagger in)
 *     svg.reitti                               (added on the front end by includes/reittikartta/reittikartta.php)
 *     .gb-container.pin.pin-N[.is-open]        (N = 1..5, coordinates below)
 *       .gb-container.pin-nappi  p.pin-marker + p.pin-nimi
 *       .gb-container.pin-kortti  (small-heading, h3, text, hint, buttons)
 * Desktop (>= 768px, front end only: `.site`) positions pins absolutely on the route and the
 * cards as popovers. On narrow screens and in the editor the map is a vertical route with
 * every card inline, so all content stays editable. js/blocks/reittikartta.js opens one card
 * at a time; without JS every card is visible.
 */
@media only screen and (min-width: 320px) {
    .reittikartta {
        --pin-marker: 56px;
        position: relative;
        width: 100%;
        background-color: var(--grey);
        border-radius: 18px;
        padding: 28px 5%;
        display: flex;
        flex-direction: column;
    }
    .reittikartta .reitti {
        display: none;
    }
    /* pin coordinates on the route (viewBox 1180 x 600) and stagger index */
    .reittikartta .pin-1 { --pin-x: 7.6%;  --pin-y: 76.7%; --pin-i: 0; }
    .reittikartta .pin-2 { --pin-x: 26.3%; --pin-y: 28.3%; --pin-i: 1; }
    .reittikartta .pin-3 { --pin-x: 50.8%; --pin-y: 75.8%; --pin-i: 2; }
    .reittikartta .pin-4 { --pin-x: 75.4%; --pin-y: 28.3%; --pin-i: 3; }
    .reittikartta .pin-5 { --pin-x: 92.4%; --pin-y: 76.7%; --pin-i: 4; }

    .reittikartta .pin {
        position: relative;
        padding-left: calc(var(--pin-marker) + 18px);
        padding-bottom: 28px;
    }
    .reittikartta .pin::before {
        content: "";
        position: absolute;
        left: calc(var(--pin-marker) / 2 - 1px);
        top: var(--pin-marker);
        bottom: 0;
        border-left: 2px dashed var(--accent-clr);
    }
    .reittikartta .pin:last-child {
        padding-bottom: 0;
    }
    .reittikartta .pin:last-child::before {
        display: none;
    }
    .reittikartta .pin-nappi {
        position: relative;
        display: flex;
        align-items: center;
        min-height: var(--pin-marker);
        cursor: pointer;
        text-align: left;
    }
    .reittikartta .pin-nappi:focus-visible {
        outline: 2px solid var(--accent-clr);
        outline-offset: 4px;
        border-radius: 8px;
    }
    .reittikartta .pin-marker {
        position: absolute;
        left: calc(-1 * var(--pin-marker) - 18px);
        top: 0;
        margin: 0;
        display: grid;
        place-items: center;
        width: var(--pin-marker);
        height: var(--pin-marker);
        border-radius: 50%;
        background-color: var(--heading-clr);
        color: var(--bg-clr);
        font-family: var(--number-font);
        font-weight: 500;
        font-size: 24px;
        line-height: 1;
        box-shadow: 0 0 0 4px var(--grey);
        transition: background-color var(--transition-speed), color var(--transition-speed), box-shadow var(--transition-speed);
    }
    .reittikartta .pin-nimi {
        margin: 0;
        font-weight: 700;
        font-size: 17px;
        line-height: 1.25;
        transition: color var(--transition-speed);
    }
    .reittikartta .pin-nappi:hover .pin-marker,
    .reittikartta .pin-nappi:focus-visible .pin-marker {
        background-color: var(--accent-clr);
        color: var(--navy);
    }
    .reittikartta .pin.is-open .pin-marker {
        background-color: var(--accent-clr);
        color: var(--navy);
        box-shadow: 0 0 0 4px var(--grey), 0 0 0 10px color-mix(in srgb, var(--accent-clr) 28%, transparent);
    }
    .reittikartta .pin.is-open .pin-nimi {
        color: var(--accent-clr);
    }
    .reittikartta .pin-kortti {
        margin-top: 14px;
        background-color: var(--bg-clr);
        border-radius: 14px;
        padding: 22px 24px;
        box-shadow: 0 10px 30px color-mix(in srgb, var(--navy) 10%, transparent);
        font-size: 15px;
        line-height: 1.5;
    }
    .reittikartta .pin-kortti .small-heading {
        color: var(--accent-clr);
        margin-bottom: 6px;
    }
    .reittikartta .pin-kortti h3 {
        font-size: 20px;
        margin-bottom: 10px;
    }
    .js .reittikartta .pin:not(.is-open) .pin-kortti {
        display: none;
    }
    /* stagger: pins appear one by one once the map has entered the chain */
    .js .reittikartta.chain-animated .pin {
        opacity: 0;
    }
    .js .reittikartta.chain-animated.is-visible .pin {
        animation: fadeInFromDown 0.5s ease both;
        animation-delay: calc(0.5s + var(--pin-i, 0) * 0.22s);
    }
    /* Editor preview of the route: the same path as a mask, tinted with the accent colour */
    .editor-styles-wrapper .reittikartta::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: 0.35;
        background-color: var(--accent-clr);
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1180 600' preserveAspectRatio='none'%3E%3Cpath d='M90 460 C200 460,200 170,310 170 C455 170,455 455,600 455 C745 455,745 170,890 170 C990 170,990 460,1090 460' fill='none' stroke='%23000' stroke-width='3' stroke-dasharray='10 12' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1180 600' preserveAspectRatio='none'%3E%3Cpath d='M90 460 C200 460,200 170,310 170 C455 170,455 455,600 455 C745 455,745 170,890 170 C990 170,990 460,1090 460' fill='none' stroke='%23000' stroke-width='3' stroke-dasharray='10 12' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    }
}

/* ---- Desktop map layout, front end only ---- */
@media only screen and (min-width: 768px) {
    .site .reittikartta {
        display: block;
        padding: 0;
        aspect-ratio: 1180 / 600;
        overflow: visible;
    }
    .site .reittikartta .reitti {
        display: block;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }
    .site .reittikartta .reitti path {
        fill: none;
        stroke-linecap: round;
    }
    .site .reittikartta .reitti-varjo {
        stroke: var(--bg-clr);
        stroke-width: 14;
        opacity: 0.9;
    }
    .site .reittikartta .reitti-viiva {
        stroke: var(--accent-clr);
        stroke-width: 3;
        stroke-dasharray: 10 12;
    }
    /* the route reveals from left to right, then the pins pop in */
    .js .site .reittikartta.chain-animated .reitti {
        clip-path: inset(0 100% 0 0);
    }
    .js .site .reittikartta.chain-animated.is-visible .reitti {
        animation: reittikarttaPaljastus 1.4s ease-out forwards;
    }
    @keyframes reittikarttaPaljastus {
        to { clip-path: inset(0 0 0 0); }
    }
    .site .reittikartta .pin {
        position: absolute;
        left: var(--pin-x);
        top: var(--pin-y);
        width: var(--pin-marker);
        height: var(--pin-marker);
        padding: 0;
        transform: translate(-50%, -50%);
    }
    .site .reittikartta .pin::before {
        display: none;
    }
    .js .site .reittikartta.chain-animated.is-visible .pin {
        animation-name: reittikarttaPin;
    }
    @keyframes reittikarttaPin {
        from { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
        to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }
    .site .reittikartta .pin-nappi {
        display: block;
        width: var(--pin-marker);
        height: var(--pin-marker);
        min-height: 0;
    }
    .site .reittikartta .pin-marker {
        left: 0;
        top: 0;
    }
    .site .reittikartta .pin-nimi {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
        font-size: 16px;
    }
    .site .reittikartta .pin--alas .pin-nimi { top: calc(100% + 10px); }
    .site .reittikartta .pin--ylos .pin-nimi { bottom: calc(100% + 10px); }
    .site .reittikartta .pin--vasen .pin-nimi { left: 0; transform: none; }
    .site .reittikartta .pin--oikea .pin-nimi { left: auto; right: 0; transform: none; }
    /* card as a popover next to the pin */
    .site .reittikartta .pin-kortti {
        position: absolute;
        width: 340px;
        margin: 0;
        z-index: 5;
        left: 50%;
        transform: translateX(-50%);
    }
    .site .reittikartta .pin--alas .pin-kortti { bottom: calc(100% + 30px); }
    .site .reittikartta .pin--ylos .pin-kortti { top: calc(100% + 30px); }
    .site .reittikartta .pin--vasen .pin-kortti { left: 0; transform: none; }
    .site .reittikartta .pin--oikea .pin-kortti { left: auto; right: 0; transform: none; }
    .site .reittikartta .pin-kortti::after {
        content: "";
        position: absolute;
        left: 50%;
        width: 14px;
        height: 14px;
        background-color: var(--bg-clr);
        transform: translateX(-50%) rotate(45deg);
    }
    .site .reittikartta .pin--alas .pin-kortti::after { bottom: -7px; }
    .site .reittikartta .pin--ylos .pin-kortti::after { top: -7px; }
    .site .reittikartta .pin--vasen .pin-kortti::after { left: calc(var(--pin-marker) / 2); }
    .site .reittikartta .pin--oikea .pin-kortti::after { left: auto; right: calc(var(--pin-marker) / 2 - 7px); }
    .site .reittikartta .pin.is-open {
        z-index: 6;
    }
    .js .site .reittikartta .pin.is-open .pin-kortti {
        animation: fadeInFromDown 0.35s ease;
    }
}
@media only screen and (min-width: 990px) {
    .site .reittikartta { --pin-marker: 64px; }
    .site .reittikartta .pin-marker { font-size: 28px; }
    .site .reittikartta .pin-nimi { font-size: 17px; }
    .site .reittikartta .pin-kortti { width: 380px; padding: 24px 28px; }
}
@media (prefers-reduced-motion: reduce) {
    .js .reittikartta.chain-animated .pin,
    .js .reittikartta.chain-animated.is-visible .pin {
        opacity: 1;
        animation: none;
    }
    .js .site .reittikartta.chain-animated .reitti,
    .js .site .reittikartta.chain-animated.is-visible .reitti {
        clip-path: none;
        animation: none;
    }
    .js .site .reittikartta .pin.is-open .pin-kortti {
        animation: none;
    }
}