/******************************
 *
 *  CWA Swiper Skin
 *  Styles the native Swiper markup rendered server-side by
 *  cwa_render_native_slider() in functions.php. No dependency on
 *  RoyalSlider's markup, JS, or its rs-cwa_img.png sprite.
 *
 *    1. Container / sizing
 *    2. Slides (variable width, fixed height)
 *    3. Arrows (solid CSS triangles)
 *    4. Pagination bullets
 *
 ******************************/


/***************
 *
 *  1. Container / sizing
 *
 *  Matches the original autoScaleSliderWidth:800 / autoScaleSliderHeight:300
 *  ratio (2.667:1) so the slider takes up the same footprint it used to.
 *
 ****************/

.cwa-swiper-slider {
	position: relative;
	width: 100%;
	aspect-ratio: 600 / 300;
	overflow: hidden;
}


/***************
 *
 *  2. Slides
 *
 *  slidesPerView:'auto' + width:auto here is what gives each slide its own
 *  natural width once the image is scaled to fill the fixed slide height —
 *  portrait photos end up narrower, landscape photos wider, no cropping.
 *
 ****************/

.cwa-swiper-slider .swiper-wrapper {
	height: 100%;
}

.cwa-swiper-slider .swiper-slide {
	width: auto;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cwa-swiper-slider .swiper-slide img {
	height: 100%;
	width: auto;
	max-width: none;
	display: block;
}


/***************
 *
 *  3. Arrows
 *
 *  Solid CSS-drawn triangles — no sprite image (rs-cwa_img.png, the old
 *  RoyalSlider skin sprite, is no longer referenced here at all so it can't
 *  double up with anything). Swiper's own default icon is killed via the
 *  ::after content:'' reset, then we draw the triangle on that same ::after
 *  pseudo-element with a clip-path so it's a single solid shape.
 *
 ****************/

.cwa-swiper-slider .swiper-button-prev,
.cwa-swiper-slider .swiper-button-next {
	top: 50%;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	z-index: 21;
	background: none;
}

.cwa-swiper-slider .swiper-button-prev {
	left: 12px;
}

.cwa-swiper-slider .swiper-button-next {
	right: 12px;
}

/* Swiper 14 injects a real <svg class="swiper-navigation-icon"> chevron
   inside each button (it's not drawn via ::after any more), so it has to
   be hidden explicitly or it renders on top of/behind our triangle. */
.cwa-swiper-slider .swiper-button-prev .swiper-navigation-icon,
.cwa-swiper-slider .swiper-button-next .swiper-navigation-icon {
	display: none;
}

.cwa-swiper-slider .swiper-button-prev::after,
.cwa-swiper-slider .swiper-button-next::after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background-color: #e7340c;
}

.cwa-swiper-slider .swiper-button-prev::after {
	clip-path: polygon(100% 0%, 0% 50%, 100% 100%);
}

.cwa-swiper-slider .swiper-button-next::after {
	clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
}

.cwa-swiper-slider .swiper-button-disabled {
	opacity: 0.3;
}


/***************
 *
 *  4. Pagination bullets
 *
 *  Lives outside .cwa-swiper-slider entirely (see the markup comment in
 *  cwa_render_native_slider() in functions.php) so it sits in normal
 *  document flow 10px below the slider instead of overlapping the images.
 *
 ****************/

.cwa-swiper-pagination {
	position: static;
	margin-top: 10px;
	width: 100%;
	text-align: right;
	padding-right: 5px;
	line-height: 1;
}

.cwa-swiper-pagination .swiper-pagination-bullet {
	width: 6px;
	height: 6px;
	margin: 0 4px 0 5px;
	background: silver;
	opacity: 1;
	box-shadow: none;
}

.cwa-swiper-pagination .swiper-pagination-bullet-active {
	background: #e7340c;
}


/***************
 *
 *  Mobile override
 *
 *  Matches the original ".rsOverflow, .royalSlider { height: 260px !important }"
 *  rule from cwa_skin.css at the same breakpoint.
 *
 ****************/

@media screen and (max-width: 600px) {
	.cwa-swiper-slider {
		aspect-ratio: auto;
		height: 260px !important;
	}

	.cwa-swiper-slider .swiper-button-prev,
	.cwa-swiper-slider .swiper-button-next {
		width: 14px;
		height: 14px;
		margin-top: -7px;
	}
}