/* ==========================================================
   BELAJAREDUTECH
   NAVIGASI MATERI MATEMATIKA SMP KELAS 8
========================================================== */

.kelas8-lesson-navigation-section {
    padding: 42px 0 72px;
    background: #f8fafc;
}


.kelas8-lesson-navigation {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;
}


.kelas8-lesson-nav-card {
    min-height: 120px;

    display: flex;
    align-items: center;

    gap: 16px;

    padding: 21px;

    color: #334155;
    background: #ffffff;

    border: 1px solid #e2e8f0;
    border-radius: 18px;

    text-decoration: none;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.kelas8-lesson-nav-card:hover {
    transform: translateY(-3px);

    border-color: #a5b4fc;

    box-shadow:
        0 16px 35px
        rgba(79, 70, 229, 0.08);
}


.kelas8-lesson-nav-card.next {
    justify-content: flex-end;

    text-align: right;
}


.kelas8-lesson-nav-arrow {
    flex-shrink: 0;

    color: #4f46e5;

    font-size: 1.35rem;
    font-weight: 900;
}


.kelas8-lesson-nav-content {
    min-width: 0;
}


.kelas8-lesson-nav-content small,
.kelas8-lesson-nav-content strong,
.kelas8-lesson-nav-content span {
    display: block;
}


.kelas8-lesson-nav-content small {
    margin-bottom: 5px;

    color: #64748b;

    font-size: 0.62rem;
}


.kelas8-lesson-nav-content strong {
    color: #0f172a;

    line-height: 1.35;
}


.kelas8-lesson-nav-content span {
    margin-top: 5px;

    color: #0f766e;

    font-size: 0.62rem;
    font-weight: 800;
}


.kelas8-footer-current {
    font-weight: 800;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 680px) {

    .kelas8-lesson-navigation {
        grid-template-columns: 1fr;
    }


    .kelas8-lesson-nav-card.next {
        justify-content: flex-start;

        text-align: left;
    }

}