/**
 * =============================================================
 * @subpackage	RAXO List 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-list {
	container: raxo-list / inline-size;
	margin-block: 2rem;
	box-sizing: border-box;
	word-break: break-word;

	&:first-child { margin-block-start: 0; }
	& *, & ::before, & ::after { box-sizing: inherit; }

	& article, & h3, & h4,
	& img, & a {
		margin: 0;
		padding: 0;
		background: transparent none;
		border: 0 none;
	}
	& a {
		appearance: none;
		outline: 0;
		text-decoration: none;
		transition: all .25s ease-in-out;
	}
	& a:hover { text-decoration: underline; }
}



/* ----- Module BLOCK ----- */
.raxo-list {
	/* --- Layout SETTINGS --- */
	--top-font-size: 16px;
	--nor-font-size: 14px;
	--spacing-base: 8px;	/* base spacing for margins and paddings */

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 12px 6px 8px;
	line-height: 1.375;
	background-color: var(--raxo-gray-200);
	border-radius: 6px;

	/* --- Block NAME --- */
	& .raxo-block-name {
		flex: 1 1 120px;
		margin-block: 8px; padding: 0 4px 0 16px;
		font-size: 18px; font-weight: bold;
		line-height: 20px;
		color: var(--raxo-text-base);

		& a { color: inherit; }
		& a:hover {
			color: var(--raxo-theme-color);
			text-decoration: none;
		}
	}
		
	/* --- Block BUTTON --- */
	& .raxo-block-button {
		display: flex;
		flex: 0 1 auto;
		margin-block: 8px; margin-left: auto;
		padding: 2px 10px;
		align-items: center;
		font-size: 12px;
		font-weight: bold;
		line-height: 20px;
		color: var(--raxo-gray-100);
		text-transform: uppercase;
		background-color: var(--raxo-theme-color);
		border-radius: 3px;

		&:hover {
			color: var(--raxo-gray-100);
			text-decoration: none;
			background-color: var(--raxo-gray-600);
		}
		& svg {
			margin-inline: 4px -10px;
			width: 32px; height: 16px;
			fill: currentColor;
			vertical-align: middle;
		}
	}

	/* --- Block INTRO --- */
	& .raxo-block-intro {
		flex: 1 100%;
		margin-bottom: 12px; padding: 0 16px;
		font-size: 15px;
		line-height: 22px;
		color: var(--raxo-text-base);
	}



	/* ----- Module ITEMS ----- */
	& .raxo-body {
		flex: 1 100%;
		font-size: var(--nor-font-size);
		--icon-size: calc(var(--nor-font-size) + 2px);
		background-color: var(--raxo-gray-100);
		border-radius: 3px;
		overflow: hidden;
	}

	& article {
		position: relative;
		padding-block: 12px; padding-inline: 16px 36px;
		border-top: 1px solid var(--raxo-border-top);
		border-bottom: 1px solid var(--raxo-border-bot);
		transition: background .5s ease;
		overflow: hidden;

		&:first-child { border-top: none; }
		&:last-child  { border-bottom: none; }
		&:hover { background-color: var(--raxo-gray-120); }
	}
	& article.raxo-item-top {
		padding-block: 20px;
		font-size: var(--top-font-size);
		--icon-size: calc(var(--top-font-size) + 2px);
	}
	& .raxo-wrap {
		display: flex;
		flex-wrap: wrap-reverse;
		margin: -6px;

		& > div { margin: 6px; }
	}


	/* ----- Item IMAGE ----- */
	& .raxo-image {
		flex: 0 1 auto;

		& img {
			max-width: 100%;
			height: auto;
			border-radius: 3px;
			border: 1px solid var(--raxo-gray-200);
		}
	}
	& .raxo-item-top .raxo-image img { width: 100%; }


	/* ----- Item CONTENT ----- */
	& .raxo-content {
		flex: 1 1 160px;
	}
	& .raxo-item-nor .raxo-content {
		display: flex;
		flex-wrap: wrap;
	}
	& .raxo-item-nor .raxo-right {
		flex: 4 1 160px;
	}
	& .raxo-item-nor .raxo-date {
		flex: 1 1 56px;
		margin-right: 12px;
		font-size: .93em; line-height: 20px;
	}

	& .raxo-date {
		font-weight: bold;
		color: var(--raxo-text-base);
	}

	& .raxo-title {
		font-size: 16px; line-height: 1.25;
		font-weight: bold;
	}
	& .raxo-item-top .raxo-title {
		margin-bottom: 6px;
		font-size: 20px; line-height: 1.15;
	}

	& .raxo-text {
		margin-block: 1em 0;
		color: var(--raxo-text-base);
	}
	& .raxo-text,
	& .raxo-block-intro {
		hyphens: auto;
		hyphenate-limit-chars: 7 3 2;
	}

	/* ----- Item READMORE (arrow) ----- */
	& .raxo-readmore {
		display: flex;
		position: absolute;
		top: 0; right: 0; bottom: 0;
		width: 32px;
		color: var(--raxo-text-light);
		transition: background-color .5s ease;

		& svg {
			margin-block: auto;
			width: 32px; height: 26px;
			fill: currentColor;
			transition: color .25s ease;
		}
	}
	& article:hover .raxo-readmore {
		color: var(--raxo-gray-100);
		background-color: var(--raxo-bkgr-color);
	}


	/* ----- Item FIELDS ----- */
	& .raxo-meta {
		margin-block: .25em;
		display: flex; flex-wrap: wrap;
		gap: .25em 1em;
		font-size: .93em; line-height: 1.2;
		color: var(--raxo-text-muted);

		& span {
			display: flex;
			align-items: center;
			font-size: .93em; line-height: 1.2;
		}
		& svg {
			width: var(--icon-size);
			height: var(--icon-size);
			margin-right: 4px;
			fill: currentColor;
		}
	}
}


/* ----- CONTAINER Queries ----- */
@container raxo-list (width < 480px) {
	.raxo-list .raxo-block-button { order: 4; }
	.raxo-list article { padding-right: 28px; }
	.raxo-list .raxo-item-top img { width: 100%; }
	.raxo-list .raxo-readmore { width: 24px; }
}


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

	--raxo-gray-100: hsl(232, 1%, 98%);
	--raxo-gray-120: hsl(232, 1%, 96%);
	--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-text-deep:  var(--raxo-gray-900);
	--raxo-text-base:  var(--raxo-gray-500);
	--raxo-text-muted: var(--raxo-gray-400);
	--raxo-text-light: var(--raxo-gray-300);

	--raxo-bkgr-color: color-mix(in oklch, var(--raxo-theme-color) 32%, white);
	--raxo-border-top: hsl(0, 0%, 100%);
	--raxo-border-bot: hsl(0, 0%, 90%);

	/* --- DARK Color Mode --- */
	&.dark-mode, &.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-120: hsl(232, 8%,  8%);
		--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-bkgr-color: color-mix(in oklch, var(--raxo-theme-color) 64%, black);
		--raxo-border-top: hsl(0, 0%, 0%);
		--raxo-border-bot: hsl(0, 0%, 20%);
	}

	/* --- COLOR Palette --- */
	/* Backwards compatibility with previous module classes: list-colorname */
	&.color-red							{ --raxo-color-base: oklch(0.53 0.19 28.82); }
	&.color-pink,   &.list-pink			{ --raxo-color-base: oklch(0.58 0.19 354.7); }
	&.color-orange, &.list-orange		{ --raxo-color-base: oklch(0.61 0.18 45.23); }
	&.color-yellow, &.list-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,  &.list-green		{ --raxo-color-base: oklch(0.54 0.17 140.3); }
	&.color-teal,   &.list-turquoise	{ --raxo-color-base: oklch(0.58 0.11 186.8); }
	&.color-blue,   &.list-blue			{ --raxo-color-base: oklch(0.48 0.18 259.4); }
	&.color-sky,    &.list-lightblue	{ --raxo-color-base: oklch(0.62 0.15 243.2); }
	&.color-violet, &.list-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,   &.list-gray			{ --raxo-color-base: oklch(0.38 0.0186 254); }

	/* --- COLOR Tuning --- */
	& a { color: var(--raxo-theme-color); }
	& a:hover {
		color: var(--raxo-text-deep);
		background: transparent none;
	}
}