/* =================================================================== HOME CAUSE section css =================================================================== */
.home-cause {
    padding-block: var(--sectionGap);
    background: var(--surface-1);

    & .home-cause__grid {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        align-items: center;
        gap: var(--sp80);
    }

    & .home-cause__words {
        margin-bottom: var(--sp30);

        & li {
            font-size: var(--f48);
            font-weight: 600;
            line-height: 1.12;
            letter-spacing: -.03em;
            color: var(--line);
            transition: var(--transition);
        }
        & li:nth-child(1) { color: var(--black); }
        & li:nth-child(2) { color: var(--primary); }
        & li:nth-child(3) { color: var(--blue-400); }
        & li:nth-child(4) { color: #8eb0ff; }
    }

    & .home-cause__closing {
        font-size: var(--f18);
        font-weight: 600;
        color: var(--ink);
    }

    & .home-cause__timeline {
        padding: var(--sp40);
        background: var(--white);
        border: 1px solid var(--line);
        box-shadow: var(--shadow-sm);
        border-radius: var(--r-md);
    }

    & .home-cause__timeline-title { margin-bottom: var(--sp30); font-size: var(--f24); }

    & .home-cause__years {
        position: relative;
        display: grid;
        gap: var(--sp15);

        &::before {
            position: absolute; top: 20px; bottom: 20px; left: 27px;
            width: 2px;
            background: var(--line);
            content: "";
        }
    }

    & .home-cause__year {
        position: relative;
        display: grid;
        grid-template-columns: 56px 1fr auto;
        align-items: center;
        gap: var(--sp20);
        padding: var(--sp20);
        background: var(--surface-1);
        border-radius: var(--r-md);
        transition: var(--transition);

        &:hover { box-shadow: var(--shadow-sm); transform: translateX(4px); }
    }

    & .home-cause__year-num {
        display: grid; place-items: center;
        width: 56px; height: 56px;
        margin-left: -8px;
        background: var(--blue-50);
        border-radius: var(--r-full);
        font-size: var(--f15);
        font-weight: 600;
        color: var(--primary);
    }

    & .home-cause__year-text { font-size: var(--f15); line-height: 1.5; color: var(--body); }

    & .home-cause__year--current {
        background: var(--white);
        border: 2px solid var(--primary);
        box-shadow: var(--shadow-sm);
        & .home-cause__year-num { background: var(--primary); color: var(--white); }
        & .home-cause__year-text { color: var(--ink); }
    }
}

/* =================================================================== RESPONSIVE =================================================================== */
@media (max-width: 1199.98px) {
    .home-cause {
        & .home-cause__grid { gap: var(--sp50); }
    }
}

@media (max-width: 991.98px) {
    .home-cause {
        & .home-cause__grid { grid-template-columns: 1fr; }
    }
}

@media (max-width: 575.98px) {
    .home-cause {
        & .home-cause__timeline { padding: var(--sp25) var(--sp15); }
        & .home-cause__year { grid-template-columns: 48px 1fr; gap: var(--sp15); padding: var(--sp15); }
        & .home-cause__year .btn-link { grid-column: 2; }
        & .home-cause__year-num { width: 48px; height: 48px; margin-left: 0; font-size: var(--f14); }
        & .home-cause__years::before { left: 38px; }
    }
}