/**
 * Unified List View Styles
 * Ensures 100% consistent styling across Articles, Videos, and Speaking pages
 */

/* ========================================
   COMMON LIST VIEW CONTAINER STYLES
   ======================================== */

.articles-grid.list-view,
.videos-grid.list-view,
.speaking-grid.list-view,
.events-grid.list-view {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

/* ========================================
   THUMBNAIL/CARD STYLES
   ======================================== */

.articles-grid.list-view .article-thumbnail,
.videos-grid.list-view .video-thumbnail,
.speaking-grid.list-view .speaking-thumbnail,
.events-grid.list-view .event-thumbnail {
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    border: 2px solid #e2e8f0 !important;
    transition: border-color 0.2s ease !important;
    transform: translateY(0px) !important;
    -webkit-transform: translateY(0px) !important;
}

/* HOVER STATE - Only border color changes */
.articles-grid.list-view .article-thumbnail:hover,
.videos-grid.list-view .video-thumbnail:hover,
.speaking-grid.list-view .speaking-thumbnail:hover,
.events-grid.list-view .event-thumbnail:hover {
    border-color: var(--primary-color, #0066cc) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(0px) !important;
    -webkit-transform: translateY(0px) !important;
    -moz-transform: translateY(0px) !important;
    -ms-transform: translateY(0px) !important;
    -o-transform: translateY(0px) !important;
    transition: border-color 0.2s ease !important;
    -webkit-transition: border-color 0.2s ease !important;
}

/* ========================================
   IMAGE STYLES
   ======================================== */

.articles-grid.list-view .article-thumbnail img,
.videos-grid.list-view .video-thumbnail img,
.speaking-grid.list-view .speaking-thumbnail img,
.events-grid.list-view .event-thumbnail img {
    width: 200px !important;
    height: 140px !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
}

/* ========================================
   OVERLAY/CONTENT AREA STYLES
   ======================================== */

.articles-grid.list-view .article-overlay,
.videos-grid.list-view .video-overlay,
.speaking-grid.list-view .speaking-overlay,
.events-grid.list-view .event-overlay {
    position: static !important;
    background: transparent !important;
    padding: 20px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    opacity: 1 !important;
    transform: none !important;
    text-align: left !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
}

/* ========================================
   TITLE STYLES - 100% CONSISTENT - INCREASED FONT SIZE
   ======================================== */

.articles-grid.list-view .article-title,
.videos-grid.list-view .video-title,
.speaking-grid.list-view .speaking-title,
.events-grid.list-view .event-title,
.events-grid.list-view .event-name {
    color: #1a202c !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin-bottom: 12px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* ========================================
   TEXT COLOR OVERRIDES
   ======================================== */

.articles-grid.list-view .article-overlay *,
.videos-grid.list-view .video-overlay *,
.speaking-grid.list-view .speaking-overlay *,
.events-grid.list-view .event-overlay * {
    color: #333 !important;
}

/* Restore title color */
.articles-grid.list-view .article-overlay .article-title,
.videos-grid.list-view .video-overlay .video-title,
.speaking-grid.list-view .speaking-overlay .speaking-title,
.events-grid.list-view .event-overlay .event-title,
.events-grid.list-view .event-overlay .event-name {
    color: #1a202c !important;
}

/* ========================================
   BUTTON STYLES - 100% CONSISTENT
   ======================================== */

.articles-grid.list-view .article-read-btn,
.videos-grid.list-view .video-play-btn,
.speaking-grid.list-view .speaking-details-btn,
.events-grid.list-view .event-details-btn {
    align-self: flex-start !important;
    background: var(--primary-color, #0066cc) !important;
    color: var(--text-white) !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 6px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin-top: 12px !important;
}

.articles-grid.list-view .article-read-btn:hover,
.videos-grid.list-view .video-play-btn:hover,
.speaking-grid.list-view .speaking-details-btn:hover,
.events-grid.list-view .event-details-btn:hover {
    background: var(--primary-color-dark, #0052a3) !important;
}

/* ========================================
   METADATA STYLES
   ======================================== */

.articles-grid.list-view .article-excerpt,
.videos-grid.list-view .video-excerpt,
.videos-grid.list-view .video-description,
.speaking-grid.list-view .speaking-excerpt,
.events-grid.list-view .event-excerpt {
    display: none !important;
}

/* Hide video duration in list view */
.videos-grid.list-view .video-duration {
    display: none !important;
}

/* Show other metadata */
.videos-grid.list-view .video-date,
.events-grid.list-view .event-date,
.events-grid.list-view .event-location {
    color: #666 !important;
    font-size: 14px !important;
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ========================================
   MOBILE RESPONSIVE
   ======================================== */

@media (max-width: 768px) {

    .articles-grid.list-view .article-thumbnail img,
    .videos-grid.list-view .video-thumbnail img,
    .speaking-grid.list-view .speaking-thumbnail img,
    .events-grid.list-view .event-thumbnail img {
        width: 120px !important;
        height: 100px !important;
    }

    .articles-grid.list-view .article-overlay,
    .videos-grid.list-view .video-overlay,
    .speaking-grid.list-view .speaking-overlay,
    .events-grid.list-view .event-overlay {
        padding: 12px !important;
    }
}


/* ========================================
   CONSISTENT FILTER SPACING
   ======================================== */

/* Make filter spacing consistent across all pages */
.filters-container {
    margin-bottom: 24px !important;
    gap: 15px !important;
}


/* ========================================
   SECTION PADDING TOP
   ======================================== */

/* Add consistent top padding to speaking and video content sections */
.speaking-events-section,
.videos-content-section {
    padding-top: 20px !important;
}

/* ========================================
   EMPTY STATE IN LIST VIEW
   ======================================== */

/* Ensure empty state is centered in list view */
.articles-grid.list-view .empty-state,
.videos-grid.list-view .empty-state,
.speaking-grid.list-view .empty-state,
.events-grid.list-view .empty-state {
    width: 100% !important;
    text-align: center !important;
    padding: 80px 20px !important;
    background: #f9fafb !important;
    border-radius: 16px !important;
    border: 2px dashed #d1d5db !important;
    margin: 0 auto !important;
}

.articles-grid.list-view .empty-icon,
.videos-grid.list-view .empty-icon,
.speaking-grid.list-view .empty-icon,
.events-grid.list-view .empty-icon {
    font-size: 64px !important;
    margin-bottom: 16px !important;
    opacity: 0.5 !important;
}

.articles-grid.list-view .empty-message,
.videos-grid.list-view .empty-message,
.speaking-grid.list-view .empty-message,
.events-grid.list-view .empty-message {
    font-size: 16px !important;
    color: #6b7280 !important;
    line-height: 1.6 !important;
    text-align: center !important;
}