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


/* ----- RESET & DEFAULT Styles ----- */
.raxo-default {
	container: raxo-default / inline-size;
	margin-block: 2rem;
	box-sizing: border-box;
	word-break: break-word;
}
	.raxo-default:first-child {margin-block-start: 0;}
	/* .raxo-default:last-child  {margin-block-end: 0;} */
	.raxo-default ::before, .raxo-default ::after,
	.raxo-default * {box-sizing: inherit;}

.raxo-default article,
.raxo-default h3,
.raxo-default h4,
.raxo-default img,
.raxo-default a {
	margin: 0; padding: 0;
	background: transparent none;
	border: 0 none;
}
.raxo-default a {
	color: var(--raxo-theme-color) !important;
	text-decoration: none transparent;
	transition: all .25s ease-out;
	outline: 0;
}
	.raxo-default a:hover {
		color: var(--raxo-text-base) !important;
		text-decoration: underline;
	}



/* ----- LAYOUT Settings ----- */
.raxo-default {
	--top-font-size: 16px;
	--nor-font-size: 14px;

	/* image settings (set 0px to disable) */
	--image-border: 1px;
	--image-spacing: 4px;		/* use the range 0px - 24px */
}



/* ----- Module HEADER ----- */
.raxo-default .raxo-header {
	border-top: 2px solid var(--raxo-theme-color);
}
	.raxo-default .raxo-block-name {
		padding: 6px 4px;
		font-size: 20px; font-weight: normal !important;
		color: var(--raxo-text-base);
	}
	.raxo-default .raxo-block-intro {
		padding: 8px 4px 12px;
	}

/* ----- Module FOOTER ----- */
.raxo-default .raxo-footer {
	margin-top: 8px;
	border-top: 1px solid var(--raxo-theme-color);
}
	.raxo-default .raxo-block-button {
		padding: 4px;
		text-align: right;
	}



/* ----- Module ITEMS ----- */
.raxo-default .raxo-top {
	font-size: var(--top-font-size);
	--icon-size: var(--top-font-size);
}
.raxo-default .raxo-normal {
	font-size: var(--nor-font-size);
	--icon-size: var(--nor-font-size);
}
.raxo-default article {
	padding: 20px 0;
	overflow: hidden;
	background: linear-gradient(90deg, var(--raxo-gray-200) 60%, transparent 60%) repeat-x;
	background-size: 10px 1px;
}
.raxo-default .raxo-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: -8px -12px;
}
	.raxo-default .raxo-wrap > div {
		margin: 8px 12px;
	}



/* ----- Item IMAGE ----- */
.raxo-default .raxo-image {
	flex: 0 1 auto;
	align-self: flex-start;
	padding: var(--image-spacing);
	background-color: var(--raxo-gray-100);
	border: var(--image-border) solid var(--raxo-gray-400);
	border-radius: 3px;
	transition: border 0.4s ease;
}
	.raxo-default .raxo-image img {
		max-width: 100%;
		height: auto;
	}
	.raxo-default article:hover .raxo-image {
		border-color: var(--raxo-theme-color);
	}


/* ----- Item CONTENT ----- */
.raxo-default .raxo-content {
	flex: 1 1 144px;
}
.raxo-default .raxo-title {
	margin-bottom: 4px;
	font-size: 1.29em; line-height: 1.16;
	font-weight: bold;
}
.raxo-default .raxo-text {
	margin-top: 8px;
	line-height: 1.3;
	color: var(--raxo-text-base);
}
.raxo-default .raxo-text,
.raxo-default .raxo-block-intro {
	hyphens: auto;
	hyphenate-limit-chars: 7 3 2;
}
.raxo-default .raxo-readmore {
	float: right;
	margin-right: 4px;
}


/* ----- META Elements ----- */
.raxo-default .raxo-meta {
	display: flex;
	margin-bottom: 6px;
	gap: 8px 16px;
	flex-wrap: wrap;
	align-items: center;
	font-size: .93em; line-height: 1.2;
	color: var(--raxo-text-muted);
}
	.raxo-default .raxo-meta span {
		display: flex;
	}
.raxo-default .raxo-meta svg {
	margin-right: 4px;
	width: var(--icon-size);
	height: var(--icon-size);
	fill: currentColor;
}
	.raxo-default .raxo-rating svg {
		width: calc(var(--icon-size) * 5);
		fill: var(--raxo-gray-300);
	}




/* ----- INFO Fields ----- */
.raxo-default .raxo-info {
	margin-top: -2px; padding-bottom: 4px;
	font-size: .93em; line-height: 1.38;
	font-style: italic;
	color: var(--raxo-text-light);
}
	.raxo-default .raxo-info > span {
		font-style: normal;
		color: var(--raxo-text-muted);
	}
	.raxo-default .raxo-info > span:not(:last-child) {
		padding-right: 8px;
	}



/* ----- CONTAINER Queries ----- */
@container raxo-default (width < 480px) {
	.raxo-default .raxo-top .raxo-image,
	.raxo-default .raxo-top .raxo-image img {
		width: 100%
	}
}



/* ----- COLOR Schemes ----- */

/* --- LIGHT Color Mode --- */
.raxo-default {
	--raxo-color-base: oklch(0.48 0.19 267.8);	/* raxo color by default */
	--raxo-theme-color: 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-600: hsl(232, 5%, 22%);
	--raxo-gray-900: hsl(232, 7%,  6%);

	--raxo-text-deep: var(--raxo-gray-900);
	--raxo-text-base: var(--raxo-gray-600);
	--raxo-text-muted: var(--raxo-gray-400);
	--raxo-text-light: var(--raxo-gray-300);
}

/* --- DARK Color Mode --- */
.raxo-default.dark-mode, .raxo-default.mode-dark {
	--raxo-theme-color: 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-600: hsl(232, 2%, 73%);
	--raxo-gray-900: hsl(232, 1%, 87%);
}


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