/* ==========================================================================
   SECTION: STEP LIST GRID (HOW TO GET STARTED)
   Path: template-parts/sections/step-list-grid/style.css
   ========================================================================== */

.step-list-grid {
    position: relative;
    width: 100%;
    background-color: var(--color-surface, #F7F2EE);
    padding: 90px 0 100px 0;
    box-sizing: border-box;
    overflow: hidden;
}

.step-list-grid__container {
    position: relative;
    z-index: 2;
    max-width: 1250px;
    width: 100%;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

/* TIÊU ĐỀ SECTION - SỬ DỤNG BIẾN GLOBAL ĐỒNG BỘ */
.step-list-grid__title {
    font-family: var(--font-heading, 'Cormorant SC', serif);
    font-size: var(--fs-h2, 55px);
    line-height: 1.2;
    font-weight: 500;
    text-align: center;
    color: var(--text-title, #456967);
    letter-spacing: 1px;
    margin: 0 0 65px 0;
}

/* GRID 4 CỘT CÁC BƯỚC */
.step-list-grid__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    align-items: flex-start;
    width: 100%;
}

.step-list-grid__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

/* HÀNG TIÊU ĐỀ (SỐ + TIÊU ĐỀ + MŨI TÊN CONG) */
.step-list-grid__header {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 16px;
    width: 100%;
}

/* SỐ THỨ TỰ BƯỚC - DÙNG BIẾN GLOBAL */
.step-list-grid__number {
    font-family: var(--font-heading, 'Cormorant SC', serif);
    font-size: var(--fs-h2, 36px);
    font-weight: 600;
    line-height: 1;
    color: #1A1A1A;
    flex-shrink: 0;
}

/* TIÊU ĐỀ THÀNH PHẦN BƯỚC - DÙNG BIẾN GLOBAL */
.step-list-grid__item-title {
    font-family: var(--font-body, 'Nunito Sans', sans-serif);
    font-size: var(--fs-body-m, 19px);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-primary-second, #456967);
    margin: 0;
}

/* MŨI TÊN UỐN CONG NỐI SANG BƯỚC TIẾP THEO (DESKTOP) */
.step-list-grid__arrow--desktop {
    display: block;
    position: absolute;
    top: -12px;
    right: -20px;
    z-index: 2;
    pointer-events: none;
}

.step-list-grid__arrow--mobile {
    display: none;
}

/* MÔ TẢ NỘI DUNG BƯỚC - DÙNG BIẾN GLOBAL */
.step-list-grid__desc {
    font-family: var(--font-body, 'Nunito Sans', sans-serif);
    font-size: var(--fs-body-s, 16px);
    line-height: 1.55;
    font-weight: 300;
    color: var(--color-primary-second, #456967);
    margin: 0;
}

/* FORM TƯ VẤN (BOOK A CONSULTATION) TRONG PROCESS */
.step-list-grid__form-wrapper {
    max-width: 600px;
    width: 100%;
    margin: 60px auto 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.step-list-grid__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    align-items: center;
}

.step-list-grid__field {
    width: 100%;
}

.step-list-grid__input,
.step-list-grid__textarea {
    width: 100%;
    background: transparent !important;
    border: 1.5px solid rgba(69, 105, 103, 0.55);
    border-radius: 6px;
    padding: 13px 18px;
    font-family: var(--font-body, 'Nunito Sans', sans-serif);
    font-size: 15px;
    color: var(--text-primary, #333333);
    outline: none;
    box-sizing: border-box;
    transition: var(--transition-base, all 0.3s ease);
}

.step-list-grid__input::placeholder,
.step-list-grid__textarea::placeholder {
    color: #555555;
    opacity: 0.85;
}

.step-list-grid__input:focus,
.step-list-grid__textarea:focus {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: var(--color-primary-second, #456967);
    box-shadow: 0 0 0 3px rgba(69, 105, 103, 0.15);
}

.step-list-grid__textarea {
    resize: vertical;
    min-height: 95px;
}

.step-list-grid__checkbox-field {
    margin-top: 2px;
}

.step-list-grid__checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body, 'Nunito Sans', sans-serif);
    font-size: 13px;
    color: #555555;
    cursor: pointer;
}

.step-list-grid__action {
    margin-top: 8px;
    display: flex;
    justify-content: center;
    width: 100%;
}

.step-list-grid__btn {
    padding: 12px 34px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(69, 105, 103, 0.2);
    background-color: var(--color-primary-second, #456967) !important;
    color: #ffffff !important;
    border: none;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.step-list-grid__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(69, 105, 103, 0.3);
    background-color: #365351 !important;
}

/* RESPONSIVE TABLET & MOBILE (THEO YÊU CẦU THIẾT KẾ) */
@media (max-width: 992px) {
    .step-list-grid {
        padding: 70px 0;
    }

    .step-list-grid__title {
        margin-bottom: 44px;
    }
}

@media (max-width: 768px) {
    .step-list-grid {
        background-color: #FFFFFF;
        padding: 50px 0; /* Padding trái/phải = 0px vì đã có ở container global */
    }

    .step-list-grid__title {
        font-size: var(--fs-h2, 32px);
        margin-bottom: 36px;
        letter-spacing: 1px;
    }

    .step-list-grid__grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    /* TRÊN MOBILE: MỖI BƯỚC LÀ MỘT CARD MÀU XANH BĂNG CÓ BO GÓC */
    .step-list-grid__item {
        background-color: var(--color-bg, #D2E3DF);
        border-radius: 16px;
        padding: 28px 24px;
        box-sizing: border-box;
    }

    .step-list-grid__number {
        font-size: var(--fs-h2, 32px);
    }

    .step-list-grid__item-title {
        font-size: var(--fs-body-m, 19px);
    }

    .step-list-grid__desc {
        font-size: var(--fs-body-s, 15px);
    }

    /* MŨI TÊN DỌC NỐI GIỮA CÁC CARD TRÊN MOBILE */
    .step-list-grid__arrow--desktop {
        display: none;
    }

    .step-list-grid__arrow--mobile {
        display: block;
        position: absolute;
        bottom: -32px;
        left: -12px;
        z-index: 3;
        pointer-events: none;
    }

    .step-list-grid__arrow-img {
        width: 26px;
        height: auto;
        display: block;
    }

    .step-list-grid__form-wrapper {
        margin-top: 40px;
    }

    .step-list-grid__btn {
        width: 100%;
    }
}