/*
 * Editor-specific styles for the eMINTS Fade Card block.
 * These styles only apply within the Gutenberg editor.
 */

/* Hide the button in the editor preview */
.wp-block[data-type="acf/emints-fade-card"] .emints-fc-card-button {
    display: none;
}

/* Basic border for block in the editor */
.wp-block[data-type="acf/emints-fade-card"] {
    border: 1px dashed #ccc;
    min-height: 150px;
}

/* Force TinyMCE toolbar visibility and interaction */
.acf-block-preview .emints-wysiwyg-field .mce-toolbar-grp,
.acf-block-preview .emints-wysiwyg-field .mce-container {
    z-index: 999999 !important;
    pointer-events: auto !important;
    opacity: 1 !important;
}

/* In the editor, show both front and back stacked for easy editing */
.wp-block[data-type="acf/emints-fade-card"].is-selected .emints-fc-card {
    height: auto !important; /* Allow the main card to expand its height */
    min-height: 200px; /* Ensure a minimum visible height for the whole stacked block */
    padding-bottom: 0 !important; /* Remove any aspect ratio padding */
    overflow: visible !important; /* Ensure content is not clipped */
    display: block; /* Change to block to allow normal document flow for stacking */
}

.wp-block[data-type="acf/emints-fade-card"].is-selected .emints-fc-card-front,
.wp-block[data-type="acf/emints-fade-card"].is-selected .emints-fc-card-back {
    position: relative; /* Change to relative to stack them */
    height: auto !important; /* Allow content to define height */
    min-height: 100px; /* Ensure a minimum height for each side in editor */
    opacity: 1 !important; /* Make both visible */
    z-index: auto !important; /* Reset z-index */
    margin-bottom: 25px; /* INCREASE this margin to ensure clear separation and prevent overlap */
    display: flex; /* Ensure flexbox layout for multiple children */
    flex-direction: column;
    justify-content: flex-start; /* Align content to top for editing */
    /* No align-items: center; here, children will stretch horizontally by default. */
    text-align: left; /* Default text align for editing mode */
    padding: 20px; /* Ensure consistent padding as in frontend */
    box-sizing: border-box; /* Include padding in height/width calculation */
    border: 1px dashed #ddd; /* Add a border for clarity in editor */
    background-color: #f9f9f9; /* Add a subtle background for clarity */
}

/* Ensure WYSIWYG editor within the block is visible and editable */
.wp-block[data-type="acf/emints-fade-card"] .emints-wysiwyg-field .acf-editor-wrap {
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.07);
    padding: 5px;
    margin-top: 5px;
    width: 100%; /* Ensure it takes full width in editor */
}

/* Adjust image and text wrappers in editor for better preview */
.wp-block[data-type="acf/emints-fade-card"] .emints-fc-card-image-wrapper {
    margin-bottom: 10px; /* Space in editor */
    max-height: 150px; /* Smaller max-height for images in editor */
    width: auto; /* Allow image to size naturally in editor */
    height: auto; /* Ensure height auto in editor preview for images */
}
.wp-block[data-type="acf/emints-fade-card"] .emints-fc-card-image-wrapper img {
    height: auto !important; /* Override fixed height to prevent distortion */
    object-fit: contain !important; /* Ensure images are fully visible in editor */
}

.wp-block[data-type="acf/emints-fade-card"] .emints-fc-card-text-content {
    height: auto !important; /* Allow text content to expand */
    min-height: 80px; /* Give a minimum height for the text editor area */
    overflow: visible !important; /* Ensure full text is visible */
    width: 100%; /* Ensure it takes full width for text alignment */
    text-align: left !important; /* Ensure text is left-aligned in editor by default, WYSIWYG will override */
}
/* Ensure elements inside text content are left aligned in editor */
.wp-block[data-type="acf/emints-fade-card"] .emints-fc-card-text-content p,
.wp-block[data-type="acf/emints-fade-card"] .emints-fc-card-text-content ul,
.wp-block[data-type="acf/emints-fade-card"] .emints-fc-card-text-content ol {
    /* REMOVED: text-align: inherit !important; to allow WYSIWYG inline styles to override theme defaults */
    text-align: left !important; /* Keep left alignment by default in editor for clarity, WYSIWYG will override */
}