/*
 * Kortti-karuselli: horizontal card row that bleeds to the right edge of the viewport,
 * aligned on the left with the global container. Native horizontal scroll, no JS.
 * No scroll-snap: scroll-padding percentages resolve against the scrollport, not the section,
 * so snapping would pull the first card off the container line.
 *
 * Usage (GB): container with global class `kortti-karuselli` as a DIRECT child of a
 * full-width color-section (not inside the max-width container). The track is either
 *   - the container itself (manual cards as direct children), or
 *   - the GB Query Loop grid inside it (.gb-grid-wrapper, items .gb-grid-column).
 * Card width comes from --karuselli-card-width (override per use).
 *
 * News card (Query Loop item): container with classes `news-card wrapper-extra-color`.
 *
 * js/blocks/kortti-karuselli.js wraps the row in .kortti-karuselli-kehys and adds
 * prev/next arrows (mouse devices, >= 768px) and a one-time swipe hint (touch devices).
 */
@media only screen and (min-width: 320px) {
    /* The carousel is the scroll container in both usages. It breaks out of the section's
       side padding (100vw - 100% = both paddings) and pads its content back so the first card
       lines up with the global container: section padding below 1280px, the space outside
       --container-width above it. */
    .kortti-karuselli,
    .kortti-karuselli-kehys {
        --karuselli-gutter: max(calc((100vw - 100%) / 2), calc((100% - var(--container-width)) / 2));
    }

    .kortti-karuselli {
        --karuselli-gap: 16px;
        --karuselli-card-width: min(78vw, 340px);
        margin-left: calc((100% - 100vw) / 2);
        margin-right: calc((100% - 100vw) / 2);
        padding-left: var(--karuselli-gutter);
        padding-right: var(--karuselli-gutter);
        overflow-x: auto;
        scrollbar-width: none;
        align-self: stretch; /* full width also inside flex columns that center their items (hero) */
    }

    .kortti-karuselli::-webkit-scrollbar {
        display: none;
    }

    /* 100vw includes a classic scrollbar: clip the few pixels it adds */
    .color-section:has(.kortti-karuselli) {
        overflow-x: clip;
    }

    .kortti-karuselli:not(:has(.gb-grid-wrapper)),
    .kortti-karuselli .gb-grid-wrapper {
        display: flex;
        flex-wrap: nowrap;
        gap: var(--karuselli-gap);
    }

    .kortti-karuselli .gb-grid-wrapper {
        margin-left: 0;
        width: max-content;
    }

    .kortti-karuselli:not(:has(.gb-grid-wrapper)) > *,
    .kortti-karuselli .gb-grid-wrapper > .gb-grid-column {
        flex: 0 0 var(--karuselli-card-width);
        width: var(--karuselli-card-width);
        padding-left: 0;
    }

    /* Controls added by JS */
    .kortti-karuselli-kehys {
        position: relative;
        align-self: stretch;
    }

    .kortti-karuselli-nuoli {
        display: none;
    }

    .kortti-karuselli-vihje {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 3;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 18px;
        border-radius: 999px;
        background-color: var(--btn-bg);
        color: var(--btn-font-clr);
        font-size: 14px;
        font-weight: 600;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transform: translate(-50%, calc(-50% + 8px));
        transition: opacity var(--transition-speed) var(--transition-timing-function), transform var(--transition-speed) var(--transition-timing-function);
    }

    .kortti-karuselli-vihje.is-visible {
        opacity: 1;
        transform: translate(-50%, -50%);
    }

    .kortti-karuselli-vihje__nuolet {
        letter-spacing: 0.1em;
    }

    /* News card */
    .news-card {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 8px;
        height: 100%;
        min-height: 180px;
        padding: 22px 24px;
        border-radius: 14px;
        background-color: var(--bg-clr);
        color: var(--font-clr);
        transition: transform var(--transition-speed) var(--transition-timing-function);
    }

    .news-card:hover {
        transform: translateY(-4px);
    }

    .news-card .news-card-date {
        font-size: 12px;
        margin: 0;
        opacity: 0.85;
    }

    .news-card h3 {
        font-size: 17px;
        line-height: 1.35;
        font-weight: 600;
        margin: 0;
    }

    .news-card h3 a {
        color: inherit;
        text-decoration: none;
    }

    /* Whole card clickable through the title link */
    .news-card h3 a::after {
        content: "";
        position: absolute;
        inset: 0;
    }

    .news-card .news-card-more {
        margin-top: auto;
        margin-bottom: 0;
        font-size: 13px;
        font-weight: 600;
        text-decoration: underline;
        text-underline-offset: 4px;
    }
}

/* Arrows only for mouse users on wider screens; touch users swipe */
@media (hover: hover) and (min-width: 768px) {
    .kortti-karuselli-kehys.is-scrollable .kortti-karuselli-nuoli {
        position: absolute;
        top: 50%;
        z-index: 3;
        display: grid;
        place-items: center;
        width: 48px;
        height: 48px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background-color: var(--btn-bg);
        color: var(--btn-font-clr);
        cursor: pointer;
        transform: translateY(-50%);
        transition: opacity var(--transition-speed), background-color var(--transition-speed), transform 0.15s;
    }

    .kortti-karuselli-kehys.is-scrollable .kortti-karuselli-nuoli:hover {
        background-color: var(--btn-hover-bg);
        color: var(--btn-hover-font);
    }

    .kortti-karuselli-kehys.is-scrollable .kortti-karuselli-nuoli:focus-visible {
        outline: 3px solid var(--accent-clr);
        outline-offset: 3px;
    }

    .kortti-karuselli-nuoli svg {
        width: 22px;
        height: 22px;
    }

    .kortti-karuselli-nuoli--prev {
        left: calc(var(--karuselli-gutter) - 24px);
    }

    .kortti-karuselli-nuoli--prev svg {
        transform: rotate(180deg);
    }

    .kortti-karuselli-nuoli--next {
        right: calc(var(--karuselli-gutter) - 24px);
    }

    .kortti-karuselli-kehys .kortti-karuselli-nuoli:disabled {
        opacity: 0;
        pointer-events: none;
    }
}

/* Editor only: no bleed or horizontal scroll, cards laid out so they are easy to edit.
   - Query Loop: the editor row is .gb-post-template-wrapper (inside .gb-grid-wrapper),
     and every post is its own .block-editor-inner-blocks there (the first one editable,
     the rest .gb-query-loop-block-preview): one row, 19 % each.
   - Manual cards (tarina-kortti): wrapping row, 25 % each. Covers both editor DOMs
     (cards directly in the container or inside its block-list layout). */
.editor-styles-wrapper .kortti-karuselli {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    overflow: visible;
}

.editor-styles-wrapper .kortti-karuselli .gb-grid-wrapper {
    display: block;
    width: auto;
}

.editor-styles-wrapper .kortti-karuselli .gb-post-template-wrapper {
    display: flex;
    flex-wrap: nowrap;
    gap: 1%;
    margin-left: 0;
}

.editor-styles-wrapper .kortti-karuselli .gb-post-template-wrapper > .block-editor-inner-blocks {
    flex: 0 0 19%;
    width: 19% !important; /* GB prints per-item widths for the editor */
    min-width: 0;
    padding-left: 0;
}

.editor-styles-wrapper .kortti-karuselli .gb-post-template-wrapper .gb-grid-column {
    width: 100% !important;
    padding-left: 0;
}

.editor-styles-wrapper .kortti-karuselli:not(:has(.gb-grid-wrapper)),
.editor-styles-wrapper .kortti-karuselli:not(:has(.gb-grid-wrapper)) > .block-editor-inner-blocks > .block-editor-block-list__layout {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.editor-styles-wrapper .kortti-karuselli:not(:has(.gb-grid-wrapper)) > .block-editor-inner-blocks {
    flex: 1 1 100%;
}

.editor-styles-wrapper .kortti-karuselli .tarina-kortti {
    flex: 0 0 calc(25% - 12px);
    width: calc(25% - 12px);
    max-width: none;
    margin: 0;
}

/* ---- Variant: kuvanauha (photo strip, front page "Me autamme sinua" B, 25.9.2026) ----
   Cards are image frames with a shared height; width follows the photo (landscape 3:2,
   `kuvanauha-pysty` portrait). Overrides the fixed --karuselli-card-width. */
@media only screen and (min-width: 320px) {
    .kortti-karuselli.kuvanauha {
        --nauha-h: 240px;
        --karuselli-gap: 12px;
    }
    .kortti-karuselli.kuvanauha > * {
        flex: 0 0 auto;
        width: calc(var(--nauha-h) * 1.5);
        height: var(--nauha-h);
        border-radius: 14px;
        overflow: hidden;
    }
    .kortti-karuselli.kuvanauha > .kuvanauha-pysty {
        width: calc(var(--nauha-h) * 0.78);
    }
    .kortti-karuselli.kuvanauha .gb-block-image,
    .kortti-karuselli.kuvanauha img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        margin: 0;
    }
    .kortti-karuselli.kuvanauha > .kuvanauha-pysty img {
        object-position: 55% center;
    }
    .editor-styles-wrapper .kortti-karuselli.kuvanauha > * {
        width: 19% !important;
        height: 180px;
    }
}
@media only screen and (min-width: 768px) {
    .kortti-karuselli.kuvanauha { --nauha-h: 320px; --karuselli-gap: 16px; }
}
@media only screen and (min-width: 1280px) {
    .kortti-karuselli.kuvanauha { --nauha-h: 380px; }
}