/*
 * Case Steps — steps zone of a success story (new case design).
 * Desktop grid from the 1440 mockup, inside the 1360px container:
 *   text column x500–1300  -> left 460/1360, right 100/1360;
 *   wide blocks x100–1340  -> 60/1360 on both sides;
 *   full blocks            -> the whole container.
 */
.case-steps {
    --cs-col-l: 33.8235%;
    --cs-col-r: 7.3529%;
    --cs-wide: 4.4118%;
    --cs-line: #F6F7F8;
    --cs-divider: #EEF1F5;
    position: relative;
    width: 100%;
    color: var(--blue, #1C477E);
}

.case-steps,
.case-steps * {
    box-sizing: border-box;
}

.case-steps__block {
    position: relative;
    z-index: 1;
}

.case-steps__block--text {
    padding-left: var(--cs-col-l);
    padding-right: var(--cs-col-r);
}

.case-steps__block--wide {
    padding-inline: var(--cs-wide);
}

/* ---------- Spacing between blocks (desktop) ---------- */
.case-steps__gap--first { margin-top: 0; }
.case-steps__gap--step { margin-top: 120px; }
.case-steps__gap--after-step { margin-top: 40px; }
.case-steps__gap--stage { margin-top: 40px; }
.case-steps__gap--after-stage { margin-top: 20px; }
.case-steps__gap--text { margin-top: 20px; }
.case-steps__gap--flow { margin-top: 40px; }
.case-steps__gap--media { margin-top: 20px; }
.case-steps__gap--side { margin-top: 60px; }
.case-steps__gap--after-side { margin-top: 0; }

/* ---------- Headings ---------- */
.case-steps__heading {
    margin: 0;
}

/* ---------- Heading with star (theme .heading-with-star draws the star) ---------- */
.case-steps__star-subtitle > * {
    margin: 0;
}

.case-steps__star-subtitle > * + * {
    margin-top: 20px;
}

/* ---------- Step heading ---------- */
.case-steps__step-title {
    position: relative;
    margin: 0;
    color: var(--blue, #1C477E);
}

.case-steps__step-num {
    position: absolute;
    top: 3px;
    left: -28px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    color: var(--blue, #1C477E);
}

/* ---------- Stage heading ---------- */
.case-steps__stage-label {
    position: absolute;
    top: 0;
    left: var(--cs-wide);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    padding: 0 12px 0 10px;
    border: 1px solid var(--grey-border, #E8EDF2);
    border-radius: 15px;
    white-space: nowrap;
    color: var(--blue, #1C477E);
}

.case-steps__stage-label::before {
    content: '';
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    background-color: var(--red, #FB4646);
    -webkit-mask: var(--star) center / contain no-repeat;
    mask: var(--star) center / contain no-repeat;
}

.case-steps__stage-title {
    margin: 0;
    color: var(--blue, #1C477E);
}

/* ---------- Text ---------- */
.case-steps__text {
    font-size: 16px;
    line-height: 25px;
}

.case-steps__text > * {
    margin: 0;
}

.case-steps__text > * + * {
    margin-top: 20px;
}

.case-steps__text ul,
.case-steps__text ol {
    padding: 0;
    list-style: none;
}

.case-steps__text li {
    position: relative;
    margin: 0;
}

.case-steps__text li + li {
    margin-top: 10px;
}

.case-steps__text ul > li {
    padding-left: 25px;
}

/* Star bullets come from the theme via the .ul-stars-list class (style.css). Dash marker: */
.case-steps__text--dash ul > li::before {
    content: '\2014';
    position: absolute;
    top: 0;
    left: 0;
    font-size: 16px;
    line-height: 25px;
    color: var(--blue-light, #7791B2);
}

.case-steps__text ol {
    counter-reset: case-steps-ol;
}

.case-steps__text ol > li {
    padding-left: 40px;
    counter-increment: case-steps-ol;
}

.case-steps__text ol > li::before {
    content: counter(case-steps-ol, decimal-leading-zero);
    position: absolute;
    top: 0;
    left: 0;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    line-height: 25px;
    color: var(--blue-light, #7791B2);
}

.case-steps__text a {
    color: var(--blue-light, #7791B2);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.case-steps__text a:hover {
    color: var(--blue, #1C477E);
}

/* ---------- Images ---------- */
.case-steps__picture,
.case-steps__img {
    display: block;
    width: 100%;
    height: auto;
}

.case-steps__grid {
    display: grid;
    grid-template-columns: repeat(var(--cols-d, 2), minmax(0, 1fr));
    gap: 20px;
}

/* Desktop rows of different length and proportions: one grid per row. */
.case-steps__grid--rows {
    grid-template-columns: minmax(0, 1fr);
}

.case-steps__grid-row {
    display: grid;
    grid-template-columns: var(--tpl);
    gap: 20px;
}

.case-steps__grid-panel {
    padding: 30px;
    background-color: var(--grey, #F6F7F8);
}

.case-steps__grid .case-steps__img {
    height: 100%;
    object-fit: cover;
}

/* "Crop images" off: images keep their own proportions on every screen (overrides the tablet/mobile frame too). */
.case-steps__grid.is-uncropped {
    align-items: start;
}

.case-steps__grid.is-uncropped .case-steps__grid-row {
    align-items: start;
}

.case-steps__grid.is-uncropped .case-steps__img {
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
}

/* ---------- Numbers card ---------- */
.case-steps__stats {
    padding: 40px;
    border: 1px solid #EEF3FF;
    border-radius: 30px;
    background: var(--white, #FFFFFF);
    box-shadow: inset 0 0 30px 4px #E4ECFF;
}

.case-steps__stats-title {
    margin: 0;
}

.case-steps__stats-subtitle {
    margin-top: 10px;
    font-size: 16px;
    line-height: 25px;
}

.case-steps__stats-items {
    display: flex;
    margin-top: 30px;
}

.case-steps__stats-item {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 30px;
    border-left: 1px solid var(--cs-divider);
}

.case-steps__stats-item:first-child {
    padding-left: 0;
    border-left: 0;
}

.case-steps__stats-item + .case-steps__stats-item {
    margin-left: 30px;
}

/* Own column widths (--tpl-d / --tpl-t / --tpl-m from the widget): a grid instead of the auto row. */
.case-steps__stats-items.has-d {
    display: grid;
    grid-template-columns: var(--tpl-d);
    column-gap: 30px;
}

.case-steps__stats-items[class*="has-"] .case-steps__stats-item + .case-steps__stats-item {
    margin-left: 0;
}

/* The digits keep their size; a narrow column wraps the prefix and the range ("40-<wbr>50%") instead. */
.case-steps__stats-value {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 10px;
    row-gap: 0;
    font-size: 60px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.02em;
}

/* A column is never narrower than its widest unbreakable piece, so digits do not run into the next one. */
.case-steps__stats-item {
    min-width: min-content;
}

.case-steps__stats-prefix {
    font-size: 16px;
    line-height: 25px;
    letter-spacing: 0.01em;
}

.case-steps__stats-caption {
    /* Captions wrap inside the column; only the numbers decide how wide each column is. */
    width: 0;
    min-width: 100%;
    margin-top: 30px;
    font-size: 16px;
    line-height: 25px;
}

/* ---------- Highlight card ---------- */
.case-steps__highlight {
    padding: 40px;
    border: 1px solid #EEF3FF;
    border-radius: 30px;
    background: var(--white, #FFFFFF);
    box-shadow: inset 0 0 30px 4px #E4ECFF;
}

/* .white is only for the white star bullets; the text colour stays the card's own. */
.case-steps__highlight .ul-stars-list.white {
    color: inherit;
}

/* Own background per screen (--bg-d / --bg-t / --bg-m are set by the widget). */
.case-steps__highlight.has-bg {
    border: 0;
    box-shadow: none;
    background-color: transparent;
    background-image: var(--bg-d);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* ---------- Side title (stage heading, style "side") ---------- */
.case-steps__block--full.has-line {
    border-top: 1px solid var(--cs-line);
}

/* The block only holds the space above; the title sits in the left column next to the following block. */
.case-steps__block--stage.case-steps__gap--side {
    height: 70px;
}

.case-steps__side {
    position: absolute;
    top: 70px;
    left: var(--cs-wide);
    width: calc(var(--cs-col-l) - var(--cs-wide) - 40px);
}

/* ---------- Badges (side title, label above a highlight card) ---------- */
.case-steps__badge {
    display: inline-flex;
    align-items: center;
    height: 24px;
    margin-top: 10px;
    padding: 0 12px;
    border-radius: 12px;
    background: var(--purple, #B6A1FF);
    color: var(--white, #FFFFFF);
    white-space: nowrap;
}

.case-steps__badge--red {
    background: var(--red, #FB4646);
}

.case-steps__block--highlight > .case-steps__badge {
    margin: 0 0 10px;
}

/* ---------- Highlight card: title and tables ---------- */
.case-steps__highlight-title {
    margin-bottom: 20px;
}

.case-steps__highlight table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    line-height: 25px;
}

.case-steps__highlight th,
.case-steps__highlight td {
    padding: 3px 20px 3px 0;
    border: 0;
    text-align: left;
    vertical-align: top;
    background: none;
}

.case-steps__highlight th {
    padding-bottom: 10px;
    font-weight: 400;
    opacity: 0.6;
}

/* ---------- Image caption ---------- */
.case-steps__figure {
    position: relative;
    margin: 0;
}

.case-steps__caption {
    position: absolute;
    bottom: 30px;
    max-width: 300px;
    font-size: 14px;
    line-height: 20px;
    color: var(--white, #FFFFFF);
}

.case-steps__caption--left {
    left: 40px;
}

.case-steps__caption--right {
    right: 40px;
    text-align: right;
}

/* ---------- Icon cards ---------- */
.case-steps__features {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
    border-bottom: 1px solid var(--cs-line);
}

.case-steps__feature {
    position: relative;
    padding: 20px 60px 20px 50px;
    border-top: 1px solid var(--cs-line);
}

/* Vertical divider: 20px away from the horizontal lines above and below. */
.case-steps__feature + .case-steps__feature::before {
    content: '';
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 0;
    width: 1px;
    background: var(--cs-divider);
}

/* Mockup: the first card has no divider on its left and a narrower text column. */
.case-steps__feature:first-child {
    padding-right: 80px;
}

/* Cards in the text column start at the column edge. */
.case-steps__block--text .case-steps__feature {
    padding: 20px 30px;
}

.case-steps__block--text .case-steps__feature:first-child {
    padding-left: 0;
}

.case-steps__feature-title {
    margin: 0 0 30px;
}

.case-steps__feature.is-featured {
    border-top: 0;
    border-radius: 30px;
    padding: 30px 40px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.case-steps__feature.is-featured::before,
.case-steps__feature.is-featured + .case-steps__feature::before {
    display: none;
}

.case-steps__feature.is-white {
    color: var(--white, #FFFFFF);
}

.case-steps__feature-icon {
    height: 80px;
    margin-bottom: 30px;
}

.case-steps__feature-img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 80px;
    object-fit: contain;
    object-position: left center;
}

.case-steps__feature-text {
    font-size: 16px;
    line-height: 25px;
}

/* ---------- Table ---------- */
.case-steps__table {
    /* Line colours are repeated here: the table is also used outside .case-steps (Before / After widget). */
    --cs-line: #F6F7F8;
    --cs-divider: #EEF1F5;
    display: grid;
    /* --tpl: own column proportions set by the widget; otherwise equal columns. */
    grid-template-columns: var(--tpl, repeat(var(--cols, 3), minmax(0, 1fr)));
    column-gap: 20px;
}

.case-steps__table-col {
    display: contents;
}

/* Per-value title bars exist only for the mobile "by rows" layout. */
.case-steps__table-label {
    display: none;
}

.case-steps__table-head {
    grid-row: var(--r);
    grid-column: var(--c);
    display: flex;
    align-items: flex-end;
    min-height: 150px;
    margin-bottom: 10px;
    padding: 20px;
    border-radius: 30px 0 0 0;
    background:
        radial-gradient(90% 70% at 25% 100%, rgba(236, 240, 255, 0.9) 0%, rgba(236, 240, 255, 0) 100%),
        var(--grey, #F6F7F8);
    color: var(--blue, #1C477E);
}

.case-steps__table-head.is-dark {
    background:
        radial-gradient(110% 120% at 100% 0%, #22A2AB 0%, rgba(34, 162, 171, 0) 75%),
        linear-gradient(90deg, #0A3762 0%, #0F4D74 100%);
    color: var(--white, #FFFFFF);
}

.case-steps__table-head.is-teal {
    background:
        radial-gradient(120% 110% at 100% 0%, #22A2AB 0%, rgba(34, 162, 171, 0) 80%),
        linear-gradient(180deg, #1B8E9F 0%, #135F7E 100%);
    color: var(--white, #FFFFFF);
}

.case-steps__table-cell.is-muted {
    color: var(--blue-light, #7791B2);
}

.case-steps__table-cell {
    grid-row: var(--r);
    grid-column: var(--c);
    position: relative;
    padding: 12px 20px 8px 20px;
    font-size: 16px;
    line-height: 25px;
}

/* Row lines run through the column gap, so they belong to the cell plus the gap on its right. */
.case-steps__table-cell::after {
    content: '';
    position: absolute;
    inset: 0 -20px 0 0;
    border-top: 1px solid var(--cs-line);
    pointer-events: none;
}

.case-steps__table-cell.is-last-row::after {
    border-bottom: 1px solid var(--cs-line);
}

.case-steps__table-col.is-last .case-steps__table-cell::after {
    right: 0;
}

/* Vertical divider in the middle of the column gap. */
.case-steps__table-col + .case-steps__table-col .case-steps__table-cell::before {
    content: '';
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: -10px;
    width: 1px;
    background: var(--cs-divider);
}

/* ---------- Decor ---------- */
.case-steps__block--decor {
    z-index: 0;
    height: 0;
}

.case-steps__decor {
    position: absolute;
    top: -80px;
    left: -40px;
    width: 470px;
    pointer-events: none;
}

.case-steps__decor-img {
    display: block;
    width: 100%;
    height: auto;
}

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

    .case-steps__gap--step { margin-top: 100px; }
    .case-steps__gap--stage { margin-top: 60px; }
    .case-steps__gap--media { margin-top: 40px; }

    .case-steps__stage-label {
        position: static;
        margin-bottom: 20px;
    }

    .case-steps__stage-title {
        display: block;
    }

    .case-steps__grid,
    .case-steps__grid--rows {
        grid-template-columns: repeat(var(--cols-t, 1), minmax(0, 1fr));
        gap: 40px;
    }

    .case-steps__grid-row {
        display: contents;
    }

    /* Tablet/mobile mockups crop grid images like a single photo (640x354 / 295x163). */
    .case-steps__grid .case-steps__img {
        width: 100%;
        height: auto;
        aspect-ratio: 640 / 354;
    }

    /* An own tablet frame (also used on mobile when there is no mobile one) is already composed: shown whole. */
    .case-steps__grid-item.has-own-t .case-steps__img {
        aspect-ratio: auto;
        object-fit: contain;
    }

    .case-steps__grid-panel {
        padding: 20px;
    }

    .case-steps__gap--side { margin-top: 60px; }
    .case-steps__gap--after-side { margin-top: 20px; }

    .case-steps__block--stage.case-steps__gap--side {
        height: auto;
        padding-top: 40px;
    }

    .case-steps__side {
        position: static;
        width: auto;
    }

    .case-steps__stats {
        padding: 40px 20px;
    }

    .case-steps__stats-item {
        padding-left: 20px;
    }

    .case-steps__stats-item + .case-steps__stats-item {
        margin-left: 20px;
    }

    .case-steps__stats-value {
        font-size: 45px;
    }

    .case-steps__stats-caption {
        margin-top: 20px;
    }

    .case-steps__stats-items.has-d {
        display: flex;
    }

    .case-steps__stats-items.has-d:not(.has-t) .case-steps__stats-item + .case-steps__stats-item {
        margin-left: 20px;
    }

    .case-steps__stats-items.has-t {
        display: grid;
        grid-template-columns: var(--tpl-t);
        column-gap: 20px;
    }

    .case-steps__features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 90%;
    }

    /* Own column proportions are a desktop setting: the 768 mockup has equal columns. */
    .case-steps__table {
        grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
    }

    .case-steps__feature,
    .case-steps__feature:first-child,
    .case-steps__block--text .case-steps__feature {
        padding: 20px 30px 20px 30px;
    }

    .case-steps__feature:nth-child(odd),
    .case-steps__block--text .case-steps__feature:nth-child(odd) {
        padding-left: 0;
    }

    .case-steps__feature:nth-child(odd)::before {
        display: none;
    }

    .case-steps__feature:nth-child(even)::before {
        content: '';
        position: absolute;
        top: 20px;
        bottom: 20px;
        left: 0;
        width: 1px;
        background: var(--cs-divider);
    }

    .case-steps__highlight.has-bg {
        background-image: var(--bg-t);
    }

    .case-steps__decor {
        top: -135px;
        right: 0;
        left: auto;
        width: 300px;
    }
}

/* ---------- Mobile (375 mockup) ---------- */
@media (max-width: 767px) {
    .case-steps__gap--step { margin-top: 80px; }
    .case-steps__gap--after-step { margin-top: 30px; }
    .case-steps__gap--stage { margin-top: 30px; }
    .case-steps__gap--flow { margin-top: 30px; }
    .case-steps__gap--media { margin-top: 20px; }

    .case-steps__step-num {
        display: none;
    }

    .case-steps__grid,
    .case-steps__grid--rows {
        grid-template-columns: repeat(var(--cols-m, 1), minmax(0, 1fr));
        gap: 20px;
    }

    .case-steps__grid-item.has-own-m .case-steps__img {
        aspect-ratio: auto;
        object-fit: contain;
    }

    .case-steps__stats-items {
        flex-direction: column;
        text-align: center;
    }

    .case-steps__stats-item,
    .case-steps__stats-item + .case-steps__stats-item {
        margin-left: 0;
        padding: 20px 0;
        border-left: 0;
    }

    .case-steps__stats-item:first-child {
        padding-top: 0;
    }

    .case-steps__stats-item:last-child {
        padding-bottom: 0;
    }

    .case-steps__stats-item + .case-steps__stats-item {
        border-top: 1px solid var(--cs-divider);
    }

    .case-steps__stats-value {
        justify-content: center;
        font-size: 40px;
    }

    .case-steps__stats-items.has-d,
    .case-steps__stats-items.has-t {
        display: flex;
    }

    /* Own mobile widths: a row with vertical dividers instead of the centred column. */
    .case-steps__stats-items.has-m {
        display: grid;
        grid-template-columns: var(--tpl-m);
        column-gap: 15px;
        text-align: left;
    }

    .case-steps__stats-items.has-m .case-steps__stats-item,
    .case-steps__stats-items.has-m .case-steps__stats-item + .case-steps__stats-item {
        padding: 0 0 0 15px;
        border-top: 0;
        border-left: 1px solid var(--cs-divider);
    }

    .case-steps__stats-items.has-m .case-steps__stats-item:first-child {
        padding-left: 0;
        border-left: 0;
    }

    /* Several numbers in one row on 375: smaller digits, the prefix may take its own line. */
    .case-steps__stats-items.has-m .case-steps__stats-value {
        flex-wrap: wrap;
        justify-content: flex-start;
        column-gap: 6px;
        row-gap: 0;
        font-size: 28px;
        white-space: normal;
    }

    .case-steps__stats-items.has-m .case-steps__stats-caption {
        margin-top: 15px;
    }

    .case-steps__features {
        grid-template-columns: minmax(0, 1fr);
        max-width: none;
    }

    .case-steps__feature,
    .case-steps__feature:first-child,
    .case-steps__feature:nth-child(odd),
    .case-steps__block--text .case-steps__feature,
    .case-steps__block--text .case-steps__feature:nth-child(odd) {
        padding: 20px 0;
    }

    .case-steps__feature::before,
    .case-steps__feature:nth-child(even)::before {
        display: none;
    }

    .case-steps__table {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .case-steps__table-col {
        display: block;
    }

    .case-steps__table-cell {
        padding-right: 20px;
    }

    .case-steps__table-cell::after,
    .case-steps__table-col.is-last .case-steps__table-cell::after {
        right: 0;
    }

    .case-steps__table-col + .case-steps__table-col .case-steps__table-cell::before {
        display: none;
    }

    /* "Mobile: by rows" (375 mockup): one column, row by row; every value sits under its own title bar. */
    .case-steps__table.is-mobile-rows {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .case-steps__table.is-mobile-rows .case-steps__table-col {
        display: contents;
    }

    .case-steps__table.is-mobile-rows .case-steps__table-head {
        display: none;
    }

    .case-steps__table.is-mobile-rows .case-steps__table-label {
        grid-row: auto;
        grid-column: 1;
        order: calc(var(--r) * 100 + var(--c) * 2 - 1);
        display: flex;
        align-items: center;
        min-height: 45px;
        margin-bottom: 9px;
        padding: 0 20px;
        border-radius: 10px 0 0 0;
        background: linear-gradient(180deg, #F6F7F8 0%, #F4F4FE 100%);
        color: var(--blue, #1C477E);
    }

    .case-steps__table.is-mobile-rows .case-steps__table-label.is-dark,
    .case-steps__table.is-mobile-rows .case-steps__table-label.is-teal {
        background: linear-gradient(90deg, #0A3460 0%, #156D88 50%, #1B8599 85%, #1A8195 100%);
        color: var(--white, #FFFFFF);
    }

    /* 30px between rows: 10px from the cell above plus 20px here. */
    .case-steps__table.is-mobile-rows .case-steps__table-label.is-row-start:not(.is-first-row) {
        margin-top: 20px;
    }

    .case-steps__table.is-mobile-rows .case-steps__table-cell {
        grid-row: auto;
        grid-column: 1;
        order: calc(var(--r) * 100 + var(--c) * 2);
        margin-bottom: 10px;
        padding: 11px 40px 8px 20px;
        border-top: 1px solid var(--cs-line);
        border-bottom: 1px solid var(--cs-line);
    }

    .case-steps__table.is-mobile-rows .case-steps__table-cell::after {
        display: none;
    }

    .case-steps__highlight.has-bg {
        background-image: var(--bg-m);
    }

    .case-steps__gap--side { margin-top: 40px; }

    .case-steps__block--stage.case-steps__gap--side {
        padding-top: 30px;
    }

    .case-steps__caption {
        position: static;
        max-width: none;
        margin-top: 10px;
        text-align: left;
        color: var(--blue-light, #7791B2);
    }

    .case-steps__feature.is-featured {
        padding: 30px 20px;
    }

    /* Wide tables in a highlight card (e.g. mode codes) scroll sideways instead of overflowing. */
    .case-steps__highlight table {
        display: block;
        overflow-x: auto;
        font-size: 14px;
        white-space: nowrap;
    }

    .case-steps__decor.is-hidden-mobile {
        display: none;
    }

    /* Source notes aligned right in the editor (e.g. "*According to OPRE") sit on the left in the 375 mockup. */
    .case-steps__text [style*="text-align: right"] {
        text-align: left !important;
    }
}