/* ==========================================================================
   ingredient-story.css — Scroll-Scrubbed Stem & Leaves Section
   Herba Sparsh Child Theme
   Author: Pratik Patil
   ==========================================================================
   Two-column layout: text content on the left, a winding botanical stem
   in the right margin. The SVG is `position: absolute` and
   `pointer-events: none` throughout — see the file header in
   template-parts/ingredient-story.php for why it's built this way (a
   purely visual accompaniment, never a click target, never intercepting
   text selection). All animation happens in assets/js/ingredient-story.js;
   this file only lays things out and sets each animated element's
   *starting* (pre-animation) CSS state so there's no flash of the fully-
   drawn/fully-visible end state before GSAP runs. */

.hst-ingredient-story {
    max-width: var(--content-max-width);
    margin: var(--space-2xl) auto 0 auto;
    padding: var(--space-xl) var(--space-xl) 0 var(--space-xl);
    border-top: 1px solid var(--color-border);
}

.hst-ingredient-story__inner {
    position: relative;
    display: grid;
    /* Text column keeps its 460px measure; the plant illustration takes
       the rest of the row instead of a 160px sliver. */
    grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
    gap: var(--space-2xl);
}

.hst-ingredient-story__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
    padding: var(--space-2xl) 0;
}

.hst-ingredient-story__block {
    max-width: 460px;
}

.hst-ingredient-story__eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent-text);
    margin-bottom: var(--space-sm);
}

.hst-ingredient-story__title {
    margin: 0 0 var(--space-sm) 0;
}

.hst-ingredient-story__text {
    color: var(--color-foreground-muted);
    line-height: 1.75;
    margin: 0;
}

/* ---- Margin column: the stem + leaves ---- */

.hst-ingredient-story__margin {
    position: relative;
}

.hst-plant {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden; /* structural guarantee: never bleeds over text or neighbouring sections */
}

.hst-plant .c1 { color: var(--leaf-1); }
.hst-plant .c2 { color: var(--leaf-2); }
.hst-plant .c3 { color: var(--leaf-3); }
.hst-plant .c4 { color: color-mix(in srgb, var(--leaf-3) 70%, var(--color-background)); }

/* Pre-animation state (JS then scrubs these to their final state). If GSAP
   never loads, JS adds .is-static to the section and everything shows. */
.hst-plant__arch,
.hst-plant__stem,
.hst-plant__branch {
    stroke-dasharray: 3000;
    stroke-dashoffset: 3000;
}

.hst-plant__stem,
.hst-plant__branch {
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
}

.hst-plant__pop {
    opacity: 0;
    transform: scale(0);
    transform-box: fill-box;
    transform-origin: 50% 100%;
}

.hst-plant__pop--flower,
.hst-plant__pop--drop {
    transform-origin: 50% 50%;
}

.hst-ingredient-story.is-static .hst-plant__arch,
.hst-ingredient-story.is-static .hst-plant__stem,
.hst-ingredient-story.is-static .hst-plant__branch {
    stroke-dashoffset: 0;
}

.hst-ingredient-story.is-static .hst-plant__pop {
    opacity: 1;
    transform: scale(1);
}

/* ---- Below 1024px: the margin column (and its stem/leaves) is dropped
   entirely rather than squeezed into a narrow column that couldn't fit a
   readable stem — text blocks simply stack full-width. Same "don't cram
   in a decoration" rule used everywhere else in this theme. ---- */
@media (max-width: 1023px) {
    .hst-ingredient-story__inner {
        grid-template-columns: 1fr;
    }

    .hst-ingredient-story__margin {
        display: none;
    }

    .hst-ingredient-story__block {
        max-width: none;
    }
}

@media (max-width: 640px) {
    .hst-ingredient-story {
        margin: var(--space-2xl) auto;
        padding: 0 var(--space-lg);
    }

    .hst-ingredient-story__content {
        gap: var(--space-2xl);
    }
}

/* Reduced motion: JS also checks this and skips straight to the fully-
   drawn/fully-visible end state, but this is the CSS-only backstop in
   case that JS hasn't run yet on first paint. */
@media (prefers-reduced-motion: reduce) {
    .hst-plant__arch,
    .hst-plant__stem,
    .hst-plant__branch {
        stroke-dashoffset: 0;
    }

    .hst-plant__pop {
        opacity: 1;
        transform: scale(1);
    }
}

/* ---- Phone / tablet: arch-framed ingredient medallion above each block.
   (The big plant is display:none below 1024px; this is its small-screen
   counterpart — same arch + botanical language, no overlap with text.) ---- */
.hst-ingredient-story__medal {
    display: none;
}

.hst-ingredient-story__medal .c1 { color: var(--leaf-1); }
.hst-ingredient-story__medal .c2 { color: var(--leaf-2); }
.hst-ingredient-story__medal .c3 { color: var(--leaf-3); }
.hst-ingredient-story__medal .c4 { color: color-mix(in srgb, var(--leaf-3) 70%, var(--color-background)); }

@media (max-width: 1023px) {
    .hst-ingredient-story__medal {
        display: block;
        /* Same on-screen scale as before (104px per 140 units); the viewBox now
           carries margins so leaves/dew are never clipped, and the negative left
           margin keeps the arch aligned with the text edge. */
        width: 128px;
        margin: 0 0 var(--space-md) -19px;
    }

    .hst-medal__svg {
        display: block;
        width: 100%;
        height: auto;
        overflow: visible;
    }

    /* pathLength=100 in the markup: GSAP rounds this property to whole numbers,
       so a 0-100 scale animates smoothly where a 0-1 scale would jump. */
    .hst-medal__arch {
        stroke-dasharray: 100;
        stroke-dashoffset: 100;
    }

    .hst-medal__pop {
        opacity: 0;
        transform: scale(0);
        transform-box: fill-box;
        transform-origin: 50% 100%;
    }

    .hst-medal__pop--c {
        transform-origin: 50% 50%;
    }

    .hst-medal__drop {
        opacity: 0;
        transform: translateY(-16px);
    }
}

/* If GSAP is unavailable or motion is reduced, JS adds .is-static and the finished art shows. */
.hst-ingredient-story.is-static .hst-medal__arch { stroke-dashoffset: 0; }
.hst-ingredient-story.is-static .hst-medal__pop,
.hst-ingredient-story.is-static .hst-medal__drop { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .hst-medal__arch { stroke-dashoffset: 0; animation: none; }
    .hst-medal__pop, .hst-medal__drop { opacity: 1; transform: none; animation: none; }
}