/* Oui Widgets - image overlay: a picture, a colour layer and a caption. Always visible, or on hover/focus (and always on touch screens). */
.ouiw-io{position:relative;overflow:hidden;margin:0;color:var(--io-text,#fff)}
.ouiw-io .ouiw-io__img{display:block;width:100%;height:var(--io-h,auto);max-width:100%;object-fit:cover;transition:transform .5s ease}
.ouiw-io--noimg{height:var(--io-h,300px)}
.ouiw-io__layer{position:absolute;inset:0;background:var(--io-grad,var(--io-color,#000));opacity:var(--io-opacity,.55);transition:opacity .3s ease;pointer-events:none}
.ouiw-io__caption{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:var(--io-pad,1.25rem);transition:opacity .3s ease,transform .3s ease}
.ouiw-io--v-top .ouiw-io__caption{justify-content:flex-start}
.ouiw-io--v-middle .ouiw-io__caption{justify-content:center}
.ouiw-io--h-left .ouiw-io__caption{align-items:flex-start;text-align:left}
.ouiw-io--h-center .ouiw-io__caption{align-items:center;text-align:center}
.ouiw-io--h-right .ouiw-io__caption{align-items:flex-end;text-align:right}
.ouiw-io__title,.ouiw-io__subtitle,.ouiw-io__text{margin:0;color:inherit}
.ouiw-io__title{margin-bottom:var(--io-tm,0);font-size:var(--io-ts,inherit);line-height:var(--io-tl,inherit)}
.ouiw-io__subtitle{white-space:pre-line}
.ouiw-io__subtitle,.ouiw-io__text{margin-top:var(--io-stm,.35rem)}
.ouiw-io .ouiw-io__link{color:inherit;text-decoration:none}
.ouiw-io__layer::after{content:"";position:absolute;inset:0;background:var(--io-grad2);opacity:0;transition:opacity .6s linear}
.ouiw-io:hover .ouiw-io__layer::after{opacity:1}
.ouiw-io__btnwrap{position:relative;z-index:1;margin-top:10px;transition:transform .55s}
.ouiw-io--h-left .ouiw-io__btnwrap{transform:translateX(15px)}
.ouiw-io--h-right .ouiw-io__btnwrap{transform:translateX(-15px)}
.ouiw-io:hover .ouiw-io__btnwrap{transform:none}
/* The caption text rests 15px in from its side and moves to its place on hover (margin, not transform: the title link's ::after covers the whole picture) */
.ouiw-io--h-left .ouiw-io__title,.ouiw-io--h-left .ouiw-io__subtitle,.ouiw-io--h-left .ouiw-io__text{margin-left:15px;transition:margin .35s}
.ouiw-io--h-right .ouiw-io__title,.ouiw-io--h-right .ouiw-io__subtitle,.ouiw-io--h-right .ouiw-io__text{margin-right:15px;transition:margin .35s}
.ouiw-io:hover .ouiw-io__title,.ouiw-io:hover .ouiw-io__subtitle,.ouiw-io:hover .ouiw-io__text{margin-left:0;margin-right:0}
.ouiw-io__btn{display:inline-block;vertical-align:middle;padding:8px 12px;border:1px solid transparent;border-radius:4px;font-size:var(--io-bs,16px);line-height:20px;font-weight:600;text-align:center;text-decoration:none;color:var(--io-bc,#fff);background:var(--io-bb,#3366ff);transition:background-color .2s,color .2s}
.ouiw-io__btn:hover{color:var(--io-bhc,var(--io-bc,#fff));background:var(--io-bhb,var(--io-bb,#0037dd))}
/* The picture slides 50px into view on hover, like the page builder's overlay image */
.ouiw-io--fx-slide-left .ouiw-io__img,.ouiw-io--fx-slide-right .ouiw-io__img{width:calc(100% + 50px);max-width:none}
.ouiw-io--fx-slide-top .ouiw-io__img,.ouiw-io--fx-slide-bottom .ouiw-io__img{height:calc(var(--io-h,300px) + 50px);max-width:100%}
.ouiw-io--fx-slide-left .ouiw-io__img{transform:translateX(-50px)}
.ouiw-io--fx-slide-top .ouiw-io__img{transform:translateY(-50px)}
.ouiw-io--fx-slide-left:hover .ouiw-io__img,.ouiw-io--fx-slide-right:hover .ouiw-io__img,.ouiw-io--fx-slide-top:hover .ouiw-io__img{transform:none}
.ouiw-io--fx-slide-right:hover .ouiw-io__img{transform:translateX(-50px)}
.ouiw-io--fx-slide-bottom:hover .ouiw-io__img{transform:translateY(-50px)}
.ouiw-io__link::after{content:"";position:absolute;inset:0}
.ouiw-io__link:focus-visible{outline:3px solid currentColor;outline-offset:-6px}
.ouiw-io--fx-zoom:hover .ouiw-io__img,.ouiw-io--fx-zoom:focus-within .ouiw-io__img{transform:scale(1.08)}
@media (hover:hover){
    .ouiw-io--layer-hover .ouiw-io__layer,.ouiw-io--text-hover .ouiw-io__caption{opacity:0}
    .ouiw-io--layer-hover:hover .ouiw-io__layer,.ouiw-io--layer-hover:focus-within .ouiw-io__layer{opacity:var(--io-opacity,.55)}
    .ouiw-io--text-hover:hover .ouiw-io__caption,.ouiw-io--text-hover:focus-within .ouiw-io__caption{opacity:1}
    .ouiw-io--text-hover.ouiw-io--fx-slide .ouiw-io__caption{transform:translateY(1rem)}
    .ouiw-io--text-hover.ouiw-io--fx-slide:hover .ouiw-io__caption,.ouiw-io--text-hover.ouiw-io--fx-slide:focus-within .ouiw-io__caption{transform:none}
}
@media (prefers-reduced-motion:reduce){.ouiw-io *{transition:none!important}.ouiw-io--fx-zoom:hover .ouiw-io__img{transform:none}}
