/**
 * =============================================================
 * @subpackage	RAXO Rational 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+Slab:wght@600&display=swap');



/* ----- RESET & DEFAULT Styles ----- */
.raxo-rational {
	container: raxo-rational / 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;
		text-decoration: none;
		transition: color .2s ease, text-decoration .2s ease;

		&:hover { text-decoration: underline; }
		&:focus-visible {
			outline: 2px solid var(--raxo-color-theme);
			outline-offset: 2px;
			border-radius: 3px;
		}
	}
}



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

	/* --- Layout SETTINGS --- */
	--raxo-grid-col-min: 224px;		/* minimum column width in grid */
	--raxo-grid-col-gap: 24px;		/* gap between columns */
	--raxo-grid-row-gap: 32px;		/* gap between rows */

	--raxo-font-main: "Roboto Slab", Rockwell, Georgia, serif;
	--top-font-size: 17px;
	--nor-font-size: 14px;

	--raxo-rounded-corners: 1;		/* 1 = enable, 0 = disable */
	--raxo-corners-top: 16px;		/* use the range 4px - 64px */
	--raxo-corners-bot: 10px;		/* use the range 3px - 32px */
	--raxo-image-spacing: 8px;		/* use the range 0px - 24px */


	/* ----- Module BLOCK ----- */
	& .raxo-header {
		display: grid;
		grid-auto-flow: dense;
		grid-template-columns: repeat(auto-fill, minmax(max(112px, 33% - 24px), 1fr));
		gap: 12px 16px;
		margin-bottom: var(--raxo-grid-row-gap);

		&:has(.raxo-block-button) .raxo-block-name {
			grid-column: 1 / span 2;
		}
	}

	/* --- Block NAME --- */
	& .raxo-block-name {
		grid-column: 1 / -1;
		font-size: 20px;
		font-weight: bold;
		line-height: 24px;
		color: var(--raxo-color-text-deep);

		& a { color: inherit; }
	}

	/* --- Block INTRO --- */
	& .raxo-block-intro {
		grid-column: 1 / -1;
		padding: 0 clamp(8px, 4%, 48px);
		font-size: 16px;
		line-height: 1.5;
		color: var(--raxo-color-text-base);
	}

	/* --- Block BUTTON --- */
	& .raxo-block-button {
		grid-column: auto / -1;
		font-size: 16px;
		line-height: 1.5;
		text-align: right;
		color: var(--raxo-color-text-deep);
	}


	/* ----- Module BODY ----- */
	& .raxo-body {
		--raxo-grid-gap-sum: calc((var(--max-cols) - 1) * var(--raxo-grid-col-gap));
		--raxo-grid-col-max: calc((100% - var(--raxo-grid-gap-sum)) / var(--max-cols));
		--item-radius-t: calc(var(--raxo-corners-top) * var(--raxo-rounded-corners));
		--item-radius-b: calc(var(--raxo-corners-bot) * var(--raxo-rounded-corners));

		position: relative;
		display: grid;
		align-content: start;
		align-items: start;
		grid-template-columns: repeat(auto-fill, minmax(max(var(--raxo-grid-col-min), var(--raxo-grid-col-max)), 1fr));
		column-gap: var(--raxo-grid-col-gap);
		opacity: 0;
		transition: opacity .25s ease;

		&.raxo-ready { opacity: 1; }
	}

	/* --- Size PATTERNS (for Masonry sizing) --- */
	& .raxo-body > div {
		visibility: hidden;
		pointer-events: none;
		margin: 0;
		height: 8px;
		background-color: var(--raxo-color-theme);

		&.raxo-pattern-top {
			grid-column-end: span min(var(--top-span), var(--max-cols));
		}
	}


	/* ----- MODULE Items ----- */
	& article {
		--raxo-spacing-x: clamp(8px, 10%, 64px);
		--raxo-spacing-y: clamp(24px, 12%, 40px);
		margin: 0 0 var(--raxo-grid-row-gap);
		background-color: var(--raxo-gray-100);
		border-radius: var(--item-radius-t) var(--item-radius-t) var(--item-radius-b) var(--item-radius-b);
		box-shadow:
			0 0 0 1px hsla(var(--raxo-hsl-shadow), .08),
			0 6px 14px 0 hsla(var(--raxo-hsl-shadow), .05);
		transition: box-shadow .3s cubic-bezier(.4, 0, .2, 1);
		overflow: hidden;

		&:hover {
			box-shadow:
				0 0 0 1px hsla(var(--raxo-hsl-shadow), .08),
				0 4px 10px -2px hsla(var(--raxo-hsl-shadow), .04),
				0 8px 20px -4px hsla(var(--raxo-hsl-shadow), .1);

			& .raxo-image { filter: saturate(1.32) brightness(.8); }
		}
	}

	/* --- Item IMAGE --- */
	& .raxo-image {
		--image-radius-t: calc(max(4px, var(--raxo-corners-top) - var(--raxo-image-spacing)) * var(--raxo-rounded-corners));
		--image-radius-b: calc(max(3px, var(--raxo-corners-bot) - var(--raxo-image-spacing)) * var(--raxo-rounded-corners));

		margin: var(--raxo-image-spacing);
		border-radius: var(--image-radius-t) var(--image-radius-t) var(--image-radius-b) var(--image-radius-b);
		transition: filter .3s ease-out;
		overflow: hidden;

		.raxo-item-nor & {
			border-bottom-left-radius: calc(3px * var(--raxo-rounded-corners));
			border-bottom-right-radius: calc(3px * var(--raxo-rounded-corners));
		}

		& img {
			width: 100%;
			height: auto;
		}
	}

	/* --- Item CONTENT --- */
	& .raxo-content {
		padding: var(--raxo-spacing-y) var(--raxo-spacing-x);
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		gap: 8px;
		z-index: 2;
		font-size: var(--nor-font-size);
		color: var(--raxo-color-text-base);

		.raxo-item-nor .raxo-image + & {
			padding-top: calc(var(--raxo-spacing-y) - var(--raxo-image-spacing));
		}
	}

	/* --- Item TITLE --- */
	& .raxo-title {
		font: 600 1.4em var(--raxo-font-main);
		line-height: 1.15;
		text-transform: none;

		& a { color: var(--raxo-color-text-deep); }
	}

	/* --- Item TEXT --- */
	& .raxo-text {
		line-height: 1.3;
		color: var(--raxo-color-text-base);
	}

	/* --- Item FIELDS --- */
	& .raxo-info {
		margin-bottom: 4px;
		display: flex;
		flex-wrap: wrap;
		gap: 3px 12px;
		font-size: .93em;
		font-weight: 500;
		line-height: 1.38;
		text-transform: uppercase;
	}
	& .raxo-category {
		display: inline-block;
		padding: 3px 10px 2px;
		letter-spacing: 1.25px;
		color: var(--raxo-color-theme);
		background-color: hsla(var(--raxo-hsl-shadow), .08);
		border: 1px solid var(--raxo-color-theme);
		border-radius: calc(max(3px, var(--raxo-corners-bot)) * var(--raxo-rounded-corners));

		& a { text-decoration: none; }
	}
	& .raxo-date {
		padding: 4px 0;
		color: var(--raxo-color-text-light);
	}

	/* --- Meta FIELDS --- */
	& .raxo-bottom {
		margin-top: 8px;
		display: flex;
		flex-wrap: wrap;
		gap: 3px 14px;
		justify-content: space-between;
		font-size: .93em;
		line-height: 1.54;

		& svg {
			display: inline-block;
			width: 16px;
			height: 16px;
			vertical-align: text-bottom;
			fill: currentColor;
		}
	}
	& .raxo-author {
		font-weight: 600;
		text-transform: uppercase;
		color: var(--raxo-color-text-light);
	}
	& .raxo-meta {
		display: flex;

		& span {
			display: inline-block;
		}
		& > span:not(:last-of-type) {
			margin-right: 14px;
		}
	}


	/* ----- TOP Items ----- */
	& .raxo-item-top {
		& .raxo-wrap {
			display: grid;

			& > div { grid-area: 1 / -1; }
		}

		/* Top IMAGE */
		& .raxo-image {
			position: relative;
			min-height: 256px;
			background: var(--raxo-gray-300);
			z-index: 1;

			& img {
				object-fit: cover;
				width: 100%;
				height: 100%;
			}
			&::after {
				content: "";
				position: absolute;
				inset: 0;
				background-blend-mode: multiply;
				background-image: linear-gradient(to bottom,
					transparent 0%,
					transparent 28%,
					oklch(0.24 0.005 250 / 0.04) 37%,
					oklch(0.24 0.005 250 / 0.14) 47%,
					oklch(0.24 0.005 250 / 0.30) 58%,
					oklch(0.24 0.005 250 / 0.50) 70%,
					oklch(0.24 0.005 250 / 0.72) 84%,
					oklch(0.24 0.005 250 / 0.88) 100%
				);
			}
		}

		/* Top CONTENT */
		& .raxo-content {
			padding-top: 128px;
			font-size: var(--top-font-size);
			color: var(--raxo-top-color-text-base);
			text-shadow: 0 1px 3px hsla(232, 5%, 22%, .5);
			z-index: 2;
		}

		& .raxo-title a {
			color: var(--raxo-top-color-text-deep);
			text-decoration-color: transparent;

			&:hover {
				text-decoration: var(--raxo-color-theme) underline 2px;
			}
			&::after {
				position: absolute;
				inset: var(--raxo-image-spacing);
				content: "";
				z-index: 3;
			}
		}

		& .raxo-category {
			text-shadow: none;
			background-color: hsla(232, 2%, 88%, .84);

			& a {
				position: relative;
				z-index: 4;
			}
		}

		& :is(.raxo-info, .raxo-bottom) {
			margin: 0;
			font-size: .83em;
		}
		& :is(.raxo-date, .raxo-author) {
			color: var(--raxo-top-color-text-light);
		}
	}
}



/* ----- RESPONSIVE and COLUMNS ----- */
.raxo-rational {
	--max-cols: 1;
	--top-span: 1;

	/* Small (>= 448px) */
	@container raxo-rational (width >= 448px) {
		/* Defaults */
		& > .raxo-body {
			--max-cols: 2;
			--top-span: 2;
		}

		/* Columns */
		&.rational-sm-col1 > .raxo-body { --max-cols: 1; }
		&.rational-sm-col2 > .raxo-body { --max-cols: 2; }
		&.rational-sm-col3 > .raxo-body { --max-cols: 3; }

		/* Spans */
		&.top-sm-span1 > .raxo-body { --top-span: 1; }
		&.top-sm-span2 > .raxo-body { --top-span: 2; }
		&.top-sm-span3 > .raxo-body { --top-span: 3; }
	}

	/* Medium (>= 696px) */
	@container raxo-rational (width >= 696px) {
		/* Defaults */
		& > .raxo-body {
			--max-cols: 3;
			--top-span: 2;
		}

		/* Columns */
		&.rational-md-col1 > .raxo-body { --max-cols: 1; }
		&.rational-md-col2 > .raxo-body { --max-cols: 2; }
		&.rational-md-col3 > .raxo-body { --max-cols: 3; }
		&.rational-md-col4 > .raxo-body { --max-cols: 4; }

		/* Spans */
		&.top-md-span1 > .raxo-body { --top-span: 1; }
		&.top-md-span2 > .raxo-body { --top-span: 2; }
		&.top-md-span3 > .raxo-body { --top-span: 3; }
		&.top-md-span4 > .raxo-body { --top-span: 4; }
	}

	/* Large (>= 944px) */
	@container raxo-rational (width >= 944px) {
		/* Defaults */
		& > .raxo-body {
			--max-cols: 4;
			--top-span: 2;
		}

		/* Columns */
		&.rational-lg-col1 > .raxo-body { --max-cols: 1; }
		&.rational-lg-col2 > .raxo-body { --max-cols: 2; }
		&.rational-lg-col3 > .raxo-body { --max-cols: 3; }
		&.rational-lg-col4 > .raxo-body { --max-cols: 4; }
		&.rational-lg-col5 > .raxo-body { --max-cols: 5; }

		/* Spans */
		&.top-lg-span1 > .raxo-body { --top-span: 1; }
		&.top-lg-span2 > .raxo-body { --top-span: 2; }
		&.top-lg-span3 > .raxo-body { --top-span: 3; }
		&.top-lg-span4 > .raxo-body { --top-span: 4; }
		&.top-lg-span5 > .raxo-body { --top-span: 5; }
	}

	/* X-Large (>= 1192px) */
	@container raxo-rational (width >= 1192px) {
		/* Defaults */
		& > .raxo-body {
			--max-cols: 5;
			--top-span: 2;
		}

		/* Columns */
		&.rational-xl-col1 > .raxo-body { --max-cols: 1; }
		&.rational-xl-col2 > .raxo-body { --max-cols: 2; }
		&.rational-xl-col3 > .raxo-body { --max-cols: 3; }
		&.rational-xl-col4 > .raxo-body { --max-cols: 4; }
		&.rational-xl-col5 > .raxo-body { --max-cols: 5; }
		&.rational-xl-col6 > .raxo-body { --max-cols: 6; }

		/* Spans */
		&.top-xl-span1 > .raxo-body { --top-span: 1; }
		&.top-xl-span2 > .raxo-body { --top-span: 2; }
		&.top-xl-span3 > .raxo-body { --top-span: 3; }
		&.top-xl-span4 > .raxo-body { --top-span: 4; }
		&.top-xl-span5 > .raxo-body { --top-span: 5; }
		&.top-xl-span6 > .raxo-body { --top-span: 6; }
	}

	/* 2X-Large (>= 1440px) */
	/* Defaults */
	@container raxo-rational (width >= 1440px) {
		& > .raxo-body {
			--max-cols: 6;
			--top-span: 2;
		}

		/* Columns */
		&.rational-2xl-col1 > .raxo-body { --max-cols: 1; }
		&.rational-2xl-col2 > .raxo-body { --max-cols: 2; }
		&.rational-2xl-col3 > .raxo-body { --max-cols: 3; }
		&.rational-2xl-col4 > .raxo-body { --max-cols: 4; }
		&.rational-2xl-col5 > .raxo-body { --max-cols: 5; }
		&.rational-2xl-col6 > .raxo-body { --max-cols: 6; }

		/* Spans */
		&.top-2xl-span1 > .raxo-body { --top-span: 1; }
		&.top-2xl-span2 > .raxo-body { --top-span: 2; }
		&.top-2xl-span3 > .raxo-body { --top-span: 3; }
		&.top-2xl-span4 > .raxo-body { --top-span: 4; }
		&.top-2xl-span5 > .raxo-body { --top-span: 5; }
		&.top-2xl-span6 > .raxo-body { --top-span: 6; }
	}
}



/* ----- COLOR Schemes ----- */
.raxo-rational {
	/* --- 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-hsl-shadow: 232, 7%, 6%;

	/* Normal items */
	--raxo-color-text-deep:  var(--raxo-gray-900);
	--raxo-color-text-light: var(--raxo-gray-600);
	--raxo-color-text-base:  var(--raxo-gray-400);

	/* Top items (image overlay texts) */
	--raxo-top-color-text-deep:  var(--raxo-gray-100);
	--raxo-top-color-text-light: var(--raxo-gray-200);
	--raxo-top-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-260: hsl(232, 5%, 22%);
		--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-hsl-shadow: 232, 1%, 94%;

		/* Top items (image overlay texts) */
		--raxo-top-color-text-deep:  var(--raxo-gray-900);
		--raxo-top-color-text-light: var(--raxo-gray-600);
		--raxo-top-color-text-base:  var(--raxo-gray-500);

		/* Dimming image brightness */
		& .raxo-image img { filter: brightness(0.88); }
	}

	/* --- 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-item-nor:hover .raxo-title a,
	& :is(.raxo-block-intro, .raxo-block-button, .raxo-category, .raxo-text) a,
	& a:hover {
		color: var(--raxo-color-theme);
	}
}