.time-slot-block {
    margin: 1rem 0;
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f9f9f9;
    container-type: inline-size;
}

.time-slot {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.time-range {
    font-weight: bold;
    color: #666;
    font-size: 0.9rem;
    min-width: 100px;
}

/* Hide time-range when container is narrower than 320px */
@container (max-width: 319px) {
    .time-range {
        display: none;
    }
    
    .time-slot {
        justify-content: center;
        text-align: center;
    }
}

/* Fallback for browsers without container query support */
@supports not (container-type: inline-size) {
    @media (max-width: 319px) {
        .time-range {
            display: none;
        }
        
        .time-slot {
            justify-content: center;
            text-align: center;
        }
    }
}

.event-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #333;
}

.event-title a {
    color: #0073aa;
    text-decoration: none;
}

.event-title a:hover {
    text-decoration: underline;
}

/* Editor-specific styles for drag and drop */
.editor-styles-wrapper .wp-block-fair-timetable-time-slot {
    position: relative;
}

.editor-styles-wrapper .time-slot-block {
    margin: 1rem 0;
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f9f9f9;
    container-type: inline-size;
}

.editor-styles-wrapper .time-slot {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.editor-styles-wrapper .time-range {
    font-weight: bold;
    color: #666;
    font-size: 0.9rem;
    min-width: 100px;
}

/* Editor: Hide time-range when container is narrower than 320px */
.editor-styles-wrapper {
    @container (max-width: 319px) {
        .time-range {
            display: none;
        }
        
        .time-slot {
            justify-content: center;
            text-align: center;
        }
    }
}

/* Editor fallback for browsers without container query support */
.editor-styles-wrapper {
    @supports not (container-type: inline-size) {
        @media (max-width: 319px) {
            .time-range {
                display: none;
            }
            
            .time-slot {
                justify-content: center;
                text-align: center;
            }
        }
    }
}

.editor-styles-wrapper .event-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #333;
}

/* Ensure drag preview maintains visibility */
.wp-block-fair-timetable-time-slot.is-dragging {
    opacity: 0.8;
}