/* Ensure the Elementor widget container takes full width automatically */
.elementor-widget-pra_loup_image_card,
.elementor-widget-pra_loup_image_card .elementor-widget-container {
    width: 100%;
}

.pra-loup-image-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: var(--image-card-border-radius, 12px);
    transition: all 0.3s ease;
    width: 100%;
    /* Default fallback height if no size class is applied */
    height: 300px;
}

/* Image behavior */
.pra-loup-image-card__image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.pra-loup-image-card__image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    max-width: 100% !important;
    transition: transform 0.5s ease;
}

.pra-loup-image-card:hover .pra-loup-image-card__image {
    transform: scale(1.05); /* Hover zoom effect */
}

/* Overlay / Content layer */
.pra-loup-image-card__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--image-card-padding, 20px);
}

/* Gradient Overlay to make text readable */
.pra-loup-image-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    z-index: 1;
    pointer-events: none;
}

/* Placements */
.pra-loup-image-card__promo {
    margin-bottom: auto; /* Push down the rest if top */
}

.pra-loup-image-card__text-box {
    margin-top: auto; /* Push down to bottom if top promo */
}

.pra-loup-image-card.promo-placement-bottom .pra-loup-image-card__promo {
    margin-bottom: 0;
    margin-top: auto; /* This pushes both promo and text-box to the very bottom */
}

.pra-loup-image-card.promo-placement-bottom .pra-loup-image-card__text-box {
    margin-top: 0;
    margin-bottom: 0; /* MUST be 0, otherwise they center in the middle */
}

/* Promo Styling */
.pra-loup-image-card__promo-text {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 4px;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.pra-loup-image-card__promo-text.promo-full-width {
    display: block;
    width: 100%;
    text-align: center;
}

/* Text Box Styling (Title + Caption) */
.pra-loup-image-card__text-box {
    padding: 15px;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

.pra-loup-image-card__title,
.pra-loup-image-card__caption {
    margin: 0;
    transition: color 0.3s ease;
}

/* Grid Sizes */
.pra-loup-image-card.card-size-small {
    height: 288px; /* Half of 600px minus gap */
}

.pra-loup-image-card.card-size-large {
    height: 600px; 
}