/* =====================================================================
   Race World Offshore Slider - Frontend Styles (v1.2.0)
   Structure per slide:
     .rwo-slider__slide
       > .rwo-slider__media (holds image OR video OR iframe + overlay)
       > .rwo-slider__content (holds text + button)
   Overlay is CONFINED to the media wrapper.
   ===================================================================== */

.rwo-slider{position:relative;width:100%;max-width:100%;overflow:hidden;background:#0a0a0a;user-select:none;-webkit-tap-highlight-color:transparent;min-height:320px;
	/* Enable CSS container queries so canvas can scale via 100cqi without any JS. */
	container-type:inline-size}
.rwo-slider *{box-sizing:border-box}
.rwo-slider a{text-decoration:none}

/* Canvas at DESIGN size. Scaling via CSS container queries - browser computes scale
   from the slider's width automatically, no JS required. Both `transform` declarations
   below are intentional: the first is a fallback for browsers without cqi support;
   the second is picked by modern browsers. JS further overrides both with !important
   for guaranteed accuracy. */
.rwo-slider__canvas{position:absolute;top:0;left:0;transform-origin:top left;
	transform:scale(1);
	transform:scale(calc(100cqi / 1600px))}
@media(max-width:768px){
	.rwo-slider__canvas{transform:scale(calc(100cqi / 390px))}
}
.rwo-slider__canvas .rwo-slider__track{position:absolute;inset:0;width:100%;height:100%}
.rwo-slider__slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .9s ease-in-out,visibility 0s linear .9s,transform .9s ease-in-out;will-change:opacity,transform;display:block;color:inherit}
.rwo-slider__slide.is-active{opacity:1;visibility:visible;transition:opacity .9s ease-in-out,visibility 0s linear 0s,transform .9s ease-in-out;z-index:1}

.rwo-slider--slide .rwo-slider__slide{transform:translateX(100%);opacity:1;visibility:visible;transition:transform .7s cubic-bezier(.45,.15,.2,1)}
.rwo-slider--slide .rwo-slider__slide.is-active{transform:translateX(0)}
.rwo-slider--slide .rwo-slider__slide.is-prev{transform:translateX(-100%)}

.rwo-slider--kenburns .rwo-slider__slide .rwo-slider__media{transform:scale(1);transition:transform 8s ease-out}
.rwo-slider--kenburns .rwo-slider__slide.is-active .rwo-slider__media{transform:scale(1.12)}

.rwo-slider__media{position:absolute;inset:0;z-index:0;overflow:hidden}
.rwo-slider__picture,.rwo-slider__slide picture,.rwo-slider__slide img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}

/* Video (Media Library MP4 or direct MP4 URL) */
.rwo-slider__video{
	display:block;width:100%;height:100%;object-fit:cover;object-position:center;
	background:#000;
}

/* YouTube / Vimeo iframe - sized to cover the slide area with safe zoom against letterboxing */
.rwo-slider__iframe{
	position:absolute;top:50%;left:50%;
	width:max(100vw,177.78vh); /* 16:9 guarantee */
	height:max(56.25vw,100vh);
	min-width:100%;min-height:100%;
	transform:translate(-50%,-50%);
	border:0;pointer-events:none; /* clicks go through to the slider */
	background:#000;
}
/* Transparent shim on top of iframe so user can still swipe / tap through to dots + arrows.
   Sits below the text layer so buttons / links still work. */
.rwo-slider__iframe-shim{
	position:absolute;inset:0;z-index:2;
	background:transparent;pointer-events:auto;
}

.rwo-slider__overlay{position:absolute;inset:0;pointer-events:none;z-index:3}

/* Layer-wrap base (content is inside the design-size canvas, so padding is raw design px). */
.rwo-slider__content{position:absolute;inset:0;z-index:5;display:flex;padding:60px;pointer-events:none}
@media(max-width:768px){.rwo-slider__content{padding:20px}}

/* Per-element positioning: each layer wrap is absolutely positioned over the entire
   slide and flex-aligns its child to that element's own anchor. Multiple wraps stack
   on the same slide; pointer-events:none on the wrap means overlapping wraps do not
   block clicks, while pointer-events:auto on the actual elements keeps them interactive. */
.rwo-layer-wrap{pointer-events:none}
.rwo-layer-wrap .rwo-slider__text,
.rwo-layer-wrap .rwo-slider__btn{pointer-events:auto}
/* z-index stacking so buttons sit on top of overlapping text */
.rwo-layer-wrap--heading{z-index:5}
.rwo-layer-wrap--subheading{z-index:6}
.rwo-layer-wrap--button{z-index:7}
.rwo-slider__content--v-top{align-items:flex-start}
.rwo-slider__content--v-middle{align-items:center}
.rwo-slider__content--v-bottom{align-items:flex-end}
.rwo-slider__content--h-left{justify-content:flex-start;text-align:left}
.rwo-slider__content--h-center{justify-content:center;text-align:center}
.rwo-slider__content--h-right{justify-content:flex-end;text-align:right}

.rwo-slider__text{display:flex;flex-direction:column;gap:.5em;pointer-events:auto;position:relative;z-index:6}
.rwo-slider__content--h-left   .rwo-slider__text{align-items:flex-start}
.rwo-slider__content--h-center .rwo-slider__text{align-items:center}
.rwo-slider__content--h-right  .rwo-slider__text{align-items:flex-end}

.rwo-slider__heading{line-height:1.05;margin:0}
.rwo-slider__sub{line-height:1.35;margin:0;opacity:.98}
.rwo-slider__btn{display:inline-block;padding:12px 28px;border-radius:4px;font-weight:700;font-size:15px;letter-spacing:.02em;pointer-events:auto;transition:transform .2s,filter .2s,opacity .2s;position:relative;z-index:7}
.rwo-slider__btn:hover{transform:translateY(-1px);filter:brightness(1.1)}
.rwo-slider__btn:active{transform:translateY(0);filter:brightness(.95)}

.rwo-slider__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:52px;height:52px;border-radius:50%;border:0;background:rgba(0,0,0,.38);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:background .25s,transform .25s,opacity .25s;opacity:.92}
.rwo-slider__nav:hover,.rwo-slider__nav:focus-visible{background:rgba(0,0,0,.72);opacity:1;outline:none}
.rwo-slider__nav:focus-visible{box-shadow:0 0 0 3px #fff,0 0 0 5px #0a0a0a}
.rwo-slider__nav:active{transform:translateY(-50%) scale(.94)}
.rwo-slider__nav svg{width:22px;height:22px}
.rwo-slider__nav--prev{left:18px}
.rwo-slider__nav--next{right:18px}

.rwo-slider__dots{position:absolute;left:0;right:0;bottom:22px;z-index:10;display:flex;justify-content:center;align-items:center;gap:10px;padding:0 60px}
.rwo-slider__dots button{width:10px;height:10px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.45);cursor:pointer;transition:background .25s,transform .25s,width .3s}
.rwo-slider__dots button:hover{background:rgba(255,255,255,.8)}
.rwo-slider__dots button[aria-selected="true"]{background:#fff;width:30px;border-radius:6px}
.rwo-slider__dots button:focus-visible{outline:2px solid #fff;outline-offset:3px}

.rwo-slider__progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.12);z-index:10;overflow:hidden}
.rwo-slider__progress span{display:block;height:100%;width:0;background:#fff;transform-origin:left center}
.rwo-slider.is-playing .rwo-slider__progress span{animation:rwoProgress var(--rwo-duration,5500ms) linear forwards}
.rwo-slider.is-paused .rwo-slider__progress span{animation-play-state:paused}
@keyframes rwoProgress{from{width:0}to{width:100%}}

@media (max-width:992px){
	.rwo-slider__nav{width:44px;height:44px}
	.rwo-slider__nav--prev{left:10px}.rwo-slider__nav--next{right:10px}
	.rwo-slider__dots{bottom:16px;gap:8px}
	.rwo-slider__dots button{width:8px;height:8px}
	.rwo-slider__dots button[aria-selected="true"]{width:24px}
	/* Tablet nav/dot sizing only - no font-size overrides. Per-slide inline
	   styles control heading/sub size so user values always win. */
}

@media (max-width:600px){
	.rwo-slider__content{padding:18px}
	/* NO font-size !important here - per-slide inline styles win. The defaults
	   above this media query already apply responsive sizing for uncustomized slides. */
}

@media (prefers-reduced-motion:reduce){
	.rwo-slider__slide{transition:opacity .01s linear}
	.rwo-slider--kenburns .rwo-slider__slide .rwo-slider__media{transition:none;transform:none !important}
	.rwo-slider.is-playing .rwo-slider__progress span{animation:none;width:100%}
	.rwo-slider__video{display:none} /* don't autoplay videos for reduce-motion users */
}