/* =========================================================
    WORKSHOPS
    ========================================================= */

.workshops-section {
    width: 100%;
    padding-bottom: 40px;
}


/* =========================================================
   WORKSHOP SELECTOR
   ========================================================= */

.workshop-selector {
    display: flex;
    gap: 8px;

    margin-bottom: 18px;

    padding: 5px;

    background: var(--surface-soft);

    border: 1px solid var(--border);
    border-radius: var(--radius-medium);
}


.workshop-selector-item {
    flex: 1;

    min-height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 12px;

    border-radius: 11px;

    color: var(--text-soft);

    font-size: 14px;
    font-weight: 700;

    text-align: center;

    transition:
        background 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease;
}


.workshop-selector-item:hover {
    background: rgba(255, 255, 255, 0.7);
    color: var(--text);
}


.workshop-selector-item-active {
    background: var(--surface);

    color: var(--primary);

    box-shadow: var(--shadow-small);
}


/* =========================================================
   WORKSHOP CONTENT
   ========================================================= */

.workshop-content {
    width: 100%;

    padding: 24px;

    background: var(--surface);

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

    box-shadow: var(--shadow-small);
}


.workshop-content h2 {
    margin-top: 0;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .workshops-section {
        padding-bottom: 20px;
    }


    .workshop-selector {
        margin-bottom: 12px;
    }


    .workshop-selector-item {
        min-height: 42px;

        padding: 0 8px;

        font-size: 13px;
    }


    .workshop-content {
        padding: 18px;
    }

}