/**
 * Onboarding Roles Component Styles
 * Mobile First
 */

.dh-onboarding-roles {
    background: var(--white-red);
    padding: 40px 0;
}

.dh-onboarding-roles__container {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
}

/* Header */
.dh-onboarding-roles__header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    width: 100%;
}

.dh-onboarding-roles__overline {
    display: flex;
    justify-content: center;
    padding: 5px;
}

.dh-onboarding-roles__overline p {
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%;
    letter-spacing: 1.44px;
    text-transform: uppercase;
    color: var(--primary-red-100);
    text-align: center;
    margin: 0;
    white-space: nowrap;
}

.dh-onboarding-roles__title {
    font-family: 'Lato', sans-serif;
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.16;
    color: var(--primary-black-100);
    margin: 0;
    text-align: center;
}

.dh-onboarding-roles__description {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.dh-onboarding-roles__description p {
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.32;
    color: var(--primary-black-100);
    text-align: center;
    margin: 0;
}

/* Wins (Items) */
.dh-onboarding-roles__wins {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    padding: 0 10px;
}

/* Rows act as sub-containers, stack on mobile */
.dh-onboarding-roles__row {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.dh-onboarding-roles__win {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: flex-start;
    padding: 10px 0;
    width: 100%;
    min-width: 260px;
}

.dh-onboarding-roles__win-icon {
    width: 55px;
    height: 55px;
    flex-shrink: 0;
    display: block;
}

.dh-onboarding-roles__win-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 0 0;
    min-width: 0;
}

.dh-onboarding-roles__win-title {
    font-family: 'Lato', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    color: var(--primary-red-100);
    margin: 0;
    width: 100%;
}

.dh-onboarding-roles__win-title br {
    display: none;
}

.dh-onboarding-roles__win-description {
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.32;
    color: var(--primary-black-100);
    margin: 0;
    width: 100%;
}

/* Imagen */
.dh-onboarding-roles__image {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: calc(100% + 20px);
    margin-left: 10px;
    margin-right: -20px;
    box-sizing: border-box;
}

.dh-onboarding-roles__image-img {
    width: 100%;
    height: auto;
    display: block;
    /* border: 12px solid #FFFFFF; */
    border-radius: 32px 0 0 0;
    border-bottom: none;
    object-fit: cover;
    box-sizing: border-box;
}

/* Tablet Styles - 768px y más */
@media (min-width: 768px) {
    .dh-onboarding-roles {
        padding: 60px 0;
    }

    .dh-onboarding-roles__container {
        gap: 40px;
    }

    .dh-onboarding-roles__header {
        gap: 16px;
        max-width: 800px;
    }

    .dh-onboarding-roles__title {
        font-size: 36px;
    }

    .dh-onboarding-roles__description {
        max-width: 800px;
    }

    .dh-onboarding-roles__description p {
        font-size: 16px;
        text-align: center;
    }

    /* Tablet: Fuse all items into one grid/flex flow */
    .dh-onboarding-roles__wins {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        gap: 30px 40px;
        padding: 0;
        width: 100%;
        max-width: none;
    }

    .dh-onboarding-roles__row {
        /* Magic trick: unwrap the rows so items become siblings in wins container */
        display: contents;
    }

    .dh-onboarding-roles__win {
        display: flex;
        flex-direction: row;
        gap: 20px;
        align-items: flex-start;
        padding: 20px 0px;
        /* 2 columns: 50% - gap correction */
        width: calc(50% - 20px);
        min-width: 260px;
        flex: 0 0 calc(50% - 20px);
        /* Enforce width prevents shrinking */
    }

    .dh-onboarding-roles__win-icon {
        width: 55px;
        height: 55px;
        flex-shrink: 0;
    }

    .dh-onboarding-roles__win-content {
        display: flex;
        flex-direction: column;
        gap: 12px;
        flex: 1 0 0;
        min-width: 0;
    }

    .dh-onboarding-roles__win-title {
        font-size: 20px;
        line-height: normal;
    }

    .dh-onboarding-roles__win-description {
        font-size: 16px;
    }

    .dh-onboarding-roles__image {
        max-width: 1240px;
        margin: 0 auto;
        width: 100%;
    }

    .dh-onboarding-roles__image-img {
        border-width: 12px;
    }
}

/* Desktop intermedio - 3 columnas con gap reducido (900px - 1023px) */
@media (min-width: 900px) {

    /* Restore structure for Desktop */
    .dh-onboarding-roles__wins {
        flex-direction: column;
        /* Stack rows vertically */
        align-items: normal;
        /* Reset alignment */
        gap: 20px;
        /* Gap between rows */
    }

    .dh-onboarding-roles__row {
        display: flex;
        /* Restore flex display */
        flex-direction: row;
        width: 100%;
        gap: 20px;
        /* Horizontal gap */
    }

    .dh-onboarding-roles__row--top {
        justify-content: space-between;
    }

    .dh-onboarding-roles__row--bottom {
        justify-content: center;
        gap: 20px;
    }

    .dh-onboarding-roles__win {
        width: calc(33.333% - 13.34px);
        /* 3 items per row logic for sizing */
        max-width: none;
        flex: 0 0 auto;
    }

    /* 2-column layout variant */
    .dh-onboarding-roles__wins--2-cols .dh-onboarding-roles__win {
        width: calc(50% - 10px);
        /* 2 columnas con gap de 20px (20/2 = 10) */
    }
}

/* Desktop Styles - 1024px y más */
@media (min-width: 1024px) {
    .dh-onboarding-roles {
        padding: 60px 0;
    }

    .dh-onboarding-roles__container {
        padding: 0;
        box-sizing: border-box;
    }

    .dh-onboarding-roles__wins {
        gap: 30px 40px;
    }

    .dh-onboarding-roles__win {
        width: calc(33.333% - 27px);
        /* 3 columnas con gap de 40px (40*2/3 = 26.66) */
        max-width: none;
    }

    /* 2-column layout variant */
    .dh-onboarding-roles__wins--2-cols .dh-onboarding-roles__win {
        width: calc(50% - 20px);
        /* 2 columnas con gap de 40px (40/2 = 20) */
    }

    .dh-onboarding-roles__win-title br {
        display: block;
    }
}

/* Large Desktop Styles */
@media (min-width: 1200px) {
    .dh-onboarding-roles__container {
        padding: 0px;
    }


}

/* Large Desktop Styles */
@media (min-width: 1440px) {
    .dh-onboarding-roles__container {
        padding: 0px 0;
    }


}

@media (min-width: 1024px) and (max-width: 1059px) {
    .dh-onboarding-roles__wins {
        gap: 30px 20px;
    }


}