/**
 * Kasvatusohje: the guides' own template (pohja.php) and the step
 * navigation (applari_kasvatusohje_steps_nav) at the end of each step guide
 * in a series, such as the giant pumpkin steps.
 *
 * Template parts (pohja.php, GP elements "Kasvatusohje: otsake / runko / loppu"):
 *   .kasvatusohje-otsake.color-section > .kasvatusohje-otsake-rivi.text-image.text-image--wide.text-image--reverse
 *     > .text-image-media > figure > img  +  .text-image-content > p.kasvatusohje-yla,
 *       h1.kasvatusohje-otsikko, p.kasvatusohje-alaotsikko, p.kasvatusohje-ingressi,
 *       p.kasvatusohje-merkit > .chip, p.kasvatusohje-napit
 *     (.kasvatusohje-otsake-rivi--teksti without an image)
 *   nav.kasvatusohje-vaiherivi > ol > li > a[aria-current] > .kasvatusohje-vaiherivi__nro   (a step)
 *   .kasvin-tiedot.fact-strip-section (pattern in the content, values may hold <small>)
 *   .kasvatusohje-vaiheet.color-section > .kasvatusohje-sisus > .cards.cards--carousel   (overview)
 *   .kasvatusohje-ohje (the reading column, article styles) and .ennatys-osio (pattern)
 *
 * Also an editor style (add_editor_style): the editor's root container is the
 * reading column (.post-content, article-editor.js), so the sections around
 * the guide break out to full width there, and the Kasvin tiedot grid below
 * applies to GB's editor containers as well.
 *
 * Structure:
 *   nav.kasvatusohje-steps
 *     p.kasvatusohje-steps__label          "Vaihe 3/7 · <a>overview guide</a>"
 *     .kasvatusohje-steps__links
 *       a.kasvatusohje-steps__link--prev   span.kasvatusohje-steps__dir + step name
 *       a.kasvatusohje-steps__link--next
 *
 * Stacked on phones, side by side from 768px. The next step keeps the right
 * column on the first step too, where there is no previous one.
 */

.kasvatusohje-steps {
    margin-top: 3em;
    padding-top: 24px;
    border-top: 1px solid var(--border-clr);
}

.post-content .kasvatusohje-steps__label {
    margin: 0 0 16px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-clr);
}

.kasvatusohje-steps__label a {
    color: inherit;
}

.kasvatusohje-steps__links {
    display: grid;
    gap: 12px;
}

/* Same specificity as article.css's underlined links; this file loads after it. */
.post-content .kasvatusohje-steps a.kasvatusohje-steps__link {
    display: block;
    padding: 16px 20px;
    border: 1px solid var(--border-clr);
    border-radius: 12px;
    color: var(--heading-clr);
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    transition: border-color var(--transition-speed) var(--transition-timing-function);
}

.post-content .kasvatusohje-steps a.kasvatusohje-steps__link:hover {
    border-color: var(--accent-clr);
}

.kasvatusohje-steps__dir {
    display: block;
    margin-bottom: 4px;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--font-clr);
}

.kasvatusohje-steps__link--prev .kasvatusohje-steps__dir::before {
    content: "← ";
}

.kasvatusohje-steps__link--next .kasvatusohje-steps__dir::after {
    content: " →";
}

@media only screen and (min-width: 768px) {
    .kasvatusohje-steps__links {
        grid-template-columns: 1fr 1fr;
    }

    .kasvatusohje-steps__link--next {
        grid-column: 2;
        text-align: right;
    }
}


/* ==== Own template (pohja.php) ==== */

/* Header: text left, the guide's own image right to the viewport edge (the
   base text-image--wide layout); without an image the text takes the row. */
.gb-container.kasvatusohje-otsake.color-section {
    padding: clamp(16px, 4vw, 48px) 0 clamp(24px, 4vw, 56px);
}

.kasvatusohje-otsake-rivi {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kasvatusohje-otsake-rivi .text-image-media {
    padding: 0 var(--mobile-side-padding);
}

.kasvatusohje-otsake-rivi .text-image-media figure {
    position: relative;
    height: clamp(300px, 95vw, 440px);
    margin: 0;
    overflow: hidden;
    border-radius: 18px;
}

.kasvatusohje-otsake-rivi .text-image-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kasvatusohje-otsake-rivi--teksti {
    max-width: calc(var(--container-width) + 2 * var(--mobile-side-padding));
    margin: 0 auto;
    padding: 0 var(--mobile-side-padding);
}

.kasvatusohje-otsake-rivi--teksti .text-image-content {
    align-self: stretch;
    width: auto;
    max-width: 52rem;
    padding: 0;
}

.kasvatusohje-otsake .text-image-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
}

.kasvatusohje-otsake .text-image-content > * {
    margin: 0;
}

.kasvatusohje-yla a {
    color: inherit;
    text-decoration: none;
}

.kasvatusohje-yla a:hover {
    text-decoration: underline;
}

.kasvatusohje-otsikko {
    font-size: clamp(2.4rem, 6vw, 5rem);
    line-height: 0.95;
}

/* Long plant names ("Elefanttivalkosipuli") do not fit a phone line in the
   title font: they hyphenate there, or break as a last resort. Wider screens
   break between words only. */
.kasvatusohje-otsikko,
.kasvin-tiedot .fact-strip-title {
    overflow-wrap: break-word;
}

@media only screen and (max-width: 767px) {
    .kasvatusohje-otsikko,
    .kasvin-tiedot .fact-strip-title {
        hyphens: auto;
    }
}

.kasvatusohje-alaotsikko {
    margin-top: -6px;
    font-style: italic;
}

.kasvatusohje-ingressi {
    max-width: 46ch;
    font-size: 1.1em;
}

.kasvatusohje-merkit {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.kasvatusohje-merkit .chip {
    padding: 5px 12px;
    border-radius: 999px;
    background-color: var(--stem-clr);
    color: var(--btn-font-clr);
    font-size: 0.85rem;
    font-weight: 700;
}

.kasvatusohje-merkit abbr {
    text-decoration: none;
}

.kasvatusohje-napit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 28px;
    margin-top: 6px !important;
}

@media only screen and (min-width: 768px) {
    .kasvatusohje-otsake-rivi.text-image {
        flex-direction: row-reverse;
        gap: 0;
    }

    .kasvatusohje-otsake-rivi .text-image-media {
        padding: 0;
    }

    .kasvatusohje-otsake-rivi .text-image-media figure {
        height: 100%;
        min-height: 480px;
        border-radius: 28px 0 0 28px;
    }
}

/* A step: the row of all steps under the header, the current one marked;
   scrolls sideways when it does not fit. */
.kasvatusohje-vaiherivi {
    padding: 14px 0;
    overflow-x: auto;
    background-color: var(--bg-clr);
    scrollbar-width: thin;
}

.kasvatusohje-vaiherivi ol {
    display: flex;
    gap: 8px;
    max-width: calc(var(--container-width) + 2 * var(--mobile-side-padding));
    margin: 0 auto;
    padding: 0 var(--mobile-side-padding);
    list-style: none;
}

.kasvatusohje-vaiherivi li {
    flex: 0 0 auto;
    margin: 0;
}

.kasvatusohje-vaiherivi a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 6px;
    border-radius: 999px;
    background-color: var(--neutral-clr);
    color: var(--font-clr);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.kasvatusohje-vaiherivi a:hover {
    color: var(--link-hover-clr);
}

.kasvatusohje-vaiherivi__nro {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--accent-soft-clr);
    font-family: var(--title-font);
    font-weight: 400;
}

.kasvatusohje-vaiherivi a[aria-current] {
    background-color: var(--accent-clr);
    color: var(--btn-font-clr);
}

.kasvatusohje-vaiherivi a[aria-current] .kasvatusohje-vaiherivi__nro {
    background-color: var(--bg-clr);
    color: var(--heading-clr);
}


/* An overview: the steps as a card row. */
.kasvatusohje-sisus {
    max-width: calc(var(--container-width) + 2 * var(--mobile-side-padding));
    margin: 0 auto;
    padding: 0 var(--mobile-side-padding);
}

.kasvatusohje-vaiheet h2 {
    margin-top: 8px;
}

.kasvatusohje-vaiheet__teksti {
    max-width: 60ch;
    margin-bottom: 32px;
}

/* The sections are the third palette; the cards are its neutral (white) tone. */
.kasvatusohje-vaiheet .card,
.kaksi-sarjaa .card {
    background-color: var(--neutral-clr);
}

.kasvatusohje-vaiheet .card-vaihe {
    margin-bottom: 0;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--stem-clr);
}

/* Editor: the sections around the guide are full width, as on the page. GB
   wraps a top-level block in .gb-is-root-block and marks a full-width
   container with data-align="full", not .alignfull, so article.css's
   breakout does not reach it; the wrapper breaks out instead. */
.is-root-container.post-content > .gb-is-root-block.gb-root-block-generateblocks-container:has(> [data-align="full"]:is(.kasvin-tiedot, .kaksi-sarjaa, .ennatys-osio)) {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* End element: the heading of the guides row comes from [applari_kasvatusohje_ryhma]. */
.kasvatusohje-muut__otsikko {
    margin-bottom: 32px;
}