/* ========= AvS Clickable Groups (Author: Aaron-Jay Wolff) ========= */

.ajw-clickable {
  cursor: pointer;
  position: relative; /* für den unsichtbaren SEO-Link */
  -webkit-tap-highlight-color: transparent;
}

/* KEINE Umrandung / kein Outline bei Klick oder Fokus */
.ajw-clickable:focus,
.ajw-clickable:focus-visible,
.ajw-clickable:active {
  outline: none !important;
  box-shadow: none;
}

/* Unsichtbarer SEO-Link (nur wenn nofollow aktiv) */
.ajw-seo-link {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Hover-Animation: NICHT-Hover -> KEIN Schatten */
.ajw-clickable.shadow1:not(.ajw-nohover) {
  box-shadow: none;
  transform: translateZ(0);
  will-change: transform, box-shadow;
  transition:
    box-shadow 0.45s cubic-bezier(.2, .9, .2, 1),
    transform 0.45s cubic-bezier(.2, .9, .2, 1);
}

/* Hover-Zustand: weicher Schatten + weiches mini-Scale */
.ajw-clickable.shadow1:not(.ajw-nohover):hover {
  /* leicht stärkerer Hover: minimal mehr Scale + einen Tick dunklerer Schatten */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
  transform: scale(1.012);
}

/* Wenn Hover deaktiviert ist: keine Animation, kein Schatten, kein Scale */
.ajw-clickable.ajw-nohover {
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
}

/* ================== Cover Hover Effekte ==================
   Hinweis: Nur im Frontend aktiv (nicht im wp-admin/Editor).
   Wirken auf Cover innerhalb der klickbaren Gruppe / des Covers.
*/

/* 1) Overlay beim Hover ausblenden */
body:not(.wp-admin) .ajw-clickable.ajw-hover-cover-overlay-off .wp-block-cover__background,
body:not(.wp-admin) .ajw-clickable.ajw-hover-cover-overlay-off .wp-block-cover__gradient-background {
  transition: opacity 0.75s cubic-bezier(.2, .9, .2, 1);
  will-change: opacity;
}

body:not(.wp-admin) .ajw-clickable.ajw-hover-cover-overlay-off:hover .wp-block-cover__background,
body:not(.wp-admin) .ajw-clickable.ajw-hover-cover-overlay-off:hover .wp-block-cover__gradient-background {
  opacity: 0 !important; /* Cover setzt Opacity oft inline */
}

/* 2) Duotone → Original (Farbe) beim Hover
   - Ausgangslage: das Duotone (oder ein anderes Filter), das du IM Block eingestellt hast.
   - Wir setzen im Normalzustand KEIN eigenes Duotone/Grayscale.
   - Beim Hover entfernen wir den Filter per `filter: none !important;` -> blendet weich zur Originaldatei.
*/
body:not(.wp-admin) .ajw-clickable.ajw-hover-cover-colorize .wp-block-cover__image-background,
body:not(.wp-admin) .ajw-clickable.ajw-hover-cover-colorize .wp-block-cover__video-background,
body:not(.wp-admin) .ajw-clickable.ajw-hover-cover-colorize img,
body:not(.wp-admin) .ajw-clickable.ajw-hover-cover-colorize .wp-block-image img,
body:not(.wp-admin) .ajw-clickable.ajw-hover-cover-colorize .wp-block-media-text__media img,
body:not(.wp-admin) .ajw-clickable.ajw-hover-cover-colorize .wp-block-gallery img {
  transition:
    filter 0.85s cubic-bezier(.2, .9, .2, 1),
    -webkit-filter 0.85s cubic-bezier(.2, .9, .2, 1);
  will-change: filter;
}

body:not(.wp-admin) .ajw-clickable.ajw-hover-cover-colorize:hover .wp-block-cover__image-background,
body:not(.wp-admin) .ajw-clickable.ajw-hover-cover-colorize:hover .wp-block-cover__video-background,
body:not(.wp-admin) .ajw-clickable.ajw-hover-cover-colorize:hover img,
body:not(.wp-admin) .ajw-clickable.ajw-hover-cover-colorize:hover .wp-block-image img,
body:not(.wp-admin) .ajw-clickable.ajw-hover-cover-colorize:hover .wp-block-media-text__media img,
body:not(.wp-admin) .ajw-clickable.ajw-hover-cover-colorize:hover .wp-block-gallery img {
  -webkit-filter: none !important;
  filter: none !important;
}

/* 2b) Duotone/Filter-Switch (url(#...)) kann nicht sauber animieren.
   Workaround: wir crossfaden zwischen "gefiltert" (Original) und "ungefiltert" (Clone).
   Die Clones werden im Frontend per JS automatisch erzeugt, wenn ein nicht-animierbarer Filter erkannt wird.
*/
body:not(.wp-admin) .ajw-clickable.ajw-hover-cover-colorize .ajw-colorize-wrap {
  position: relative;
  display: block;
}

body:not(.wp-admin) .ajw-clickable.ajw-hover-cover-colorize .ajw-colorize-wrap > img {
  display: block;
  max-width: 100%;
}

body:not(.wp-admin) .ajw-clickable.ajw-hover-cover-colorize .ajw-colorize-wrap > img.ajw-colorize-clone {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.85s cubic-bezier(.2, .9, .2, 1);
  will-change: opacity;
  -webkit-filter: none !important;
  filter: none !important;
}

body:not(.wp-admin) .ajw-clickable.ajw-hover-cover-colorize .ajw-colorize-wrap > img.ajw-colorize-original {
  transition: opacity 0.85s cubic-bezier(.2, .9, .2, 1);
  will-change: opacity;
}

body:not(.wp-admin) .ajw-clickable.ajw-hover-cover-colorize:hover .ajw-colorize-wrap > img.ajw-colorize-clone {
  opacity: 1;
}

body:not(.wp-admin) .ajw-clickable.ajw-hover-cover-colorize:hover .ajw-colorize-wrap > img.ajw-colorize-original {
  opacity: 0;
}