/* ========================================
   LESSON ENGAGEMENT (Generic)
   ======================================== */

.engagement-section {
    padding: 1.5rem 2.5rem;
    background: white;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.engagement-buttons {
    display: flex;
    gap: 1rem;
}

.engagement-btn {
    background: var(--primary-medium);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.engagement-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(51, 102, 153, 0.3);
}

.engagement-btn.complete {
    background: var(--accent-green);
}

.engagement-btn.complete:hover {
    background: #45a049;
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
}

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

@media (max-width: 768px) {
    .engagement-section {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
        padding: 1.5rem;
    }
}