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

.ajw-clickable {
  cursor: pointer;
  position: relative;
  -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;
}

/* Optionaler SEO-Link liegt in einem global ausgeblendeten Container, nicht in der Gruppe. */
#ajwcg-seo-links {
  display: none !important;
}

.ajw-seo-link {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Die Klick-Navigation erfolgt über das data-Attribut und JavaScript.
   Es wird bewusst kein Overlay-Link als zusätzliches Kind eingefügt, damit
   Theme-Abstände, Flex/Grid und :first-child-Regeln unverändert bleiben. */

/* 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;
}

/* ==================  Hover-Reveal  ==================
   Elemente mit konfigurierten CSS-Klassen erscheinen beim
   Hover smooth – das Layout verschiebt sich dabei mit.

   Aufbau (vom JS automatisch erzeugt):
     .ajw-reveal-slot   ← display:grid, animiert grid-template-rows
       .ajw-reveal-inner ← overflow:hidden, hält Margins zurück
         [dein Element]  ← data-ajw-reveal, animiert opacity

   Easing: cubic-bezier(.2, .9, .2, 1) – identisch mit
   der Plugin-eigenen Hover-Scale-Animation.

   Richtung:
   - Einblenden: Slot öffnet sich UND opacity fade-in gleichzeitig
   - Ausblenden: exakt rückwärts, gleiche Dauer, gleicher Easing
*/

/* ── Container: overflow:visible damit Elemente nicht abgeschnitten werden ── */
body:not(.wp-admin) .ajw-clickable.ajw-hover-reveal {
  overflow: visible !important;
}

/* Auch WP Cover schneidet oft mit overflow:hidden – aufheben */
body:not(.wp-admin) .ajw-clickable.ajw-hover-reveal.wp-block-cover,
body:not(.wp-admin) .ajw-clickable.ajw-hover-reveal .wp-block-cover__inner-container {
  overflow: visible !important;
}

/* ── Slot: steuert den Platz via grid-template-rows ──────────────────────── */
body:not(.wp-admin) .ajw-clickable.ajw-hover-reveal .ajw-reveal-slot {
  display: grid;
  grid-template-rows: 0fr;
  /* Einblenden UND Ausblenden: exakt gleiche Transition */
  transition: grid-template-rows 0.45s cubic-bezier(.2, .9, .2, 1);
  will-change: grid-template-rows;
  /* Slot selbst darf nicht abschneiden – overflow auf inner geregelt */
  overflow: visible;
  /* Kein eigenes margin/padding – das bleibt beim Element */
  margin: 0;
  padding: 0;
  /* Z-Index: Reveal-Elemente sollen über anderen Inhalten liegen */
  position: relative;
  z-index: 10;
}

body:not(.wp-admin) .ajw-clickable.ajw-hover-reveal:hover .ajw-reveal-slot {
  grid-template-rows: 1fr;
}

/* ── Inner: hält den Margin-Kollaps zurück, schneidet während Animation ab ── */
body:not(.wp-admin) .ajw-clickable.ajw-hover-reveal .ajw-reveal-inner {
  overflow: hidden;   /* nötig damit grid 0fr wirklich auf 0 kollabiert */
  min-height: 0;      /* Pflicht für 0fr */
  margin: 0;
  padding: 0;
}

/* ── Element selbst: opacity-Animation, gleichzeitig mit dem Slot ─────────── */
body:not(.wp-admin) .ajw-clickable.ajw-hover-reveal [data-ajw-reveal] {
  opacity: 0;
  pointer-events: none;
  /* Gleiche Dauer + Easing wie der Slot → läuft synchron */
  transition: opacity 0.45s cubic-bezier(.2, .9, .2, 1);
  will-change: opacity;
  /* Hoher Z-Index damit das Element nicht hinter anderen Cover-Inhalten verschwindet */
  position: relative;
  z-index: 10;
}

body:not(.wp-admin) .ajw-clickable.ajw-hover-reveal:hover [data-ajw-reveal] {
  opacity: 1;
  pointer-events: auto;
}