/**
 * Vuosinauha (growing year): twelve month cells, each a short line of what
 * happens then and a link to the guide or page about it. Project block
 * (Suomen Jättikasvisyhdistys), front page "Siemenkirje ja jäsenyys" section.
 *
 * globalClass: vuosinauha   (the row; each month is a .vuosinauha-item)
 *
 * Layout: below 990px one horizontally scrolling row on the shared carousel
 * engine (cards.css + cards.js list .vuosinauha); js/blocks/vuosinauha.js
 * scrolls it to the current month. From 990px all twelve in one grid row.
 *
 * Seasons follow the month's position, so editors only change texts and
 * links: 4–5 spring (--accent-soft-clr), 6–8 summer (--stem-clr), 9–10
 * harvest (--accent-clr). Dark text on the harvest orange: white fails
 * contrast at this size (the prototype had white).
 *
 * The current month: vuosinauha.js adds .is-current (a "Nyt" badge and an
 * outline) and aria-current="date" on its link. Without JS no highlight.
 *
 * Hover and keyboard focus (Arto 29.10.2026: "jykevämpi"): the cell lifts on
 * a solid dark base, a measuring-tape strip rolls out along the bottom
 * (::after) and an arrow follows the text.
 *
 * Structure:
 *   .vuosinauha.gb-container
 *     .vuosinauha-item.gb-container      x12, January first
 *       p.vuosinauha-month                "Tammi"
 *       p.vuosinauha-text > a            "jäsenmaksu ja siemenkirje"; the
 *                                        link covers the whole cell
 *
 * Tuning: --vuosinauha-gap (4px), --vuosinauha-radius (10px),
 *         --vuosinauha-item-width (scrolling cell width, 8.5rem)
 *
 * Chain animations: the row fades in as one (chainAnimation on .vuosinauha).
 */

.vuosinauha {
    --vuosinauha-gap: 4px;
    --vuosinauha-radius: 10px;
    --vuosinauha-item-width: 8.5rem;
    --cards-card-width: var(--vuosinauha-item-width);
    gap: var(--vuosinauha-gap);
    padding-top: 14px; /* room for the "Nyt" badge and the hover lift */
    padding-bottom: 8px; /* room for the hover base below the cells */
}

/* Two classes: the palette wrappers reset .gb-container backgrounds at (0,2,0) */
.vuosinauha .vuosinauha-item {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 6px;
    min-height: 96px;
    padding: 10px 8px 13px; /* the hover tape strip (7px) stays below the text */
    border-radius: var(--vuosinauha-radius);
    background-color: var(--neutral-clr);
    color: var(--font-clr);
    line-height: 1.1;
}

.vuosinauha-item p {
    margin: 0;
}

.vuosinauha-month {
    font-family: var(--title-font);
    font-size: 0.95rem;
    color: var(--heading-clr);
}

.vuosinauha-text {
    font-size: 0.72rem;
    /* Long words ("kasvatusohjeet") hyphenate in the narrow cells instead of breaking anywhere. */
    overflow-wrap: break-word;
    hyphens: auto;
    hyphenate-limit-chars: 10 4 4; /* only long words, never "aa-muin" */
}

/* The text link covers the whole cell */
.vuosinauha-text a {
    color: inherit;
    text-decoration: none;
}

.vuosinauha-text a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.vuosinauha-text a:focus-visible {
    outline: none;
}

/* Hover and keyboard focus: the cell lifts onto a solid dark base like a
   chunky button, a strip of measuring tape rolls out along its bottom edge
   and an arrow follows the text. Reduced motion: the base, tape and arrow
   appear without movement. */
.vuosinauha .vuosinauha-item {
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease;
}

.vuosinauha-item::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 7px;
    border-radius: 0 0 var(--vuosinauha-radius) var(--vuosinauha-radius);
    background-color: var(--tape-clr);
    background-image: repeating-linear-gradient(90deg, var(--tape-tick-clr) 0 1px, transparent 1px 6px);
    background-size: 100% 3px;
    background-repeat: no-repeat;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
    pointer-events: none;
}

.vuosinauha-text::after {
    content: "→" / "";
    display: inline-block;
    margin-left: 0.3em;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.vuosinauha-item:hover,
.vuosinauha-item:has(a:focus-visible) {
    transform: translateY(-6px);
    box-shadow: 0 6px 0 0 var(--font-clr);
}

.vuosinauha-item:hover::after,
.vuosinauha-item:has(a:focus-visible)::after {
    transform: scaleX(1);
}

.vuosinauha-item:hover .vuosinauha-text::after,
.vuosinauha-item:has(a:focus-visible) .vuosinauha-text::after {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .vuosinauha .vuosinauha-item,
    .vuosinauha-item::after,
    .vuosinauha-text::after {
        transition: none;
    }

    .vuosinauha-item:hover,
    .vuosinauha-item:has(a:focus-visible) {
        transform: none;
    }
}

/* Seasons by position */
.vuosinauha-item:nth-child(4),
.vuosinauha-item:nth-child(5) {
    background-color: var(--accent-soft-clr);
}

.vuosinauha-item:nth-child(n+6):nth-child(-n+8) {
    background-color: var(--stem-clr);
    color: var(--btn-font-clr);
}

.vuosinauha-item:nth-child(9),
.vuosinauha-item:nth-child(10) {
    background-color: var(--accent-clr);
    color: var(--font-clr);
}

.vuosinauha-item:nth-child(n+6):nth-child(-n+10) .vuosinauha-month {
    color: inherit;
}

/* Current month (vuosinauha.js) */
.vuosinauha-item.is-current {
    outline: 3px solid var(--font-clr);
    outline-offset: -3px;
}

.vuosinauha-item.is-current::before {
    content: "Nyt";
    position: absolute;
    top: -10px;
    right: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background-color: var(--font-clr);
    color: var(--bg-clr);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.4;
}

/* The scrolling row's track clips vertically (overflow-x: auto), so the cells
   keep inside it; the badge sits in the padding-top room above. */
@media (min-width: 990px) {
    .vuosinauha {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        overflow: visible;
    }

    .vuosinauha > .vuosinauha-item {
        width: auto;
    }
}

/* Editor: six cells per row, twelve from 990px */
.vuosinauha > .block-editor-inner-blocks {
    width: 100%;
}

.vuosinauha > .block-editor-inner-blocks > .block-editor-block-list__layout {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--vuosinauha-gap);
}

@media (min-width: 990px) {
    .vuosinauha > .block-editor-inner-blocks > .block-editor-block-list__layout {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }
}