/* Webcrow Referenz-Mosaik Aufsatz 1.0.0
   Haengt sich nur an Klassen der nativen Divi-Module:
   .wc-mosaik-kachel (Spalte), .wc-mosaik-leiste (Text), .wc-mosaik-bild (Bild). */

/* Adressleiste: drei Punkte als Dekoration, Text mittig */
.wc-mosaik-leiste .et_pb_text_inner{display:flex;align-items:center;height:100%}
.wc-mosaik-leiste .et_pb_text_inner::before{content:"";flex:0 0 8px;width:8px;height:8px;margin-right:43px;border-radius:50%;background:#d6cbc6;box-shadow:15px 0 0 #d6cbc6,30px 0 0 #d6cbc6}
.wc-mosaik-leiste .et_pb_text_inner p{min-width:0}

/* Bild fuellt die Restflaeche der Kachel */
.wc-mosaik-bild{position:relative}
.wc-mosaik-bild > a,
.wc-mosaik-bild .et_pb_image_wrap{display:block;width:100%;height:100%}
.wc-mosaik-bild img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0%}

/* Scrollgebundener Durchlauf, ohne JavaScript */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    /* Die Kachel liefert die Zeitleiste: Das Bild selbst liegt in overflow:hidden, das view() sonst als Scrollcontainer behandelt. */
    .wc-mosaik-kachel{view-timeline:--wc-mosaik-kachel block}
    .wc-mosaik-bild img{animation:wc-mosaik-durchlauf linear both;animation-timeline:--wc-mosaik-kachel;animation-range:entry 100% exit 0%}
    @keyframes wc-mosaik-durchlauf{from{object-position:50% 0%}to{object-position:50% 100%}}
  }
}

/* Rueckfall ohne Unterstuetzung: derselbe Durchlauf beim Ueberfahren */
@supports not (animation-timeline: view()){
  @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference){
    .wc-mosaik-bild img{transition:object-position 6s cubic-bezier(.77,0,.175,1)}
    .wc-mosaik-kachel:hover .wc-mosaik-bild img,
    .wc-mosaik-kachel:focus-within .wc-mosaik-bild img{object-position:50% 100%}
  }
}

/* Hover-Anhebung der Kachel */
@media (hover: hover) and (pointer: fine){
  @media (prefers-reduced-motion: no-preference){
    .wc-mosaik-kachel{transition:transform .4s cubic-bezier(.23,1,.32,1),box-shadow .4s cubic-bezier(.23,1,.32,1)}
    .wc-mosaik-kachel:hover{transform:translateY(-4px);box-shadow:0 24px 50px -24px rgba(65,17,0,.4)}
  }
}