/**
 * Vaaka (weighing scale): weight records on a platform scale, the weight
 * counterpart of the mittakaava block. Project block (Suomen
 * Jättikasvisyhdistys), the record section of a growing guide. Built on the
 * front end from the record cards by includes/blocks/vaaka.php.
 *
 * globalClass: vaaka   (the row; editor content: .vaaka-kasvi containers
 *                      with p.vaaka-nimi (link), p.vaaka-paino ("10,5 kg")
 *                      and p.vaaka-tieto ("Karvinen 2024"))
 *
 * Front end structure (generated):
 *   .vaaka.gb-container[role=group]
 *     a.vaaka-kasvi[.is-weighed] (--d stagger, set by vaaka.js)
 *       .vaaka-lava > svg.vaaka-kasvis (--w viewBox width) + .vaaka-taso + .vaaka-kaula
 *       .vaaka-runko > .vaaka-naytto > .screen-reader-text + .vaaka-luku + .vaaka-yksikko
 *       .vaaka-nimi, .vaaka-tieto
 *
 * Layout: scales side by side, wrapping, centered on phones. The scale is drawn in the section's
 * text color (light in a dark section, dark in a light one) and the display
 * in the section background, so it works in every palette. The vegetable's
 * size is symbolic: weight cannot be drawn to scale.
 *
 * Motion: when a scale comes into view (js/blocks/vaaka.js adds .is-weighed
 * to the card) the vegetable drops onto the platform, the platform dips and
 * the display counts up to the result. Reduced motion or no JS: everything in
 * place, the result on the display.
 *
 * Tuning: --vaaka-w (scale width), --vaaka-h (vegetable height)
 *
 * Chain animations: none on the row; the weighing animation is its own.
 */

.vaaka {
    --vaaka-w: 15rem;
    --vaaka-h: 5.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px 40px;
}

/* Phones: centered under the text; from 768px the scales keep the row's start. */
@media (min-width: 768px) {
    .vaaka {
        --vaaka-w: 16.5rem;
        --vaaka-h: 6.5rem;
        justify-content: flex-start;
    }
}

.vaaka .vaaka-kasvi {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: var(--vaaka-w);
    max-width: 100%;
    color: var(--font-clr);
    text-align: center;
    text-decoration: none;
}

/* ---- The scale ---- */
.vaaka-lava {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.vaaka-kasvis {
    display: block;
    flex: none;
    width: auto;
    max-width: 92%;
    height: var(--vaaka-h);
    aspect-ratio: var(--w) / 100;
    overflow: visible;
}

.vaaka-taso {
    display: block;
    width: 100%;
    height: 12px;
    border-radius: 6px;
    background-color: currentColor;
}

.vaaka-kaula {
    display: block;
    width: 22%;
    height: 10px;
    background-color: color-mix(in srgb, currentColor 75%, transparent);
}

.vaaka-runko {
    display: flex;
    justify-content: center;
    width: 84%;
    padding: 14px 14px 18px;
    border-radius: 6px 6px 18px 18px;
    background-color: currentColor;
}

.vaaka-naytto {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    min-width: 80%;
    padding: 8px 14px;
    border-radius: 10px;
    background-color: var(--bg-clr);
    font-family: var(--title-font);
    line-height: 1;
}

.vaaka-luku {
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    color: var(--heading-clr);
    white-space: nowrap;
}

.vaaka-yksikko {
    font-size: 1.1rem;
    color: var(--font-clr);
}

/* ---- Labels ---- */
.vaaka-nimi {
    margin-top: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.vaaka-tieto {
    font-size: 0.85rem;
    line-height: 1.3;
    opacity: 0.85;
}

a.vaaka-kasvi:hover .vaaka-nimi {
    text-decoration: underline;
}

a.vaaka-kasvi:focus-visible {
    outline: 2px solid var(--link-clr);
    outline-offset: 4px;
    border-radius: 8px;
}

/* ---- Silhouette colors (same names as mittakaava.css) ---- */
.vaaka svg .mk-light { fill: var(--font-clr); }
.vaaka svg .mk-green { fill: var(--stem-clr); }
.vaaka svg .mk-orange { fill: var(--accent-clr); }
.vaaka svg .mk-brown { fill: var(--link-clr); }
.vaaka svg .mk-dark { fill: var(--tape-tick-clr); }
.vaaka svg .mk-stem { fill: none; stroke: var(--stem-clr); stroke-width: 3; stroke-linecap: round; }
.vaaka svg .mk-rib { fill: none; stroke: var(--bg-clr); stroke-opacity: 0.35; stroke-width: 2; }

/* In a dark section the light vegetables (onion, garlic) and the weight
   would vanish into the light scale; they take the accent soft tone. */
.wrapper-alternate-color .vaaka svg .mk-light { fill: var(--accent-soft-clr); }
.wrapper-alternate-color .vaaka svg .mk-dark { fill: var(--accent-clr); }

/* ---- Weighing (vaaka.js), only when JS runs; --d staggers the scales
   that come into view together ---- */
.js .vaaka .vaaka-kasvi:not(.is-weighed) .vaaka-kasvis {
    opacity: 0;
    transform: translateY(-45%);
}

.js .vaaka .vaaka-kasvi.is-weighed .vaaka-kasvis {
    transition: transform 0.45s cubic-bezier(0.55, 0, 1, 0.45) var(--d, 0ms), opacity 0.2s ease var(--d, 0ms);
}

.js .vaaka .vaaka-kasvi.is-weighed .vaaka-taso,
.js .vaaka .vaaka-kasvi.is-weighed .vaaka-kasvis {
    animation: vaaka-dip 0.4s ease-out calc(0.45s + var(--d, 0ms));
}

@keyframes vaaka-dip {
    0% { translate: 0 0; }
    35% { translate: 0 5px; }
    70% { translate: 0 -1px; }
    100% { translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .js .vaaka .vaaka-kasvi:not(.is-weighed) .vaaka-kasvis {
        opacity: 1;
        transform: none;
    }

    .js .vaaka .vaaka-kasvi.is-weighed .vaaka-kasvis,
    .js .vaaka .vaaka-kasvi.is-weighed .vaaka-taso {
        transition: none;
        animation: none;
    }
}

/* ---- Editor: the record cards as a wrapping list ---- */
.vaaka > .block-editor-inner-blocks {
    width: 100%;
}

.vaaka > .block-editor-inner-blocks > .block-editor-block-list__layout {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vaaka > .block-editor-inner-blocks .vaaka-kasvi {
    width: 11rem;
    padding: 8px;
    border: 1px dashed currentColor;
    border-radius: 8px;
}