/* Workshops Layout */
.workshops-layout {
    display: flex;
    flex-direction: column; /* Align items vertically */
    gap: 20px; /* Consistent spacing between rows */
}

/* Tab Buttons */
.tab-button,
.tab-button-workshops-ondemand {
    background: none; /* Ensure no background */
    border: none; /* Remove border */
    font-size: 14px;
    font-weight: 500;
    color: #333; /* Default text color */
    cursor: pointer; /* Indicate clickable element */
    position: relative; /* Required for pseudo-elements */
    transition: color 0.3s ease; /* Smooth text color transition */
    text-decoration: none; /* Remove underline */
}

/* Active and Hover States for Tab Buttons */
.tab-button-workshops-ondemand.active,
.tab-button-workshops-ondemand:hover,
.tab-button.active,
.tab-button:hover {
    color: #e76e3c; /* Change text color for hover/active */
    background: none !important; /* Explicitly remove background on hover/active */
}

/* Underline Effect */
.tab-button-workshops-ondemand::after,
.tab-button::after {
    content: '';
    display: block; /* Enable underline */
    width: 0; /* Default underline width */
    height: 2px; /* Thickness of underline */
    background-color: #e76e3c; /* Underline color */
    position: absolute; /* Position relative to the tab */
    bottom: -2px; /* Place underline just below text */
    left: 0;
    transition: width 0.3s ease; /* Smooth underline expansion */
}

/* Active and Hover States for Underline */
.tab-button-workshops-ondemand.active::after,
.tab-button.active::after,
.tab-button-workshops-ondemand:hover::after,
.tab-button:hover::after {
    width: 100%; /* Full-width underline for active or hover */
}

/* Tab Content */
.tab-content,
.tab-content-workshops-ondemand {
    display: none; /* Hide all tab contents by default */
}

.tab-content-workshops-ondemand.active,
.tab-content.active {
    display: block; /* Show only the active tab content */
}

.tab-button i {
    font-size: 12px;
    color: #666; /* Subtle color for info icon */
}
.tabs-container .info-icon {
    font-size: 12px;
    margin-left: 4px;
    color: #666;
    cursor: help; /* Indicate it provides information */
}

.tabs-container .tab-button.active .info-icon,
.tabs-container .tab-button:hover .info-icon {
    color: #0073e6; /* Icon color change on hover/active */
}
.tab-button {
    position: relative;
    cursor: pointer;
}

.tab-button:hover + #hover-description-box {
    display: block;
}



/* Filters and Controls Section */
.workshop-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Ensure responsiveness */
    gap: 15px; /* Consistent spacing between filter groups */
    margin-bottom: 20px;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

#workshop-sort,
#workshop-category-filter {
    padding: 8px; /* Reduced padding for consistent field height */
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
    width: auto; /* Allow dynamic width */
}
/* List View Styles */
.lesson-breakdown-grid.list-view {
    display:block;
}

/* List View Styles */
.classin-grid.list-view {
    display:block;
}
/* List View Styles */
.podcasts-grid.list-view {
    display:block;
}
.videos-grid.list-view,
.workshops-grid.list-view {
    display: block;
}

/* Responsive Adjustments */

/* Medium Screens (1024px and below) */
@media (max-width: 1024px) {
    .workshops-grid{
        grid-template-columns: repeat(2, 1fr); /* Switch to 2 columns for medium screens */
    }

    .tabs {
        justify-content: center; /* Center tabs for medium screens */
    }
}

/* Small Screens (768px and below) */
@media (max-width: 768px) {
    .workshops-grid {
        grid-template-columns: 1fr; /* Switch to 1 column for smaller screens */
    }

    .tabs {
        flex-direction: column; /* Stack tabs vertically */
        gap: 15px;
    }

    .workshop-controls {
        flex-direction: column; /* Stack controls vertically */
        align-items: flex-start;
        gap: 15px;
    }

    .view-buttons {
        justify-content: flex-start;
    }

    .filter-group {
        width: 100%; /* Full width for filters */
        flex: 1; /* Equal width for all filter elements */
        justify-content: center;
    }

    #workshop-sort,
    #workshop-category-filter {
        width: 100%; /* Full width for dropdowns */
    }

    .filters-row {
        flex-direction: column; /* Stack filters vertically */
        gap: 10px;
    }

    .tabs-filters-row {
        flex-direction: column; /* Stack tabs and filters vertically */
        gap: 10px;
    }

    .tabs-container {
        justify-content: center; /* Center tabs */
        flex-wrap: wrap; /* Allow wrapping for better spacing */
    }

    .filters-container {
        flex-wrap: nowrap; /* Prevent filters from wrapping */
        gap: 5px;
        justify-content: space-between; /* Spread filters evenly */
    }
    
}