/**
 * Home Hero block. Self-contained styles (theme styles.min.css has no in-repo
 * SCSS source). Colors reference the brand tokens in css/brand-tokens.css.
 */

.hero-home {
    padding-top: 32px;
    padding-bottom: 16px;
}

.hero-home__content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Plus Jakarta Sans applies to the hero heading and lead only (both layouts).
   The font is enqueued alongside this stylesheet in functions/resources.php. */
.hero-home__heading,
.hero-home__lead {
    font-family: "Plus Jakarta Sans", sans-serif;
}

.hero-home__heading {
    margin: 0;
    color: #111;
    font-weight: 800;
    font-size: 32px;
    line-height: 1.25;
}

.hero-home__accent {
    /* Inline highlight for any word(s) wrapped in asterisks in the heading. */
    color: var(--kipu-brand-purple); /* #6230C2 */
}

.hero-home__lead {
    margin: 0;
    font-size: 19px;
}

/* Stacked: image sits on top, copy below — add a gap above the copy. */
.hero-home__content {
    margin-top: 24px;
}

.hero-home__image {
    width: 100%;
    height: auto;
    border-radius: 8px; /* Figma radius/xs 8px */
    object-fit: cover;
}

@media (min-width: 992px) {
    .hero-home {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    /* Figma split: the text column is sized to the heading and the image fills
       the rest (roughly one-third / two-thirds), not a 50/50 grid. */
    .hero-home__content {
        flex: 0 0 462px;
        width: 462px;
        max-width: 462px;
        gap: 32px;
        margin-top: 0;
    }

    .hero-home__heading {
        font-size: 40px;
    }

    .hero-home__lead {
        font-size: 21.5px;
    }

    .hero-home__media {
        flex: 1 1 0; /* fill the remaining width without wrapping below the text */
        min-width: 0;
        width: auto;
        max-width: none;
    }

    /* The image is authored first (on top when stacked); on large screens
       image-right sections reverse so the image moves to the right. */
    .hero-home--image-right .hero-home__row {
        flex-direction: row-reverse;
    }
}

/* ---- Full Width layout (hero-home--full-width) --------------------------
   Mobile: image stacked above dark text, no gradient.
   768+:   text overlays the image; a CSS gradient supplies the contrast.
   Variants: --full-width-purple (white text), --full-width-white and
   --full-width-lavender (dark text, purple accent). */

.hero-home--full-width {
    padding-top: 12px;
    padding-bottom: 12px;
}

.hero-home__full-frame {
    position: relative;
}

.hero-home__full-media {
    position: relative;
    overflow: hidden;
    border-radius: 8px; /* Figma radius/xs 8px */
}

/* Scoped under __full-media so the rules also win over the component
   library's own img normalization (.cl-render img). */
.hero-home__full-media .hero-home__full-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1300 / 675;
    object-fit: cover;
    border-radius: 8px;
}

/* Decorative gradient carrier; only shown once the text overlays the image. */
.hero-home__full-media::after {
    content: "";
    position: absolute;
    inset: 0;
    display: none;
    pointer-events: none;
}

.hero-home__full-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 24px;
}

@media (min-width: 768px) {
    .hero-home--full-width {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    /* Tablet crops the image to a fixed height per Figma. */
    .hero-home__full-media .hero-home__full-image {
        aspect-ratio: auto;
        height: 506px;
    }

    .hero-home__full-media::after {
        display: block;
    }

    .hero-home--full-width-purple .hero-home__full-media::after {
        background: linear-gradient(90deg, var(--kipu-brand-purple, #6230c2) 0%, rgba(98, 48, 194, 0) 75.96%);
    }

    .hero-home--full-width-white .hero-home__full-media::after {
        background: linear-gradient(90deg, #fff 20.19%, rgba(255, 255, 255, 0) 68.75%);
    }

    .hero-home--full-width-lavender .hero-home__full-media::after {
        background: linear-gradient(90deg, #eee9fc 24.52%, rgba(238, 233, 252, 0) 69.23%);
    }

    .hero-home__full-content {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
        width: 50%;
        justify-content: center;
        gap: 32px;
        margin-top: 0;
        padding-left: 30px;
    }

    /* Purple variant: all copy renders white over the gradient. */
    .hero-home--full-width-purple .hero-home__heading,
    .hero-home--full-width-purple .hero-home__accent,
    .hero-home--full-width-purple .hero-home__lead {
        color: #fff;
    }
}

@media (min-width: 992px) {
    /* The base .hero-home rule bumps padding to 48px at 992; full width stays 24px. */
    .hero-home--full-width {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .hero-home__full-media .hero-home__full-image {
        height: auto;
        aspect-ratio: 1300 / 675;
    }

    .hero-home__full-content {
        width: 42%;
        padding-left: 40px;
    }

    .hero-home--full-width .hero-home__heading {
        line-height: 1.3; /* Figma; the two-columns layout uses 1.25 */
    }
}