/* css/skills.css */
@layer components {

/* CAPABILITIES / SKILLS */
.capability-grid {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 20px;
}

.capability-card {
    position: relative;

    min-height: 390px;

    overflow: hidden;

    background: var(--charcoal);

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

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}

.capability-card:hover {
    transform: translateY(-4px);

    background: var(--charcoal-2);
}

.capability-lime {
    border-top: 4px solid var(--lime);
}

.capability-purple {
    border-top: 4px solid var(--purple);
}

.capability-content {
    padding: 32px 32px 82px;
}

.capability-top {
    display: flex;

    justify-content: space-between;

    margin-bottom: 40px;

    color: var(--gray-dark);

    font-size: 0.86rem;
    font-weight: 900;
}

.capability-lime .capability-top strong {
    color: var(--lime);
}

.capability-purple .capability-top strong {
    color: var(--purple-light);
}

.capability-card h3 {
    margin-bottom: 26px;

    color: var(--white);

    font-size: 1.9rem;

    line-height: 1.08;
}

/* SKILL ITEMS */
.capability-list {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;
}

.capability-list span {
    position: relative;

    isolation: isolate;

    display: flex;

    align-items: center;

    min-height: 56px;

    padding: 12px 18px;

    overflow: hidden;

    background: var(--black-soft);

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

    color: var(--white);

    font-size: 0.98rem;
    font-weight: 800;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease;
}

.capability-list span::after {
    content: "";

    position: absolute;

    z-index: -1;

    top: 0;
    right: -45%;

    width: 42%;
    height: 100%;

    transform: skewX(-24deg);

    transform-origin: bottom right;

    transition:
        right 0.25s ease,
        width 0.25s ease;
}

.capability-lime .capability-list span {
    border-color:
        rgba(211, 240, 10, 0.22);
}

.capability-lime .capability-list span::after {
    background: var(--purple);
}

.capability-lime .capability-list span:hover {
    border-color: var(--lime);

    transform: translateX(3px);
}

.capability-lime .capability-list span:hover::after {
    right: -8%;
}

.capability-purple .capability-list span {
    border-color:
        rgba(113, 76, 255, 0.3);
}

.capability-purple .capability-list span::after {
    background: var(--lime);
}

.capability-purple .capability-list span:hover {
    border-color: var(--purple-light);

    transform: translateX(3px);
}

.capability-purple .capability-list span:hover::after {
    right: -8%;
}

/* CAPABILITY FOOTERS */
.capability-footer {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    padding: 15px 22px;

    font-size: 0.84rem;
    font-weight: 900;

    letter-spacing: 0.7px;
}

.capability-lime .capability-footer {
    background: var(--lime);

    color: var(--black);
}

.capability-purple .capability-footer {
    background: var(--purple);

    color: var(--lime);
}

}