/**
 * =============================================================
 * @subpackage	RAXO Slider Module Layout
 * -------------------------------------------------------------
 * @copyright	Copyright (C) 2009-2026 RAXO Group
 * @link		https://www.raxo.org
 * @license		RAXO Commercial License
 * 				This file is forbidden for redistribution
 * =============================================================
 */


/* ----- RESET & DEFAULT Styles ----- */
.raxo-slider {
	container: raxo-slider / inline-size;
	position: relative;
	margin-block: 2rem;
	box-sizing: border-box;

	&:first-child { margin-block-start: 0; }
	& *, & ::before, & ::after { box-sizing: inherit; }
	& article, & h3, & h4, & ul, & li,
	& img, & a, & button {
		margin: 0;
		padding: 0;
		background: transparent none;
		border: 0 none;
	}
	& a, & button {
		appearance: none;
		outline: 0;
		text-decoration: none;
		transition: all .25s ease-in-out;
	}
	& a:hover { text-decoration: underline; }
}



/* ----- Module BLOCK ----- */
.raxo-slider {
	/* --- Layout SETTINGS --- */
	--block-spacing-x: clamp(12px, 4%, 48px);
	--item-spacing-x: clamp(2px, 1%, 32px);

	--item-gap-x: 24px;
	--title-size: 18px;
	--text-size: 16px;
	--meta-size: 13px;
	--icon-size: 18px;

	--line-thickness: 0.125rem;		/* 2px for borders */

	& .raxo-header {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;

		& > * {
			flex: 0 1 auto;
		}
		&::after {
			content: '';
			position: absolute;
			inset: auto 0 0;
			height: var(--line-thickness);
			background-color: var(--raxo-gray-200);
			z-index: 1;
		}
	}

	/* --- Block NAME --- */
	& .raxo-block-name {
		position: relative;
		align-self: flex-end;

		& h3 {
			margin-block: 6px 10px;
			padding-inline: 8px;
			font-size: 18px;
			font-weight: bold;
			line-height: 24px;
			color: var(--raxo-color-text-base);

			display: -webkit-box;
			-webkit-box-orient: vertical;
			text-overflow: ellipsis;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			overflow: hidden;
		}

		& a {
			color: var(--raxo-color-text-base);
			text-decoration: none;
		}

		/* Accurate overlay colored line */
		&::after {
			content: '';
			position: absolute;
			inset: auto 0 0;
			height: var(--line-thickness);
			background-color: var(--raxo-color-theme);
			z-index: 2;
		}
	}

	/* --- Block INTRO --- */
	& .raxo-block-intro {
		margin: 12px 0;
		padding-inline: var(--block-spacing-x);
		font-size: 16px;
		line-height: 20px;
		color: var(--raxo-color-text-muted);
	}

	/* --- Block BUTTON & READMORE --- */
	& .raxo-block-button,
	& .raxo-readmore {
		position: relative;
		margin-top: 24px;
		padding: 8px var(--block-spacing-x);
		font-size: var(--text-size);
		line-height: 20px;
		color: var(--raxo-color-text-muted);
		text-align: center;
		background-color: var(--raxo-gray-100);
		border: var(--line-thickness) solid var(--raxo-gray-200);
		border-radius: 5px;
		transition: all .25s ease-in-out;

		&:hover {
			color: var(--raxo-color-theme);
			border-color: var(--raxo-color-theme);
		}
		& a {
			color: inherit;
			text-decoration: none;
		}
	}
	& .raxo-readmore {
		margin-block: auto 2px;
		padding: 8px var(--item-spacing-x);
	}

	/* Clickable area fix */
	& :where(.raxo-block-name, .raxo-block-button, .raxo-readmore) a::before {
		content: '';
		position: absolute;
		inset: 0;
		z-index: 1;
	}


	/* ----- MODULE Items ----- */
	& .raxo-normal {
		opacity: 0;
		margin-top: 24px;
		transition: opacity .25s ease-in;

		&.slick-initialized {
			position: relative;
			opacity: 1;
		}
	}

	& article {
		position: relative;
		margin-inline: calc(var(--item-gap-x) / 2);
		font-size: var(--text-size);
		line-height: 20px;
		color: var(--raxo-color-text-muted);

		& .raxo-wrap {
			display: flex;
			flex-direction: column;
			height: 100%;
			gap: 20px;
		}
	}


	/* --- Item IMAGE --- */
	& .raxo-image {
		position: relative;
		border-radius: 4px;
		overflow: hidden;
		background-color: transparent;
		transition: background-color .3s ease-in-out;

		& img {
			display: block;
			width: 100%;
			height: auto;
			transition: opacity .3s ease-in-out;
		}

		&:hover {
			background-color: var(--raxo-color-theme);

			& img {
				opacity: 0.85 !important;
			}
		}

		&:has(.raxo-meta)::after {
			content: '';
			position: absolute;
			inset: 0;
			z-index: 1;
			pointer-events: none;
			background-image: linear-gradient(to bottom,
					transparent 0%,
					transparent 50%,
					oklch(0 0 0 / 0.02) 58%,
					oklch(0 0 0 / 0.08) 66%,
					oklch(0 0 0 / 0.18) 74%,
					oklch(0 0 0 / 0.32) 82%,
					oklch(0 0 0 / 0.48) 91%,
					oklch(0 0 0 / 0.60) 100%);
		}
	}


	/* --- Item DETAILS --- */
	& .raxo-meta {
		position: absolute;
		inset: auto 0 0;
		z-index: 2;
		padding: 12px var(--item-spacing-x);
		display: flex;
		flex-wrap: wrap;
		gap: 0 12px;
		pointer-events: none;
		font-size: var(--meta-size);
		font-weight: bold;
		line-height: 16px;
		color: var(--raxo-color-text-meta);

		& span {
			display: inline-flex;
			align-items: center;
		}

		& svg {
			margin-right: 4px;
			width: var(--icon-size);
			height: var(--icon-size);
			fill: currentColor;
		}
	}

	/* --- CONTENT Styles --- */
	& .raxo-content {
		display: flex;
		flex: 1;
		flex-direction: column;
		row-gap: 1em;
		padding-inline: var(--item-spacing-x);

		&:not(:has(*)) {
			display: none;
		}
	}

	& .raxo-info {
		margin-bottom: -8px;
		display: flex;
		flex-wrap: wrap;
		gap: 0 12px;
		font-size: 12px;
		line-height: 18px;
		text-transform: uppercase;

		& a:hover {
			color: var(--raxo-color-text-deep);
		}
	}

	& .raxo-title {
		font-size: var(--title-size);
		font-weight: bold;
		line-height: 1.225;
		text-transform: none;

		& a { color: var(--raxo-color-text-deep); }
	}

	& .raxo-text {
		font-size: var(--text-size);
		color: var(--raxo-color-text-base);
		word-break: break-word;
	}

	& .raxo-author {
		margin-top: 4px;
		display: inline-flex;
		align-items: center;
		gap: 4px;
		font-size: var(--meta-size);
		line-height: 16px;

		& svg {
			width: var(--icon-size);
			height: var(--icon-size);
			fill: currentColor;
		}
	}
}


/* ----- SLIDER Styles ----- */
.raxo-slider .slick-slider {
	position: relative;
	display: block;
	-ms-touch-action: pan-y;
	touch-action: pan-y;

	& .slick-list {
		position: relative;
		display: block;
		margin-inline: calc(-1 * var(--item-gap-x) / 2);
		padding: 0;
		overflow: hidden;
	}
	& .slick-track {
		position: relative;
		top: 0;
		left: 0;
		display: flex;
		margin: 0 auto;
		transform: translate3d(0, 0, 0);
	}
	& .draggable {
		-webkit-user-select: none;
		user-select: none;
		cursor: grab;

		&:active { cursor: grabbing; }
	}
	& .slick-slide {
		display: none;
		height: auto;
		min-height: 1px;

		.slick-initialized & { display: block; }
	}

}

.raxo-slider .slick-loading {

	& .slick-list::before {
		content: '';
		position: absolute;
		inset: 0;
		margin: auto;
		width: 40px;
		height: 40px;
		border: 4px solid var(--raxo-gray-200);
		border-top-color: var(--raxo-color-theme);
		border-radius: 50%;
		animation: spinner .5s linear infinite;
	}

	@keyframes spinner {
		  0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}

	& :is(.slick-track, .slick-slide) { visibility: hidden; }
	& img { display: none; }
}



/* ----- NAVIGATION Panel ----- */
.raxo-slider .raxo-navigation {
	margin-inline-start: auto;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex-shrink: 3;

	& > button {
		margin-block: var(--line-thickness);
		width: 36px;
		height: 40px;
		cursor: pointer;
		color: var(--raxo-gray-400);

		&:hover {
			color: var(--raxo-gray-900);
		}
		&.slick-hidden {
			display: none;
		}
		&.slick-disabled {
			cursor: default;
			color: var(--raxo-gray-200);
		}
		& svg {
			width: 32px;
			height: 32px;
			fill: currentColor;
		}
		&.raxo-nav-next svg {
			transform: scaleX(-1);
		}
	}

	& .raxo-nav-prev {
		order: 0;
		[dir='rtl'] & { order: 1; }
	}
	& .raxo-nav-next {
		order: 1;
		[dir='rtl'] & { order: 0; }
	}

	& .raxo-nav-dots {
		display: flex !important;
		flex-wrap: wrap;
		gap: 0 2px;
		max-block-size: 52px;
		min-inline-size: 88px;
		list-style: none;
		overflow: hidden;

		& li {
			padding: 6px;
		}

		& button {
			display: block;
			width: 36px;
			height: 32px;
			font-size: 0;
			line-height: 0;
			background-color: var(--raxo-gray-300);
			border: var(--line-thickness) solid transparent;
			border-radius: 3px;
		}

		& li:hover button {
			background-color: var(--raxo-gray-600);
		}
		& li:not(.slick-active) {
			cursor: pointer;
		}
		& li.slick-active button {
			cursor: default;
			background-color: var(--raxo-gray-100);
			border-color: var(--raxo-color-theme);
		}
	}
}



/* ----- Responsive BEHAVIOUR ----- */

/* Hide navigation dots on narrow containers */
@container raxo-slider (width < 560px) {
	.raxo-slider {
		& .raxo-header {
			flex-wrap: nowrap;
		}
		& .raxo-nav-dots {
			display: none !important;
		}
	}
}

/* Align spacing on very narrow containers */
@container raxo-slider (width < 448px) {
	.raxo-slider > * {
		--block-spacing-x: var(--item-spacing-x);
	}
}



/* ----- COLOR Schemes ----- */
.raxo-slider {
	/* --- LIGHT Color Mode (default) --- */
	--raxo-color-base: oklch(0.48 0.19 267.8);
	--raxo-color-theme: var(--raxo-color-base);

	--raxo-gray-100: hsl(232, 1%, 98%);
	--raxo-gray-200: hsl(232, 2%, 88%);
	--raxo-gray-300: hsl(232, 3%, 69%);
	--raxo-gray-400: hsl(232, 4%, 45%);
	--raxo-gray-500: hsl(232, 5%, 30%);
	--raxo-gray-600: hsl(232, 5%, 22%);
	--raxo-gray-900: hsl(232, 7%, 6%);

	--raxo-color-text-deep:  var(--raxo-gray-900);
	--raxo-color-text-base:  var(--raxo-gray-500);
	--raxo-color-text-muted: var(--raxo-gray-400);
	--raxo-color-text-light: var(--raxo-gray-300);
	--raxo-color-text-meta:  var(--raxo-gray-100);

	/* --- DARK Color Mode --- */
	&.dark-mode, &.mode-dark {
		--raxo-color-theme: oklch(
			from var(--raxo-color-base) calc(l * 1.1) calc(c * 0.8) h
		);

		--raxo-gray-100: hsl(232, 8%,  5%);
		--raxo-gray-200: hsl(232, 6%, 16%);
		--raxo-gray-300: hsl(232, 5%, 29%);
		--raxo-gray-400: hsl(232, 3%, 51%);
		--raxo-gray-500: hsl(232, 2%, 66%);
		--raxo-gray-600: hsl(232, 2%, 73%);
		--raxo-gray-900: hsl(232, 1%, 87%);

		--raxo-color-text-meta: var(--raxo-gray-900);
	}

	/* --- COLOR Palette --- */
	&.color-red    { --raxo-color-base: oklch(0.53 0.19 28.82); }
	&.color-pink   { --raxo-color-base: oklch(0.58 0.19 354.7); }
	&.color-orange { --raxo-color-base: oklch(0.61 0.18 45.23); }
	&.color-yellow { --raxo-color-base: oklch(0.82 0.17 94.64); }
	&.color-brown  { --raxo-color-base: oklch(0.44 0.05 39.62); }
	&.color-green  { --raxo-color-base: oklch(0.54 0.17 140.3); }
	&.color-teal   { --raxo-color-base: oklch(0.58 0.11 186.8); }
	&.color-blue   { --raxo-color-base: oklch(0.48 0.18 259.4); }
	&.color-sky    { --raxo-color-base: oklch(0.62 0.15 243.2); }
	&.color-violet { --raxo-color-base: oklch(0.48 0.19 287.4); }
	&.color-purple { --raxo-color-base: oklch(0.48 0.19 303.4); }
	&.color-gray   { --raxo-color-base: oklch(0.38 0.0186 254); }

	/* --- COLOR Tuning --- */
	& .raxo-wrap:hover .raxo-title a,
	& :where(.raxo-info, .raxo-text) a,
	& a:hover {
		color: var(--raxo-color-theme) !important;
	}
}