/**
 * Custom Image Lightbox - Hover Overlay
 *
 * Hover overlay with "Bekijk volledige afbeelding" text on the image;
 * clicking the image opens the full-size version in the Elementor lightbox.
 *
 * @package HelloBiz
 * @since 1.8.0
 */

/* ==========================================================================
   1. Link & Image Container — positioning context for the overlay
   ========================================================================== */

.elementor-widget-custom-image-lightbox .custom-image-lightbox-link {
    display: inline-block;
    cursor: pointer;
}

.elementor-widget-custom-image-lightbox .custom-image-lightbox-inner {
    position: relative;
    display: inline-block;
    line-height: 0;
}

.elementor-widget-custom-image-lightbox .custom-image-lightbox-inner img {
    display: block;
}

/* ==========================================================================
   2. Overlay — shared base styles
   ========================================================================== */

.elementor-widget-custom-image-lightbox .custom-image-lightbox-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 16px;
    background-color: rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none; /* never block the lightbox link click */
}

.elementor-widget-custom-image-lightbox .custom-image-lightbox-overlay-text {
    color: #ffffff;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.02em;
    text-align: center;
    text-transform: uppercase;
    font-family: var(--e-global-typography-text-font-family);
    transform: translateY(6px);
    transition: transform 0.3s ease;
}

/* ==========================================================================
   3. Desktop (hover-capable pointers) — reveal the overlay on hover/focus
   Scoped to hover-capable devices: hover rules on touch devices make the
   first tap only apply the hover state and swallow the click that opens
   the lightbox.
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {
    .elementor-widget-custom-image-lightbox .custom-image-lightbox-link:hover .custom-image-lightbox-overlay,
    .elementor-widget-custom-image-lightbox .custom-image-lightbox-link:focus-visible .custom-image-lightbox-overlay {
        opacity: 1;
    }

    .elementor-widget-custom-image-lightbox .custom-image-lightbox-link:hover .custom-image-lightbox-overlay-text,
    .elementor-widget-custom-image-lightbox .custom-image-lightbox-link:focus-visible .custom-image-lightbox-overlay-text {
        transform: translateY(0);
    }
}

/* ==========================================================================
   4. Touch devices — persistent bottom bar; a single tap opens the lightbox
   ========================================================================== */

@media (hover: none), (pointer: coarse) {
    .elementor-widget-custom-image-lightbox .custom-image-lightbox-overlay {
        top: auto; /* collapse the full-cover overlay into a bottom bar */
        padding: 10px 16px;
        opacity: 1;
    }

    .elementor-widget-custom-image-lightbox .custom-image-lightbox-overlay-text {
        transform: none;
    }
}

/* ==========================================================================
   5. Tablet & Mobile (max-width: 1024px)
   ========================================================================== */

@media (max-width: 1024px) {
    .elementor-widget-custom-image-lightbox .custom-image-lightbox-overlay-text {
        font-size: 11px;
    }
}