/**
 * VM Slider Block - Styles
 *
 * Builds on splide-core.min.css which handles the structural layout.
 * This file handles visual styling, arrows, pagination, and slide content.
 *
 * @package VM_Base_Theme
 * @since 1.0.0
 */

/* ==========================================================================
   Block wrapper
   ========================================================================== */

.vm-slider-block {
	position: relative;
	width: 100%;
	overflow: hidden;
	padding: clamp(40px, 6vw, 100px) clamp(20px, 5vw, 60px);
}

/* ==========================================================================
   Block header (title, content, link above the slider)
   ========================================================================== */

.vm-slider-header {
	text-align: center;
	margin-bottom: var(--wp--preset--spacing--large);
}

.vm-slider-title {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--huge);
	margin-bottom: var(--wp--preset--spacing--small);
}

.vm-slider-content {
	font-size: var(--wp--preset--font-size--medium-large);
	color: var(--wp--preset--color--neutral-medium);
	margin-bottom: var(--wp--preset--spacing--medium);
}

.vm-slider-link {
	display: inline-block;
	padding: var(--wp--preset--spacing--small) var(--wp--preset--spacing--medium);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	text-decoration: none;
	border-radius: var(--vm-radius-md);
	font-weight: 600;
	transition: background-color var(--vm-transition-fast);
}

.vm-slider-link:hover {
	background-color: var(--wp--preset--color--primary-dark);
	text-decoration: none;
}

/* ==========================================================================
   Pre-init state — prevents stacked slides in editor and before JS fires
   ========================================================================== */

.vm-slider-block .splide:not(.is-initialized) {
	overflow: hidden;
}

.vm-slider-block .splide:not(.is-initialized) .splide__slide:not(:first-child) {
	display: none;
}

/* ==========================================================================
   Slides
   ========================================================================== */

.splide__slide {
	position: relative;
	overflow: hidden;
}

.splide__slide-image {
	margin: 0;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.splide__slide-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ==========================================================================
   Slide content (title, text, link overlay)
   ========================================================================== */

.splide__slide-content {
	padding: var(--wp--preset--spacing--medium);
	background: var(--wp--preset--color--background);
}

.splide__slide-title {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--large);
	margin-bottom: var(--wp--preset--spacing--small);
}

.splide__slide-text {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	margin-bottom: var(--wp--preset--spacing--small);
}

.splide__slide-link {
	display: inline-block;
	padding: var(--wp--preset--spacing--small) var(--wp--preset--spacing--medium);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	text-decoration: none;
	border-radius: var(--vm-radius-md);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	transition: background-color var(--vm-transition-fast);
}

.splide__slide-link:hover {
	background-color: var(--wp--preset--color--primary-dark);
	text-decoration: none;
}

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

.splide__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--wp--preset--color--background);
	border: 2px solid var(--wp--preset--color--neutral-light);
	cursor: pointer;
	opacity: 0.9;
	transition: opacity var(--vm-transition-fast), background-color var(--vm-transition-fast);
}

.splide__arrow:hover {
	opacity: 1;
	background-color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}

.splide__arrow:hover svg {
	fill: var(--wp--preset--color--white);
}

.splide__arrow svg {
	width: 18px;
	height: 18px;
	fill: var(--wp--preset--color--foreground);
	transition: fill var(--vm-transition-fast);
}

.splide__arrow--prev {
	left: 1rem;
}

.splide__arrow--next {
	right: 1rem;
}

/* ==========================================================================
   Pagination dots
   ========================================================================== */

.splide__pagination {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
	padding: var(--wp--preset--spacing--small) 0;
	list-style: none;
	margin: 0;
}

.splide__pagination__page {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--wp--preset--color--neutral-light);
	border: none;
	cursor: pointer;
	padding: 0;
	transition: background-color var(--vm-transition-fast), transform var(--vm-transition-fast);
}

.splide__pagination__page.is-active {
	background: var(--wp--preset--color--primary);
	transform: scale(1.3);
}

/* ==========================================================================
   Editor placeholder
   ========================================================================== */

.vm-slider-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px;
	background: var(--wp--preset--color--neutral-lighter);
	border: 2px dashed var(--wp--preset--color--neutral-light);
	border-radius: var(--vm-radius-lg);
	color: var(--wp--preset--color--neutral-medium);
	font-size: var(--wp--preset--font-size--medium);
}

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

@media ( max-width: 768px ) {
	.splide__slide-content {
		padding: var(--wp--preset--spacing--small);
	}

	.splide__slide-title {
		font-size: var(--wp--preset--font-size--medium-large);
	}
}