/* ==========================================================================
   WEBSITISM — Technologies Archive & Single Technology Styles
   Reuses shared .wsa-* and .wss-* classes from services.css
   Only adds technology-specific overrides and new sections
   ========================================================================== */


/* ==========================================================================
   PROFICIENCY BADGE VARIANTS
   ========================================================================== */

.wsa-card__prof {
    font-family: var(--ws-font-mono);
    font-size: var(--ws-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.wsa-card__prof--expert { color: var(--ws-accent); }
.wsa-card__prof--advanced { color: #a78bfa; }
.wsa-card__prof--intermediate { color: #f59e0b; }

.wss-badge--expert {
    background: rgba(0, 201, 219, 0.12);
    color: var(--ws-accent);
    border: 1px solid rgba(0, 201, 219, 0.2);
}

.wss-badge--advanced {
    background: rgba(167, 139, 250, 0.12);
    color: #a78bfa;
    border: 1px solid rgba(167, 139, 250, 0.2);
}

.wss-badge--intermediate {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.2);
}


/* ==========================================================================
   SINGLE — USE CASES SECTION
   ========================================================================== */

.wss-usecases {
    padding: var(--ws-space-16) 0;
    background: var(--ws-surface-0);
}

.wss-usecases__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.wss-usecase {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    border-radius: var(--ws-radius-lg);
    background: var(--ws-surface-1);
    border: 1px solid var(--ws-border);
    transition: border-color 0.3s ease, background 0.3s ease;
}

.wss-usecase:hover {
    border-color: rgba(0, 201, 219, 0.2);
    background: var(--ws-surface-2);
}

.wss-usecase svg {
    flex-shrink: 0;
    color: var(--ws-accent);
    opacity: 0.8;
}

.wss-usecase span {
    font-size: var(--ws-text-sm);
    color: var(--ws-text-secondary);
    font-weight: 500;
}


/* ==========================================================================
   RESPONSIVE OVERRIDES
   ========================================================================== */

@media (max-width: 640px) {
    .wss-usecases__grid {
        grid-template-columns: 1fr;
    }
}