/**
 * OpenCom UI Kit - Activity Box (WP Overview Card) Widget
 * Uses common.css variables; styling overridable via Elementor.
 */

/* ============================================
   WP Overview Card
   ============================================ */
.wp-overview-card {
    background: var(--opencom-white);
    border-radius: var(--opencom-radius-lg);
    padding: 28px;
    border: 1px solid var(--opencom-gray-200);
    transition: all var(--opencom-transition-slow);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}

.wp-overview-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--opencom-shadow-xl);
    border-color: transparent;
}

/* ============================================
   Header
   ============================================ */
.wp-overview-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}

.wp-badge {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--opencom-font-heading);
    font-size: 14px;
    font-weight: 800;
    color: var(--opencom-white);
    flex-shrink: 0;
}

/* WP badge colors by data-wp (1–20), using opencom palette */
.wp-overview-card[data-wp="1"] .wp-badge { background: var(--opencom-primary-600); }
.wp-overview-card[data-wp="2"] .wp-badge { background: var(--opencom-blue-600); }
.wp-overview-card[data-wp="3"] .wp-badge { background: var(--opencom-teal-600); }
.wp-overview-card[data-wp="4"] .wp-badge { background: var(--opencom-purple-600); }
.wp-overview-card[data-wp="5"] .wp-badge { background: var(--opencom-orange-600); }
.wp-overview-card[data-wp="6"] .wp-badge { background: var(--opencom-red-600); }
.wp-overview-card[data-wp="7"] .wp-badge { background: var(--opencom-success-600); }
.wp-overview-card[data-wp="8"] .wp-badge { background: var(--opencom-warm-700); }
.wp-overview-card[data-wp="9"] .wp-badge { background: var(--opencom-primary-700); }
.wp-overview-card[data-wp="10"] .wp-badge { background: var(--opencom-gray-700); }
.wp-overview-card[data-wp="11"] .wp-badge { background: var(--opencom-primary-500); }
.wp-overview-card[data-wp="12"] .wp-badge { background: var(--opencom-success-700); }
.wp-overview-card[data-wp="13"] .wp-badge { background: var(--opencom-red-700); }
.wp-overview-card[data-wp="14"] .wp-badge { background: var(--opencom-primary-800); }
.wp-overview-card[data-wp="15"] .wp-badge { background: var(--opencom-gray-800); }
.wp-overview-card[data-wp="16"] .wp-badge { background: var(--opencom-primary-600); }
.wp-overview-card[data-wp="17"] .wp-badge { background: var(--opencom-blue-600); }
.wp-overview-card[data-wp="18"] .wp-badge { background: var(--opencom-teal-600); }
.wp-overview-card[data-wp="19"] .wp-badge { background: var(--opencom-purple-600); }
.wp-overview-card[data-wp="20"] .wp-badge { background: var(--opencom-orange-600); }

.wp-overview-meta {
    flex: 1;
    min-width: 0;
}

.wp-overview-meta h3 {
    font-family: var(--opencom-font-heading);
    font-size: 18px;
    font-weight: 700;
    color: var(--opencom-gray-900);
    line-height: 1.3;
    margin: 0 0 4px 0;
}

.wp-overview-meta .duration {
    font-size: 13px;
    color: var(--opencom-gray-500);
    font-weight: 500;
}

.wp-overview-card > p {
    font-size: 14px;
    color: var(--opencom-gray-600);
    line-height: 1.6;
    margin: 0 0 16px 0;
}

/* ============================================
   Leader
   ============================================ */
.wp-leader {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--opencom-gray-100);
}

.wp-leader-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 6px;
    flex-shrink: 0;
}

.wp-leader-avatar {
    width: 28px;
    height: 28px;
    background: var(--opencom-gray-200);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--opencom-gray-600);
    flex-shrink: 0;
}

.wp-leader span {
    font-size: 13px;
    color: var(--opencom-gray-600);
}

.wp-leader strong {
    color: var(--opencom-gray-800);
}