/**
 * Creajeux Modules - Watermark Styles
 * Styles pour le watermark sur les Rows Themify Builder
 */

/* Base pour les Rows avec watermark */
.cj-has-watermark {
    position: relative !important;
}

/* Overflow hidden seulement en frontend (pas dans le builder) */
body:not(.themify_builder_active) .cj-has-watermark {
    overflow: hidden;
}

/* Forcer l'affichage du pseudo-element dans le builder */
.cj-has-watermark::after {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Watermark via pseudo-element */
.cj-has-watermark::after {
    content: var(--cj-wm-text, "");
    color: var(--cj-wm-color, rgba(21, 19, 15, 0.045));
    position: absolute;
    bottom: 34px;
    font-family: "Saira Condensed", sans-serif;
    font-weight: 900;
    font-size: clamp(78px, 17vw, 260px);
    line-height: 0.78;
    letter-spacing: 0;
    text-transform: uppercase;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
    z-index: 0;
}

/* Positions horizontales */
.cj-has-watermark.cj-wm-right::after {
    right: -2vw;
}

.cj-has-watermark.cj-wm-left::after {
    left: -2vw;
}

.cj-has-watermark.cj-wm-center::after {
    left: 50%;
    transform: translateX(-50%);
}

/* Positions verticales */
.cj-has-watermark.cj-wm-bottom::after {
    bottom: 34px;
}

.cj-has-watermark.cj-wm-top::after {
    top: 34px;
    bottom: auto;
}

.cj-has-watermark.cj-wm-middle::after {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
}

/* Combinaisons center + middle */
.cj-has-watermark.cj-wm-center.cj-wm-middle::after {
    transform: translate(-50%, -50%);
}

/* Combinaisons center + top/bottom (reset le transform) */
.cj-has-watermark.cj-wm-center.cj-wm-top::after,
.cj-has-watermark.cj-wm-center.cj-wm-bottom::after {
    transform: translateX(-50%);
}


/* S'assurer que le contenu de la Row reste au-dessus */
.cj-has-watermark > .row_inner {
    position: relative;
    z-index: 1;
}

/* Responsive */
@media (max-width: 720px) {
    .cj-has-watermark::after {
        font-size: clamp(60px, 20vw, 130px);
        bottom: 20px;
    }
}

@media (max-width: 480px) {
    .cj-has-watermark::after {
        font-size: clamp(40px, 18vw, 100px);
        bottom: 10px;
    }
}

/* ========================================
   IMAGE DE FOND DECORATIVE
   ======================================== */

/* Base pour les Rows avec image de fond */
.cj-has-bg-image {
    position: relative !important;
}

/* Overflow hidden seulement en frontend (pas dans le builder) */
body:not(.themify_builder_active) .cj-has-bg-image {
    overflow: hidden;
}

/* Image de fond via pseudo-element */
.cj-has-bg-image::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    width: var(--cj-bg-width, 60%);
    height: var(--cj-bg-height, 100%);
    /* Centrer verticalement si la hauteur est différente de 100% */
    top: 50%;
    transform: translateY(-50%) scale(var(--cj-bg-scale, 1));
    transform-origin: var(--cj-bg-origin, center);
    background:
        linear-gradient(
            90deg,
            rgb(var(--cj-bg-fade-rgb, 245, 242, 236)) 0%,
            rgba(var(--cj-bg-fade-rgb, 245, 242, 236), 0.88) 28%,
            rgba(var(--cj-bg-fade-rgb, 245, 242, 236), 0.18) 100%
        ),
        var(--cj-bg-image, none) var(--cj-bg-origin, center) / var(--cj-bg-sizing, contain) no-repeat;
    opacity: var(--cj-bg-opacity, 0.38);
    filter: saturate(1.05) contrast(1.05);
    pointer-events: none;
    z-index: 0;
}

/* Forcer l'affichage du pseudo-element dans le builder */
.cj-has-bg-image::before {
    display: block !important;
    visibility: visible !important;
}

/* Position gauche */
.cj-has-bg-image.cj-bg-left::before {
    right: auto;
    left: 0;
    background:
        linear-gradient(
            270deg,
            rgb(var(--cj-bg-fade-rgb, 245, 242, 236)) 0%,
            rgba(var(--cj-bg-fade-rgb, 245, 242, 236), 0.88) 28%,
            rgba(var(--cj-bg-fade-rgb, 245, 242, 236), 0.18) 100%
        ),
        var(--cj-bg-image, none) var(--cj-bg-origin, center) / var(--cj-bg-sizing, contain) no-repeat;
}

/* Position droite (par défaut) */
.cj-has-bg-image.cj-bg-right::before {
    right: 0;
    left: auto;
}

/* Transform-origin adapté à la position horizontale */
.cj-has-bg-image.cj-bg-right::before {
    --cj-transform-origin-x: right;
}

.cj-has-bg-image.cj-bg-left::before {
    --cj-transform-origin-x: left;
}

/* S'assurer que le contenu de la Row reste au-dessus */
.cj-has-bg-image > .row_inner {
    position: relative;
    z-index: 1;
}

/* Responsive */
@media (max-width: 720px) {
    .cj-has-bg-image::before {
        width: var(--cj-bg-mobile-width, 100%);
    }
}

@media (max-width: 480px) {
    .cj-has-bg-image::before {
        width: var(--cj-bg-mobile-width, 100%);
        opacity: calc(var(--cj-bg-opacity, 0.38) * 0.6);
    }
}