/*
 * General styles for the eMINTS Fade Card.
 * These styles apply to both the front-end and the editor.
 */
.emints-fc-card-container {
    margin: 20px auto;
    width: 100%;
    max-width: 100% !important; /* Will be overridden by inline style if set by user */
    position: relative;
    box-sizing: border-box;
    transition: height 0.6s ease; /* For smooth height changes */
    min-height: 250px; /* Fallback min-height */
}

.emints-fc-card-button {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 100; /* High enough to be clickable */
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #ccc;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    line-height: 1;
    color: #333;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: background-color 0.3s ease;
}

.emints-fc-card-button:hover {
    background: rgba(255, 255, 255, 1);
}
.emints-fc-card-button .dashicons {
    width: 1em;
    height: 1em;
}

.emints-fc-card {
    width: 100%;
    height: 100%; /* Card height determined by parent container's fixed height */
    position: relative;
    box-sizing: border-box;
    border: 1px solid #eee;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow: hidden;
}

.emints-fc-card-front,
.emints-fc-card-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* === FLEXBOX FOR VERTICAL CENTERING OF THE ENTIRE CONTENT STACK === */
    display: flex;
    flex-direction: column; /* Stack image and text vertically */
    justify-content: center; /* Vertically center the content block */
    /* No align-items here, as children will manage their own horizontal alignment/stretching */
    box-sizing: border-box;
    padding: 20px; /* Provides internal padding for content */
    border-radius: 8px;
    opacity: 0; /* Default hidden */
    transition: opacity 0.6s ease; /* Smooth fade transition */
}

/* Initially, only the front card is visible */
.emints-fc-card-front {
    opacity: 1;
    z-index: 2;
}

/* On click, toggle visibility */
.emints-fc-card-front.is-hidden {
    opacity: 0;
    z-index: 1;
}
.emints-fc-card-back.is-visible {
    opacity: 1;
    z-index: 2;
}

/* New wrapper for images */
.emints-fc-card-image-wrapper {
    flex-shrink: 0; /* Prevent image from shrinking too much */
    margin-bottom: 10px; /* Consistent space between image and next element */
    max-height: 70%; /* Give some room for text if both are present */
    width: 100%; /* Allow image wrapper to take full available horizontal space */
    /* FIX: Removed height: 100%; to allow natural sizing within flex */
    display: flex; /* For internal centering of image */
    justify-content: center; /* Horizontally center image */
    align-items: center;
}
/* REMOVED: .emints-fc-card-image-wrapper:last-child { margin-bottom: 0; } -- to ensure consistent bottom margin */


/* === IMAGE FIT CLASSES === */
.emints-fc-card-img-fit-cover {
    object-fit: cover !important;
}
.emints-fc-card-img-fit-contain {
    object-fit: contain !important;
}

/* Specific styling for image content */
.emints-fc-card-image-wrapper img {
    max-width: 100% !important;
    height: auto !important; /* Allow height to adjust based on width and aspect ratio */
    display: block !important;
    /* object-fit property is applied via .emints-fc-card-img-fit-* classes */
}

/* === TEXT CONTENT STYLING === */
.emints-fc-card-text-content {
    width: 100%; /* Ensure it takes full width to allow text-align */
    /* FIX: Removed height: 100%; and flex-grow: 1; to allow natural sizing within flex */
    overflow-y: auto; /* Scrollbar if text overflows fixed height */
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    max-height: none; /* Allow content to grow naturally */
    /* Removed: text-align: center; from here, allowing user control */
}

/* Ensure nested text elements inherit color and allow WYSIWYG to control text-align */
.emints-fc-card-text-content p,
.emints-fc-card-text-content h1,
.emints-fc-card-text-content h2,
.emints-fc-card-text-content h3,
.emints-fc-card-text-content h4,
.emints-fc-card-text-content h5,
.emints-fc-card-text-content h6,
.emints-fc-card-text-content ul,
.emints-fc-card-text-content ol,
.emints-fc-card-text-content li,
.emints-fc-card-text-content span,
.emints-fc-card-text-content a,
.emints-fc-card-text-content strong,
.emints-fc-card-text-content em {
    color: inherit !important; /* Keep this to force color inheritance */
    /* REMOVED: text-align: inherit !important; to allow WYSIWYG inline styles to override theme defaults */
}


@media (max-width: 768px) {
    .emints-fc-card-container {
        margin: 15px auto;
    }
    .emints-fc-card-front,
    .emints-fc-card-back {
        padding: 15px;
    }
    .emints-fc-card-image-wrapper {
        margin-bottom: 8px;
    }
}