/**
 * Mittakaava (scale): record plants standing side by side on the same ground
 * in the same scale as an adult. Project block (Suomen Jättikasvisyhdistys),
 * the front page "Ennätykset" section. Built on the front end from the plant
 * cards by includes/blocks/mittakaava.php.
 *
 * globalClass: mittakaava   (the row; editor content: .mittakaava-kasvi
 *                           containers with p.mittakaava-nimi (link),
 *                           p.mittakaava-mitta ("633,1 cm") and
 *                           p.mittakaava-tieto ("Untila 2021"))
 *
 * Front end structure (generated):
 *   .mittakaava.gb-container[role=group]
 *     .mittakaava-asteikko > .mittakaava-asteikko-viiva > span.mittakaava-asteikko-luku (--cm)
 *     a.mittakaava-kasvi[.is-cut][.mittakaava-kasvi--vertailu] (--h height in cm, --i index)
 *       .mittakaava-kuva > svg (--w viewBox width) [+ .mittakaava-jatkuu]
 *       .mittakaava-mitta, .mittakaava-nimi, .mittakaava-tieto
 *
 * Layout: one horizontally scrolling row on the shared carousel engine
 * (cards.css and cards.js list .mittakaava), without the engine's arrows;
 * swipe hint on touch, mouse drag on desktop (mittakaava.js, .is-dragging). The ground is the bottom border of the drawing areas, a faint line
 * marks 175 cm (the adult).
 *
 * Motion: the plants grow from the ground once when the row comes into view
 * (js/blocks/mittakaava.js adds .is-grown); hover or keyboard focus raises a
 * measuring tape beside the plant. Reduced motion or no JS: everything in
 * place, the tape appears without movement.
 *
 * Variant: mittakaava--sovita (a growing guide's record section): the drawing
 *          area fits the tallest plant or the adult (mittakaava.php sets
 *          --mittakaava-max on the block), so a 48 cm chili is not drawn
 *          under 5.6 m of empty space.
 *
 * Tuning: --mittakaava-ppc (pixels per centimetre, 0.5 on phones, 0.7 from
 *         768px), --mittakaava-max (560, the tallest height shown; keep in
 *         sync with APPLARI_MITTAKAAVA_MAX_CM), --mittakaava-col (column width)
 *
 * Chain animations: none on the row; the grow animation is its own.
 */

.mittakaava {
    --mittakaava-ppc: 0.5;
    --mittakaava-max: 560;
    --mittakaava-col: 7.5rem;
    --mittakaava-area: calc(var(--mittakaava-max) * var(--mittakaava-ppc) * 1px);
    --cards-card-width: var(--mittakaava-col);
    gap: 0;
    padding-top: 28px; /* room for "jatkuu vielä" above the cut plants */
}

@media (min-width: 768px) {
    .mittakaava {
        --mittakaava-ppc: 0.7;
        --mittakaava-col: 8.5rem;
    }
}

/* The fit variant shows only a few plants: on a phone the columns shrink to
   6rem before the row starts to scroll, so the adult and one record fit. */
.mittakaava.mittakaava--sovita > .mittakaava-kasvi {
    flex-shrink: 1;
    min-width: 6rem;
}

/* No prev/next arrows from the carousel engine (Arto 29.10.2026): the row
   scrolls with a trackpad, by swiping, by tabbing through the plants or by
   dragging with the mouse (mittakaava.js). */
.cards-frame:has(> .mittakaava) .cards-arrow {
    display: none;
}

@media (hover: hover) and (pointer: fine) {
    .mittakaava {
        cursor: grab;
    }

    .mittakaava.is-dragging,
    .mittakaava.is-dragging .mittakaava-kasvi {
        cursor: grabbing;
        user-select: none;
    }
}

/* ---- Ruler ---- */
.mittakaava .mittakaava-asteikko {
    flex: 0 0 3rem;
    width: 3rem;
    align-self: flex-start;
}

.mittakaava-asteikko-viiva {
    position: relative;
    display: block;
    height: var(--mittakaava-area);
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    background-image: repeating-linear-gradient(to top, currentColor 0 1px, transparent 1px calc(50 * var(--mittakaava-ppc) * 1px));
    background-size: 8px 100%;
    background-position: right bottom;
    background-repeat: no-repeat;
}

.mittakaava-asteikko-luku {
    position: absolute;
    right: 12px;
    bottom: calc(var(--cm) * var(--mittakaava-ppc) * 1px);
    transform: translateY(50%);
    font-size: 0.7rem;
    white-space: nowrap;
}

/* ---- Plant column ---- */
.mittakaava .mittakaava-kasvi {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 6px 4px;
    color: var(--font-clr);
    text-align: center;
    text-decoration: none;
}

.mittakaava-kuva {
    --guide: calc(175 * var(--mittakaava-ppc) * 1px);
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    align-self: stretch;
    margin: 0 -6px 10px;
    height: var(--mittakaava-area);
    border-bottom: 2px solid currentColor;
    background-image: linear-gradient(to top, transparent calc(var(--guide) - 1px), color-mix(in srgb, currentColor 30%, transparent) calc(var(--guide) - 1px), color-mix(in srgb, currentColor 30%, transparent) var(--guide), transparent var(--guide));
}

.mittakaava-kuva svg {
    display: block;
    flex: none;
    width: auto;
    height: calc(var(--h) * var(--mittakaava-ppc) * 1px);
    aspect-ratio: var(--w) / 100;
    overflow: visible;
    transform-origin: 50% 100%;
    transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--i) * 70ms);
}

/* Taller than the drawing area: cut at the top edge with a break mark */
.mittakaava-kasvi.is-cut .mittakaava-kuva {
    clip-path: inset(0 -40px 0 -40px);
}

.mittakaava-kasvi.is-cut .mittakaava-kuva::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 50%;
    z-index: 1;
    width: 34px;
    height: 10px;
    transform: translateX(-50%) skewY(-12deg);
    border-top: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    background-color: var(--bg-clr);
}

.mittakaava-jatkuu {
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--accent-clr);
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}

/* ---- Labels ---- */
.mittakaava-mitta {
    font-family: var(--title-font);
    font-size: 1.15rem;
    line-height: 1.1;
    color: var(--heading-clr);
    white-space: nowrap;
}

.mittakaava-nimi {
    margin-top: 2px;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.2;
}

.mittakaava-tieto {
    font-size: 0.7rem;
    line-height: 1.2;
    opacity: 0.85;
}

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

a.mittakaava-kasvi:focus-visible {
    outline: 2px solid var(--link-clr);
    outline-offset: -2px;
}

/* ---- Silhouette colors ---- */
.mittakaava svg .mk-light { fill: var(--font-clr); }
.mittakaava svg .mk-green { fill: var(--stem-clr); }
.mittakaava svg .mk-orange { fill: var(--heading-clr); }
.mittakaava svg .mk-brown { fill: var(--link-clr); }
.mittakaava svg .mk-yellow { fill: var(--tape-clr); }
.mittakaava svg .mk-dark { fill: var(--tape-tick-clr); }
.mittakaava svg .mk-stem { fill: none; stroke: var(--stem-clr); stroke-width: 2.5; stroke-linecap: round; }
.mittakaava svg .mk-rib { fill: none; stroke: var(--font-clr); stroke-opacity: 0.35; stroke-width: 1; }
.mittakaava svg .mk-tassel { fill: none; stroke: var(--tape-clr); stroke-width: 1.2; stroke-linecap: round; }
.mittakaava svg .mk-tick { fill: none; stroke: var(--tape-tick-clr); stroke-width: 1; }

/* ---- Measuring tape on hover and focus ---- */
.mittakaava-kuva::after {
    content: "";
    position: absolute;
    right: 8px;
    bottom: 0;
    width: 7px;
    height: calc(min(var(--h), var(--mittakaava-max)) * var(--mittakaava-ppc) * 1px);
    background-color: var(--tape-clr);
    background-image: repeating-linear-gradient(to top, var(--tape-tick-clr) 0 1px, transparent 1px 6px);
    background-size: 3px 100%;
    background-repeat: no-repeat;
    transform: scaleY(0);
    transform-origin: 50% 100%;
    transition: transform 0.45s ease;
}

a.mittakaava-kasvi:hover .mittakaava-kuva::after,
a.mittakaava-kasvi:focus-visible .mittakaava-kuva::after {
    transform: scaleY(1);
}

/* ---- Grow once (mittakaava.js), only when JS runs ---- */
.js .mittakaava:not(.is-grown) .mittakaava-kuva svg {
    transform: scaleY(0);
}

@media (prefers-reduced-motion: reduce) {
    .js .mittakaava:not(.is-grown) .mittakaava-kuva svg {
        transform: none;
    }

    .mittakaava-kuva svg,
    .mittakaava-kuva::after {
        transition: none;
    }
}

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

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

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