/* ── Skill Accordion 9db5c58a ─────────────────────────────────────── */

.sa-9db5c58a-wrap {
    width: 100%;
    /* max-width controlled via widget settings */
    border: 1px solid #cccccc;
    border-radius: 4px;
    overflow: hidden;
    box-sizing: border-box;
}

.sa-9db5c58a-track {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 600px;
    overflow: hidden;
    /* Default open width, can be overridden by settings */
    --sa-open-width: 400px; 
}

/* ── Each strip ─────────────────────────────────────────────────── */
.sa-9db5c58a-strip {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 0%; /* Share remaining space equally when closed */
    height: 100%;
    border-right: 1px solid #cccccc;
    cursor: pointer;
    overflow: hidden;
    transition: flex var(--sa-transition, 500ms) cubic-bezier(0.4, 0, 0.2, 1),
                width var(--sa-transition, 500ms) cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

.sa-9db5c58a-strip:last-child {
    border-right: none;
}

/* Active strip takes fixed larger width */
.sa-9db5c58a-strip.is-active {
    flex: 0 0 var(--sa-open-width);
    width: var(--sa-open-width);
    cursor: default;
}

/* ── Closed header ──────────────────────────────────────────────── */
.sa-9db5c58a-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 18px 14px 12px;
    flex-shrink: 0;
    z-index: 2;
    position: relative;
    overflow: hidden;
    transition: opacity calc(var(--sa-transition, 500ms) * 0.5) ease;
}

/* Hide closed header elements smoothly when active */
.sa-9db5c58a-strip.is-active .sa-9db5c58a-header {
    opacity: 0;
    pointer-events: none;
    position: absolute;
}

.sa-9db5c58a-strip-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: #111;
    white-space: normal;
    word-break: break-word;
    max-width: 100%;
}

.sa-9db5c58a-strip-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #333;
    flex-shrink: 0;
}

.sa-9db5c58a-strip-icon svg {
    width: 24px;
    height: 24px;
    fill: #333;
}

/* ── Closed image strip ─────────────────────────────────────────── */
.sa-9db5c58a-strip-img {
    flex: 1 1 auto;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: grayscale(100%);
    transition: filter var(--sa-transition, 500ms) ease;
    margin: 0 8px 8px;
    border-radius: 3px;
    min-height: 0;
}

/* Hide closed state image on active */
.sa-9db5c58a-strip.is-active .sa-9db5c58a-strip-img {
    display: none;
}

/* ── Expanded panel ─────────────────────────────────────────────── */
.sa-9db5c58a-panel {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    overflow-y: auto;
    transition: opacity var(--sa-transition, 500ms) ease;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.sa-9db5c58a-strip.is-active .sa-9db5c58a-panel {
    opacity: 1;
    pointer-events: auto;
    transition-delay: calc(var(--sa-transition, 500ms) * 0.3); /* Delay content fade-in slightly */
}

.sa-9db5c58a-panel-content {
    padding: 32px;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
}

.sa-9db5c58a-panel-title {
    margin: 0 0 12px 0;
    font-size: 24px;
    font-weight: 700;
    color: #111;
    line-height: 1.2;
}

.sa-9db5c58a-panel-desc {
    margin: 0 0 24px 0;
    font-size: 14px;
    line-height: 1.7;
    color: #444;
}

.sa-9db5c58a-panel-img {
    margin-top: auto;
    min-height: 200px;
    height: 280px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 4px;
    filter: grayscale(0%);
    width: 100%;
}

/* ── Mobile: stack vertically ───────────────────────────────────── */
@media (max-width: 767px) {
    .sa-9db5c58a-track {
        flex-direction: column;
        height: auto !important;
    }

    .sa-9db5c58a-strip {
        width: 100% !important;
        flex: 0 0 auto;
        height: auto;
        border-right: none;
        border-bottom: 1px solid #cccccc;
    }

    .sa-9db5c58a-strip.is-active {
        flex: 0 0 auto;
    }

    .sa-9db5c58a-strip:last-child {
        border-bottom: none;
    }
    
    .sa-9db5c58a-strip.is-active .sa-9db5c58a-header {
        position: relative; /* Revert absolute positioning on mobile */
        opacity: 0;
        height: 0;
        padding: 0;
        margin: 0;
        overflow: hidden;
    }

    .sa-9db5c58a-strip-img {
        height: 160px;
        flex: 0 0 160px;
    }

    .sa-9db5c58a-panel {
        position: relative;
        inset: auto;
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        transition: opacity var(--sa-transition, 500ms) ease,
                    max-height var(--sa-transition, 500ms) ease;
    }

    .sa-9db5c58a-strip.is-active .sa-9db5c58a-panel {
        opacity: 1;
        max-height: 800px;
        pointer-events: auto;
        transition-delay: 0s;
    }

    .sa-9db5c58a-strip.is-active .sa-9db5c58a-strip-img {
        display: none;
    }
}