/**
 * WP Stories FilePond Display Fixes
 * Minimal fixes without breaking functionality
 */

/* Fix main container height */
.wb-stories--story-media.filepond--root {
    min-height: 80px;
}

/* Ensure proper spacing */
.wb-stories-story-media-wrapper {
    min-height: 170px;
}

/* Fix when there are files loaded */
.filepond--root .filepond--item[data-filepond-item-state="idle"],
.filepond--root .filepond--item[data-filepond-item-state="processing-complete"] {
    opacity: 1;
    visibility: visible;
}

/* Ensure edit button is visible when image is loaded */
.filepond--item[data-filepond-item-state="idle"] .filepond--action-edit-item,
.filepond--item[data-filepond-item-state="processing-complete"] .filepond--action-edit-item {
    opacity: 1;
}

/* Ensure file info is visible */
.filepond--item[data-filepond-item-state="idle"] .filepond--file-info,
.filepond--item[data-filepond-item-state="processing-complete"] .filepond--file-info {
    opacity: 1;
    visibility: visible;
}

/* Fix image preview visibility */
.filepond--item[data-filepond-item-state="idle"] .filepond--image-preview,
.filepond--item[data-filepond-item-state="processing-complete"] .filepond--image-preview {
    opacity: 1;
}

/*
 * Edit Image button mobile/touch fix.
 * iOS Safari ignores click events on small absolutely-positioned buttons
 * that don't have cursor:pointer, and touch-action:manipulation disables
 * the synthetic-click delay. The button is also 2em (~32px) in the vendor
 * stylesheet — below the 44px minimum tap target — so enlarge it on touch.
 */
@media (hover: none), (pointer: coarse), screen and (max-width: 767px) {
    .filepond--action-edit-item,
    .filepond--action-edit-item-alt {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.12);
        min-width: 44px;
        min-height: 44px;
        z-index: 10;
    }

    /* Keep the SVG icon centered after enlarging the hit area. */
    .filepond--action-edit-item svg,
    .filepond--action-edit-item-alt svg {
        width: 1.4em;
        height: 1.4em;
    }

    /* Ensure the image preview wrapper doesn't swallow taps before
       they reach the absolutely-positioned edit button. */
    .filepond--image-preview-wrapper,
    .filepond--image-preview-overlay {
        touch-action: manipulation;
    }
}