/* ========================================
   LIBRARY HERO
======================================== */

.library-hero {

    background: linear-gradient(
        135deg,
        rgba(113, 0, 0, 0.08) 0%,
        rgba(67, 181, 231, 0.05) 100%
    );

    border: 2px solid rgba(113, 0, 0, 0.12);

    border-radius: 22px;

    padding: 22px 26px;

    margin-bottom: 24px;

    box-shadow: var(--shadow-md);

}

.library-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    background: var(--accent);

    color: white;

    padding: 6px 14px;

    border-radius: 999px;

    font-size: 0.8rem;

    font-weight: 700;

    margin-bottom: 12px;

}

.library-hero h1 {

    font-size: 2rem;

    font-weight: 800;

    color: var(--text);

    margin-bottom: 8px;

    letter-spacing: -0.03em;

}

.library-hero p {

    color: var(--text-muted);

    line-height: 1.5;

    max-width: 680px;

}

/* ========================================
   EXERCISE GRID
======================================== */

.exercise-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 320px));

    justify-content: center;

    gap: 20px;

}

/* ========================================
   EXERCISE CARD
======================================== */

.exercise-card {

    background: white;

    border-radius: 22px;

    padding: 22px 20px;

    border: 2px solid #d7dde5;

    box-shadow:
        0 12px 30px rgba(17, 24, 39, 0.10),
        0 2px 6px rgba(17, 24, 39, 0.05);

    display: flex;

    flex-direction: column;

    gap: 16px;

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

}

.exercise-card:hover {

    transform: translateY(-4px);

    border-color: rgba(113, 0, 0, 0.28);

    box-shadow:
        0 18px 42px rgba(17, 24, 39, 0.14),
        0 6px 14px rgba(17, 24, 39, 0.08);

}

.exercise-card-header {

    display: flex;

    align-items: center;

    gap: 14px;

}

.exercise-icon {

    width: 64px;

    height: 64px;

    border-radius: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.9rem;

    background: linear-gradient(
        135deg,
        rgba(67, 181, 231, 0.18) 0%,
        rgba(67, 181, 231, 0.08) 100%
    );

    border: 1px solid rgba(67, 181, 231, 0.24);

}

.exercise-card h3 {

    font-size: 1.15rem;

    font-weight: 700;

    color: var(--primary);

    margin: 0;

}

.exercise-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}

.exercise-meta span {

    background: var(--surface-alt);

    border: 1px solid var(--border);

    border-radius: 999px;

    padding: 6px 12px;

    font-size: 0.8rem;

    font-weight: 600;

    color: var(--text-muted);

}

.exercise-description {

    color: var(--text-muted);

    line-height: 1.5;

    font-size: 0.92rem;

    flex: 1;

}

.exercise-card button {

    width: 100%;

    padding: 12px 16px;

    background: var(--secondary);

    color: white;

    font-weight: 700;

    border: none;

    border-radius: 12px;

    cursor: pointer;

    transition: all 0.2s ease;

}

.exercise-card button:hover {

    background: var(--secondary-dark);

    transform: translateY(-1px);

}

@media (max-width: 640px) {

    .library-hero {

        padding: 20px;

    }

    .library-hero h1 {

        font-size: 1.6rem;

    }

    .exercise-grid {

        grid-template-columns: 1fr;

    }

}