.xel-image-accordion{display:flex;gap:10px}@media screen and (min-width: 1024px){.xel-image-accordion{gap:20px}}.xel-image-accordion h1,.xel-image-accordion h2,.xel-image-accordion h3,.xel-image-accordion h4,.xel-image-accordion h5,.xel-image-accordion h6{margin-top:0}.xel-image-accordion .xel-image-accordion--content-parent{flex:var(--xel-closed-flex,1) 1 0%;transition:flex 400ms;overflow:hidden}.xel-image-accordion .xel-image-accordion--content-parent:hover,.xel-image-accordion .xel-image-accordion--content-parent.is-active{flex:var(--xel-open-flex,2) 1 0%}.xel-image-accordion .xel-image-accordion--content-parent:hover .xel-image-accordion--content:before,.xel-image-accordion .xel-image-accordion--content-parent.is-active .xel-image-accordion--content:before{opacity:.75}.xel-image-accordion .xel-image-accordion--content-parent:hover .xel-image-accordion--content-holder,.xel-image-accordion .xel-image-accordion--content-parent.is-active .xel-image-accordion--content-holder{flex:1;transform:translate(0px, 0px)}.xel-image-accordion.xel-image-accordion--horizontal{flex-direction:row}.xel-image-accordion.xel-image-accordion--vertical{flex-direction:column}.xel-image-accordion--content{position:relative;display:flex;width:100%;height:100%;padding:5px;overflow:hidden}@media screen and (min-width: 1024px){.xel-image-accordion--content{padding:20px}}.xel-image-accordion--content .xel-image-accordion--content-holder{flex:1;transform:translate(0px, 1000px);transition:transform 300ms;will-change:transform}.xel-image-accordion--content:before{content:"";position:absolute;top:0;left:0;bottom:0;right:0;background:linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.65));opacity:0;transition:opacity 500ms}

/* Vertical title (inactive) — inherits styles from .xel-image-accordion--title */
.xel-image-accordion .xel-image-accordion--content-parent{
  position: relative;
}

.xel-image-accordion .xel-image-accordion--vertical-title-wrap{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;      /* κάτω */
  justify-content: flex-start;/* αριστερά */
  padding-bottom: 2em;       /* απόσταση από κάτω */
  padding-left: 2em;         /* απόσταση από αριστερά */
  opacity: 1;
  transition: opacity 250ms ease;
  pointer-events: none;
}

.xel-image-accordion .xel-image-accordion--title-vertical{
  writing-mode: horizontal-tb;
  transform: none;
}

/* Στο hover κρύβουμε το vertical title για να φαίνεται το κανονικό content */
.xel-image-accordion .xel-image-accordion--content-parent:hover .xel-image-accordion--vertical-title-wrap{
  opacity: 0;
}



/* WOWweb additions: keep overlay and content layers predictable */
.xel-image-accordion .xel-image-accordion--content:before{
  z-index: 1;
  pointer-events: none;
}

.xel-image-accordion .xel-image-accordion--content-holder{
  position: relative;
  z-index: 2;
}

.xel-image-accordion .xel-image-accordion--vertical-title-wrap{
  z-index: 3;
}


/* WOWweb additions: default open slide + custom flex controls */
.xel-image-accordion:hover .xel-image-accordion--content-parent.is-active:not(:hover){
  flex: var(--xel-closed-flex,1) 1 0%;
}
.xel-image-accordion:hover .xel-image-accordion--content-parent.is-active:not(:hover) .xel-image-accordion--content-holder{
  transform: translate(0px, 1000px);
}
.xel-image-accordion:hover .xel-image-accordion--content-parent.is-active:not(:hover) .xel-image-accordion--content:before{
  opacity: 0;
}
.xel-image-accordion .xel-image-accordion--content-parent.is-active .xel-image-accordion--vertical-title-wrap{
  opacity: 0;
}
.xel-image-accordion:hover .xel-image-accordion--content-parent.is-active:not(:hover) .xel-image-accordion--vertical-title-wrap{
  opacity: 1;
}