/**
 * Webboard Styles
 * Author Profile and Community Project Styles
 * 
 * @package sky-connect
 */

/* ============================================
   AUTHOR PROFILE PAGE
   ============================================ */

/* Author Profile Page Container */
.author-profile-page {
    min-height: 100vh;
}

/* Author Header Section */
.author-header {
    position: relative;
    overflow: hidden;
}

.author-avatar-wrapper img {
    width: 150px;
    height: 150px;
    object-fit: cover;
}

/* ============================================
   WEBBOARD LIST STYLE
   ============================================ */

/* Post Item (List View) */
.post-item {
    transition: all 0.2s ease;
}

.post-item:hover {
    background-color: #2d2d31 !important;
}

/* Results Info */
.results-info {
    font-size: 14px;
    font-weight: 400;
}

/* Line Clamp Utilities */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================
   PAGINATION STYLES (WEBBOARD STYLE)
   ============================================ */

.pagination-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pagination-btn,
.pagination-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 16px;
    text-decoration: none;
    transition: all 0.2s ease;
    font-weight: 500;
}

.pagination-btn:hover:not(.cursor-not-allowed),
.pagination-number:hover {
    background-color: #F05A28 !important;
    transform: translateY(-1px);
}

.pagination-number[class*="bg-[#5B21B6]"] {
    background-color: #5B21B6 !important;
}

.pagination-dots {
    padding: 0 8px;
}

/* ============================================
   COMMUNITY CATEGORIES
   ============================================ */

.community-categories .category-card {
    border: 1px solid transparent;
}

.community-categories .category-card:hover {
    border-color: rgba(240, 90, 40, 0.3);
}

/* ============================================
   USER STATISTICS CARD
   ============================================ */

.stats-card .stat-item {
    padding-bottom: 16px;
    border-bottom: 1px solid #3f3f46;
}

.stats-card .stat-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* ============================================
   CONTRIBUTORS CARD
   ============================================ */

.contributors-card .contributor-item {
    border: 1px solid transparent;
}

.contributors-card .contributor-item:hover {
    border-color: rgba(240, 90, 40, 0.2);
}

.rank-badge {
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ============================================
   RESPONSIVE STYLES
   ============================================ */

@media (max-width: 1024px) {
    .posts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .community-categories .grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .author-avatar-wrapper img,
    .author-avatar-wrapper > div {
        width: 128px !important;
        height: 128px !important;
    }
}

@media (max-width: 640px) {
    .posts-grid {
        grid-template-columns: 1fr;
    }
    
    .author-header {
        padding: 2rem !important;
    }
    
    .author-info h1 {
        font-size: 1.75rem !important;
    }
    
    .pagination-wrapper {
        justify-content: center;
    }
    
    .pagination-number {
        min-width: 36px;
        height: 36px;
        padding: 0 12px;
        font-size: 14px;
    }
    
    .pagination-btn {
        min-width: 36px;
        height: 36px;
        padding: 0 12px;
    }
}