@media only screen and (min-width: 320px) {
    .gb-accordion{
        background: none;
    }
    /*Unset colors etc*/
    .gb-accordion .gb-accordion__item .gb-button, 
    .gb-accordion .gb-accordion__item .gb-block-is-current,
    .gb-accordion .gb-accordion__item .gb-button:hover,
    .gb-accordion .gb-accordion__item .gb-button:focus,
    .is-root-container .gb-accordion .block-editor-block-list__block,
    .is-root-container .gb-accordion .gb-accordion__item .gb-button,
    .is-root-container .gb-accordion .gb-accordion__item .gb-block-is-current,
    .is-root-container .gb-accordion .gb-accordion__item .gb-button:hover,
    .is-root-container .gb-accordion .gb-accordion__item .gb-button:focus{
        background-color:unset;
        color:inherit;
    }
    .gb-accordion__item{
        border-bottom:1px solid;
    }
    /*Accordion title*/
    .gb-accordion .gb-accordion__item .gb-button{
        cursor: pointer;
        padding:20px 0px;
    }


    /* Toggle icon: the markup carries two SVGs (plus, minus). GB Pro does not ship CSS for
       switching them, so show the first when closed and the second when open. */
    .gb-accordion .gb-accordion__toggle .gb-icon svg + svg,
    .is-root-container .gb-accordion .gb-accordion__toggle .gb-icon svg + svg {
        display: none;
    }
    .gb-accordion .gb-accordion__toggle.gb-block-is-current .gb-icon svg:first-child,
    .is-root-container .gb-accordion .gb-accordion__toggle.gb-block-is-current .gb-icon svg:first-child {
        display: none;
    }
    .gb-accordion .gb-accordion__toggle.gb-block-is-current .gb-icon svg + svg,
    .is-root-container .gb-accordion .gb-accordion__toggle.gb-block-is-current .gb-icon svg + svg {
        display: inline;
    }

    /*Acccordion content*/
    .gb-accordion .gb-accordion__content .gb-container{
        background-color:unset;
    }
}

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

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

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


}
/* ==========================================================================
   Variant: accordion-numeroitu (Index front page "Miten autamme sinua?", 25.9.2026)
   Numbered items: the number in the number font, the toggle holds the title, and a hint
   line stays visible while the item is closed. Structure per item:
     .gb-accordion__item > .ovi-rivi (p.ovi-numero + .ovi-tekstit (toggle + p.ovi-vinkki))
                         > .gb-accordion__content
   The wrapper carries the chain animation; items fade in one by one via CSS delays.
   ========================================================================== */
@media only screen and (min-width: 320px) {
    .accordion-numeroitu .gb-accordion__item,
    .editor-styles-wrapper .accordion-numeroitu .gb-accordion__item {
        border-bottom: 0;
        border-top: 1px solid var(--border-clr);
    }
    .accordion-numeroitu .gb-accordion__item:last-child,
    .editor-styles-wrapper .accordion-numeroitu .gb-accordion__item:last-child {
        border-bottom: 1px solid var(--border-clr);
    }
    .accordion-numeroitu .ovi-rivi {
        display: flex;
        align-items: flex-start;
        column-gap: 18px;
        padding: 22px 0;
    }
    .accordion-numeroitu .ovi-numero {
        flex: 0 0 52px;
        margin: 0;
        font-family: var(--number-font);
        font-weight: 500;
        font-size: clamp(30px, 3vw, 44px);
        line-height: 1;
        color: var(--accent-clr);
    }
    .accordion-numeroitu .ovi-tekstit {
        flex: 1 1 auto;
        min-width: 0;
        display: grid;
        row-gap: 6px;
        padding-top: 4px;
    }
    .accordion-numeroitu .gb-accordion__item .gb-accordion__toggle,
    .editor-styles-wrapper .accordion-numeroitu .gb-accordion__item .gb-accordion__toggle,
    .is-root-container .accordion-numeroitu .gb-accordion__item .gb-accordion__toggle {
        width: 100%;
        padding: 0;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        column-gap: 16px;
        text-align: left;
        font-size: clamp(20px, 1.5vw, 24px);
        font-weight: 700;
        line-height: 1.2;
        text-decoration: none;
    }
    .accordion-numeroitu .gb-accordion__toggle .gb-button-text {
        transition: color var(--transition-speed) var(--transition-timing-function);
    }
    .accordion-numeroitu .gb-accordion__toggle:hover .gb-button-text,
    .accordion-numeroitu .gb-accordion__toggle:focus-visible .gb-button-text,
    .accordion-numeroitu .gb-accordion__toggle.gb-block-is-current .gb-button-text {
        color: var(--accent-clr);
    }
    .accordion-numeroitu .gb-accordion__toggle .gb-icon {
        flex: 0 0 auto;
        width: 36px;
        height: 36px;
        margin-top: -4px;
        border-radius: 50%;
        border: 1.5px solid var(--border-clr);
        display: grid;
        place-items: center;
        transition: background-color var(--transition-speed), border-color var(--transition-speed), color var(--transition-speed);
    }
    .accordion-numeroitu .gb-accordion__toggle .gb-icon svg {
        width: 16px;
        height: 16px;
    }
    .accordion-numeroitu .gb-accordion__toggle.gb-block-is-current .gb-icon {
        background-color: var(--accent-clr);
        border-color: var(--accent-clr);
        color: var(--navy);
    }
    .accordion-numeroitu .ovi-vinkki {
        margin: 0;
        font-size: 15px;
        line-height: 1.5;
        opacity: 0.8;
    }
    .accordion-numeroitu .gb-accordion__content {
        padding-left: 70px; /* number column + gap, so the answer aligns with the title */
    }
    .accordion-numeroitu .gb-accordion__item:nth-child(1) { --ovi-i: 0; }
    .accordion-numeroitu .gb-accordion__item:nth-child(2) { --ovi-i: 1; }
    .accordion-numeroitu .gb-accordion__item:nth-child(3) { --ovi-i: 2; }
    .accordion-numeroitu .gb-accordion__item:nth-child(4) { --ovi-i: 3; }
    .accordion-numeroitu .gb-accordion__item:nth-child(5) { --ovi-i: 4; }
    .accordion-numeroitu .gb-accordion__item:nth-child(6) { --ovi-i: 5; }
    .js .accordion-numeroitu.chain-animated .gb-accordion__item {
        opacity: 0;
    }
    .js .accordion-numeroitu.chain-animated.is-visible .gb-accordion__item {
        animation: fadeInFromDown 0.5s ease both;
        animation-delay: calc(var(--ovi-i, 0) * 0.2s);
    }
}
@media only screen and (min-width: 990px) {
    .accordion-numeroitu .ovi-numero { flex-basis: 64px; }
    .accordion-numeroitu .gb-accordion__content { padding-left: 82px; }
    /* The section header column next to the accordion stays in view while the list scrolls */
    .pysakit-sticky { position: sticky; top: 120px; }
}
@media (prefers-reduced-motion: reduce) {
    .js .accordion-numeroitu.chain-animated .gb-accordion__item,
    .js .accordion-numeroitu.chain-animated.is-visible .gb-accordion__item {
        opacity: 1;
        animation: none;
    }
}