/* ==========================================================================
   PWS EZ Shim Slider
   ========================================================================== */

.pws-slider {
	position: relative;
	/* Break out of the theme's content container to span the full viewport. */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	overflow: hidden;
	background: #000;
}

/* Track & slides */
.pws-slider__track {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	height: 800px;
}

.pws-slider__slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 0.5s ease;
	pointer-events: none;
}

.pws-slider__slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

/* ==========================================================================
   Layers — shared reset
   ========================================================================== */

.pws-layer {
	opacity: 0;
}

.is-active .pws-layer {
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); /* Strong.easeOut */
}

/* ==========================================================================
   Image layers (right side, bottom-anchored)
   ========================================================================== */

.pws-slider__images {
	position: absolute;
	right: 150px;
	bottom: 0;
	width: 50%;
	height: 100%;
	pointer-events: none;
}

.pws-layer--img-back {
	position: absolute;
	right: 85px;
	bottom: 0;
	width: 436px;
	height: auto;
	max-height: 100%;
	object-fit: contain;
	object-position: bottom;
	animation-name: pws-slide-up;
	animation-duration: 1s;
	animation-delay: 0.4s;
}

.pws-layer--img-front {
	position: absolute;
	right: 200px;
	bottom: 0;
	width: 366px;
	height: auto;
	max-height: 95%;
	object-fit: contain;
	object-position: bottom;
	animation-name: pws-slide-up;
	animation-duration: 1s;
	animation-delay: 1s;
}

/* ==========================================================================
   Text layers (left side)
   ========================================================================== */

.pws-slider__content {
	position: absolute;
	top: 50%;
	left: 52px;
	transform: translateY(-50%);
	width: min(650px, 55%);
	color: #fff;
}

/*
 * Prefixed with .pws-slider to reach specificity (0-2-0) and beat common
 * theme rules like `.entry-content h2 { color }` which sit at (0-1-1).
 */
.pws-slider .pws-layer--title {
	font-family: Montserrat, sans-serif;
	font-size: 64px;
	line-height: 74px;
	font-weight: 400;
	letter-spacing: -1px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 1);
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
	margin: 0 0 28px;
	padding-left: 150px;
	white-space: normal;
	animation-name: pws-drop-down;
	animation-duration: 1s;
	animation-delay: 1.5s;
}

.pws-slider .pws-layer--title span {
	color: #fce015;
}

/* Description — badge list */
.pws-desc-list {
	list-style: none;
	margin: 0 0 36px;
	padding: 0 0 0 150px;
	display: flex;
	flex-wrap: wrap;
	gap: 2px 8px;
	animation-name: pws-drop-down;
	animation-duration: 1s;
	animation-delay: 2s;
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
	opacity: 0;
}

.is-active .pws-desc-list {
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.pws-desc-list li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.95);
	font-family: Montserrat, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	letter-spacing: 0.2px;
	padding: 0;
	line-height: 1.5;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.pws-desc-list li::before {
	content: '';
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #fce015;
	flex-shrink: 0;
}

.pws-layer--btns {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding-left: 150px;
	animation-name: pws-slide-right;
	animation-duration: 1s;
	animation-delay: 2.4s;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

/*
 * Prefixed with .pws-slider so specificity (0-2-0) beats theme link rules
 * like `.entry-content a { color: #fce015 }` which sit at (0-1-1).
 */
.pws-slider .pws-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 14px 22px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	text-decoration: none;
	border-radius: 3px;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	line-height: 1;
}

.pws-slider .pws-btn--primary {
	background-color: #fce015;
	color: #111111 !important;
	border: 2px solid #fce015;
}

.pws-slider .pws-btn--primary:hover {
	background-color: #e6cc00;
	border-color: #e6cc00;
	color: #111111 !important;
}

.pws-slider .pws-btn--outline {
	background-color: transparent;
	color: #ffffff;
	border: 1px solid #ffffff;
	padding: 13px 22px;
}

.pws-slider .pws-btn--outline:hover {
	background-color: #ffffff;
	color: #111111;
}

/* ==========================================================================
   Arrows
   ========================================================================== */

.pws-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 30;
	background: rgba(0, 0, 0, 0.35);
	color: #fff;
	border: none;
	width: 44px;
	height: 44px;
	font-size: 20px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.2s ease;
	border-radius: 2px;
}

.pws-slider:hover .pws-slider__arrow,
.pws-slider__arrow:focus {
	opacity: 1;
}

.pws-slider__arrow:hover {
	background: rgba(0, 0, 0, 0.6);
}

.pws-slider__arrow--prev { left: 25px; }
.pws-slider__arrow--next { right: 25px; }

/* ==========================================================================
   Keyframes
   ========================================================================== */

@keyframes pws-slide-up {
	from { opacity: 0; transform: translateY(100px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes pws-drop-down {
	from { opacity: 0; transform: translateY(-50px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes pws-slide-right {
	from { opacity: 0; transform: translateX(-50px); }
	to   { opacity: 1; transform: translateX(0); }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablet landscape */
@media (max-width: 1024px) {
	.pws-slider__track { height: 600px; }

	.pws-slider .pws-layer--title { font-size: 48px; line-height: 56px; }

	.pws-layer--img-back  { width: 320px; right: 40px; }
	.pws-layer--img-front { width: 260px; right: 140px; }
}

/* Tablet portrait / large phone */
@media (max-width: 768px) {
	/*
	 * Height fix: slides are position:absolute and don't push the track height.
	 * The active slide becomes position:relative so it drives the track height
	 * naturally. Inactive slides stay absolute (invisible) and don't affect layout.
	 */
	.pws-slider__track {
		height: auto;
		min-height: 520px;
	}

	.pws-slider__slide {
		transition: none; /* instant switch avoids layout-thrash on height change */
	}

	.pws-slider__slide.is-active {
		position: relative;
		inset: auto;
		min-height: 520px;
	}

	.pws-slider__images { display: none; }

	.pws-slider__content {
		position: relative;
		top: auto;
		left: auto;
		transform: none;
		width: 100%;
		padding: 48px 20px 64px;
	}

	.pws-slider .pws-layer--title { font-size: 36px; line-height: 44px; padding-left: 0; }

	/* Reset desktop left indent — no room on mobile */
	.pws-desc-list { gap: 3px 8px; margin-bottom: 28px; padding-left: 0; }
	.pws-desc-list li { font-size: 14px; }

	/* Arrows always visible on touch — hover doesn't exist on mobile */
	.pws-slider__arrow {
		opacity: 0.7;
		width: 36px;
		height: 36px;
		font-size: 16px;
	}
}

/* Small phones */
@media (max-width: 480px) {
	.pws-slider__track,
	.pws-slider__slide.is-active { min-height: 480px; }

	.pws-slider__content { padding: 36px 16px 52px; }

	.pws-slider .pws-layer--title { font-size: 28px; line-height: 36px; padding-left: 0; }
	.pws-desc-list li { font-size: 13px; }

	.pws-layer--btns { flex-direction: column; gap: 8px; padding-left: 0; }
	.pws-slider .pws-btn { justify-content: center; text-align: center; }
}