/**
 * Artemis safety approach.
 *
 * Desktop is a fixed-proportion stage measured on a 1672x941 grid,
 * so every size uses cqw (1cqw = 16.72px at full 1672px width).
 *
 * @package bmwp
 */

.bmwp-artemis-safety {
    --bmwp-artemis-accent: #faa61a;
    --bmwp-artemis-ink: #1a1a1a;
    --bmwp-artemis-muted: #333;
    --bmwp-artemis-bg: #fff;
    --bmwp-artemis-max: 1400px;

    /* Explicit width: a size container would collapse to 0 inside flex wrappers. */
    container-type: inline-size;
    box-sizing: border-box;
    width: 100%;
    max-width: var(--bmwp-artemis-max);
    margin-inline: auto;
    color: var(--bmwp-artemis-ink);
}

.bmwp-artemis-safety__stage {
    position: relative;
    aspect-ratio: 1672 / 941;
}

/* Photo */
.bmwp-artemis-safety__photo {
    position: absolute;
    top: 16.9%;
    left: 3.71%;
    width: 96.47%;
    max-width: none;
    height: auto;
}

/* Connector layer */
.bmwp-artemis-safety .bmwp-artemis__lines {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.bmwp-artemis-safety .bmwp-artemis__line {
    fill: none;
    stroke: var(--bmwp-artemis-accent);
    stroke-width: 2.5;
    stroke-dasharray: 7 6;
}

.bmwp-artemis-safety .bmwp-artemis__dot {
    fill: var(--bmwp-artemis-accent);
}

/* Cards: the list is layout-transparent on desktop. */
.bmwp-artemis-safety .bmwp-artemis-safety__cards {
    display: contents;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Values = px on the 1672x941 grid, in %. */
.bmwp-artemis-safety__card--01 {
    --bmwp-x: 35.77%;
    --bmwp-y: 2.34%;
    --bmwp-w: 19.74%;
    --bmwp-h: 17.22%;
}

.bmwp-artemis-safety__card--02 {
    --bmwp-x: 79.27%;
    --bmwp-y: 13.07%;
    --bmwp-w: 17.5%;
    --bmwp-h: 24.34%;
}

.bmwp-artemis-safety__card--03 {
    --bmwp-x: 79.79%;
    --bmwp-y: 48.03%;
    --bmwp-w: 18%;
    --bmwp-h: 26.35%;
}

.bmwp-artemis-safety__card--04 {
    --bmwp-x: 36.8%;
    --bmwp-y: 76.51%;
    --bmwp-w: 20%;
    --bmwp-h: 19.13%;
}

.bmwp-artemis-safety__card--05 {
    --bmwp-x: 1.85%;
    --bmwp-y: 55.15%;
    --bmwp-w: 18%;
    --bmwp-h: 25.93%;
}

.bmwp-artemis-safety__card--06 {
    --bmwp-x: 2.99%;
    --bmwp-y: 16.68%;
    --bmwp-w: 17.76%;
    --bmwp-h: 23.49%;
}

.bmwp-artemis-safety .bmwp-artemis-safety__card {
    position: absolute;
    z-index: 2;
    top: var(--bmwp-y);
    left: var(--bmwp-x);
    display: grid;
    grid-template-columns: 3.5cqw 1fr;
    column-gap: 1.3cqw;
    align-items: start;
    box-sizing: border-box;
    width: var(--bmwp-w);
    min-height: var(--bmwp-h);
    margin: 0;
    padding: 1.65cqw 0.8cqw 1.4cqw 1.4cqw;
    border-radius: 1.5cqw;
    background: var(--bmwp-artemis-bg);
    box-shadow: 0 0.4cqw 2.2cqw rgba(0, 0, 0, 0.07);
}

/* Icons */
.bmwp-artemis-safety .bmwp-artemis__icon {
    width: 100%;
    height: auto;
    color: var(--bmwp-artemis-accent);
}

.bmwp-artemis-safety .bmwp-artemis__accent {
    stroke: var(--bmwp-artemis-ink);
}

.bmwp-artemis-safety .bmwp-artemis__knock {
    fill: var(--bmwp-artemis-bg);
}

/* Text */
.bmwp-artemis-safety__number,
.bmwp-artemis-safety .bmwp-artemis-safety__title,
.bmwp-artemis-safety .bmwp-artemis-safety__text {
    display: block;
    margin: 0;
    font-family: inherit;
    letter-spacing: 0;
    text-transform: none;
}

.bmwp-artemis-safety__number {
    margin-bottom: 0.45cqw;
    font-size: 1.25cqw;
    font-weight: 700;
    line-height: 1.1;
    color: var(--bmwp-artemis-accent);
}

.bmwp-artemis-safety .bmwp-artemis-safety__title {
    font-size: 1.2cqw;
    font-weight: 700;
    line-height: 1.3;
    color: var(--bmwp-artemis-ink);
}

.bmwp-artemis-safety .bmwp-artemis-safety__text {
    margin-top: 0.75cqw;
    font-size: 0.85cqw;
    font-weight: 400;
    line-height: 1.65;
    color: var(--bmwp-artemis-muted);
}

/* Mobile: photo on top, steps stacked on a centered connector line. */
@container (max-width: 760px) {
    .bmwp-artemis-safety__stage {
        aspect-ratio: auto;
    }

    .bmwp-artemis-safety .bmwp-artemis__lines {
        display: none;
    }

    /* Crop the white margins so the scene fills the width. */
    .bmwp-artemis-safety__photo {
        position: static;
        display: block;
        width: 100%;
        aspect-ratio: 1300 / 869;
        object-fit: cover;
        object-position: 52% 50%;
    }

    .bmwp-artemis-safety .bmwp-artemis-safety__cards {
        position: relative;
        display: grid;
        --bmwp-artemis-spine-start: -3rem;

        gap: 1.75rem;
        padding-top: 1.75rem;
    }

    /* Spine starts inside the photo's faded bottom so it visibly connects to it. */
    .bmwp-artemis-safety .bmwp-artemis-safety__cards::before,
    .bmwp-artemis-safety .bmwp-artemis-safety__cards::after {
        content: "";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .bmwp-artemis-safety .bmwp-artemis-safety__cards::before {
        top: var(--bmwp-artemis-spine-start);
        bottom: 2rem;
        border-left: 2px dashed var(--bmwp-artemis-accent);
    }

    /* Anchor dot on the photo. */
    .bmwp-artemis-safety .bmwp-artemis-safety__cards::after {
        top: calc(var(--bmwp-artemis-spine-start) - 5px);
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--bmwp-artemis-accent);
    }

    .bmwp-artemis-safety .bmwp-artemis-safety__card {
        position: relative;
        top: auto;
        left: auto;
        grid-template-columns: 44px 1fr;
        column-gap: 1rem;
        width: 100%;
        min-height: 0;
        padding: 1.125rem 1.25rem;
        border-radius: 16px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
    }

    /* Connection dot on the top edge of each card. */
    .bmwp-artemis-safety .bmwp-artemis-safety__card::before {
        content: "";
        position: absolute;
        top: -5px;
        left: 50%;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--bmwp-artemis-accent);
        transform: translateX(-50%);
    }

    .bmwp-artemis-safety__number {
        margin-bottom: 0.125rem;
        font-family: var(--art-font-medium);
        font-size: var(--art-font-size-body-md);
        line-height: var(--art-line-height-body-md);
    }

    .bmwp-artemis-safety .bmwp-artemis-safety__title,
    .bmwp-artemis-safety .bmwp-artemis-safety__text {
        font-family: var(--art-font-medium);
        font-size: var(--art-font-size-body-md);
        line-height: var(--art-line-height-body-md);
    }

    .bmwp-artemis-safety .bmwp-artemis-safety__text {
        margin-top: 0.25rem;
        font-weight: 400;
    }

    .bmwp-artemis-safety .bmwp-artemis-safety__title br {
        display: none;
    }
}