/**
 * Image to Image — Widget Styles
 * Text Domain: image-to-image
 */

/* =========================================================================
   CSS Custom Properties (defaults — overridden by Elementor selectors)
   ====================================================================== */
.iti-wrapper {
    --iti-duration:     400ms;
    --iti-easing:       ease;
    --iti-border-offset: 10px;
    --iti-border-width:  2px;
    --iti-border-color: #ffffff;
    --iti-border-style: solid;

    display: block;
    margin: 0;
    padding: 0;
}

/* =========================================================================
   Image Container
   ====================================================================== */
.iti-image-container {
    position: relative;
    display: inline-block;
    overflow: hidden;
    line-height: 0;
    max-width: 100%;
    vertical-align: top;
}

.iti-image-container a {
    display: block;
    line-height: 0;
}

/* =========================================================================
   Primary Image
   ====================================================================== */
.iti-primary-image {
    display: block;
    width: 100%;
    height: auto;
    transition:
        opacity  var(--iti-duration) var(--iti-easing),
        filter   var(--iti-duration) var(--iti-easing);
}

/* =========================================================================
   Hover Image
   ====================================================================== */
.iti-hover-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity var(--iti-duration) var(--iti-easing);
}

/* Show hover image */
.iti-has-hover-image .iti-image-container:hover .iti-hover-image,
.iti-has-hover-image .iti-image-container.iti-active .iti-hover-image {
    opacity: 1;
}

/* Fade primary out */
.iti-has-hover-image .iti-image-container:hover .iti-primary-image,
.iti-has-hover-image .iti-image-container.iti-active .iti-primary-image {
    opacity: 0;
}

/* =========================================================================
   Grayscale Filter
   ====================================================================== */

/* Grayscale → Color on hover */
.iti-grayscale-normal-to-color .iti-primary-image {
    filter: grayscale(100%);
}
.iti-grayscale-normal-to-color .iti-image-container:hover .iti-primary-image,
.iti-grayscale-normal-to-color .iti-image-container.iti-active .iti-primary-image {
    filter: grayscale(0%);
}

/* Color → Grayscale on hover */
.iti-grayscale-color-to-grayscale .iti-primary-image {
    filter: grayscale(0%);
}
.iti-grayscale-color-to-grayscale .iti-image-container:hover .iti-primary-image,
.iti-grayscale-color-to-grayscale .iti-image-container.iti-active .iti-primary-image {
    filter: grayscale(100%);
}

/* =========================================================================
   Text Overlay — base
   ====================================================================== */
.iti-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--iti-duration) var(--iti-easing);
    z-index: 1;
}

/* Vertical alignment */
.iti-overlay-v-top    { align-items: flex-start; }
.iti-overlay-v-center { align-items: center; }
.iti-overlay-v-bottom { align-items: flex-end; }

/* Horizontal alignment */
.iti-overlay-h-left   { justify-content: flex-start; }
.iti-overlay-h-center { justify-content: center; }
.iti-overlay-h-right  { justify-content: flex-end; }

/* Visible state */
.iti-has-overlay .iti-image-container:hover .iti-overlay,
.iti-has-overlay .iti-image-container.iti-active .iti-overlay {
    opacity: 1;
    pointer-events: auto;
}

.iti-overlay-inner {
    display: inline-block;
}

/* ── Overlay animation: Slide Up ────────────────────────────────────────── */
.iti-overlay-anim-slide-up .iti-overlay {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity   var(--iti-duration) var(--iti-easing),
        transform var(--iti-duration) var(--iti-easing);
}
.iti-overlay-anim-slide-up .iti-image-container:hover .iti-overlay,
.iti-overlay-anim-slide-up .iti-image-container.iti-active .iti-overlay {
    opacity: 1;
    transform: translateY(0);
}

/* ── Overlay animation: Slide Down ─────────────────────────────────────── */
.iti-overlay-anim-slide-down .iti-overlay {
    opacity: 0;
    transform: translateY(-16px);
    transition:
        opacity   var(--iti-duration) var(--iti-easing),
        transform var(--iti-duration) var(--iti-easing);
}
.iti-overlay-anim-slide-down .iti-image-container:hover .iti-overlay,
.iti-overlay-anim-slide-down .iti-image-container.iti-active .iti-overlay {
    opacity: 1;
    transform: translateY(0);
}

/* ── Overlay animation: Zoom ────────────────────────────────────────────── */
.iti-overlay-anim-zoom .iti-overlay {
    opacity: 0;
    transform: scale(0.85);
    transition:
        opacity   var(--iti-duration) var(--iti-easing),
        transform var(--iti-duration) var(--iti-easing);
}
.iti-overlay-anim-zoom .iti-image-container:hover .iti-overlay,
.iti-overlay-anim-zoom .iti-image-container.iti-active .iti-overlay {
    opacity: 1;
    transform: scale(1);
}

/* =========================================================================
   Internal Border Effect
   ====================================================================== */
.iti-border-effect {
    position: absolute;
    inset: var(--iti-border-offset);
    border: var(--iti-border-width) var(--iti-border-style) var(--iti-border-color);
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    transition:
        opacity var(--iti-duration) var(--iti-easing),
        inset   var(--iti-duration) var(--iti-easing);
}

.iti-has-border-effect .iti-image-container:hover .iti-border-effect,
.iti-has-border-effect .iti-image-container.iti-active .iti-border-effect {
    opacity: 1;
}

/* =========================================================================
   Caption
   ====================================================================== */
.iti-caption {
    display: block;
    line-height: 1.5;
    margin-top: 0.5em;
    margin-bottom: 0;
}

/* =========================================================================
   Responsive — disable hover effects on touch / small screens
   (per-widget override available via Elementor's responsive controls)
   ====================================================================== */
@media (max-width: 767px) {
    /* On mobile, .iti-active (toggled by JS tap) takes over from :hover */
    .iti-has-hover-image .iti-image-container:not(.iti-active) .iti-hover-image { opacity: 0; }
    .iti-has-overlay     .iti-image-container:not(.iti-active) .iti-overlay     { opacity: 0; }
    .iti-has-border-effect .iti-image-container:not(.iti-active) .iti-border-effect { opacity: 0; }
}