/* DAG Asset Selector Block - Frontend Styles */
.pjt_page-template .dag-asset-selector-frontend.dag-no-filters,
.page-template-pjt_template .dag-asset-selector-frontend.dag-no-filters{
    max-width: 1140px; 
    padding: 40px 0; 
}
.dag-asset-selector-frontend {
    width: 100%;
    margin: 0 auto;
}

/* Hide filters and pagination for asset selector block */
.dag-asset-selector-frontend .dag-frontend-filters,
.dag-asset-selector-frontend .dag-pagination,
.dag-asset-selector-frontend .dag-pagination-controls {
    display: none !important;
}

.dag-no-filters .dag-frontend-filters,
.dag-no-filters .dag-pagination,
.dag-no-filters .dag-pagination-controls {
    display: none !important;
}

.dag-asset-selector-grid {
    display: grid !important;
    gap: 20px;
}

/* DAG Media Query Loop Grid - matches dag-media-query-loop class behavior */
.dag-media-query-loop.dag-asset-selector-grid {
    display: grid !important;
}

/* Grid responsive layouts */
.dag-asset-selector-frontend[data-columns="1"] .dag-asset-selector-grid,
.dag-asset-selector-frontend[data-columns="1"] .dag-media-query-loop {
    grid-template-columns: repeat(1, 1fr) !important;
}

.dag-asset-selector-frontend[data-columns="2"] .dag-asset-selector-grid,
.dag-asset-selector-frontend[data-columns="2"] .dag-media-query-loop {
    grid-template-columns: repeat(2, 1fr) !important;
}

.dag-asset-selector-frontend[data-columns="3"] .dag-asset-selector-grid,
.dag-asset-selector-frontend[data-columns="3"] .dag-media-query-loop {
    grid-template-columns: repeat(3, 1fr) !important;
}

.dag-asset-selector-frontend[data-columns="4"] .dag-asset-selector-grid,
.dag-asset-selector-frontend[data-columns="4"] .dag-media-query-loop {
    grid-template-columns: repeat(4, 1fr) !important;
}

.dag-asset-selector-frontend[data-columns="5"] .dag-asset-selector-grid,
.dag-asset-selector-frontend[data-columns="5"] .dag-media-query-loop {
    grid-template-columns: repeat(5, 1fr) !important;
}

.dag-asset-selector-frontend[data-columns="6"] .dag-asset-selector-grid,
.dag-asset-selector-frontend[data-columns="6"] .dag-media-query-loop {
    grid-template-columns: repeat(6, 1fr) !important;
}

/* Gap sizes */
.dag-asset-selector-frontend[data-gap="small"] .dag-asset-selector-grid,
.dag-asset-selector-frontend[data-gap="small"] .dag-media-query-loop {
    gap: 10px !important;
}

.dag-asset-selector-frontend[data-gap="medium"] .dag-asset-selector-grid,
.dag-asset-selector-frontend[data-gap="medium"] .dag-media-query-loop {
    gap: 20px !important;
}

.dag-asset-selector-frontend[data-gap="large"] .dag-asset-selector-grid,
.dag-asset-selector-frontend[data-gap="large"] .dag-media-query-loop {
    gap: 30px !important;
}

/* Empty state */
.dag-asset-selector-empty {
    padding: 40px 20px;
    text-align: center;
    background: #f8f9fa;
    border: 1px dashed #ccc;
    border-radius: 4px;
}

.dag-asset-selector-empty p {
    color: #666;
    font-size: 16px;
    margin: 0;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .dag-asset-selector-frontend[data-columns="6"] .dag-asset-selector-grid,
    .dag-asset-selector-frontend[data-columns="6"] .dag-media-query-loop,
    .dag-asset-selector-frontend[data-columns="5"] .dag-asset-selector-grid,
    .dag-asset-selector-frontend[data-columns="5"] .dag-media-query-loop {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .dag-asset-selector-frontend[data-columns="6"] .dag-asset-selector-grid,
    .dag-asset-selector-frontend[data-columns="6"] .dag-media-query-loop,
    .dag-asset-selector-frontend[data-columns="5"] .dag-asset-selector-grid,
    .dag-asset-selector-frontend[data-columns="5"] .dag-media-query-loop,
    .dag-asset-selector-frontend[data-columns="4"] .dag-asset-selector-grid,
    .dag-asset-selector-frontend[data-columns="4"] .dag-media-query-loop {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 640px) {
    .dag-asset-selector-frontend[data-columns="6"] .dag-asset-selector-grid,
    .dag-asset-selector-frontend[data-columns="6"] .dag-media-query-loop,
    .dag-asset-selector-frontend[data-columns="5"] .dag-asset-selector-grid,
    .dag-asset-selector-frontend[data-columns="5"] .dag-media-query-loop,
    .dag-asset-selector-frontend[data-columns="4"] .dag-asset-selector-grid,
    .dag-asset-selector-frontend[data-columns="4"] .dag-media-query-loop,
    .dag-asset-selector-frontend[data-columns="3"] .dag-asset-selector-grid,
    .dag-asset-selector-frontend[data-columns="3"] .dag-media-query-loop {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .dag-asset-selector-frontend .dag-asset-selector-grid,
    .dag-asset-selector-frontend .dag-media-query-loop {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}

/* Show grid type buttons on mobile for asset selector */
@media (max-width: 850px) {
    /* Show the filters container on mobile */
    .dag-asset-selector-frontend .dag-frontend-filters,
    .dag-no-filters .dag-frontend-filters {
        display: block !important;
        padding: 0 !important;
    }
    
    /* Hide all filter controls except grid type buttons */
    .dag-asset-selector-frontend .dag-filters-top-row,
    .dag-asset-selector-frontend .dag-filters-container,
    .dag-asset-selector-frontend .dag-all-filters-button,
    .dag-asset-selector-frontend .dag-clear-filters,
    .dag-no-filters .dag-filters-top-row,
    .dag-no-filters .dag-filters-container,
    .dag-no-filters .dag-all-filters-button,
    .dag-no-filters .dag-clear-filters {
        display: none !important;
    }
    
    /* Show only grid type buttons and filters header */
    .dag-asset-selector-frontend .dag-filters-header,
    .dag-asset-selector-frontend .dag-filters-grid-type,
    .dag-no-filters .dag-filters-header,
    .dag-no-filters .dag-filters-grid-type {
        display: flex !important;
    }
    
    /* Align grid type buttons properly */
    .dag-asset-selector-frontend .dag-filters-header,
    .dag-no-filters .dag-filters-header {
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
        padding: 0 16px;
    }
}