/*
 * PROTOTYYPIT: Palvelusivu A, B ja C (client comparison, 24.9.2026).
 * Loaded only on those pages by includes/prototyypit/palvelusivu-proto.php.
 * After the client's decision: move the winner's rules into the theme block files
 * (ap-step--current and the Index tokens -> applari-path.css; hero-overlay-left already moved)
 * and delete this folder, includes/prototyypit/ and the require line in functions.php.
 */
@media only screen and (min-width: 320px) {
    /* hero-overlay-left moved to css/blocks/hero-block.css (25.9.2026, front page uses it too) */

    /* Applari path with Index colours (the block ships neutral tokens) */
    .applari-path,
    .editor-styles-wrapper .applari-path {
        --ap-marker-from: var(--heading-clr);
        --ap-marker-to: var(--heading-clr);
        --ap-marker-ink: var(--bg-clr);
        --ap-line-color: var(--border-clr);
        --ap-marker-size: 3.4rem;
    }
    .applari-path .ap-step__marker,
    .editor-styles-wrapper .applari-path .ap-step__marker {
        font-family: var(--number-font);
        font-weight: 500;
        font-size: calc(var(--ap-step-size) * 0.42);
    }
    .applari-path .ap-step__title a {
        color: inherit;
        text-decoration: none;
    }
    .applari-path .ap-step__title a:hover {
        color: var(--accent-clr);
    }
    /* Current step of the customer path (page A) */
    .applari-path .ap-step--current .ap-step__marker {
        background-image: none;
        background-color: var(--accent-clr);
        color: var(--navy);
        box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-clr) 30%, transparent);
    }
    .applari-path .ap-step--current .ap-step__title {
        color: var(--accent-clr);
    }
    /* Vertical variant next to a photo (page B): larger text */
    .applari-path--vertical .ap-step__title {
        font-size: 1.3rem;
    }
    .applari-path--vertical .ap-step__text {
        font-size: 1rem;
        opacity: 0.9;
        max-width: 52ch;
    }

    /* Story cards used for subpages: the link text reads "Lue tarkemmin" (same block as the front page) */
    .tarina-kortti .tarina-linkki a {
        font-weight: 600;
    }

    /* Check-icon list items: icon stays on the left, the text block (title + description) beside it */
    .palvelusivu-proto .gb-headline:has(> .gb-icon) {
        display: flex;
        align-items: flex-start;
    }
    .palvelusivu-proto .gb-headline > .gb-icon {
        flex: 0 0 auto;
        margin-top: 0.15em;
        margin-right: 14px; /* spacing here, not as icon padding: GB applies padding inside the icon box and clips the SVG */
    }
    /* GB sets fill: currentColor on icon SVGs; the check mark is an open stroke path, so a fill turns it into a blob */
    .palvelusivu-proto .gb-headline .gb-icon svg {
        fill: none;
    }
    .palvelusivu-proto .luottamusrivi .gb-headline > .gb-icon {
        margin-right: 8px;
        margin-top: 0.1em;
    }

    /* Inline "Lue tarkemmin" links inside paragraphs */
    .palvelusivu-proto .gb-headline a:not(.gb-button) {
        text-decoration: underline;
        text-underline-offset: 4px;
    }

    /* WPForms inside the peach contact box: white fields, navy text (mirrors the newsletter box) */
    .palvelusivu-proto .wrapper-extra-color .wpforms-container.wpforms-render-modern {
        --wpforms-field-background-color: #ffffff;
        --wpforms-field-text-color: var(--navy);
        --wpforms-field-border-color: transparent;
        --wpforms-field-border-radius: 6px;
    }
}