/**
 * Premium Sidebar - Compact & Clean
 * Works with existing front-page.php sidebar structure
 */

/* ==========================================
   PAGE LAYOUT
   ========================================== */

.page-layout-wrapper {
    background: #f8fafc;
}

.page-layout-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1.25rem;
    max-width: 1800px;
    margin: 0 auto;
}

/* Sidebar Right Option */
.page-layout-wrapper.sidebar-right .page-layout-grid {
    grid-template-columns: 1fr 280px;
}

.page-layout-wrapper.sidebar-right .left-sidebar {
    order: 2;
}

.page-layout-wrapper.sidebar-right .main-content {
    order: 1;
}

@media (max-width: 1279px) {
    .page-layout-grid,
    .page-layout-wrapper.sidebar-right .page-layout-grid {
        grid-template-columns: 1fr 260px;
        gap: 1rem;
    }
}

@media (max-width: 1023px) {
    .page-layout-grid,
    .page-layout-wrapper.sidebar-right .page-layout-grid {
        grid-template-columns: 1fr;
    }
    
    .left-sidebar.premium-sidebar {
        display: none;
    }
}

/* ==========================================
   SIDEBAR CONTAINER
   ========================================== */

.left-sidebar.premium-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: sticky;
    top: 1rem;
    height: fit-content;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.left-sidebar.premium-sidebar::-webkit-scrollbar {
    display: none;
}

/* Reset all margins/padding inside sidebar */
.premium-sidebar * {
    box-sizing: border-box;
}

.premium-sidebar p,
.premium-sidebar ul,
.premium-sidebar li,
.premium-sidebar h3,
.premium-sidebar h4,
.premium-sidebar div {
    margin: 0;
    padding: 0;
}

.premium-sidebar ul {
    list-style: none;
}

/* Kill any inherited spacing */
.sidebar-section > *:last-child {
    padding-bottom: 0.375rem !important;
}

/* ==========================================
   SIDEBAR SECTIONS - SUPER TIGHT
   ========================================== */

.sidebar-section {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    padding: 0 !important;
    margin: 0 !important;
}

/* ==========================================
   SECTION HEADERS - MINIMAL
   ========================================== */

.sidebar-section-header {
    padding: 0.5rem 0.75rem 0.25rem !important;
    margin: 0 !important;
    border-bottom: none;
}

.sidebar-section-title {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 !important;
    padding: 0 !important;
}

.title-icon {
    font-size: 1.125rem;
}

/* ==========================================
   ARTICLE LIST - SUPER TIGHT
   ========================================== */

.article-list-enhanced {
    display: flex;
    flex-direction: column;
    padding: 0 0.75rem 0.375rem !important;
    margin: 0 !important;
}

.article-item-enhanced {
    padding: 0.25rem 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid #f3f4f6;
}

.article-item-enhanced:last-child {
    border-bottom: none;
    padding-bottom: 0 !important;
}

/* Hide thumbnails */
.article-thumbnail {
    display: none !important;
}

.article-content {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
}

.article-title {
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.25;
    margin: 0 !important;
    padding: 0 !important;
    color: #1f2937;
}

.article-title a {
    color: inherit;
    text-decoration: none;
}

.article-title a:hover {
    color: #2563eb;
}

.article-meta {
    font-size: 0.6875rem;
    color: #9ca3af;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2;
}

.article-date {
    font-size: 0.6875rem;
    color: #9ca3af;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2;
    display: block;
}

/* Hide extra meta items */
.meta-separator,
.article-category-small {
    display: none !important;
}

/* ==========================================
   TRENDING LIST - SUPER TIGHT
   ========================================== */

.trending-list {
    display: flex;
    flex-direction: column;
    padding: 0 0.75rem 0.25rem !important;
    margin: 0 !important;
}

.trending-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.1875rem 0 !important;
    margin: 0 !important;
}

.trending-rank {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #fff;
    border-radius: 5px;
}

.trending-item:nth-child(1) .trending-rank { background: #3b82f6; }
.trending-item:nth-child(2) .trending-rank { background: #8b5cf6; }
.trending-item:nth-child(3) .trending-rank { background: #f59e0b; }
.trending-item:nth-child(n+4) .trending-rank { background: #9ca3af; }

.trending-content {
    flex: 1;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
}

.trending-title {
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.25;
    margin: 0 !important;
    padding: 0 !important;
    color: #374151;
}

.trending-title a {
    color: inherit;
    text-decoration: none;
}

.trending-title a:hover {
    color: #2563eb;
}

.trending-views {
    font-size: 0.6875rem;
    color: #9ca3af;
    line-height: 1;
    margin: 0 !important;
    padding: 0 !important;
}

.trending-item:first-child .trending-views::after {
    content: ' 🔥';
}

/* ==========================================
   QUICK LINKS / BROWSE TOPICS - SUPER TIGHT
   ========================================== */

.quick-links-list {
    display: flex;
    flex-direction: column;
    padding: 0 0.75rem 0.25rem !important;
    margin: 0 !important;
    gap: 0 !important;
}

.quick-link-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0 !important;
    margin: 0 !important;
    font-size: 0.8125rem;
    color: #475569;
    text-decoration: none;
}

.quick-link-item:hover {
    color: #2563eb;
}

.quick-link-icon {
    font-size: 0.875rem;
    opacity: 0.7;
}

.quick-link-text {
    line-height: 1.25;
}

/* Category tags (if used) */
.category-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0 0.75rem 0.25rem !important;
    margin: 0 !important;
}

.category-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.375rem !important;
    margin: 0 !important;
    font-size: 0.6875rem;
    font-weight: 500;
    color: #475569;
    background: #f1f5f9;
    border-radius: 4px;
    text-decoration: none;
}

.category-tag:hover {
    background: #e0f2fe;
    color: #0369a1;
}

.category-name {
    color: inherit;
}

.category-count {
    display: none;
}

/* ==========================================
   VIEW ALL LINK
   ========================================== */

.view-all-link {
    display: block;
    padding: 0.25rem 0.75rem 0.375rem !important;
    margin: 0 !important;
    font-size: 0.75rem;
    font-weight: 600;
    color: #3b82f6;
    text-decoration: none;
}

.view-all-link:hover {
    color: #1d4ed8;
}

/* ==========================================
   PROMO BOX - TIGHT
   ========================================== */

.sidebar-promo-box {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-radius: 10px;
    padding: 0.75rem !important;
    color: #fff;
}

.promo-headline {
    font-size: 0.9375rem;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 0.1875rem !important;
    color: #fff;
}

.promo-text {
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.3;
    margin: 0 0 0.375rem !important;
}

.promo-cta {
    display: inline-block;
    background: #f59e0b;
    color: #1e293b;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.3125rem 0.5rem !important;
    border-radius: 5px;
    text-decoration: none;
}

.promo-cta:hover {
    background: #fbbf24;
}

/* ==========================================
   EMPTY STATES
   ========================================== */

.no-articles,
.no-trending,
.no-categories {
    font-size: 0.75rem;
    color: #9ca3af;
    font-style: italic;
    padding: 0.25rem 0.75rem !important;
    margin: 0 !important;
}

.no-articles a {
    color: #3b82f6;
}

/* ==========================================
   SIDEBAR FEATURED ARTICLE - HIDDEN
   ========================================== */

.sidebar-featured-article {
    display: none;
}