/* ============================================================
   Responsive Image Widget — Frontend CSS
   ============================================================ */

/* Wrapper keeps widget block-level */
.riw-widget-wrap {
    display: inline-block; /* respects text-align on parent */
    width: 100%;
    vertical-align: top;
    line-height: 0; /* remove gap below <picture> */
}

.riw-widget-wrap a {
    display: block;
    line-height: 0;
}

/* ── Image container ─────────────────────────────────────── */
.riw-image-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;          /* default full width; overridden by Elementor selectors */
    overflow: hidden;
    line-height: 0;
}

/* Picture / img behave exactly like Elementor's Image widget:
   full-width, height auto, no crop, no overflow cut */
.riw-picture {
    display: block;
    width: 100%;
}

.riw-image-wrapper img {
    display: block;
    width: 100%;
    height: auto;         /* ← keeps aspect ratio, no top/bottom cut */
    max-width: 100%;
    object-fit: unset;    /* explicit: not cover/fill */
    transition: transform 0.3s ease;
}

/* ── Overlay ─────────────────────────────────────────────── */
.riw-overlay {
    position: absolute;
    inset: 0;             /* top:0 right:0 bottom:0 left:0 */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.45); /* overridden by Elementor control */

    /* Hidden by default */
    opacity: 0;
    pointer-events: none;

    /* Transition managed by JS via CSS custom props */
    transition-property: opacity;
    transition-duration: var(--riw-anim-duration, 400ms);
    transition-timing-function: var(--riw-anim-easing, ease);
}

/* Show overlay on hover OR JS touch-active class */
.riw-image-wrapper:hover .riw-overlay,
.riw-image-wrapper.riw-touch-active .riw-overlay {
    opacity: 1;
    pointer-events: auto;
}

/* ── Hover text ──────────────────────────────────────────── */
.riw-hover-text {
    margin: 0;
    padding: 12px 20px;
    color: #fff;
    text-align: center;
    max-width: 90%;

    /* Will-change helps GPU compositing */
    will-change: opacity, transform;

    /* Initial state — set by JS on init */
    opacity: 0;
    /* transform set by JS */

    transition-property: opacity, transform;
    transition-duration: var(--riw-anim-duration, 400ms);
    transition-timing-function: var(--riw-anim-easing, ease);
}

.riw-image-wrapper:hover .riw-hover-text {
    opacity: 1;
    transform: none !important; /* JS resets, but belt & suspenders */
}

/* ── Caption ─────────────────────────────────────────────── */
.riw-caption {
    display: block;
    line-height: 1.5;
    font-size: 0.875em;
    color: #666;
    padding: 6px 0 0;
    margin: 0;
}

/* ── Animation presets: slide initial transforms ─────────── */
/* These classes are applied by JS on the .riw-hover-text element
   to set the "hidden" starting position */

.riw-anim-init-slide-up    { transform: translateY(var(--riw-anim-offset, 30px)); }
.riw-anim-init-slide-down  { transform: translateY(calc(-1 * var(--riw-anim-offset, 30px))); }
.riw-anim-init-slide-left  { transform: translateX(var(--riw-anim-offset, 30px)); }
.riw-anim-init-slide-right { transform: translateX(calc(-1 * var(--riw-anim-offset, 30px))); }

.riw-anim-init-zoom-in  { transform: scale(0.7); }
.riw-anim-init-zoom-out { transform: scale(1.3); }

.riw-anim-init-rotate { transform: rotate(-15deg) scale(0.85); }

.riw-anim-init-flip-x { transform: rotateX(90deg); }
.riw-anim-init-flip-y { transform: rotateY(90deg); }

/* bounce handled via keyframe on hover */
@keyframes riw-bounce-in {
    0%   { opacity: 0; transform: scale(0.5); }
    60%  { opacity: 1; transform: scale(1.1); }
    80%  { transform: scale(0.95); }
    100% { transform: scale(1); }
}

.riw-image-wrapper.riw-anim-bounce:hover .riw-hover-text {
    animation: riw-bounce-in var(--riw-anim-duration, 400ms)
               var(--riw-anim-easing, ease) forwards;
}

/* ── Editor: always show overlay at low opacity (for usability) ── */
.elementor-editor-active .riw-overlay {
    opacity: 0.25;
    pointer-events: none;
}
.elementor-editor-active .riw-image-wrapper:hover .riw-overlay {
    opacity: 1;
}
.elementor-editor-active .riw-hover-text {
    opacity: 1;
    transform: none !important;
}