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

/* ----- Embed FONTS ----- */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400..700&display=swap');



/* ----- RESET & DEFAULT Styles ----- */
.raxo-prime {
	container: raxo-prime / inline-size;
	margin-block: 2rem;
	box-sizing: border-box;
	min-width: 192px;
	overflow: hidden;

	&: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;

		&:hover { opacity: .8; }
	}
}



/* ----- MODULE Styles ----- */
.raxo-prime {

	/* --- Layout SETTINGS --- */
	--raxo-grid-top-min: 320px;		/* Minimum column width for top items */
	--raxo-grid-nor-min: 220px;		/* Minimum column width for normal items */
	--raxo-grid-gap:     4px;		/* Gap between articles in the grid */

	--raxo-font-main: 'Roboto', Arial, sans-serif;
	--raxo-size-px: clamp(20px, 4cqi, 48px);

	--raxo-size-top-title: 24px;
	--raxo-size-nor-title: 18px;
	--raxo-size-top-text:  16px;
	--raxo-size-nor-text:  14px;


	/* ----- Module BLOCK ----- */
	& :is(.raxo-block-name, .raxo-block-button) {
		position: relative;
		margin-bottom: 20px;
		padding: 10px var(--raxo-size-px) 8px;
		font: normal 18px/22px var(--raxo-font-main);
		color: var(--raxo-color-text-deep);
		background-color: var(--raxo-color-theme);

		& a { color: inherit; }
		& a::before {
			content: "";
			position: absolute;
			inset: 0;
		}
	}
	& .raxo-block-intro {
		margin-bottom: 20px;
		padding-inline: var(--raxo-size-px);
		font-size: 16px;
		line-height: 22px;
	}
	& .raxo-block-button {
		margin: 20px auto 0;
		font-size: 16px;
		text-align: center;
	}


	/* ----- Module BODY ----- */
	& .raxo-body {
		--raxo-grid-prop: 1fr;

		/* If both sections exist, assign proportion */
		&:has(.raxo-top + .raxo-normal) {
			display: grid;
			gap: var(--raxo-grid-gap);
			grid-template-columns: var(--raxo-grid-prop);
		}
	}
	& :is(.raxo-top, .raxo-normal) {
		--raxo-grid-cols: 1;
		--raxo-grid-gap-sum: calc((var(--raxo-grid-cols) - 1) * var(--raxo-grid-gap));
		--raxo-grid-col-max: calc((100% - var(--raxo-grid-gap-sum)) / var(--raxo-grid-cols));

		display: grid;
		gap: var(--raxo-grid-gap);
		grid-template-columns:
			repeat(auto-fill, minmax(max(var(--raxo-grid-col-min), var(--raxo-grid-col-max)), 1fr));
		overflow: hidden;
	}
	& .raxo-top    { --raxo-grid-col-min: var(--raxo-grid-top-min); }
	& .raxo-normal { --raxo-grid-col-min: var(--raxo-grid-nor-min); }


	/* ----- MODULE Items ----- */
	& article {
		display: grid;
		container: raxo-prime-item / inline-size;
		--raxo-size-px: clamp(20px, 4.8cqi, 64px);
		--raxo-size-py: clamp(14px, 3.4cqi, 40px);
		position: relative;
		min-height: 192px;
		font-size: var(--raxo-size-text);
		background-color: var(--raxo-gray-200);
		overflow: hidden;

		/* Overlay */
		& > div { grid-area: 1 / -1; }
		& :is(.raxo-content, .raxo-link) {
			position: absolute;
			inset: 0;
			z-index: 2;
		}
		& .raxo-content {
			display: flex;
			flex-flow: column nowrap;
			justify-content: flex-end;
			align-items: flex-start;
			padding: calc(var(--raxo-size-py) * 1.5) var(--raxo-size-px) var(--raxo-size-py);
			overflow: hidden;
		}
		.raxo-top & {
			--raxo-size-text: var(--raxo-size-top-text);
			& .raxo-content { gap: 10px; }
		}
		.raxo-normal & {
			--raxo-size-text: var(--raxo-size-nor-text);
			& .raxo-content { gap: 8px; }
		}
		& .raxo-link { opacity: 0; }

		/* Hover effects */
		&:hover {
			& .raxo-title::after { width: 60%; }
			& .raxo-image { filter: saturate(1.25) brightness(0.8); }
		}
	}


	/* --- Item IMAGE --- */
	& .raxo-image {
		position: relative;
		transition: filter .3s ease-out;
		z-index: 1;

		& img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			image-rendering: -webkit-optimize-contrast;
		}
		/* Improved text readability */
		&::after {
			content: "";
			position: absolute;
			inset: 0;
			pointer-events: none;
			background-blend-mode: multiply;
			background-image: linear-gradient(to bottom,
				oklch(0 0 0 / 0)    0%,
				oklch(0 0 0 / 0)    24%,
				oklch(0 0 0 / 0.03) 36%,
				oklch(0 0 0 / 0.10) 47%,
				oklch(0 0 0 / 0.22) 57%,
				oklch(0 0 0 / 0.40) 68%,
				oklch(0 0 0 / 0.58) 80%,
				oklch(0 0 0 / 0.72) 100%
			);
		}
	}


	/* --- Item TITLE --- */
	& .raxo-title {
		margin-top: 2px;
		order: 3;
		font-family: var(--raxo-font-main);
		font-weight: bold;
		line-height: 1.15;
		color: var(--raxo-color-text-deep);
		text-shadow: 0 1px hsla(232, 5%, 22%, .6);

		.raxo-top & { font-size: var(--raxo-size-top-title); }
		.raxo-normal & { font-size: var(--raxo-size-nor-title); }
		& span {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			line-clamp: 3;
			overflow: hidden;
		}
		/* Animated title underline */
		&::after {
			content: "";
			display: block;
			position: relative;
			bottom: 0;
			width: 0;
			height: 2px;
			background-color: var(--raxo-color-theme);
			transition: width .3s ease-in-out;

			.raxo-top & { height: 3px; }
		}
	}


	/* --- Item TEXT --- */
	& .raxo-text {
		--raxo-line-limit: 4;
		order: 4;
		line-height: 1.35;
		color: var(--raxo-color-text-base);
		/* --- Multi-line text truncation --- */
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: var(--raxo-line-limit);
		line-clamp: var(--raxo-line-limit);
		overflow: hidden;

		.raxo-normal :where(&) {
			margin-top: -8px;
			max-height: 0;
			opacity: 0;
			transition: margin .1s ease-out .3s, opacity .4s ease-out, max-height .4s ease-out;
		}
		.raxo-item-nor:hover & {
			margin-top: 0;
			max-height: calc(var(--raxo-size-text) * 1.35 * var(--raxo-line-limit));
			opacity: 1;
			transition-delay: 0s, .1s, .1s;
		}
	}


	/* --- META Elements --- */
	& .raxo-meta {
		display: flex;
		flex-wrap: wrap;
		order: 2;
		margin-inline-start: calc(-1 * var(--raxo-size-px));
		padding-inline: var(--raxo-size-px) var(--raxo-size-text);
		line-height: 1.25;
		color: var(--raxo-color-text-base);
		background: hsla(232, 6%, 17%, .5);
		backdrop-filter: blur(2px);

		.raxo-top :where(&) { padding-block: 4px; }
		.raxo-normal :where(&) { padding-block: 3px; }

		& :is(.raxo-hits, .raxo-rating, .raxo-comments) {
			padding-left: 28px;
			background-repeat: no-repeat;
			background-position: 0 50%;
			background-size: calc(var(--raxo-size-text) * 1.375);
		}
		& .raxo-hits     { background-image: url("ico-hits.svg"); }
		& .raxo-rating   { background-image: url("ico-rating.svg"); }
		& .raxo-comments { background-image: url("ico-comments.svg"); }

		& > :not(:last-child)::after {
			content: "|";
			display: inline-block;
			margin: 0 14px;
			color: var(--raxo-gray-400);
		}
	}


	/* --- Item CATEGORY --- */
	& .raxo-category {
		position: relative;
		order: 1;
		margin: 0 0 auto calc(-1 * var(--raxo-size-px));
		padding-inline: var(--raxo-size-px) var(--raxo-size-text);
		font: bold calc(var(--raxo-size-text) - 2px) / 1.5 var(--raxo-font-main);
		color: var(--raxo-color-text-deep);
		background-color: var(--raxo-color-theme);
		z-index: 3;

		.raxo-top :where(&) { padding-block: 3px; }
		.raxo-normal :where(&) { padding-block: 2px; }

		& a { color: inherit; }
		& a::before {
			content: "";
			position: absolute;
			inset: 0;
		}
	}
}



/* ----- RESPONSIVE and COLUMNS ----- */
/* Proportion classes (prime-*-X-Y) control the ratio of the top and normal sections. */
/* Column classes (top-*-col# | nor-*-col#) control internal grid in each section. */


/* 2X-Small (< 256px): reduced version */
@container raxo-prime (width < 256px) {
	.raxo-prime :is(.raxo-text, .raxo-meta) {
		display: none;
	}
}


/* X-Small (< 448px): stacked items */
@container raxo-prime (width < 448px) {
	.raxo-prime {
		& :is(.raxo-top, .raxo-normal) { grid-template-columns: 1fr; }

		/* Responsive Adjustments */
		& .raxo-top {
			--raxo-size-top-title: 21px;
			--raxo-size-top-text: 15px;
			& .raxo-text { display: none; }
		}
	}
}


/* Small (>= 448px): top: 1-2 col | nor: 1-3 col */
@container raxo-prime (width >= 448px) {
	.raxo-prime {
		/* Defaults */
		& .raxo-body				{ --raxo-grid-prop: 1fr; }
		& .raxo-top					{ --raxo-grid-cols: 1; }
		& .raxo-normal				{ --raxo-grid-cols: 2; }

		/* Section Proportions */
		&.prime-sm-1 .raxo-body		{ --raxo-grid-prop: 1fr; }
		&.prime-sm-1-1 .raxo-body	{ --raxo-grid-prop: 1fr 1fr; }
		&.prime-sm-1-2 .raxo-body	{ --raxo-grid-prop: 1fr 2fr; }
		&.prime-sm-2-1 .raxo-body	{ --raxo-grid-prop: 2fr 1fr; }

		/* Section Columns */
		&.top-sm-col1 .raxo-top		{ --raxo-grid-cols: 1; }
		&.top-sm-col2 .raxo-top		{ --raxo-grid-cols: 2; }
		&.nor-sm-col1 .raxo-normal	{ --raxo-grid-cols: 1; }
		&.nor-sm-col2 .raxo-normal	{ --raxo-grid-cols: 2; }
		&.nor-sm-col3 .raxo-normal	{ --raxo-grid-cols: 3; }
	}
}


/* Medium (>= 696px): top: 1-3 col | nor: 1-4 col */
@container raxo-prime (width >= 696px) {
	.raxo-prime {
		/* Defaults */
		& .raxo-body				{ --raxo-grid-prop: 2fr 1fr; }
		& .raxo-top					{ --raxo-grid-cols: 1; }
		& .raxo-normal				{ --raxo-grid-cols: 2; }

		/* Section Proportions */
		&.prime-md-1 .raxo-body		{ --raxo-grid-prop: 1fr; }
		&.prime-md-1-1 .raxo-body	{ --raxo-grid-prop: 1fr 1fr; }
		&.prime-md-1-2 .raxo-body	{ --raxo-grid-prop: 1fr 2fr; }
		&.prime-md-2-1 .raxo-body	{ --raxo-grid-prop: 2fr 1fr; }
		&.prime-md-1-3 .raxo-body	{ --raxo-grid-prop: 1fr 3fr; }
		&.prime-md-3-1 .raxo-body	{ --raxo-grid-prop: 3fr 1fr; }

		/* Section Columns */
		&.top-md-col1 .raxo-top		{ --raxo-grid-cols: 1; }
		&.top-md-col2 .raxo-top		{ --raxo-grid-cols: 2; }
		&.top-md-col3 .raxo-top		{ --raxo-grid-cols: 3; }
		&.nor-md-col1 .raxo-normal	{ --raxo-grid-cols: 1; }
		&.nor-md-col2 .raxo-normal	{ --raxo-grid-cols: 2; }
		&.nor-md-col3 .raxo-normal	{ --raxo-grid-cols: 3; }
		&.nor-md-col4 .raxo-normal	{ --raxo-grid-cols: 4; }

		/* Responsive Adjustments */
		& .raxo-block-button {
			min-width: 320px;
			width: fit-content;
		}
	}
}


/* Large (>= 944px): top: 1-4 col | nor: 1-5 col */
@container raxo-prime (width >= 944px) {
	.raxo-prime {
		/* Defaults */
		& .raxo-body				{ --raxo-grid-prop: 3fr 2fr; }
		& .raxo-top					{ --raxo-grid-cols: 1; }
		& .raxo-normal				{ --raxo-grid-cols: 2; }

		/* Section Proportions */
		&.prime-lg-1 .raxo-body		{ --raxo-grid-prop: 1fr; }
		&.prime-lg-1-1 .raxo-body	{ --raxo-grid-prop: 1fr 1fr; }
		&.prime-lg-1-2 .raxo-body	{ --raxo-grid-prop: 1fr 2fr; }
		&.prime-lg-2-1 .raxo-body	{ --raxo-grid-prop: 2fr 1fr; }
		&.prime-lg-1-3 .raxo-body	{ --raxo-grid-prop: 1fr 3fr; }
		&.prime-lg-3-1 .raxo-body	{ --raxo-grid-prop: 3fr 1fr; }
		&.prime-lg-1-4 .raxo-body	{ --raxo-grid-prop: 1fr 4fr; }
		&.prime-lg-2-3 .raxo-body	{ --raxo-grid-prop: 2fr 3fr; }
		&.prime-lg-3-2 .raxo-body	{ --raxo-grid-prop: 3fr 2fr; }
		&.prime-lg-4-1 .raxo-body	{ --raxo-grid-prop: 4fr 1fr; }

		/* Section Columns */
		&.top-lg-col1 .raxo-top		{ --raxo-grid-cols: 1; }
		&.top-lg-col2 .raxo-top		{ --raxo-grid-cols: 2; }
		&.top-lg-col3 .raxo-top		{ --raxo-grid-cols: 3; }
		&.top-lg-col4 .raxo-top		{ --raxo-grid-cols: 4; }
		&.nor-lg-col1 .raxo-normal	{ --raxo-grid-cols: 1; }
		&.nor-lg-col2 .raxo-normal	{ --raxo-grid-cols: 2; }
		&.nor-lg-col3 .raxo-normal	{ --raxo-grid-cols: 3; }
		&.nor-lg-col4 .raxo-normal	{ --raxo-grid-cols: 4; }
		&.nor-lg-col5 .raxo-normal	{ --raxo-grid-cols: 5; }

		/* Responsive Adjustments */
		& .raxo-top {
			--raxo-size-top-title: 30px;
		}
	}
}


/* X-Large (>= 1192px): top: 1-5 col | nor: 1-6 col */
@container raxo-prime (width >= 1192px) {
	.raxo-prime {
		/* Defaults */
		& .raxo-body				{ --raxo-grid-prop: 1fr 1fr; }
		& .raxo-top					{ --raxo-grid-cols: 1; }
		& .raxo-normal				{ --raxo-grid-cols: 2; }

		/* Section Proportions */
		&.prime-xl-1 .raxo-body		{ --raxo-grid-prop: 1fr; }
		&.prime-xl-1-1 .raxo-body	{ --raxo-grid-prop: 1fr 1fr; }
		&.prime-xl-1-2 .raxo-body	{ --raxo-grid-prop: 1fr 2fr; }
		&.prime-xl-2-1 .raxo-body	{ --raxo-grid-prop: 2fr 1fr; }
		&.prime-xl-1-3 .raxo-body	{ --raxo-grid-prop: 1fr 3fr; }
		&.prime-xl-3-1 .raxo-body	{ --raxo-grid-prop: 3fr 1fr; }
		&.prime-xl-1-4 .raxo-body	{ --raxo-grid-prop: 1fr 4fr; }
		&.prime-xl-2-3 .raxo-body	{ --raxo-grid-prop: 2fr 3fr; }
		&.prime-xl-3-2 .raxo-body	{ --raxo-grid-prop: 3fr 2fr; }
		&.prime-xl-4-1 .raxo-body	{ --raxo-grid-prop: 4fr 1fr; }
		&.prime-xl-1-5 .raxo-body	{ --raxo-grid-prop: 1fr 5fr; }
		&.prime-xl-5-1 .raxo-body	{ --raxo-grid-prop: 5fr 1fr; }

		/* Section Columns */
		&.top-xl-col1 .raxo-top		{ --raxo-grid-cols: 1; }
		&.top-xl-col2 .raxo-top		{ --raxo-grid-cols: 2; }
		&.top-xl-col3 .raxo-top		{ --raxo-grid-cols: 3; }
		&.top-xl-col4 .raxo-top		{ --raxo-grid-cols: 4; }
		&.top-xl-col5 .raxo-top		{ --raxo-grid-cols: 5; }
		&.nor-xl-col1 .raxo-normal	{ --raxo-grid-cols: 1; }
		&.nor-xl-col2 .raxo-normal	{ --raxo-grid-cols: 2; }
		&.nor-xl-col3 .raxo-normal	{ --raxo-grid-cols: 3; }
		&.nor-xl-col4 .raxo-normal	{ --raxo-grid-cols: 4; }
		&.nor-xl-col5 .raxo-normal	{ --raxo-grid-cols: 5; }
		&.nor-xl-col6 .raxo-normal	{ --raxo-grid-cols: 6; }
	}
}


/* 2X-Large (>= 1440px): top: 1-6 col | nor: 1-6 col */
@container raxo-prime (width >= 1440px) {
	.raxo-prime {
		/* Defaults */
		& .raxo-body				{ --raxo-grid-prop: 1fr; }
		& .raxo-top					{ --raxo-grid-cols: 2; }
		& .raxo-normal				{ --raxo-grid-cols: 4; }

		/* Section Proportions */
		&.prime-2xl-1 .raxo-body	{ --raxo-grid-prop: 1fr; }
		&.prime-2xl-1-1 .raxo-body	{ --raxo-grid-prop: 1fr 1fr; }
		&.prime-2xl-1-2 .raxo-body	{ --raxo-grid-prop: 1fr 2fr; }
		&.prime-2xl-2-1 .raxo-body	{ --raxo-grid-prop: 2fr 1fr; }
		&.prime-2xl-1-3 .raxo-body	{ --raxo-grid-prop: 1fr 3fr; }
		&.prime-2xl-3-1 .raxo-body	{ --raxo-grid-prop: 3fr 1fr; }
		&.prime-2xl-1-4 .raxo-body	{ --raxo-grid-prop: 1fr 4fr; }
		&.prime-2xl-2-3 .raxo-body	{ --raxo-grid-prop: 2fr 3fr; }
		&.prime-2xl-3-2 .raxo-body	{ --raxo-grid-prop: 3fr 2fr; }
		&.prime-2xl-4-1 .raxo-body	{ --raxo-grid-prop: 4fr 1fr; }
		&.prime-2xl-1-5 .raxo-body	{ --raxo-grid-prop: 1fr 5fr; }
		&.prime-2xl-5-1 .raxo-body	{ --raxo-grid-prop: 5fr 1fr; }

		/* Section Columns */
		&.top-2xl-col1 .raxo-top	{ --raxo-grid-cols: 1; }
		&.top-2xl-col2 .raxo-top	{ --raxo-grid-cols: 2; }
		&.top-2xl-col3 .raxo-top	{ --raxo-grid-cols: 3; }
		&.top-2xl-col4 .raxo-top	{ --raxo-grid-cols: 4; }
		&.top-2xl-col5 .raxo-top	{ --raxo-grid-cols: 5; }
		&.top-2xl-col6 .raxo-top	{ --raxo-grid-cols: 6; }
		&.nor-2xl-col1 .raxo-normal	{ --raxo-grid-cols: 1; }
		&.nor-2xl-col2 .raxo-normal	{ --raxo-grid-cols: 2; }
		&.nor-2xl-col3 .raxo-normal	{ --raxo-grid-cols: 3; }
		&.nor-2xl-col4 .raxo-normal	{ --raxo-grid-cols: 4; }
		&.nor-2xl-col5 .raxo-normal	{ --raxo-grid-cols: 5; }
		&.nor-2xl-col6 .raxo-normal	{ --raxo-grid-cols: 6; }
	}
}



/* ----- COLOR Schemes ----- */
.raxo-prime {
	/* --- 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-260: hsl(232, 3%, 82%);
	--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-100);
	--raxo-color-text-base:  var(--raxo-gray-260);

	/* --- 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-deep:  var(--raxo-gray-900);
		--raxo-color-text-base:  var(--raxo-gray-600);

		/* Dimming image brightness to avoid eye strain */
		& .raxo-image img { filter: brightness(0.87); }
	}

	/* --- 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 --- */
	& :where(.raxo-block-intro, .raxo-text) a {
		color: var(--raxo-color-theme);
	}
}