/**
 * Mobile View Toggle Styles
 * Adds card/list view toggle for Articles, Videos, and Speaking pages on mobile
 */

/* ========================================
   VIEW TOGGLE CONTAINER
   ======================================== */

.view-toggle-container {
    display: flex !important; /* Force display */
    align-items: center;
    gap: 8px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    border: none;
    visibility: visible !important;
    opacity: 1 !important;
}

.view-toggle-label {
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
}

.view-toggle {
    display: flex;
    gap: 6px;
    background: transparent;
    padding: 0;
    border-radius: 0;
}

.view-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.view-toggle-btn:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #334155;
}

.view-toggle-btn.active {
    background: var(--primary-color, #0066cc);
    border-color: var(--primary-color, #0066cc);
    color: var(--text-white);
}

.view-toggle-btn svg {
    width: 14px;
    height: 14px;
}

/* ========================================
   MOBILE RESPONSIVE - HIDE TOGGLE
   ======================================== */

@media (max-width: 768px) {
    /* Hide toggle on mobile for now */
    .view-toggle-container {
        display: none !important;
    }
    
    /* Adjust filters container on mobile */
    .filters-container {
        padding: 15px !important;
        gap: 12px !important;
    }
    
    /* Make search and filters full width on mobile */
    .search-filter {
        min-width: 100% !important;
        max-width: 100% !important;
    }
    
    .topic-filter,
    .duration-filter,
    .reading-time-filter {
        min-width: 100% !important;
        width: 100% !important;
    }
    
    .view-toggle-container {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================
   CARD VIEW (DEFAULT) - MOBILE
   ======================================== */

@media (max-width: 768px) {
    /* Card view is the default grid layout */
    .articles-grid:not(.list-view),
    .videos-grid:not(.list-view),
    .speaking-grid:not(.list-view),
    .events-grid:not(.list-view) {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    /* Card thumbnails in card view */
    .articles-grid:not(.list-view) .article-thumbnail,
    .videos-grid:not(.list-view) .video-thumbnail,
    .speaking-grid:not(.list-view) .speaking-thumbnail,
    .events-grid:not(.list-view) .event-thumbnail {
        width: 100% !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !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: all 0.3s ease !important;
    }
    
    /* Card hover effect in card view */
    .articles-grid:not(.list-view) .article-thumbnail:hover,
    .videos-grid:not(.list-view) .video-thumbnail:hover,
    .speaking-grid:not(.list-view) .speaking-thumbnail:hover,
    .events-grid:not(.list-view) .event-thumbnail:hover {
        transform: translateY(-4px) !important;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) !important;
        border-color: var(--primary-color, #0066cc) !important;
    }
    
    /* Card images in card view */
    .articles-grid:not(.list-view) .article-thumbnail img,
    .videos-grid:not(.list-view) .video-thumbnail img,
    .speaking-grid:not(.list-view) .speaking-thumbnail img,
    .events-grid:not(.list-view) .event-thumbnail img {
        width: 100% !important;
        height: 200px !important;
        object-fit: cover !important;
    }
    
    /* Card overlay in card view */
    .articles-grid:not(.list-view) .article-overlay,
    .videos-grid:not(.list-view) .video-overlay,
    .speaking-grid:not(.list-view) .speaking-overlay,
    .events-grid:not(.list-view) .event-overlay {
        position: static !important;
        background: transparent !important;
        padding: 16px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    /* Card titles in card view */
    .articles-grid:not(.list-view) .article-title,
    .videos-grid:not(.list-view) .video-title,
    .speaking-grid:not(.list-view) .speaking-title,
    .events-grid:not(.list-view) .event-title,
    .events-grid:not(.list-view) .event-name {
        color: #1a202c !important;
        font-size: 18px !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;
        margin-bottom: 8px !important;
    }
    
    /* Card buttons in card view */
    .articles-grid:not(.list-view) .article-read-btn,
    .videos-grid:not(.list-view) .video-play-btn,
    .speaking-grid:not(.list-view) .speaking-details-btn,
    .events-grid:not(.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;
        margin-top: 8px !important;
    }
}

/* ========================================
   LIST VIEW - MOBILE (ENHANCED)
   ======================================== */

@media (max-width: 768px) {
    /* List view container */
    .articles-grid.list-view,
    .videos-grid.list-view,
    .speaking-grid.list-view,
    .events-grid.list-view {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    /* List view thumbnails */
    .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;
        flex-direction: row !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;
    }
    
    /* List view hover */
    .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;
    }
    
    /* List view images */
    .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;
        object-fit: cover !important;
        flex-shrink: 0 !important;
    }
    
    /* List view overlay/content */
    .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: 12px !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        opacity: 1 !important;
        transform: none !important;
    }
    
    /* List view titles */
    .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: 16px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        margin-bottom: 6px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    
    /* List view metadata */
    .articles-grid.list-view .article-date,
    .articles-grid.list-view .article-excerpt,
    .videos-grid.list-view .video-date,
    .videos-grid.list-view .video-duration,
    .videos-grid.list-view .video-description,
    .speaking-grid.list-view .speaking-excerpt,
    .events-grid.list-view .event-date,
    .events-grid.list-view .event-location {
        font-size: 13px !important;
        color: #64748b !important;
        margin-bottom: 4px !important;
    }
    
    /* Hide excerpts in list view on mobile */
    .articles-grid.list-view .article-excerpt,
    .videos-grid.list-view .video-description,
    .speaking-grid.list-view .speaking-excerpt {
        display: none !important;
    }
    
    /* List view buttons */
    .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: 8px 16px !important;
        border-radius: 6px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        cursor: pointer !important;
        margin-top: 6px !important;
    }
    
    /* Ensure all text is visible in list view */
    .articles-grid.list-view .article-overlay *,
    .videos-grid.list-view .video-overlay *,
    .speaking-grid.list-view .speaking-overlay *,
    .events-grid.list-view .event-overlay * {
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* ========================================
   TABLET & DESKTOP - SHOW TOGGLE
   ======================================== */

@media (min-width: 769px) {
    /* Show view toggle on tablets and desktop */
    .view-toggle-container {
        display: flex !important;
    }
}