/* studyplanexplanation.css - Unique styles for Study Plan Explanation Page */
/* Shared styles are inherited from style.css and takeourieltstest.css */

/* Fix: Ensure step pill text is visible above images */
/*
.hero-steps-section .intro-step-pill {
    position: relative;
    z-index: 2;
}


.hero-steps-section .intro-step-image {
    position: relative;
    z-index: 1;
}
*/

/* Desktop: Reduce negative margin to prevent overlap */
@media (min-width: 1025px) {
    .hero-steps-section .intro-step-pill {
        margin-bottom: 20px;
        /* Override the -40px from base CSS */
        /* font-size: clamp(0.9rem, 1.2vw, 1.4rem);*/
    }

    /* Step 1 image: smaller and positioned higher on desktop only */
    #spe-step1-img {
        margin-top: -10px;
        max-height: 200px;
    }

    /* Wider step cards on desktop */
    .hero-steps-section .intro-step-card {
        max-width: 380px;
    }

    /* Reduce connector width to give more space to cards */
    .hero-steps-section .intro-connector-desktop {
        flex: 0 0 25px;
        width: 25px;
    }
}

/* Low desktop widths (1025px - 1200px): Additional fixes */
@media (min-width: 1025px) and (max-width: 1200px) {
    .hero-steps-section .intro-step-pill {
        font-size: 19px;
        padding: 0 12px;
    }

    .hero-steps-section .intro-connector-desktop {
        flex: 0 0 15px;
        width: 15px;
    }
}

/* Mobile only: Step 2 image bigger and pushed down */
@media (max-width: 1024px) {
    #spe-step2-img {
        margin-top: 20px;
        margin-bottom: -30px;
        max-width: 340px;
        height: auto;
    }

    /* Extra margin-top for 'Only for you' row */
    #spe-only-for-you-row {
        margin-top: 70px;
    }
}