/* Responsive guide styles - desktop fixed for .section-title, mobile preserved */
.guide-card-row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
    gap: 0;
}

.guide-card-row > [class*='col-'] {
    display: flex;
    flex-direction: column; /* ensure inner card fills the column and stacks properly on small screens */
    padding-left: 15px;
    padding-right: 15px;
    min-width: 0; /* prevents flex children overflow on small screens */
}

.guide-card-v2 {
    flex-grow: 1;
    min-width: 0;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 30px;
    padding: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    word-break: break-word;
    overflow-wrap: anywhere;
}

    .guide-card-v2:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

.card-icon-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

    .card-icon-header .icon-wrap {
        background-color: transparent;
        color: #1A76D1;
        width: auto;
        height: auto;
        line-height: 1;
        font-size: 28px;
        margin-right: 15px;
        box-shadow: none;
        flex-shrink: 0;
    }

        .card-icon-header .icon-wrap i {
            color: #1A76D1;
        }

    .card-icon-header h3 {
        font-size: 20px;
        font-weight: 600;
        color: #333;
        margin: 0;
    }

.card-description {
    font-size: 15px;
    color: #6c757d;
    margin-bottom: 20px;
}

.steps-list-v2 {
    list-style: none;
    padding: 0;
}

    .steps-list-v2 li {
        position: relative;
        padding-left: 35px;
        margin-bottom: 10px;
        font-size: 14px;
        color: #555;
        word-break: break-word;
    }

        .steps-list-v2 li::before {
            content: attr(data-step);
            position: absolute;
            left: 0;
            top: 0;
            background-color: #f7941d;
            color: #fff;
            width: 25px;
            height: 25px;
            line-height: 25px;
            text-align: center;
            border-radius: 50%;
            font-size: 12px;
            font-weight: 700;
            border: 2px solid #fff;
        }

.quick-tips-box {
    background: #e9f0f9;
    padding: 20px;
    border-radius: 6px;
    border-left: 4px solid #1A76D1;
    margin-top: 20px;
}

    .quick-tips-box h4 {
        color: #1A76D1;
        font-weight: 600;
        margin-bottom: 15px;
        font-size: 18px;
    }

.tip-item-v2 {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
    font-size: 14px;
    color: #333;
}

    .tip-item-v2 i {
        color: #f7941d;
        margin-right: 10px;
        font-size: 18px;
        line-height: 1.2;
        flex-shrink: 0;
    }

/*
                   SECTION TITLE FIX:
                   Give the text area the ability to grow (take remaining horizontal space)
                   and prevent it from being forced to a narrow width by the image.
                */
.section-title {
    gap: 12px;
    width: 100%;
    display: flex;
    align-items: center;
}

    .section-title .section-title-text {
        flex: 1 1 0%;
        min-width: 0; /* critical for long text to allow proper wrapping inside flex */
    }

    .section-title h2 {
        color: #1A76D1;
        font-size: 1.6rem;
        font-weight: 700;
        margin: 0;
    }

    .section-title p {
        color: #666;
        font-size: 0.95rem;
        margin: 0;
    }

    /* default image sizing (desktop) - image does not grow, text gets the free space */
    .section-title img {
        max-width: 140px;
        height: auto;
        display: inline-block;
        flex: 0 0 auto;
    }

/* Tablet and small desktop tweaks */
@media (max-width: 991.98px) {
    .guide-card-v2 {
        padding: 22px;
    }

    .card-icon-header .icon-wrap {
        font-size: 26px;
        margin-right: 12px;
    }

    .card-icon-header h3 {
        font-size: 18px;
    }
}

/* Phones — make cards narrower, reduce padding/typography and ensure the image stacks below text and scales */
@media (max-width: 767.98px) {
    .guide-card-row {
        margin-left: -10px;
        margin-right: -10px;
    }

        .guide-card-row > [class*='col-'] {
            padding-left: 10px;
            padding-right: 10px;
        }

    .guide-card-v2 {
        padding: 16px;
        margin-bottom: 18px;
    }

    .card-icon-header .icon-wrap {
        font-size: 22px;
        margin-right: 10px;
    }

    .card-icon-header h3 {
        font-size: 17px;
    }

    .card-description {
        font-size: 14px;
    }

    .steps-list-v2 li {
        padding-left: 30px;
        font-size: 13px;
    }

        .steps-list-v2 li::before {
            width: 22px;
            height: 22px;
            line-height: 22px;
            font-size: 11px;
        }

    .quick-tips-box {
        padding: 14px;
    }

        .quick-tips-box h4 {
            font-size: 16px;
        }

    .tip-item-v2 {
        font-size: 13px;
    }
    /* stack and center the image under text on small screens */
    .section-title {
        flex-direction: column;
        text-align: center;
    }

        .section-title h2 {
            font-size: 1.3rem;
        }

        .section-title p {
            font-size: 0.92rem;
        }

        .section-title img {
            display: block;
            margin: 12px auto 0;
            max-width: 120px;
        }
}

/* Very small phones — tighten further */
@media (max-width: 575.98px) {
    .guide-card-v2 {
        padding: 12px;
        margin-bottom: 14px;
    }

    .card-icon-header {
        align-items: flex-start;
        gap: 8px;
    }

        .card-icon-header .icon-wrap {
            font-size: 20px;
            margin-right: 8px;
        }

        .card-icon-header h3 {
            font-size: 15.5px;
        }

    .card-description {
        font-size: 13px;
    }

    .steps-list-v2 li {
        padding-left: 28px;
        font-size: 12.5px;
    }

        .steps-list-v2 li::before {
            width: 20px;
            height: 20px;
            line-height: 20px;
            font-size: 10px;
        }

    .quick-tips-box {
        padding: 12px;
    }

    .section-title {
        padding: 6px 0;
    }

        .section-title h2 {
            font-size: 1.15rem;
        }

        .section-title p {
            font-size: 0.88rem;
        }

        .section-title img {
            max-width: 110px;
        }
}