/**
 * WP Stories Vue Editor - Responsive Styles
 * Makes the desktop editor mobile-friendly when in responsive viewport
 */

/* Mobile viewport detection for desktop editor */
@media screen and (max-width: 768px) {
    /* Hide TUI's left menu on mobile viewport */
    .wp-stories-vue-editor-modal .tui-image-editor-menu[data-menu-position="left"] {
        bottom: 0;
        top: auto !important;
        left: 0;
        right: 0;
        width: 100% !important;
        height: 60px !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-around;
        align-items: center;
        border-top: 1px solid #333;
        border-right: none !important;
        overflow-x: auto;
        overflow-y: hidden;
    }
    
    /* Adjust main container for bottom menu */
    .wp-stories-vue-editor-modal .tui-image-editor-main-container {
        left: 0 !important;
        width: 100% !important;
        bottom: 60px !important;
    }
    
    /* Make menu items horizontal */
    .wp-stories-vue-editor-modal .tui-image-editor-item {
        display: inline-flex !important;
        margin: 0 5px !important;
    }
    
    /* Hide submenu labels on small screens */
    .wp-stories-vue-editor-modal .tui-image-editor-submenu {
        bottom: 60px !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 40vh !important;
        border-radius: 20px 20px 0 0 !important;
    }
    
    /* Make header more compact */
    .wp-stories-vue-editor-modal .editor-header {
        padding: 10px 15px !important;
        min-height: 50px !important;
    }
    
    .wp-stories-vue-editor-modal .editor-title h2 {
        font-size: 16px !important;
    }
    
    .wp-stories-vue-editor-modal .editor-actions button {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }
    
    /* Full screen modal on mobile */
    .wp-stories-vue-editor-modal .editor-container {
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
    }
    
    /* Adjust canvas for mobile */
    .wp-stories-vue-editor-modal .tui-image-editor-canvas-container {
        padding: 10px !important;
    }
    
    /* Larger touch targets */
    .wp-stories-vue-editor-modal .tui-image-editor-item {
        min-width: 50px !important;
        min-height: 50px !important;
    }
    
    /* Hide text labels on very small screens */
    @media screen and (max-width: 400px) {
        .wp-stories-vue-editor-modal .tui-image-editor-item span {
            display: none !important;
        }
    }
}

/* Landscape mobile adjustments */
@media screen and (max-width: 768px) and (orientation: landscape) {
    .wp-stories-vue-editor-modal .tui-image-editor-menu[data-menu-position="left"] {
        height: 50px !important;
    }
    
    .wp-stories-vue-editor-modal .tui-image-editor-main-container {
        bottom: 50px !important;
    }
    
    .wp-stories-vue-editor-modal .editor-header {
        min-height: 45px !important;
        padding: 5px 10px !important;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Larger click targets for touch */
    .wp-stories-vue-editor-modal button,
    .wp-stories-vue-editor-modal .tui-image-editor-button {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    /* Better spacing for touch */
    .wp-stories-vue-editor-modal .tui-image-editor-range {
        padding: 15px 0 !important;
    }
    
    .wp-stories-vue-editor-modal .tui-image-editor-range-pointer {
        width: 24px !important;
        height: 24px !important;
    }
}