/*
 * KlikErotiek — herbruikbare editorial tekstkaders
 *
 * Basisclass:
 *   kr-editorial-frame
 *
 * Varianten:
 *   kr-editorial-frame--left
 *   kr-editorial-frame--right
 *   kr-editorial-frame--wide
 */

.kr-editorial-frame {
    --kr-frame-shift: 0%;
    --kr-frame-coffee: rgba(75, 57, 47, .62);
    --kr-frame-edge: rgba(222, 190, 119, .68);
    --kr-frame-mint: #50efc3;
    --kr-frame-magenta: #ff55d9;

    position: relative;
    z-index: 2;
    width: min(112%, 72rem);
    max-width: none;
    margin: clamp(1.5rem, 4vw, 4rem) 0;
    padding: clamp(1.7rem, 4vw, 3.8rem);
    box-sizing: border-box;
    color: rgba(255, 255, 255, .94);

    /* Koffie links, natuurlijk transparant uitlopend naar rechts. */
    background:
        radial-gradient(circle at 12% 8%,
            rgba(255, 239, 211, .16),
            transparent 32%),
        linear-gradient(90deg,
            var(--kr-frame-coffee) 0%,
            rgba(67, 50, 42, .54) 52%,
            rgba(52, 42, 36, .30) 78%,
            rgba(38, 34, 30, .08) 100%);

    border: 1px solid rgba(222, 190, 119, .30);
    border-right-color: transparent;
    border-radius: .8rem;
    box-shadow:
        -1rem 1.25rem 2.8rem rgba(0, 0, 0, .16),
        inset 0 1px 0 rgba(255, 255, 255, .10);
    transform: translateX(var(--kr-frame-shift));
    isolation: isolate;
}

/* Subtiel lichtverloop, zoals bij de eerdere koffieframes. */
.kr-editorial-frame::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(100deg,
        rgba(255, 255, 255, .07) 0%,
        transparent 48%,
        rgba(255, 255, 255, 0) 100%);
}

/* Eén open hoekaccent; geen dubbele of volledige sierborder. */
.kr-editorial-frame::after {
    content: "";
    position: absolute;
    top: -.35rem;
    left: clamp(1rem, 5vw, 4rem);
    width: clamp(5rem, 14vw, 10rem);
    height: 1.7rem;
    pointer-events: none;
    border-top: 1px solid var(--kr-frame-edge);
    border-left: 1px solid var(--kr-frame-edge);
    border-radius: .15rem 0 0;
    background:
        linear-gradient(90deg,
            transparent 0 62%,
            var(--kr-frame-magenta) 62% 76%,
            transparent 76% 85%,
            var(--kr-frame-mint) 85% 100%) top / 100% 1px no-repeat;
    opacity: .82;
}

.kr-editorial-frame--left {
    --kr-frame-shift: -7%;
}

.kr-editorial-frame--right {
    --kr-frame-shift: 7%;
}

.kr-editorial-frame--wide {
    width: min(120%, 78rem);
    --kr-frame-shift: -10%;
}

.kr-editorial-frame h2,
.kr-editorial-frame h3 {
    margin: 0 0 clamp(1rem, 2.2vw, 1.8rem);
    color: #fff;
    line-height: 1;
    letter-spacing: .025em;
    text-shadow: 0 .12em .45em rgba(0, 0, 0, .25);
}

.kr-editorial-frame h2::after,
.kr-editorial-frame h3::after {
    content: "";
    display: block;
    width: clamp(4rem, 12vw, 8rem);
    height: 1px;
    margin-top: .65rem;
    background: linear-gradient(90deg,
        var(--kr-frame-edge) 0 58%,
        var(--kr-frame-magenta) 58% 72%,
        var(--kr-frame-mint) 72% 84%,
        transparent 84%);
}

.kr-editorial-frame p,
.kr-editorial-frame li {
    color: rgba(255, 255, 255, .88);
    font-size: clamp(1rem, .94rem + .22vw, 1.16rem);
    line-height: 1.8;
}

.kr-editorial-frame strong {
    color: #f1d08b;
}

.kr-editorial-frame a {
    color: #ff8be5;
    text-decoration-color: rgba(80, 239, 195, .70);
    text-underline-offset: .2em;
}

@media (max-width: 767px) {
    .kr-editorial-frame,
    .kr-editorial-frame--left,
    .kr-editorial-frame--right,
    .kr-editorial-frame--wide {
        --kr-frame-shift: 0%;
        width: 100%;
        margin: 1.4rem 0;
        padding: clamp(1.35rem, 6vw, 2rem);
        border-radius: .65rem;
    }
}