/**
 * =============================================================
 * @subpackage	RAXO Grid 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-grid {
	container: raxo-grid / inline-size;
	margin-block: 2rem;
	box-sizing: border-box;
	overflow: hidden;

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

	& article, & h3, & h4,
	& 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-grid {
	/* --- Layout Settings --- */
	--block-spacing-x: clamp(12px, 4%, 48px);
	--item-spacing-x: clamp(8px, 6%, 32px);

	--col-min-width: 192px;
	--item-gap-x: 24px;
	--item-gap-y: 32px;
	--title-size: 20px;
	--text-size: 15px;
	--meta-size: 13px;

	border: solid var(--raxo-gray-900);
	border-width: 2px 0 1px;

	& .raxo-header {
		display: flex;
		flex-wrap: wrap;
		gap: 8px 12px;
		padding: 8px 8px 12px 16px;
		background-color: var(--raxo-gray-100);
		border-bottom: 1px solid var(--raxo-gray-300);
	}

	/* ----- Block NAME ----- */
	& .raxo-block-name {
		margin-block: 4px;
		flex: 1;
		font-size: 20px; font-weight: bold;
		line-height: 24px;
		color: var(--raxo-text-deep);
		
		& a { color: inherit; }
	}

	/* --- Block INTRO --- */
	& .raxo-block-intro {
		flex: 1 192px;
		font-size: 16px;
		line-height: 20px;
		color: var(--raxo-text-muted);

		.raxo-block-name + & {
			flex-basis: 100%;
			order: 1;
		}
	}

	/* ----- Block BUTTON ----- */
	& .raxo-block-button {
		position: relative;
		padding: 8px;
		padding-inline: 16px 8px;
		font-size: var(--text-size); line-height: 20px;
		color: var(--raxo-text-muted);
		background-color: var(--raxo-gray-100);
		border-top: 1px solid var(--raxo-gray-300);
		
		& a { color: inherit; }
		& a::before {
			content: '';
			position: absolute;
			inset: 0;
			z-index: 1;
		}
	}

	/* ----- MODULE Items ----- */
	& .raxo-normal {
		margin-block: var(--item-gap-y);
		transition: opacity .25s ease-in-out;
		
		&.raxo-is-switching { opacity: .1; }
	}

	& .raxo-wrap {
		display: flex;
		flex-wrap: wrap;
		gap: 16px 24px;
		height: 100%;
		border: 2px solid transparent;
		transition: border-color .25s;
		
		/* --- Hover effect --- */
		&:hover {
			border-color: var(--raxo-theme-color);

			& .raxo-image {
				background-color: var(--raxo-theme-color);
				border-color: var(--raxo-theme-color);
			}
			& .raxo-title a {
				color: var(--raxo-theme-color) !important;
			}
		}
			
		& .raxo-media {
			flex: 0 1 auto;
		}
		& .raxo-content {
			display: flex;
			flex-direction: column;
			row-gap: 14px;
			flex: 1;
			min-width: 160px;
		}
	}

	/* ----- Item IMAGE ----- */
	& .raxo-image {
		position: relative;
		padding: 7px;
		background-color: var(--raxo-gray-100);
		border: 1px solid var(--raxo-gray-300);
		transition: all .25s ease-in-out;
		
		& img {
			display: block;
			max-width: 100%; height: auto;
		}
	}

	& .raxo-category {
		position: absolute;
		left: -1px; bottom: -1px;
		padding: 2px 12px 2px 10px;
		font-size: 12px; line-height: 16px;
		text-transform: uppercase;
		color: var(--raxo-text-above);
		background-color: var(--raxo-gray-600);
		clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);

		& a {
			text-decoration: none;
			color: inherit;
		}
		& a::before {
			content: '';
			position: absolute;
			inset: 0;
			z-index: 1;
		}
	}

	/* ----- Item CONTENT ----- */
	& .raxo-title {
		margin-block: 4px;
		font: normal var(--title-size)/1.2 "Georgia", serif;
		text-transform: none;
		
		& a { color: var(--raxo-text-deep); }
	}

	& .raxo-text {
		font-size: var(--text-size);
		line-height: 1.4;
		color: var(--raxo-text-base);
		
		& a { color: inherit; }
	}

	& .raxo-readmore {
		font-size: .933em;
	}

	/* ----- Item FIELDS ----- */
	& .raxo-meta {
		display: flex;
		flex-wrap: wrap;
		gap: 6px 12px;
		font-size: var(--meta-size);
		line-height: 1.23;
		color: var(--raxo-text-muted);
	}
	
	& .raxo-rating {
		display: flex;
		gap: 4px;
		align-self: center;

		& .raxo-star {
			position: relative;
			margin-block: 3px;
			width: 12px; height: 10px;
			background-color: var(--raxo-gray-100);
			border: 1px solid var(--raxo-gray-300);
			border-radius: 2px;

			&:has(span) { border-color: var(--raxo-gray-400); }
			& span {
				position: absolute;
				inset: 0;
				background-color: var(--raxo-theme-color);
				border-radius: 1px;
			}
		}
	}

	& .raxo-comments {
		position: relative;
		display: inline-block;
		vertical-align: text-bottom;
		margin-inline-start: 4px; 
		margin-bottom: 3px;
		padding: 0 5px;
		min-width: 24px;
		color: var(--raxo-text-above);
		font: 14px/18px serif;
		text-align: center;
		background: var(--raxo-gray-600);
		border-radius: 4px;

		&::after {
			content: '';
			position: absolute;
			bottom: -4px; left: 6px;
			border-style: solid;
			border-width: 4px 5px 0 0;
			border-color: var(--raxo-gray-600) transparent transparent;
		}
	}

	/* ----- VIEW Switch ----- */
	& .raxo-switch {
		margin-left: auto;
		display: flex;
		gap: 12px;
		align-items: flex-start;
		
		& button {
			line-height: 0;
			color: var(--raxo-gray-300);
			background-color: var(--raxo-gray-100);
			border: 1px solid var(--raxo-gray-200);
			border-radius: 2px;
			cursor: default;
		}
		& button[aria-pressed="false"] {
			color: var(--raxo-gray-400);
			background-color: var(--raxo-gray-200);
			cursor: pointer;
			
			&:hover {
				color: var(--raxo-gray-900);
				border-color: var(--raxo-theme-color);
			}
		}
		& svg {
			width: 32px; height: 32px;
			fill: currentColor;
		}
	}

	/* ----- GRID View ----- */
	& .raxo-items-grid {
		--col-gap-size: calc((var(--max-cols) - 1) * var(--item-gap-x));
		--col-min-size: calc(var(--col-min-width) + var(--item-gap-x));
		--col-max-size: calc((100% - var(--col-gap-size)) / var(--max-cols));

		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(max(var(--col-min-size), var(--col-max-size)), 1fr));
		gap: var(--item-gap-y) var(--item-gap-x);
		
		& .raxo-wrap {
			flex-direction: column;
			padding-bottom: 8px;
			border-width: 0 0 2px 0;
		}
		& .raxo-media {
			flex-basis: auto !important;
		}
		& .raxo-content {
			justify-content: space-between;
		}
		& .raxo-text { display: none; }	/* Hide text */

		& .raxo-meta::after { content: ''; flex: 1; }
		& .raxo-rating:not(:only-child) { order: 1; }
	}

	/* ----- LIST View ----- */
	& .raxo-items-list {
		display: flex;
		flex-direction: column;
		gap: var(--item-gap-y);

		& .raxo-wrap {
			padding-inline-end: 12px;
			border-width: 0 2px 0 0;
		}
		& .raxo-meta {
			margin-block: 4px;
		}
		& .raxo-title + .raxo-meta {
			margin-block-start: -12px;
		}
	}
}


/* ----- COLOR Schemes ----- */
.raxo-grid {
	/* --- 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-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-text-above: var(--raxo-gray-100);

	/* --- 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-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%);
	}

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



/* ----- Predefined Number of Columns ----- */

.raxo-grid { --max-cols: 1; }

@container raxo-grid (width < 400px) {
	.raxo-items-grid { grid-template-columns: 1fr !important; }
}

/* Narrow Positions */
@container raxo-grid (width >= 448px) {
	.raxo-items-grid { --max-cols: 2; }

	.nor-sm-col1 .raxo-items-grid { --max-cols: 1; }
	.nor-sm-col2 .raxo-items-grid { --max-cols: 2; }
	.nor-sm-col3 .raxo-items-grid { --max-cols: 3; }
	.nor-sm-col4 .raxo-items-grid { --max-cols: 4; }
	.nor-sm-col5 .raxo-items-grid { --max-cols: 5; }
	.nor-sm-col6 .raxo-items-grid { --max-cols: 6; }
}

/* Medium Positions */
@container raxo-grid (width >= 696px) {
	.raxo-items-grid { --max-cols: 3; }

	.nor-md-col1 .raxo-items-grid { --max-cols: 1; }
	.nor-md-col2 .raxo-items-grid { --max-cols: 2; }
	.nor-md-col3 .raxo-items-grid { --max-cols: 3; }
	.nor-md-col4 .raxo-items-grid { --max-cols: 4; }
	.nor-md-col5 .raxo-items-grid { --max-cols: 5; }
	.nor-md-col6 .raxo-items-grid { --max-cols: 6; }
}

/* Large Positions */
@container raxo-grid (width >= 944px) {
	.raxo-items-grid { --max-cols: 4; }

	.nor-lg-col1 .raxo-items-grid { --max-cols: 1; }
	.nor-lg-col2 .raxo-items-grid { --max-cols: 2; }
	.nor-lg-col3 .raxo-items-grid { --max-cols: 3; }
	.nor-lg-col4 .raxo-items-grid { --max-cols: 4; }
	.nor-lg-col5 .raxo-items-grid { --max-cols: 5; }
	.nor-lg-col6 .raxo-items-grid { --max-cols: 6; }
}

/* X-Large Positions */
@container raxo-grid (width >= 1192px) {
	.raxo-items-grid { --max-cols: 5; }

	.nor-xl-col1 .raxo-items-grid { --max-cols: 1; }
	.nor-xl-col2 .raxo-items-grid { --max-cols: 2; }
	.nor-xl-col3 .raxo-items-grid { --max-cols: 3; }
	.nor-xl-col4 .raxo-items-grid { --max-cols: 4; }
	.nor-xl-col5 .raxo-items-grid { --max-cols: 5; }
	.nor-xl-col6 .raxo-items-grid { --max-cols: 6; }
}

/* XX-Large Positions */
@container raxo-grid (width >= 1440px) {
	.raxo-items-grid { --max-cols: 6; }

	.nor-xxl-col1 .raxo-items-grid { --max-cols: 1; }
	.nor-xxl-col2 .raxo-items-grid { --max-cols: 2; }
	.nor-xxl-col3 .raxo-items-grid { --max-cols: 3; }
	.nor-xxl-col4 .raxo-items-grid { --max-cols: 4; }
	.nor-xxl-col5 .raxo-items-grid { --max-cols: 5; }
	.nor-xxl-col6 .raxo-items-grid { --max-cols: 6; }
}