/**
 * =============================================================
 * @package		RAXO Bricks 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-bricks {
	container: raxo-bricks / inline-size;
	margin-block: 2rem;
	box-sizing: border-box;
	word-break: break-word;
}
	.raxo-bricks:first-child {margin-block-start: 0;}
	/* .raxo-bricks:last-child  {margin-block-end: 0;} */
	.raxo-bricks ::before, .raxo-bricks ::after,
	.raxo-bricks * {box-sizing: inherit;}

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



/* ----- LAYOUT Settings ----- */
.raxo-bricks {
	--top-font-size: 16px;
	--nor-font-size: 14px;
	--spacing-base: 8px;

	line-height: 1.375;
}



/* ----- Module BLOCK ----- */
.raxo-bricks .raxo-header {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: flex-start;
	margin-bottom: 14px; padding: 4px 10px;
	border-top: 2px solid var(--raxo-theme-color);
}

/* --- Block NAME --- */
.raxo-bricks .raxo-block-name {
	flex: 1 1 128px;
	margin: 0 2px;
	font: bold 18px/24px Tahoma, Helvetica, Arial, sans-serif;
	color: var(--raxo-text-deep);
}
	.raxo-bricks .raxo-block-name a {
		color: inherit;
	}

/* --- Block BUTTON --- */
.raxo-bricks .raxo-block-button {
	margin: 2px;
}

/* --- Block INTRO --- */
.raxo-bricks .raxo-block-intro {
	flex: 1 100%;
	order: 3;
	margin: 12px 2px 4px;
	font-size: 16px;
	color: var(--raxo-text-base);
}



/* ----- Module ITEMS ----- */
.raxo-bricks .raxo-top {
	font-size: var(--top-font-size);
	--icon-size: var(--top-font-size);
	--size-md: calc(var(--spacing-base) * 4);
	--size-lg: calc(var(--spacing-base) * 6);
}
.raxo-bricks .raxo-normal {
	font-size: var(--nor-font-size);
	--icon-size: var(--nor-font-size);
	--size-md: calc(var(--spacing-base) * 3);
	--size-lg: calc(var(--spacing-base) * 4);
}
.raxo-bricks article {
	position: relative;
	margin-bottom: var(--size-lg);
}
.raxo-bricks article .raxo-wrap {
	background-color: var(--raxo-gray-100);
	border-radius: 4px 4px 3px 3px;
	box-shadow: 0 1px 2px var(--raxo-shadow-light);
	overflow: hidden;
}
	.raxo-bricks .raxo-wrap > div:first-child {
		border: solid var(--raxo-theme-color);
		border-width: 3px 0 0;
	}

/* --- TOP Items --- */
.raxo-bricks .raxo-top .raxo-wrap {
	display: flex;
	flex-wrap: wrap;
	border-top: 1px solid rgba(0,0,0,0.05);
}
	.raxo-bricks .raxo-top article:nth-child(2n) .raxo-wrap {
		flex-direction: row-reverse;
	}
.raxo-bricks .raxo-top .raxo-wrap > div {
	margin-left: -3px;
	flex: 1 1 320px;
	min-width: 192px;
}

/* --- NORMAL Items --- */
.raxo-bricks .raxo-normal {
	display: flex;
	flex-wrap: wrap;
	padding-top: 2px;
}
	.raxo-bricks .raxo-normal article {
		flex: 1 0 240px;
		/*min-width: 192px;*/
	}



/* ----- Item IMAGE ----- */
.raxo-bricks .raxo-image {
	margin: -3px;
 	border-width: 3px !important;
}
	.raxo-bricks .raxo-normal .raxo-image {
		margin-bottom: 0;
	}
.raxo-bricks .raxo-image img {
	display: block;
	width: 100%; max-width: 100%; height: auto;
	transition: opacity .3s ease-out;
	image-rendering: -webkit-optimize-contrast;
}
	.raxo-bricks article:hover .raxo-image img {
		opacity: 0.85;
	}
	.raxo-bricks .raxo-top .raxo-image img {
		height: 100%;
		object-fit: cover;
	}


/* ----- Item CATEGORY ----- */
.raxo-bricks .raxo-category {
	position: absolute;
	left: -4px; top: var(--size-lg);
}
.raxo-bricks .raxo-top article:nth-child(2n) .raxo-category {
	left: unset; right: -4px;
}



/* ----- CONTENT Styles ----- */
.raxo-bricks .raxo-content {
	display: flex;
	flex-direction: column;
	column-gap: .5em;
	padding: var(--size-md) clamp(16px, 10%, var(--size-lg));
	overflow: hidden;
}
	.raxo-bricks .raxo-content > :first-child {
		margin-top: 0;
	}

/* --- Item TITLE --- */
.raxo-bricks .raxo-title {
	margin: 8px 0;
	/* font-size: 1.14em; */
	font-size: clamp(16px, 1.3cqi, 20px);
	line-height: 1.25;
	font-weight: bold;
	text-transform: none;
}
	.raxo-bricks .raxo-top .raxo-title {
		/* font-size: 1.625em; */
		font-size: clamp(20px, 2.8cqi, 28px);
		line-height: 1.15;
	}
	.raxo-bricks .raxo-title a {
		color: var(--raxo-text-deep);
	}

/* --- Item TEXT --- */
.raxo-bricks .raxo-text {
	margin-top: 18px;
	color: var(--raxo-text-base);
}
	.raxo-bricks .raxo-text a:hover {
		text-decoration: underline;
	}



/* ----- CONTENT Elements ----- */
.raxo-bricks .raxo-info,
.raxo-bricks .raxo-meta {
	display: flex; flex-wrap: wrap;
	gap: .25em 1em;
	/* font-size: .93em; line-height: 1.2; */
	color: var(--raxo-text-muted);
}


/* --- META Elements --- */
.raxo-bricks .raxo-normal .raxo-meta {
	padding: var(--spacing-base) clamp(16px, 10%, var(--size-lg));
	background-color: var(--raxo-gray-120);
	border-top: 1px solid var(--raxo-gray-200);
}
.raxo-bricks .raxo-meta span {
	display: flex;
	align-items: center;
	font-size: .93em; line-height: 1.2;
}
.raxo-bricks .raxo-meta svg {
	width: var(--icon-size);
	height: var(--icon-size);
	margin-right: 4px;
	fill: currentColor;
}


/* --- Item READMORE --- */
.raxo-bricks .raxo-top .raxo-readmore {
	align-self: flex-start;
	margin-top: 24px;
}
	.raxo-bricks .raxo-top .raxo-readmore a {
		padding: 8px 16px;
	}
.raxo-bricks .raxo-normal .raxo-readmore {
	margin-left: auto;
}


/* ----- BUTTON Styles ----- */
.raxo-bricks .raxo-btn {
	padding: 2px 12px;
	font-size: .93em;
	color: var(--raxo-gray-100);
	background-color: var(--raxo-theme-color);
	border-radius: 2px;
	transition: opacity .25s ease-out;
}
	.raxo-bricks .raxo-btn a {
		display: inline-block;
		margin: -2px -12px; padding: 2px 12px;
		color: inherit;
		text-decoration: none;
	}
	.raxo-bricks .raxo-btn:has(a):hover {
		opacity: 0.75;
	}




/* ----- COLOR Schemes ----- */
.raxo-bricks .raxo-block-name a:hover,
.raxo-bricks .raxo-title a:hover,
.raxo-bricks .raxo-text a:hover {
	color: var(--raxo-theme-color);
}




/* --- LIGHT Color Mode --- */
.raxo-bricks {
	--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-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-shadow-light: hsla(232, 5%, 30%, 0.3);
}

/* --- DARK Color Mode --- */
.raxo-bricks.dark-mode, .raxo-bricks.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-shadow-light: hsla(232, 2%, 66%, 0.3);
}


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