/* ========================================
   TYPO3 Configurable Card - Background Image Mode
   Background image containers and overlay system
   ======================================== */

/* Background Image Mode Styles */
.configurable-card-background-image-container {
    position: relative;
    width: 100%;
    min-height: 200px; /* Fallback minimum height */
    height: 400px; /* Default height if no height class is applied */
    overflow: hidden;
    border-radius: inherit;
}

/* Height classes override the default height */
.configurable-card-background-image-container.h-200 { height: 200px; }
.configurable-card-background-image-container.h-300 { height: 300px; }
.configurable-card-background-image-container.h-400 { height: 400px; }
.configurable-card-background-image-container.h-500 { height: 500px; }
.configurable-card-background-image-container.h-600 { height: 600px; }
.configurable-card-background-image-container.h-auto { 
    height: auto; 
    min-height: 200px; /* Ensure some height even with auto */
}

.configurable-card-background-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.configurable-card-content-overlay {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* padding removed - now configurable via Bootstrap classes */
}

/* Overlay positioning classes */
.overlay-top-left {
    align-items: flex-start;
    justify-content: flex-start;
}

.overlay-top-center {
    align-items: flex-start;
    justify-content: center;
}

.overlay-top-right {
    align-items: flex-start;
    justify-content: flex-end;
}

.overlay-center-left {
    align-items: center;
    justify-content: flex-start;
}

.overlay-center-center {
    align-items: center;
    justify-content: center;
}

.overlay-center-right {
    align-items: center;
    justify-content: flex-end;
}

.overlay-bottom-left {
    align-items: flex-end;
    justify-content: flex-start;
}

.overlay-bottom-center {
    align-items: flex-end;
    justify-content: center;
}

.overlay-bottom-right {
    align-items: flex-end;
    justify-content: flex-end;
}

.overlay-top-full {
    align-items: flex-start;
    justify-content: stretch;
}

.overlay-bottom-full {
    align-items: flex-end;
    justify-content: stretch;
}

.overlay-full-coverage {
    align-items: stretch;
    justify-content: stretch;
}

.overlay-full-coverage .configurable-card-overlay-content-box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.configurable-card-overlay-content-box {
    border-radius: 0.375rem;
    max-width: 90%;
    text-align: center;
}

/* Special styling for top and bottom positioned overlays */
.configurable-card-overlay-content-box.overlay-top-position {
    max-width: 100%;
    width: 100%;
    padding-top: 0 !important;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.configurable-card-overlay-content-box.overlay-bottom-position {
    max-width: 100%;
    width: 100%;
    padding-bottom: 0 !important;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Full width overlays for top and bottom positions */
.overlay-top-left .configurable-card-overlay-content-box.overlay-top-position,
.overlay-top-center .configurable-card-overlay-content-box.overlay-top-position,
.overlay-top-right .configurable-card-overlay-content-box.overlay-top-position,
.overlay-top-full .configurable-card-overlay-content-box.overlay-top-position {
    max-width: 100%;
    width: 100%;
}

.overlay-bottom-left .configurable-card-overlay-content-box.overlay-bottom-position,
.overlay-bottom-center .configurable-card-overlay-content-box.overlay-bottom-position,
.overlay-bottom-right .configurable-card-overlay-content-box.overlay-bottom-position,
.overlay-bottom-full .configurable-card-overlay-content-box.overlay-bottom-position {
    max-width: 100%;
    width: 100%;
}