/*
 * PROTOTYYPIT: Kohderyhmäsivu A and B (client comparison, 28.9.2026).
 * Loaded only on those pages by includes/prototyypit/kohderyhma-proto.php.
 * After the client's decision: move the winner's rules into a theme block file
 * (css/blocks/kohderyhma.css) and delete this file and the PHP loader.
 */
@media only screen and (min-width: 320px) {
    /* White card inside a coloured section: resets the palette to the base colours */
    .gb-container.valkoinen-kortti,
    .wrapper-alternate-color .gb-container.valkoinen-kortti,
    .wrapper-extra-color .gb-container.valkoinen-kortti {
        --bg-clr: var(--body-bg-clr);
        --font-clr: var(--navy);
        --heading-clr: var(--navy);
        --link-clr: var(--navy);
        --no-bg-btn-clr: var(--navy);
        background-color: var(--bg-clr);
        color: var(--font-clr);
        overflow: hidden;
    }
    .valkoinen-kortti h3,
    .valkoinen-kortti .gb-headline,
    .kohderyhma-proto .valkoinen-kortti h3 a,
    .valkoinen-kortti a.gb-button.btn-no-bg {
        color: var(--navy);
    }
    .kohderyhma-proto .valkoinen-kortti h3.gb-headline a:not(.gb-button) {
        text-decoration: none;
    }
    .valkoinen-kortti a.gb-button.btn-no-bg::after {
        background-color: var(--navy);
    }
    .kohderyhma-proto .valkoinen-kortti h3 a:hover,
    .valkoinen-kortti a.gb-button.btn-no-bg:hover {
        color: var(--accent-clr);
    }
    .artikkelinosto .gb-block-image {
        margin: 0;
        height: 100%;
        overflow: hidden;
    }
    .artikkelinosto .gb-block-image img {
        display: block;
        min-height: 100%;
        transition: transform 1.2s var(--transition-timing-function);
    }
    .artikkelinosto:hover .gb-block-image img {
        transform: scale(1.04);
    }

    /* Audience switcher (page B): pill links, the current audience highlighted */
    .ryhmavalitsin {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .ryhmavalitsin::-webkit-scrollbar {
        display: none;
    }
    .ryhmavalitsin a.gb-button,
    .editor-styles-wrapper .ryhmavalitsin a.gb-button {
        flex: 0 0 auto;
        padding: 0.55em 1.2em;
        border: 2px solid var(--border-clr);
        background: transparent;
        color: var(--font-clr);
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: none;
    }
    .ryhmavalitsin a.gb-button:hover {
        border-color: var(--accent-clr);
        background: transparent;
        color: var(--font-clr);
        transform: none;
    }
    .ryhmavalitsin a.gb-button.is-current,
    .editor-styles-wrapper .ryhmavalitsin a.gb-button.is-current {
        border-color: var(--accent-clr);
        background: var(--accent-clr);
        color: var(--navy);
    }

    /* Accordion variant on page B: the client's question sits above the answer heading */
    .kohderyhma-proto .accordion-numeroitu .ovi-vinkki {
        opacity: 0.8;
    }
}
@media only screen and (min-width: 1024px) {
    /* Header column stays in view while the cards scroll (page A, Miksi valita meidät) */
    .kohderyhma-sticky {
        position: sticky;
        top: 120px;
    }
}