/* =========================================================
   AFO – core/image block styles (register_block_style)
   - Gutenberg ajoute : .is-style-cut40 / .is-style-cut20
   - On les mappe vers tes classes existantes : .cut40 / .cut20
   ========================================================= */

/* WP met souvent l'image dans <figure class="wp-block-image"> */
.wp-block-image.is-style-cut40,
.wp-block-image.is-style-cut40 img {
   --cut: 40px;
  position: relative;
  overflow: hidden;
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    0 100%
  );
}

.wp-block-image.is-style-cut20,
.wp-block-image.is-style-cut20 img {
   --cut: 20px;
  position: relative;
  overflow: hidden;
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    0 100%
  );
}

/* Option 1 (le plus simple) : si tes classes .cut40/.cut20
   sont définies sur l'élément à "clipper", tu peux juste
   les "étendre" en dupliquant les sélecteurs : */

.wp-block-image.is-style-cut40 { 
   --cut: 40px;
  position: relative;
  overflow: hidden;
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    0 100%
  );
}

.wp-block-image.is-style-cut40 img { 
   --cut: 40px;
  position: relative;
  overflow: hidden;
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    0 100%
  );
}

.wp-block-image.is-style-cut20 { 
   --cut: 20px;
  position: relative;
  overflow: hidden;
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    0 100%
  );
}

.wp-block-image.is-style-cut20 img { 
   --cut: 20px;
  position: relative;
  overflow: hidden;
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    0 100%
  );
}

/* (optionnel) : sécurité pour éviter les débordements si clip-path / mask */
.wp-block-image.is-style-cut40,
.wp-block-image.is-style-cut20 {
  overflow: hidden;
}
