/**
 * How It Works - Responsive CSS
 * Media queries para todas as variantes
 */

/* Tablet */
@media (max-width: 992px) {
    .sslp-how-it-works {
        padding: 4rem 0;
    }

    .sslp-hiw__grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
    }

    /* Remove horizontal connector lines */
    .sslp-variant-a .sslp-hiw__grid::before,
    .sslp-variant-e .sslp-hiw__grid::before {
        display: none;
    }

    /* Adjust B variant vertical layout */
    .sslp-variant-b .sslp-hiw__grid {
        grid-template-columns: 1fr !important;
    }

    /* Adjust D variant */
    .sslp-variant-d .sslp-hiw__grid {
        gap: 1rem !important;
    }

    /* Hide arrow connectors in H */
    .sslp-variant-h .sslp-hiw__step::after {
        display: none;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .sslp-how-it-works {
        padding: 3rem 0;
    }

    .sslp-how-it-works .sslp-container {
        padding: 0 1rem;
    }

    .sslp-how-it-works .sslp-section__title {
        font-size: 1.5rem;
    }

    .sslp-how-it-works .sslp-section__subtitle {
        font-size: 0.95rem;
        margin-bottom: 2rem;
    }

    .sslp-hiw__grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* A variant mobile */
    .sslp-variant-a .sslp-hiw__step {
        padding: 1.5rem 1rem;
    }

    .sslp-variant-a .sslp-hiw__number {
        width: 56px;
        height: 56px;
        font-size: 1.25rem;
    }

    /* B variant mobile */
    .sslp-variant-b .sslp-hiw__step {
        gap: 1.25rem;
        padding: 1.5rem 0;
    }

    .sslp-variant-b .sslp-hiw__step::before {
        left: 24px;
    }

    .sslp-variant-b .sslp-hiw__number {
        width: 48px;
        height: 48px;
        min-width: 48px;
        font-size: 1rem;
    }

    .sslp-variant-b .sslp-hiw__step::after {
        display: none;
    }

    /* C variant mobile */
    .sslp-variant-c .sslp-how-it-works {
        padding: 5rem 0;
    }

    .sslp-variant-c .sslp-hiw__step {
        padding: 2rem 1.5rem;
    }

    .sslp-variant-c .sslp-hiw__number {
        font-size: 3rem;
    }

    /* D variant mobile */
    .sslp-variant-d .sslp-hiw__step {
        padding: 1.25rem;
    }

    .sslp-variant-d .sslp-hiw__step::after {
        position: static;
        margin-top: 0.5rem;
    }

    /* E variant mobile */
    .sslp-variant-e .sslp-hiw__number {
        width: 60px;
        height: 60px;
        font-size: 1.25rem;
    }

    /* F variant mobile */
    .sslp-variant-f .sslp-hiw__step {
        padding: 1.5rem 1rem;
    }

    .sslp-variant-f .sslp-hiw__number {
        width: 56px;
        height: 56px;
        font-size: 1.25rem;
    }

    /* G variant mobile */
    .sslp-variant-g .sslp-hiw__step {
        padding: 1.5rem 1rem;
    }

    .sslp-variant-g .sslp-how-it-works .sslp-section__subtitle::after {
        font-size: 0.75rem;
    }

    /* H variant mobile */
    .sslp-variant-h .sslp-hiw__step {
        padding: 1.5rem 1rem;
    }

    .sslp-variant-h .sslp-hiw__number {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }

    .sslp-variant-h .sslp-hiw__number::after {
        font-size: 0.6rem;
        bottom: -18px;
    }

    .sslp-variant-h .sslp-hiw__step:last-child::before {
        font-size: 0.6rem;
        padding: 0.2rem 0.5rem;
    }
}

/* Small mobile */
@media (max-width: 375px) {
    .sslp-how-it-works .sslp-section__title {
        font-size: 1.25rem;
    }

    .sslp-hiw__title {
        font-size: 1rem !important;
    }

    .sslp-hiw__desc {
        font-size: 0.8rem !important;
    }
}