/**
 * ccbla/motif-pop — Front + éditeur
 *
 * Breakpoints :
 *   Desktop  : ≥ 1025px   (classes + CSS vars)
 *   Tablette : 768–1024px (data-pop-side-tablet / data-pop-av-tablet)
 *   Mobile   : < 768px    (data-pop-side-mobile / data-pop-av-mobile)
 *
 * Cascade : tablette et mobile héritent desktop si data-attr absent.
 * Ancrage horizontal : classes --right / --left
 * Ancrage vertical   : classes --av-top / --av-center / --av-bottom
 */

/* ── Overlay principal ─────────────────────────────────────────────────────── */
.ccbla-motif-pop {
    position:       absolute;
    inset:          0;
    pointer-events: none;
    z-index:        var(--pop-z, 0);
    color:          var(--pop-color, var(--wp--preset--color--pop-pastel-lemon, #fff7b2));
}

/* ── Clip wrapper ──────────────────────────────────────────────────────────── */
/*
 * --pop-clip-left / --pop-clip-right : rétrécissent la zone de clip
 * indépendamment de l'overlay parent (qui reste inset:0).
 *
 * Usage typique (motif POP grand + partiellement rogné) :
 *   --pop-clip-left: 50%   → zone visible = 50% droite du banner
 *   --pop-size: 80vw       → SVG déborde de 30vw sur la gauche → rogné ici
 *
 * Équivalent pour variante --left :
 *   --pop-clip-right: 50%  → zone visible = 50% gauche du banner
 */
.ccbla-motif-pop__clip {
    position: absolute;
    top:      0;
    bottom:   0;
    left:     var(--pop-clip-left,  0px);
    right:    var(--pop-clip-right, 0px);
}
.ccbla-motif-pop--clip .ccbla-motif-pop__clip {
    overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════════════════
   SVG — BASE (desktop ≥1025px)
   ══════════════════════════════════════════════════════════════════════════════ */
.ccbla-motif-pop__svg {
    position: absolute;
    width:    var(--pop-size, 50vw);
    height:   auto;
}

/* ══════════════════════════════════════════════════════════════════════════════
   MODE FILL-HEIGHT
   Dimensionne le SVG par sa hauteur (% du banner) au lieu de la largeur.
   → garantit l'overflow vertical quelque soit le viewport.
   → width: auto = calculé automatiquement par le ratio SVG (1016/660 ≈ 1.539)
   
   Recette pour le rendu "POP billboard" (image 1) :
     size:      50vw          (bord gauche toujours à 50%)
     anchorV:   center        (P haut/bas débordent équitablement)
     clip:      ON            (overflow hidden)
     offset-x:  0px           (flush bord droit)
   
   Si le banner est trop haut et que rien ne déborde → activer fill-height :
     sizeH:     115%–130%     (SVG = 115%+ de la hauteur du banner → overflow garanti)
   ══════════════════════════════════════════════════════════════════════════════ */
.ccbla-motif-pop--fill-height .ccbla-motif-pop__svg {
    height: var(--pop-size-h, 115%);
    width:  auto;
    max-width: none; /* reset tout max-width éventuel */
}

/* ══════════════════════════════════════════════════════════════════════════════
   MODE ANCHOR-LEFT
   Positionne le BORD GAUCHE du SVG à position exacte dans la rangée.
   Contrairement à clip-left qui rétrécit la zone de clip (et rogne à gauche
   si SVG > zone), anchor-left place left:X sur le SVG lui-même → pas de
   rognage gauche involontaire.

   Usage "POP billboard" (image cible) :
     anchorLeft: 50%    → bord gauche SVG au centre exact de la rangée ✓
     fill-height: 130%  → SVG dépasse haut et bas → P rognés ✓
     clip: ON           → overflow droit rogné par overflow:hidden ✓
     Résultat : SVG s'étend de 50% → droite, jamais rogné à gauche ✓
   ══════════════════════════════════════════════════════════════════════════════ */
.ccbla-motif-pop--anchor-left .ccbla-motif-pop__svg {
    left:  calc(var(--pop-anchor-left, 50%) + var(--pop-offset-x, 0px)) !important;
    right: auto !important;
}

.ccbla-motif-pop--right .ccbla-motif-pop__svg {
    right: calc(-1 * var(--pop-offset-x, 0px));
    left:  auto;
}
.ccbla-motif-pop--left .ccbla-motif-pop__svg {
    left:  calc(-1 * var(--pop-offset-x, 0px));
    right: auto;
}

/* ── Ancrage VERTICAL desktop ──────────────────────────────────────────────── */

/* haut */
.ccbla-motif-pop--av-top .ccbla-motif-pop__svg {
    top:       var(--pop-offset-y, 0px);
    bottom:    auto;
    transform: scaleX(var(--pop-flip-x, 1));
}

/* centre (défaut — backward compat si classe absente) */
.ccbla-motif-pop__svg,
.ccbla-motif-pop--av-center .ccbla-motif-pop__svg {
    top:       calc(50% + var(--pop-offset-y, 0px));
    bottom:    auto;
    transform: translateY(-50%) scaleX(var(--pop-flip-x, 1));
}
/* --av-top et --av-bottom écrasent le défaut centre ci-dessus */
.ccbla-motif-pop--av-top .ccbla-motif-pop__svg {
    top:       var(--pop-offset-y, 0px);
    transform: scaleX(var(--pop-flip-x, 1));
}
.ccbla-motif-pop--av-bottom .ccbla-motif-pop__svg {
    top:       auto;
    bottom:    var(--pop-offset-y, 0px);
    transform: scaleX(var(--pop-flip-x, 1));
}

/* ── Visibilité ────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .ccbla-motif-pop--hide-mobile  { display: none !important; }

    /* ── Flip breakpoint : override --pop-flip-x via data-attr dans la media query ── */
    [data-pop-flip-mobile="true"]  { --pop-flip-x: -1; }
    [data-pop-flip-mobile="false"] { --pop-flip-x:  1; }

    /* ── Fill-height mobile ── */
    .ccbla-motif-pop--fill-height-mobile .ccbla-motif-pop__svg {
        height:    var(--pop-size-h-mobile, var(--pop-size-h, 115%));
        width:     auto;
        max-width: none;
    }

    /* ── Anchor-left mobile ── */
    .ccbla-motif-pop--anchor-left-mobile .ccbla-motif-pop__svg {
        left:  calc(var(--pop-anchor-left-mobile, 50%) + var(--pop-offset-x-mobile, var(--pop-offset-x, 0px))) !important;
        right: auto !important;
    }

}
@media (min-width: 768px) {
    .ccbla-motif-pop--hide-desktop { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   TABLETTE (768–1024px)
   data-pop-side-tablet   → override côté
   data-pop-av-tablet     → override ancrage vertical
   --pop-size-tablet, --pop-offset-x-tablet, --pop-offset-y-tablet
   ══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1024px) {

    /* Taille tablette */
    .ccbla-motif-pop__svg {
        width: var(--pop-size-tablet, var(--pop-size, 50vw));
    }

    /* ── Côté tablette ── */
    [data-pop-side-tablet="right"] .ccbla-motif-pop__svg {
        right: calc(-1 * var(--pop-offset-x-tablet, var(--pop-offset-x, 0px)));
        left:  auto;
    }
    [data-pop-side-tablet="left"] .ccbla-motif-pop__svg {
        left:  calc(-1 * var(--pop-offset-x-tablet, var(--pop-offset-x, 0px)));
        right: auto;
    }
    /* Pas de data-pop-side-tablet → hérite classe desktop + offset tablette */
    .ccbla-motif-pop--right:not([data-pop-side-tablet]) .ccbla-motif-pop__svg {
        right: calc(-1 * var(--pop-offset-x-tablet, var(--pop-offset-x, 0px)));
        left:  auto;
    }
    .ccbla-motif-pop--left:not([data-pop-side-tablet]) .ccbla-motif-pop__svg {
        left:  calc(-1 * var(--pop-offset-x-tablet, var(--pop-offset-x, 0px)));
        right: auto;
    }

    /* ── Ancrage vertical tablette ── */
    [data-pop-av-tablet="top"] .ccbla-motif-pop__svg {
        top:       var(--pop-offset-y-tablet, var(--pop-offset-y, 0px));
        bottom:    auto;
        transform: scaleX(var(--pop-flip-x, 1));
    }
    [data-pop-av-tablet="center"] .ccbla-motif-pop__svg {
        top:       calc(50% + var(--pop-offset-y-tablet, var(--pop-offset-y, 0px)));
        bottom:    auto;
        transform: translateY(-50%) scaleX(var(--pop-flip-x, 1));
    }
    [data-pop-av-tablet="bottom"] .ccbla-motif-pop__svg {
        top:       auto;
        bottom:    var(--pop-offset-y-tablet, var(--pop-offset-y, 0px));
        transform: scaleX(var(--pop-flip-x, 1));
    }
    /* Pas de data-pop-av-tablet → hérite classe desktop + offset tablette */
    .ccbla-motif-pop--av-top:not([data-pop-av-tablet]) .ccbla-motif-pop__svg {
        top:       var(--pop-offset-y-tablet, var(--pop-offset-y, 0px));
        bottom:    auto;
        transform: scaleX(var(--pop-flip-x, 1));
    }
    .ccbla-motif-pop--av-center:not([data-pop-av-tablet]) .ccbla-motif-pop__svg {
        top:       calc(50% + var(--pop-offset-y-tablet, var(--pop-offset-y, 0px)));
        bottom:    auto;
        transform: translateY(-50%) scaleX(var(--pop-flip-x, 1));
    }
    .ccbla-motif-pop--av-bottom:not([data-pop-av-tablet]) .ccbla-motif-pop__svg {
        top:       auto;
        bottom:    var(--pop-offset-y-tablet, var(--pop-offset-y, 0px));
        transform: scaleX(var(--pop-flip-x, 1));
    }

    /* ── Flip breakpoint : override --pop-flip-x via data-attr dans la media query ── */
    [data-pop-flip-tablet="true"]  { --pop-flip-x: -1; }
    [data-pop-flip-tablet="false"] { --pop-flip-x:  1; }

    /* ── Fill-height tablette ── */
    .ccbla-motif-pop--fill-height-tablet .ccbla-motif-pop__svg {
        height:    var(--pop-size-h-tablet, var(--pop-size-h, 115%));
        width:     auto;
        max-width: none;
    }

    /* ── Anchor-left tablette ── */
    .ccbla-motif-pop--anchor-left-tablet .ccbla-motif-pop__svg {
        left:  calc(var(--pop-anchor-left-tablet, 50%) + var(--pop-offset-x-tablet, var(--pop-offset-x, 0px))) !important;
        right: auto !important;
    }

}

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE (<768px)
   data-pop-side-mobile   → override côté
   data-pop-av-mobile     → override ancrage vertical
   --pop-size-mobile, --pop-offset-x-mobile, --pop-offset-y-mobile
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* Taille mobile */
    .ccbla-motif-pop__svg {
        width: var(--pop-size-mobile, var(--pop-size, 50vw));
    }

    /* ── Côté mobile ── */
    [data-pop-side-mobile="right"] .ccbla-motif-pop__svg {
        right: calc(-1 * var(--pop-offset-x-mobile, var(--pop-offset-x, 0px)));
        left:  auto;
    }
    [data-pop-side-mobile="left"] .ccbla-motif-pop__svg {
        left:  calc(-1 * var(--pop-offset-x-mobile, var(--pop-offset-x, 0px)));
        right: auto;
    }
    /* Pas de data-pop-side-mobile → hérite classe desktop */
    .ccbla-motif-pop--right:not([data-pop-side-mobile]) .ccbla-motif-pop__svg {
        right: calc(-1 * var(--pop-offset-x-mobile, var(--pop-offset-x, 0px)));
        left:  auto;
    }
    .ccbla-motif-pop--left:not([data-pop-side-mobile]) .ccbla-motif-pop__svg {
        left:  calc(-1 * var(--pop-offset-x-mobile, var(--pop-offset-x, 0px)));
        right: auto;
    }

    /* ── Ancrage vertical mobile ── */
    [data-pop-av-mobile="top"] .ccbla-motif-pop__svg {
        top:       var(--pop-offset-y-mobile, var(--pop-offset-y, 0px));
        bottom:    auto;
        transform: scaleX(var(--pop-flip-x, 1));
    }
    [data-pop-av-mobile="center"] .ccbla-motif-pop__svg {
        top:       calc(50% + var(--pop-offset-y-mobile, var(--pop-offset-y, 0px)));
        bottom:    auto;
        transform: translateY(-50%) scaleX(var(--pop-flip-x, 1));
    }
    [data-pop-av-mobile="bottom"] .ccbla-motif-pop__svg {
        top:       auto;
        bottom:    var(--pop-offset-y-mobile, var(--pop-offset-y, 0px));
        transform: scaleX(var(--pop-flip-x, 1));
    }
    /* Pas de data-pop-av-mobile → hérite classe desktop */
    .ccbla-motif-pop--av-top:not([data-pop-av-mobile]) .ccbla-motif-pop__svg {
        top:       var(--pop-offset-y-mobile, var(--pop-offset-y, 0px));
        bottom:    auto;
        transform: scaleX(var(--pop-flip-x, 1));
    }
    .ccbla-motif-pop--av-center:not([data-pop-av-mobile]) .ccbla-motif-pop__svg {
        top:       calc(50% + var(--pop-offset-y-mobile, var(--pop-offset-y, 0px)));
        bottom:    auto;
        transform: translateY(-50%) scaleX(var(--pop-flip-x, 1));
    }
    .ccbla-motif-pop--av-bottom:not([data-pop-av-mobile]) .ccbla-motif-pop__svg {
        top:       auto;
        bottom:    var(--pop-offset-y-mobile, var(--pop-offset-y, 0px));
        transform: scaleX(var(--pop-flip-x, 1));
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   ÉDITEUR
   ══════════════════════════════════════════════════════════════════════════════ */
.ccbla-motif-pop-editor-wrap {
    display:   block;
    cursor:    default;
    /* Pas de min-height — le composant PopPreview impose sa hauteur */
}
.ccbla-motif-pop-editor-wrap.is-selected {
    outline: 2px solid #6b4796;
    outline-offset: 2px;
    border-radius: 4px;
}