/* ============================================================
 * MW Post Carousel Widget
 *
 * CSS custom properties with neutral defaults — override these
 * in your theme stylesheet or Elementor custom CSS to rebrand
 * without touching this file.
 * ============================================================ */

/* ── Custom Properties ── */
.mw-post-carousel {
	--mw-pc-card-bg: #ffffff;

	--mw-pc-cat-color: #2F31FC;
	--mw-pc-cat-font-size: 18px;

	--mw-pc-heading-color: #1a1a1a;
	--mw-pc-heading-hover-color: #2F31FC;
	--mw-pc-heading-font-size: 24px;
	--mw-pc-heading-line-height: 1.2;

	--mw-pc-excerpt-color: #555555;
	--mw-pc-excerpt-font-size: 0.875rem;
	--mw-pc-excerpt-line-height: 1.55;

	--mw-pc-cta-color: #2F31FC;
	--mw-pc-cta-font-size: 18px;
	--mw-pc-cta-hover-color: #2F31FC;

	--mw-pc-arrow-size: 48px;
	--mw-pc-arrow-bg: #ffffff;
	--mw-pc-arrow-color: #1a1a1a;
	--mw-pc-arrow-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	--mw-pc-arrow-hover-bg: #f5f5f5;

	--mw-pc-dot-color: #cccccc;
	--mw-pc-dot-active-color: #1a1a1a;

	--mw-pc-body-padding: 1.25rem;
	--mw-pc-transition-speed: 0.25s;
}

/* ── Wrapper ── */
.mw-post-carousel {
	position: relative;
}

/* ── Swiper container ── */
.mw-post-carousel__swiper {
	overflow: hidden;
}

/* ── Card ── */
.mw-post-carousel__card {
	display: flex;
	flex-direction: column;
	height: 100% !important;
	background: var(--mw-pc-card-bg);
	overflow: hidden;
	border-radius: 4px;
}

/* ── Image (16 : 9 enforced) ── */
.mw-post-carousel__image-link,
.mw-post-carousel__image-link:visited,
.mw-post-carousel__image-link:focus {
	display: block;
	flex-shrink: 0;
	text-decoration: none;
	font-size: 0;
	line-height: 0;
	background: transparent;
}

.mw-post-carousel__image-wrap {
	position: relative;
	width: 100%;
	padding-top: 56.25%; /* 9 / 16 = 0.5625 */
	overflow: hidden;
	background: #f0f0f0;
}

.mw-post-carousel__image {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	transition: transform var(--mw-pc-transition-speed) ease;
}

.mw-post-carousel__card:hover .mw-post-carousel__image {
	transform: scale(1.03);
}

/* ── Placeholder (no featured image) ── */
.mw-post-carousel__image-placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background-color: #0D0C33;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill='%23ffffff' opacity='0.7'%3E%3Cpath d='M328 150.1L328 514.1L343.8 506.2C399.3 478.5 460.6 464 522.6 464L592 464L592 112L498.5 112C456.3 112 414.5 119.3 374.7 133.4L328 150.1zM312 514.1L312 150.1L265.3 133.4C225.5 119.3 183.7 112 141.5 112L48 112L48 464L117.3 464C179.4 464 240.6 478.5 296.2 506.2L312 514.1zM592 96L608 96L608 480L522.6 480C463 480 404.2 493.9 350.9 520.5L320 536L289.1 520.5C235.8 493.9 177 480 117.3 480L32 480L32 96L141.5 96C185.5 96 229.2 103.6 270.7 118.4L320 136L369.4 118.4C410.8 103.6 454.5 96 498.5 96L592 96zM32 528L104 528C152.6 528 200.8 537 246.1 554.7L319.7 583.3L347.4 569.4C401.8 542.2 461.8 528 522.6 528L608 528L608 544L522.6 544C464.2 544 406.7 557.6 354.4 583.7L323.5 599.2L320.3 600.8L317 599.5L240.1 569.6C196.8 552.7 150.6 544 104 544L32 544L32 528z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 72px auto;
}

/* ── Body ── */
.mw-post-carousel__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--mw-pc-body-padding);
}

/* ── Category ── */
.mw-post-carousel__category {
	display: inline-block;
	align-self: flex-start;
	margin-bottom: 0.75rem;
	font-size: var(--mw-pc-cat-font-size);
	font-weight: 400;
	line-height: 1.5;
	color: var(--mw-pc-cat-color);
	text-transform: none;
}

/* ── Heading ── */
.mw-post-carousel__heading {
	margin: 0 0 1.25rem;
	font-size: var(--mw-pc-heading-font-size);
	font-weight: 400;
	font-family: inherit;
	line-height: var(--mw-pc-heading-line-height);
	color: var(--mw-pc-heading-color);
}

.mw-post-carousel__heading a,
.mw-post-carousel__heading a:visited,
.mw-post-carousel__heading a:focus {
	color: inherit;
	text-decoration: none;
	background: transparent;
	transition: color var(--mw-pc-transition-speed) ease;
}

.mw-post-carousel__heading a:hover,
.mw-post-carousel__heading a:focus-visible {
	color: var(--mw-pc-heading-hover-color);
	text-decoration: none;
	background: transparent;
}

/* ── Excerpt ── */
.mw-post-carousel__excerpt {
	margin: 0 0 1rem;
	font-size: var(--mw-pc-excerpt-font-size);
	line-height: var(--mw-pc-excerpt-line-height);
	color: var(--mw-pc-excerpt-color);
	flex: 1;
}

/* ── CTA ── */
.mw-post-carousel__cta,
.mw-post-carousel__cta:visited,
.mw-post-carousel__cta:focus {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	margin-top: auto;
	font-size: var(--mw-pc-cta-font-size);
	font-weight: 400;
	color: var(--mw-pc-cta-color);
	text-decoration: none;
	background: transparent;
	transition: color var(--mw-pc-transition-speed) ease;
}

.mw-post-carousel__cta:hover,
.mw-post-carousel__cta:focus-visible {
	color: var(--mw-pc-cta-hover-color);
	background: transparent;
}

.mw-post-carousel__cta-arrow {
	flex-shrink: 0;
	transition: transform var(--mw-pc-transition-speed) ease;
}

.mw-post-carousel__cta:hover .mw-post-carousel__cta-arrow {
	transform: translateX(3px);
}

/* ── Navigation Arrows ── */
.mw-post-carousel__arrow {
	position: absolute;
	top: 50%;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--mw-pc-arrow-size);
	height: var(--mw-pc-arrow-size);
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: var(--mw-pc-arrow-bg);
	color: var(--mw-pc-arrow-color);
	box-shadow: var(--mw-pc-arrow-shadow);
	cursor: pointer;
	transform: translateY(-50%);
	transition: background var(--mw-pc-transition-speed) ease,
	            box-shadow var(--mw-pc-transition-speed) ease,
	            opacity 0.3s ease,
	            visibility 0.3s ease;
}

.mw-post-carousel__arrow:hover {
	background: var(--mw-pc-arrow-hover-bg) !important;
	color: var(--mw-pc-arrow-color);
}

.mw-post-carousel__arrow:focus,
.mw-post-carousel__arrow:visited {
	background: var(--mw-pc-arrow-bg) !important;
	color: var(--mw-pc-arrow-color);
}

.mw-post-carousel__arrow:focus-visible {
	outline: 2px solid var(--mw-pc-arrow-color);
	outline-offset: 2px;
	background: var(--mw-pc-arrow-bg) !important;
}

.mw-post-carousel__arrow--prev {
	left: -20px;
}

.mw-post-carousel__arrow--next {
	right: -20px;
}

.mw-post-carousel__arrow.swiper-button-disabled {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* ── Pagination Dots ── */
.mw-post-carousel__pagination.swiper-pagination {
	position: relative;
	margin-top: 1.5rem;
	text-align: center;
}

.mw-post-carousel__pagination .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	background: var(--mw-pc-dot-color);
	opacity: 1;
	margin: 0 4px;
	transition: background var(--mw-pc-transition-speed) ease,
	            transform var(--mw-pc-transition-speed) ease;
}

.mw-post-carousel__pagination .swiper-pagination-bullet-active {
	background: var(--mw-pc-dot-active-color);
	transform: scale(1.25);
}

/* ── Swiper slide height equalisation ── */
.mw-post-carousel .swiper-wrapper {
	align-items: stretch;
}

.mw-post-carousel .swiper-slide {
	height: auto;
}

/* ── Responsive: pull arrows in on smaller screens ── */
@media (max-width: 1024px) {
	.mw-post-carousel__arrow--prev {
		left: 4px;
	}
	.mw-post-carousel__arrow--next {
		right: 4px;
	}
}

@media (max-width: 767px) {
	.mw-post-carousel__arrow {
		--mw-pc-arrow-size: 40px;
	}

	.mw-post-carousel__arrow--prev {
		left: 4px;
	}

	.mw-post-carousel__arrow--next {
		right: 4px;
	}
}

/* ============================================================
 * Entrance Animation (opt-in via .mw-animate-items)
 * ============================================================ */

.mw-post-carousel.mw-animate-items .swiper-slide {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
		transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mw-post-carousel.mw-animate-items .swiper-slide.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Stagger visible slides */
.mw-post-carousel.mw-animate-items .swiper-slide:nth-child(2) { transition-delay: 0.15s; }
.mw-post-carousel.mw-animate-items .swiper-slide:nth-child(3) { transition-delay: 0.30s; }
.mw-post-carousel.mw-animate-items .swiper-slide:nth-child(4) { transition-delay: 0.45s; }

/* Skip animation in Elementor editor */
.elementor-editor-active .mw-post-carousel.mw-animate-items .swiper-slide {
	opacity: 1;
	transform: none;
	transition-delay: 0s;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
	.mw-post-carousel.mw-animate-items .swiper-slide {
		opacity: 1;
		transform: none;
		transition-delay: 0s;
	}
}