.commitment {
    background-color: #f1eae1;
}

.commitment__inner {
    max-width: var(--container-width-wide);
    margin-inline: auto;
    padding-inline: clamp(var(--space-3), 4vw, 3.75rem);
    padding-block: clamp(var(--space-5), 6vw, 3.5rem);
}

.commitment__box {
    --commitment-box-padding: clamp(var(--space-4), 4vw, 2.5rem);
    background-color: var(--color-grey-1);
    color: var(--color-beige-2);
    border-radius: 12px;
    padding: var(--commitment-box-padding);
    display: flex;
    flex-direction: column;
    gap: var(--commitment-box-padding);
    overflow: hidden;
}

.commitment__header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    position: relative;
}

.commitment__intro {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.commitment__eyebrow {
    font-family: var(--font-family-base);
    font-size: 14px;
    color: var(--color-cream);
    line-height: 20px;
}

.commitment__heading {
    margin: 0;
    font-family: var(--font-family-display);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: -2%;
    font-size: clamp(2rem, 1.3rem + 2.5vw, 64px);
    line-height: 58px;
    color: var(--color-cream);
}

.commitment__avatars {
    display: flex;
    flex-shrink: 0;
    /* `.commitment__header` used to be `justify-content: space-between` with
       three children (intro, avatars, nav), which spread the avatars out
       into the middle of the row instead of sitting next to the nav
       buttons. Pushing just the avatars over with auto margin keeps intro
       pinned left while avatars + nav land together, flush right. */
    margin-inline-start: auto;
}

.commitment__avatar {
    position: relative;
    display: block;
    width: 44px;
    height: 44px;
    margin-inline-start: -12px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--color-grey-1);
}

.commitment__avatar:first-child {
    margin-inline-start: 0;
}

.commitment__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.commitment__avatar--icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-grey-2);
}

.commitment__avatar--icon svg {
    display: block;
    width: 20px;
    height: 20px;
}

/* Box width, no side offsets. The cards used to bleed out over the dark box's
   own padding, which put a sliced card in the band that should read as the box's
   inner margin. */
.commitment__cards.swiper {
    width: 100%;
    margin-inline: 0;
    padding-inline: 0;
}

.commitment__cards-track.swiper-wrapper {
    align-items: stretch;
}

.commitment__card.swiper-slide {
    width: min(260px, 75vw);
    height: auto;
    align-self: stretch;
    user-select: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4);
    border-radius: 5px;
    background-color: var(--color-grey-2);
}

.commitment__card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--color-orange-dark);
    border-radius: 50%;
}

.commitment__card-icon svg {
    display: block;
    width: 20px;
    height: 20px;
}

.commitment__card-icon svg path {
    stroke: var(--color-orange-dark);
}

.commitment__card-text {
    font-family: var(--font-family-base);
    font-size: 18px;
    line-height: 26px;
    color: var(--color-cream);
}

.commitment__card-text p {
    margin: 0;
}

@media (max-width: 599px) {

    .commitment__box {
        padding:24px 16px;
    }

    .commitment__header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    .commitment__eyebrow {
        font-size: 14px;
        line-height: 20px;
    }

    .commitment__heading {
        font-size: 40px;
        line-height: 36px;
    }

    .commitment__avatars {
        position:absolute;
        right:0;
        top:0;
    }

    /* Reserves the room .commitment__avatars needs now that it's pulled out
       of flow (above) — without this, nothing stopped the heading from
       wrapping right underneath it. --commitment-avatars-width is set in
       render.php from the actual avatar count, not guessed. */
    .commitment__intro {
        padding-right: calc(var(--commitment-avatars-width, 0px) + var(--space-3));
    }

    .commitment__card.swiper-slide {
        padding: 16px;
        width: min(200px, 82vw);
    }

    .commitment__card-icon {
        width: 32px;
        height: 32px;
    }
    .commitment__card-icon svg{
        width: 16px;
        height: 16px;
    }
    .commitment__card-text {
        font-size: 16px;
    }
}

/* Carousel controls. Mirrors the pattern in blocks/stories — real <button>s
   wired through data-swiper-prev/next, so the track is reachable by keyboard and
   by assistive tech rather than by dragging alone. */
.commitment__nav {
    flex-shrink: 0;
    display: flex;
    gap: var(--space-2);
}

.commitment__nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 0.5rem;
    background-color: #f9f3ea;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.commitment__nav-button:hover,
.commitment__nav-button:focus-visible {
    opacity: 0.75;
}

.commitment__nav-button.swiper-button-disabled,
.commitment__nav-button.swiper-button-lock {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.commitment__nav-button svg {
    display: block;
    width: 20px;
    height: 20px;
}

@media (max-width: 599px) {
    /* The header stacks here and the avatar row is pulled out of flow, so keep
       the controls on their own line rather than fighting for the top-right. */
    .commitment__nav {
        align-self: flex-start;
    }
}