/* CODE Portfolio Manager - Frontend Styles */

/* These styles should match your existing portfolio page styles */
/* The plugin uses the same CSS classes as your existing portfolio.php */

.portfolio-section {
    padding: 60px 0;
}

.portfolio-section-bg {
    background-color: #f8f9fa;
}

.project-badge-purple {
    background: rgba(138, 43, 226, 0.1);
    border: 1px solid rgba(138, 43, 226, 0.3);
}

.project-card-bg {
    background: #fff;
}

.project-card-overlay {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.05) 0%, rgba(34, 197, 94, 0.05) 100%);
    pointer-events: none;
}

.problem-box {
    background: #fff5f5;
    border-left: 4px solid #dc3545;
}

.problem-icon {
    background: #dc3545;
    width: 30px;
    height: 30px;
}

.problem-color {
    color: #dc3545;
}

.solution-box {
    background: #f0fff4;
    border-left: 4px solid #22c55e;
}

.solution-icon {
    background: #22c55e;
    width: 30px;
    height: 30px;
}

.solution-color {
    color: #22c55e;
}

.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.collapsible-text .full-text {
    display: none;
}

.collapsible-text .text-hide {
    display: none;
}

.read-more-btn,
.show-less-btn {
    color: inherit;
    text-decoration: underline;
}

.read-more-btn:hover,
.show-less-btn:hover {
    text-decoration: none;
}

.btn-red {
    color: #dc3545;
}

.btn-green {
    color: #22c55e;
}

.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}