/*
 * Layout and step states for the story-map library (storymap-v1.js).
 *
 * Carries only what the story needs to work: the sticky map, which step is active and
 * the placeholder while the map loads. No typography, no colours, no decoration, so it
 * can sit inside someone else's site without fighting it. Every class is prefixed sm-.
 *
 * Two layouts (koncept, sekce 8.3): `scrolly`, text beside a sticky map, and `sidecar`,
 * a map across the screen with the steps riding over it as cards.
 */

/* How much fixed chrome the host page keeps at the top of the viewport. A page with a
   fixed header sets it, otherwise the map parks under that header and the card's own
   layer chips, which sit at the top of the frame, end up hidden. */
:root {
    --sm-header-offset: 0px;
}

/* Text in the left column, map parked in the right one across all of them. The span
   keeps the map in row 1 whatever number of steps the author writes; `1 / -1` would
   resolve against the explicit grid, which has a single row here. The span creates that
   many implicit rows, so there must be no row gap: 9998 gaps of 2rem stretched the page
   by some 320000px. Space between steps is the steps' own margin. */
.sm-scrolly {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    column-gap: 2rem;
    row-gap: 0;
    align-items: start;
}

.sm-scrolly > [data-storymap-map] {
    grid-column: 2;
    grid-row: 1 / span 9999;
    position: sticky;
    top: calc(var(--sm-header-offset) + 1.5rem);
    width: 100%;
    height: 80vh;
    border: 0;
}

.sm-scrolly > .sm-step {
    grid-column: 1;
}

/* Steps stay readable when inactive: dimming them is a hint, not a way to hide text
   from anyone who reads the page without scrolling it (screen reader, print, search). */
.sm-step {
    min-height: 60vh;
    opacity: 0.55;
    transition: opacity 240ms ease;
}

.sm-step.is-active {
    opacity: 1;
}

/* Sidecar: the map fills the screen below the host's header and stays put, the steps
   scroll over it. A step is a screen tall and lets clicks through to the map, only its
   content (the card) catches them. Markup:
       .sm-sidecar > .sm-sidecar-media > [data-storymap-map]
                   > .sm-sidecar-steps > .sm-step > (card)
   The wrapper is what sticks, the library finds it by walking up from the iframe. */
.sm-sidecar {
    --sm-sidecar-height: calc(100vh - var(--sm-header-offset));
    --sm-sidecar-height: calc(100svh - var(--sm-header-offset));
    position: relative;
}

.sm-sidecar-media {
    position: sticky;
    top: var(--sm-header-offset);
    z-index: 0;
    height: var(--sm-sidecar-height);
}

.sm-sidecar-media > [data-storymap-map] {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Pulled up over the map by its own height, so the first step starts on the first screen. */
.sm-sidecar-steps {
    position: relative;
    z-index: 1;
    margin-top: calc(-1 * var(--sm-sidecar-height));
    pointer-events: none;
}

.sm-sidecar .sm-step {
    display: flex;
    align-items: center;
    min-height: var(--sm-sidecar-height);
    padding: 0 clamp(16px, 5vw, 72px);
    opacity: 1;
}

.sm-sidecar .sm-step > * {
    pointer-events: auto;
}

/* Blurred until the card has the first step on the map, so the reader does not watch the
   default view jump to it. storymap-v1.js removes this class on storymap:stepApplied,
   or after its own timeout when the map never answers. */
.sm-map-loading {
    filter: blur(6px);
    opacity: 0.6;
}

[data-storymap-map] {
    transition: filter 400ms ease, opacity 400ms ease;
}

@media (max-width: 768px) {
    .sm-scrolly {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    /* Map on top, steps underneath: on a narrow screen a column pair would leave both
       halves too small to read (koncept, sekce 8.3). */
    .sm-scrolly > [data-storymap-map] {
        grid-column: 1;
        grid-row: auto;
        top: var(--sm-header-offset);
        /* A dimmed step has opacity below 1, which paints it in DOM order after the map,
           so without this its text is drawn (and clickable) over the map it scrolls under. */
        z-index: 1;
        /* svh keeps the height when a phone's address bar folds away, vh would not. */
        height: 45vh;
        height: 45svh;
        /* Steps scroll under the map, so its bottom edge gets a soft shadow instead of a
           cut. A shadow and not a fade of the map itself: the OSM credit sits on that
           edge and has to stay legible. Set the variable to `none` to drop it. */
        box-shadow: var(--sm-map-edge-shadow, 0 10px 14px -10px rgba(0, 0, 0, 0.35));
    }

    .sm-scrolly > .sm-step {
        grid-column: 1;
    }

    .sm-step {
        min-height: 0;
        margin: 2rem 0;
    }

    /* No room for a card over the map: the map is the top half, the steps scroll under it. */
    .sm-sidecar-media {
        z-index: 2;
        height: 46vh;
        height: 46svh;
        box-shadow: var(--sm-map-edge-shadow, 0 10px 14px -10px rgba(0, 0, 0, 0.35));
    }

    .sm-sidecar-steps {
        margin-top: 0;
    }

    .sm-sidecar .sm-step {
        min-height: 0;
        margin: 0;
        padding: 1.5rem 16px;
    }
}

/* The page's own animations only. The camera is handled inside the frame, where the
   bridge reads prefers-reduced-motion itself and jumps instead of flying. */
.sm-reduced-motion .sm-step,
.sm-reduced-motion [data-storymap-map] {
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .sm-step,
    [data-storymap-map] {
        transition: none;
    }
}