/* ==========================================================================
   TABLE OF CONTENTS
   1. Experience Page Layout
   2. Page Toolbar (Categories & Sorting)
   3. Experience Card Styles (Unified with Homepage)
   4. Pagination
   5. On-Scroll Animations
   6. Responsive Design
   ========================================================================== */

/* ==========================================================================
   1. Experience Page Layout
   ========================================================================== */
.experience-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    /* Increased back to 40px */
}

/* ==========================================================================
   2. Page Toolbar (Categories & Sorting)
   ========================================================================== */

/* ==========================================================================
   3. Experience Card Styles (Unified with Homepage)
   ========================================================================== */
.card-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.exp-card {
    display: flex;
    align-items: center;
    gap: 25px;
    cursor: pointer;
}

.exp-img {
    flex-shrink: 0;
}

.exp-img img {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-sm, 4px);
    border: 2px solid var(--card-border);
}

.exp-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.exp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.exp-header h3 {
    color: var(--title-color);
    font-size: 20px;
    line-height: 1.2;
}

.exp-header span {
    font-size: 13px;
    color: var(--paragraph-color);
    font-family: var(--code-font);
    background-color: var(--bg-gradient-start);
    /* Slightly different bg for contrast */
    padding: 4px 8px;
    border-radius: var(--radius-sm, 4px);
    border: 1px solid var(--card-border);
}

.skills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ==========================================================================
   5. On-Scroll Animations
   ========================================================================== */


/* ==========================================================================
   6. Responsive Design
   ========================================================================== */
@media (max-width: 600px) {

    /* Typography inherits from base.css responsive styles */
    .exp-card {
        flex-direction: column;
        text-align: center;
    }

    .exp-header {
        flex-direction: column;
        gap: 8px;
    }

    .skills {
        justify-content: center;
    }
}