/*
 * Before / After — success story zone (new case design).
 * Grid as in Case Steps, inside the 1360px container:
 *   heading in the text column (x500), body wide (x100–1340) or in the text column (x500–1300).
 */
.before-after {
    --ba-col-l: 33.8235%;
    --ba-col-r: 7.3529%;
    --ba-wide: 4.4118%;
    width: 100%;
    color: var(--blue, #1C477E);
}

.before-after,
.before-after * {
    box-sizing: border-box;
}

.before-after__head {
    padding-left: var(--ba-col-l);
    padding-right: var(--ba-col-r);
    margin-bottom: 40px;
}

.before-after__title {
    margin: 0;
}

.before-after__body--wide {
    padding-inline: var(--ba-wide);
}

.before-after__body--text {
    padding-left: var(--ba-col-l);
    padding-right: var(--ba-col-r);
}

/* ---------- Two cards ---------- */
.before-after__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.before-after__card {
    padding: 60px 30px;
    font-size: 16px;
    line-height: 25px;
}

.before-after__card--before {
    background: var(--grey, #F6F7F8);
    color: var(--blue-light, #7791B2);
}

.before-after__card--after {
    background:
        radial-gradient(45% 70% at 20% 100%, rgba(214, 196, 255, 0.55) 0%, rgba(214, 196, 255, 0) 100%),
        radial-gradient(40% 80% at 75% 0%, rgba(196, 220, 255, 0.7) 0%, rgba(196, 220, 255, 0) 100%),
        var(--grey, #F6F7F8);
    color: var(--blue, #1C477E);
}

/* Own background per screen (--bg-d / --bg-t / --bg-m are set by the widget). */
.before-after__card.has-bg {
    background-color: transparent;
    background-image: var(--bg-d);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.before-after__card-title {
    margin: 0 0 20px;
}

.before-after__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.before-after__list > li {
    margin: 0;
}

.before-after__list > li + li {
    margin-top: 10px;
}

/* Red star in the "after" card: the theme star (.ul-stars-list) with the brand red fill. */
.before-after__card--after .ul-stars-list ul > li:not([class])::before {
    background-image: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 2.77461L7.0314 1.1644L4.95389 2.36429V0H3.04611V2.36429L0.966338 1.1644L0 2.77461L2.12051 3.99889L0 5.2254L0.968599 6.8356L3.04611 5.63349V8H4.95389V5.63571L7.0314 6.8356L8 5.2254L5.87723 3.99889L8 2.77461Z' fill='%23FB4646'/%3E%3C/svg%3E");
}

/* ---------- Tablet (768 mockup) ---------- */
@media (max-width: 1023px) {
    .before-after__head,
    .before-after__body--wide,
    .before-after__body--text {
        padding-inline: 0;
    }

    .before-after__cards {
        grid-template-columns: minmax(0, 1fr);
    }

    .before-after__card.has-bg {
        background-image: var(--bg-t);
    }
}

/* ---------- Mobile (375 mockup) ---------- */
@media (max-width: 767px) {
    .before-after__card.has-bg {
        background-image: var(--bg-m);
    }
}