/**
 * Hero-Bild-Styles (Baustein hero_section).
 * Basis-Effekte aus der Varianten-Bibliothek — Auswahl über Prop imageStyle.
 */

/*
 * Breite über --slpb-hero-img-w (vom Renderer), sonst 100 %.
 * Ohne feste px-Referenz kollabiert min(100%, …px) am Kind im Flex-Spacer-Layout.
 */
.slpb-hero-img-fx {
    position: relative;
    box-sizing: border-box;
    flex: 0 0 auto;
    width: min(100%, var(--slpb-hero-img-w, 100%));
    max-width: 100%;
}

.slpb-hero-img-fx > .slpb-hero-section__image {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
}

.slpb-hero-img-fx.fx-offset > .slpb-hero-section__image {
    position: relative;
    z-index: 1;
    border-radius: var(--r);
    box-shadow:
        var(--ox) var(--oy) 0 var(--c1),
        0 20px 44px rgb(23 50 77 / 16%);
}

.slpb-hero-img-fx.fx-outline {
    padding: var(--gap);
    border: var(--bw) solid var(--c1);
    outline: var(--ow) solid var(--c2);
    outline-offset: var(--oo);
    background: #fff;
    border-radius: var(--r);
}

.slpb-hero-img-fx.fx-outline > .slpb-hero-section__image {
    border-radius: calc(var(--r) * 0.55);
    overflow: hidden;
}

.slpb-hero-img-fx.fx-shadow > .slpb-hero-section__image {
    border-radius: var(--r);
    border: var(--bw) solid #fff;
    box-shadow: var(--sx) var(--sy) var(--blur) var(--spread) rgb(23 50 77 / var(--alpha));
    transform: rotate(var(--rot));
    overflow: hidden;
}

.slpb-hero-img-fx.fx-matte {
    height: auto;
    padding: var(--pad);
    border: var(--bw) solid var(--c2);
    background: var(--c1);
    box-shadow: 0 18px 42px rgb(23 50 77 / 12%);
    border-radius: var(--r);
}

.slpb-hero-img-fx.fx-matte > .slpb-hero-section__image {
    border-radius: var(--ir);
    overflow: hidden;
}

.slpb-hero-img-fx.fx-color {
    padding: var(--gap);
    border-radius: var(--r);
    background: linear-gradient(var(--angle), var(--c1) 0 var(--stop), var(--c2) var(--stop) 100%);
    box-shadow: 0 18px 42px rgb(23 50 77 / 14%);
}

.slpb-hero-img-fx.fx-color > .slpb-hero-section__image {
    border-radius: var(--ir);
    overflow: hidden;
}

.slpb-hero-img-fx.fx-corners {
    padding: 15px;
    background:
        linear-gradient(var(--c1) 0 0) left top / var(--size) var(--thick) no-repeat,
        linear-gradient(var(--c1) 0 0) left top / var(--thick) var(--size) no-repeat,
        linear-gradient(var(--c2) 0 0) right bottom / var(--size) var(--thick) no-repeat,
        linear-gradient(var(--c2) 0 0) right bottom / var(--thick) var(--size) no-repeat;
}

.slpb-hero-img-fx.fx-corners > .slpb-hero-section__image {
    border-radius: var(--r);
    box-shadow: 0 16px 38px rgb(23 50 77 / 14%);
    overflow: hidden;
}

.slpb-hero-img-fx.fx-halo::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: var(--inset);
    border-radius: var(--blob);
    background: linear-gradient(var(--angle), var(--c1), var(--c2));
    filter: blur(var(--blur));
    opacity: var(--alpha);
}

.slpb-hero-img-fx.fx-halo > .slpb-hero-section__image {
    position: relative;
    z-index: 1;
    border-radius: var(--r);
    box-shadow: 0 18px 38px rgb(23 50 77 / 12%);
    overflow: hidden;
}

.slpb-hero-img-fx.fx-shape {
    filter: drop-shadow(0 18px 22px rgb(23 50 77 / 16%));
}

.slpb-hero-img-fx.fx-shape > .slpb-hero-section__image {
    clip-path: var(--clip);
    border-radius: var(--r);
}

.slpb-hero-img-fx.fx-stack::before,
.slpb-hero-img-fx.fx-stack::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--r);
}

.slpb-hero-img-fx.fx-stack::before {
    transform: var(--t1);
    background: var(--c1);
}

.slpb-hero-img-fx.fx-stack::after {
    z-index: 1;
    transform: var(--t2);
    background: var(--c2);
}

.slpb-hero-img-fx.fx-stack > .slpb-hero-section__image {
    position: relative;
    z-index: 2;
    border-radius: var(--r);
    box-shadow: 0 18px 40px rgb(23 50 77 / 15%);
    overflow: hidden;
}

.slpb-hero-img-fx.fx-editorial {
    height: auto;
    padding: var(--pad);
    border-radius: var(--r);
    background: var(--c1);
    box-shadow: 0 22px 48px rgb(23 50 77 / 20%);
}

.slpb-hero-img-fx.fx-editorial::before {
    content: "";
    position: absolute;
    z-index: 3;
    background: var(--c2);
}

.slpb-hero-img-fx.fx-editorial[data-edge="left"]::before {
    inset: 0 auto 0 0;
    width: var(--stripe);
}

.slpb-hero-img-fx.fx-editorial[data-edge="right"]::before {
    inset: 0 0 0 auto;
    width: var(--stripe);
}

.slpb-hero-img-fx.fx-editorial[data-edge="top"]::before {
    inset: 0 0 auto 0;
    height: var(--stripe);
}

.slpb-hero-img-fx.fx-editorial[data-edge="bottom"]::before {
    inset: auto 0 0 0;
    height: var(--stripe);
}

.slpb-hero-img-fx.fx-editorial > .slpb-hero-section__image {
    position: relative;
    z-index: 1;
    border-radius: var(--ir);
    filter: var(--filter);
    overflow: hidden;
}