/**
 * Oguey Custom — Image Hover module v1.2
 *
 * Effet moderne et propre :
 *   - Au repos : aucune modification (0% overlay, pas de zoom)
 *   - Au hover : zoom contenu + overlay sombre + titre conservé blanc
 *   - Padding ajouté autour des titres pour les écarter des bords de l'image
 *
 * Couches z-index :
 *   - Image (auto, dans son widget Elementor)
 *   - Overlay sombre (::after, z-index 1)
 *   - Titre (z-index 2)
 */

.oguey-image-hover {
    --_zoom: var(--oguey-img-hover-zoom, 1.06);
    --_overlay-hover: var(--oguey-img-hover-overlay-hover, 0.45);
    --_duration: var(--oguey-img-hover-duration, 600ms);
    --_overlay-color: var(--oguey-img-hover-overlay-color, #000000);
    --_easing: cubic-bezier(0.22, 1, 0.36, 1);
    --_title-padding: var(--oguey-img-hover-title-padding, 28px);

    overflow: hidden !important;
    position: relative;
    isolation: isolate;
    cursor: pointer;
}

/* ============================================
   IMAGE — zoom contenu
   ============================================ */

.oguey-image-hover .elementor-widget-image {
    overflow: hidden;
}

.oguey-image-hover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform var(--_duration) var(--_easing);
    will-change: transform;
}

.oguey-image-hover:hover img,
.oguey-image-hover:focus-within img {
    transform: scale(var(--_zoom));
}


/* ============================================
   OVERLAY — invisible au repos
   ============================================ */

.oguey-image-hover::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--_overlay-color);
    opacity: 0;
    transition: opacity var(--_duration) var(--_easing);
    pointer-events: none;
    z-index: 1;
}

.oguey-image-hover:hover::after,
.oguey-image-hover:focus-within::after {
    opacity: var(--_overlay-hover);
}


/* ============================================
   TITRE — au-dessus, blanc, avec padding propre
   ============================================ */

.oguey-image-hover .elementor-widget-text-editor,
.oguey-image-hover .elementor-widget-heading {
    z-index: 2;
    /* Force un padding minimum AUTOUR du widget titre pour l'écarter
       des bords de la photo. Padding sur 4 côtés. */
    padding: var(--_title-padding) !important;
    box-sizing: border-box;
    /* Si le widget est positionné en absolute, il garde sa position
       mais avec son propre padding interne */
}

/* Cas typique Elementor : widget en bottom-left (position absolute)
   On force ces réglages pour éviter que le titre soit collé au bord */
.oguey-image-hover .elementor-widget-text-editor.elementor-absolute,
.oguey-image-hover .elementor-widget-heading.elementor-absolute {
    position: absolute;
    z-index: 2;
    /* Le padding s'applique à l'INTÉRIEUR du widget, mais la position
       absolute peut le coller au bord. On écarte donc aussi avec inset. */
    /* On laisse Elementor définir top/bottom/left/right via _position,
       mais on ajoute du padding interne pour le confort visuel. */
}

/* Si Elementor positionne en bottom-left, on s'assure qu'il y a au minimum
   du padding interne pour respirer. Le padding est sur le widget, donc le
   texte ne touche pas le bord même si le widget lui-même est collé. */

/* Texte blanc + ombre subtile pour lisibilité même sans overlay */
.oguey-image-hover .elementor-widget-text-editor p,
.oguey-image-hover .elementor-widget-heading h1,
.oguey-image-hover .elementor-widget-heading h2,
.oguey-image-hover .elementor-widget-heading h3,
.oguey-image-hover .elementor-widget-heading h4 {
    color: #ffffff;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
    transition: transform var(--_duration) var(--_easing);
    margin: 0;
}

/* Léger lift au hover */
.oguey-image-hover:hover .elementor-widget-text-editor p,
.oguey-image-hover:focus-within .elementor-widget-text-editor p,
.oguey-image-hover:hover .elementor-widget-heading h1,
.oguey-image-hover:hover .elementor-widget-heading h2,
.oguey-image-hover:hover .elementor-widget-heading h3,
.oguey-image-hover:hover .elementor-widget-heading h4,
.oguey-image-hover:focus-within .elementor-widget-heading h1,
.oguey-image-hover:focus-within .elementor-widget-heading h2,
.oguey-image-hover:focus-within .elementor-widget-heading h3,
.oguey-image-hover:focus-within .elementor-widget-heading h4 {
    transform: translateY(-3px);
}


/* ============================================
   VARIANTES
   ============================================ */

.oguey-image-hover--no-zoom img,
.oguey-image-hover--no-zoom:hover img,
.oguey-image-hover--no-zoom:focus-within img {
    transform: none !important;
    transition: none;
}

.oguey-image-hover--zoom-strong { --_zoom: 1.12; }
.oguey-image-hover--dark-strong { --_overlay-hover: 0.7; }

.oguey-image-hover--reveal .elementor-widget-text-editor,
.oguey-image-hover--reveal .elementor-widget-heading {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--_duration) var(--_easing),
                transform var(--_duration) var(--_easing);
}
.oguey-image-hover--reveal:hover .elementor-widget-text-editor,
.oguey-image-hover--reveal:focus-within .elementor-widget-text-editor,
.oguey-image-hover--reveal:hover .elementor-widget-heading,
.oguey-image-hover--reveal:focus-within .elementor-widget-heading {
    opacity: 1;
    transform: translateY(0);
}


/* ============================================
   RESPONSIVE — padding réduit sur petits écrans
   ============================================ */

@media (max-width: 768px) {
    .oguey-image-hover {
        --_title-padding: 18px;
    }
}


/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .oguey-image-hover img,
    .oguey-image-hover::after,
    .oguey-image-hover .elementor-widget-text-editor p,
    .oguey-image-hover .elementor-widget-heading h1,
    .oguey-image-hover .elementor-widget-heading h2,
    .oguey-image-hover .elementor-widget-heading h3 {
        transition: opacity var(--_duration) ease !important;
        transform: none !important;
    }
    .oguey-image-hover:hover img,
    .oguey-image-hover:focus-within img {
        transform: none !important;
    }
}