/**
 * Fact strip: a low band of the buyer's first questions (price, what is
 * included, delivery time, contract, next step) under a small heading such as
 * "Lyhyesti", meant to sit right under a service page hero. It is a fact
 * sheet, not a sales band: plain text on the page background, short light
 * dividers between the cells, and a value may link deeper into the page.
 *
 * globalClass: fact-strip   (the band) and fact-strip-item (each fact)
 *
 * Variants:
 *   (none yet)
 *
 * Structure:
 *   .fact-strip-section.gb-container.alignfull   NOT a color-section (see below)
 *     .fact-strip.gb-container                   useGlobalMaxWidth, margins auto
 *       h2.fact-strip-title                      "Lyhyesti"
 *       .fact-strip-item.gb-container            4-6 facts
 *         p.fact-strip-label                     "Hinta"
 *         p.fact-strip-value                     "alkaen 2 900 €", may hold an <a>
 *                                                to the section that explains it
 *
 * The section carries no color-section class on purpose: the band keeps the
 * page background and its own low padding, and base.css would otherwise drop
 * the top padding of the same-palette section that follows it.
 *
 * Layout: label and value side by side on narrow screens, like a definition
 * list, one fact per row without lines; from 990px the facts stand in one
 * row with the title as the first cell and a short vertical divider
 * (--fact-strip-divider-height, centered) before every fact.
 *
 * Tuning: --fact-strip-padding-y (32px, the section's own padding),
 *         --fact-strip-gap (24px), --fact-strip-line (divider color, a light
 *         mix of the text color), --fact-strip-divider-height (40px)
 *
 * Chain animations: the band is the chain: title (1), facts (2…n),
 * fadeInFromDown 0.4 s. Included in the pattern.
 *
 * Editor: the band's and the fact's flex layout is repeated on GB's editor
 * layout element.
 */

:root {
    --fact-strip-padding-y: 32px;
    --fact-strip-gap: 24px;
    --fact-strip-line: color-mix(in srgb, currentColor 25%, transparent);
    --fact-strip-divider-height: 40px;
}

/* Section: low padding instead of the section padding */
.gb-container.fact-strip-section {
    padding-top: var(--fact-strip-padding-y);
    padding-bottom: var(--fact-strip-padding-y);
}

/* Band */
.fact-strip,
.fact-strip > .block-editor-inner-blocks > .block-editor-block-list__layout {
    display: flex;
    flex-direction: column;
}

.fact-strip > .block-editor-inner-blocks {
    width: 100%;
}

.fact-strip-title {
    margin: 0;
    padding: 0 0 12px;
    font-size: var(--h4-size);
    line-height: 1.2;
}

/* Fact: label left, value right */
.fact-strip-item {
    padding: 8px 0;
}

.fact-strip-item,
.fact-strip-item > .block-editor-inner-blocks > .block-editor-block-list__layout {
    display: flex;
    align-items: baseline;
    gap: 8px var(--fact-strip-gap);
}

.fact-strip-item > .block-editor-inner-blocks {
    width: 100%;
}

.fact-strip-label,
.fact-strip-value {
    margin: 0;
}

.fact-strip-label {
    flex: 0 0 9em;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--placeholder-clr);
}

.fact-strip-value {
    flex: 1 1 0;
    min-width: 0;
    font-weight: var(--heading-weight);
    color: var(--heading-clr);
}

.fact-strip-value a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--accent-clr);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.fact-strip-value a:hover,
.fact-strip-value a:focus-visible {
    color: var(--link-clr);
}

@media only screen and (min-width: 990px) {
    .fact-strip,
    .fact-strip > .block-editor-inner-blocks > .block-editor-block-list__layout {
        flex-direction: row;
        align-items: stretch;
    }

    .fact-strip-title {
        display: flex;
        align-items: center;
        flex: 0 0 auto;
        padding: 12px var(--fact-strip-gap) 12px 0;
    }

    /* Fact: label above value, a short centered divider before each cell */
    .fact-strip-item {
        position: relative;
        flex: 1 1 0;
        min-width: 0;
        padding: 12px var(--fact-strip-gap);
    }

    .fact-strip-item::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 1px;
        height: var(--fact-strip-divider-height);
        transform: translateY(-50%);
        background: var(--fact-strip-line);
    }

    .fact-strip-item,
    .fact-strip-item > .block-editor-inner-blocks > .block-editor-block-list__layout {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .fact-strip-item:last-child {
        padding-right: 0;
    }

    .fact-strip-label,
    .fact-strip-value {
        flex: none;
        width: 100%;
    }
}