/**
 * =============================================================
 * @subpackage	RAXO Rational Module Layout
 * -------------------------------------------------------------
 * @copyright	Copyright (C) 2009-2025 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 {
	box-sizing: border-box;
}
	.raxo-rational *,
	.raxo-rational ::before, .raxo-rational ::after {
		box-sizing: inherit;
	}
.raxo-rational article,
.raxo-rational h3, .raxo-rational h4,
.raxo-rational img,
.raxo-rational a {
	margin: 0; padding: 0;
	background: transparent none;
	border: 0 none;
}
.raxo-rational a {
	outline: 0;
	text-decoration: none;
	transition: all .25s;
}
	.raxo-rational a:hover {
		text-decoration: underline;
	}


/* ----- LAYOUT Settings ----- */
.raxo-rational {
	--col-gap: 24px;
	--row-gap: 32px;
	--col-min-width: 224px;
	--top-font-size: 17px;
	--nor-font-size: 14px;

	/* rounded corners (1 - enable, 0 - disable) */
	--rational-rounded: 1;
	--rational-border-radius-t: 16px;	/* use the range 4px - 64px */
	--rational-border-radius-b: 12px;	/* use the range 3px - 32px */

	/* image spacing (set 0px to disable) */
	--rational-image-spacing: 8px;		/* use the range 0px - 24px */
}



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

/* --- Block NAME --- */
.raxo-rational .raxo-block-name {
	grid-column: 1 / -1;
	font-size: 20px; font-weight: bold;
	line-height: 24px;
	color: var(--rational-color-600);
}
	.raxo-rational .raxo-header:has(.raxo-block-button) .raxo-block-name {
		grid-column: 1 / span 2;
	}
	.raxo-rational .raxo-block-name a {
		color: var(--rational-color-600);
	}

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

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



/* ----- Module CONTAINER ----- */
.raxo-rational .raxo-body {
	--col-gap-size: calc((var(--max-cols) - 1) * var(--col-gap));
	--col-min-size: calc(var(--col-min-width) + var(--col-gap));
	--col-max-size: calc((100% - var(--col-gap-size)) / var(--max-cols));
	--item-radius-t: calc(var(--rational-border-radius-t) * var(--rational-rounded));
	--item-radius-b: calc(var(--rational-border-radius-b) * var(--rational-rounded));

	position: relative;
	display: grid;
	align-content: start;
	align-items: start;
	grid-template-columns: repeat(auto-fill, minmax(max(var(--col-min-size), var(--col-max-size)), 1fr));
	margin: 0 calc(var(--col-gap) / -2);
}

/* --- Size PATTERNS --- */
.raxo-rational .raxo-body > div {
	visibility: hidden;
	margin: 0 calc(var(--col-gap) / 2) var(--row-gap);
	height: 8px;
	background-color: var(--rational-color-primary);
	border-radius: 4px;
	box-shadow: 0 0 0 1px rgba(var(--rational-rgb-999), .08), 0 4px 12px -2px rgba(var(--rational-rgb-999), .1);
}
.raxo-rational .raxo-body > div.raxo-pattern-top {
	grid-column-end: span min(var(--top-span), var(--max-cols));
}

/* --- Module ITEMS --- */
.raxo-rational article {
	--raxo-spacing-x: clamp(8px, 10%, 64px);
	--raxo-spacing-y: clamp(24px, 12%, 40px);
	margin: 0 calc(var(--col-gap) / 2) var(--row-gap);
	background-color: var(--rational-color-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 rgba(var(--rational-rgb-999), .08), 0 6px 14px 0 rgba(var(--rational-rgb-999), .05);
	transition: all cubic-bezier(.4,0,.2,1) .3s;
	overflow: hidden;
}
	.raxo-rational article:hover {
		box-shadow: 0 0 0 1px rgba(var(--rational-rgb-999), .08), 0 4px 10px -2px rgba(var(--rational-rgb-999), .04), 0 8px 20px -4px rgba(var(--rational-rgb-999), .1);
	}
.raxo-rational .raxo-image {
	--image-radius-t: calc(max(4px, var(--rational-border-radius-t) - var(--rational-image-spacing)) * var(--rational-rounded));
	--image-radius-b: calc(max(3px, var(--rational-border-radius-b) - var(--rational-image-spacing)) * var(--rational-rounded));

	margin: var(--rational-image-spacing);
	border-radius: var(--image-radius-t) var(--image-radius-t) var(--image-radius-b) var(--image-radius-b);
	transition: all .3s ease-out;
	overflow: hidden;
}
	.raxo-rational .raxo-item-nor .raxo-image {
		border-bottom-left-radius: calc(3px * var(--rational-rounded));
		border-bottom-right-radius: calc(3px * var(--rational-rounded));
	}
	.raxo-rational .raxo-image img {
		width: 100%; height: auto;
	}
	.raxo-rational article:hover .raxo-image {
		filter: saturate(1.32) brightness(.8);
	}
.raxo-rational .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(--rational-color-400);
}
	.raxo-rational .raxo-item-nor .raxo-image + .raxo-content {
		padding-top: calc(var(--raxo-spacing-y) - var(--rational-image-spacing));
	}



/* ----- TOP Items ----- */
.raxo-rational .raxo-item-top .raxo-wrap {
	display: grid;
}
	.raxo-rational .raxo-item-top .raxo-wrap > div {
		grid-area: 1 / -1;
	}

/* --- IMAGE Styles --- */
.raxo-rational .raxo-item-top .raxo-image {
	position: relative;
	min-height: 256px;
	background: var(--rational-color-300);
	z-index: 1;
}
	.raxo-rational .raxo-item-top .raxo-image img {
		object-fit: cover;
		width: 100%; height: 100%;
	}
	.raxo-rational .raxo-item-top .raxo-image::after {
		content: "";
		position: absolute;
		top: 28%; right: 0; bottom: 0; left: 0;
		background: linear-gradient(to bottom, hsla(210, 2%, 18%, 0) 0%, hsla(210, 2%, 18%, 0.011) 6.2%, hsla(210, 2%, 18%, 0.043) 12.1%, hsla(210, 2%, 18%, 0.092) 17.7%, hsla(210, 2%, 18%, 0.154) 23.2%, hsla(210, 2%, 18%, 0.228) 28.6%, hsla(210, 2%, 18%, 0.31) 34%, hsla(210, 2%, 18%, 0.396) 39.6%, hsla(210, 2%, 18%, 0.484) 45.4%, hsla(210, 2%, 18%, 0.57) 51.6%, hsla(210, 2%, 18%, 0.652) 58.1%, hsla(210, 2%, 18%, 0.726) 65.1%, hsla(210, 2%, 18%, 0.788) 72.7%, hsla(210, 2%, 18%, 0.837) 81%, hsla(210, 2%, 18%, 0.869) 90.1%, hsla(210, 2%, 18%, 0.88) 100%);
		background-blend-mode: multiply;
	}

/* --- CONTENT Styles --- */
.raxo-rational .raxo-item-top .raxo-content {
	padding-top: 128px;
	font-size: var(--top-font-size);
	color: #dfdfe0;
	text-shadow: 0 1px 3px rgba(52,52,53,.5);
	z-index: 2;
}
.raxo-rational .raxo-item-top .raxo-title a,
.raxo-rational .raxo-item-top .raxo-title a:hover {
	color: #fbfbfb !important;
	text-decoration-color: transparent;
}
.raxo-rational .raxo-item-top .raxo-title a:hover  {
	text-decoration: underline;
	text-decoration-color: var(--rational-color-primary);
	text-decoration-thickness: 2px;
}
.raxo-rational .raxo-item-top .raxo-title a::after {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	margin: var(--rational-image-spacing);
	content: "";
	z-index: 3;
}
.raxo-rational .raxo-item-top .raxo-category {
	text-shadow: none;
	background: rgba(225,225,228,.8);
}
	.raxo-rational .raxo-item-top .raxo-category a {
		position: relative;
		z-index: 4;
	}
.raxo-rational .raxo-item-top .raxo-info,
.raxo-rational .raxo-item-top .raxo-bottom {
	margin: 0;
	font-size: .83em;
}
.raxo-rational .raxo-item-top .raxo-date,
.raxo-rational .raxo-item-top .raxo-author {
	color: inherit;
}
.raxo-rational .raxo-item-top .raxo-text,
.raxo-rational .raxo-item-top .raxo-meta {
	color: #c4c4c6;
}



/* ----- Item CONTENT ----- */
.raxo-rational .raxo-title {
	font: 600 1.4em 'Roboto Slab', serif;
	line-height: 1.15;
	text-transform: none;
}
	.raxo-rational .raxo-title a {
		color: var(--rational-color-900);
	}
.raxo-rational .raxo-text {
	line-height: 1.3;
	color: var(--rational-color-400);
}


/* ----- Item FIELDS ----- */
.raxo-rational .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-rational .raxo-category {
	display: inline-block;
	padding: 3px 10px 2px;
	letter-spacing: 1.25px;
	color: var(--rational-color-primary);
	background-color: rgba(var(--rational-rgb-999), .08);
	border: 1px solid var(--rational-color-primary);
	border-radius: calc(max(3px, var(--rational-border-radius-b)) * var(--rational-rounded));
}
.raxo-rational .raxo-date {
	padding: 4px 0;
}


/* ----- Meta FIELDS ----- */
.raxo-rational .raxo-bottom {
	margin-top: 8px;
	display: flex;
	flex-wrap: wrap;
	gap: 3px 14px;
	justify-content: space-between;
	font-size: .93em; line-height: 1.54;
}
	.raxo-rational .raxo-bottom svg {
		display: inline-block;
		vertical-align: text-bottom;
		fill: currentColor;
	}
.raxo-rational .raxo-author {
	font-weight: 600;
	text-transform: uppercase;
	color: var(--rational-color-600);
}
.raxo-rational .raxo-meta {
	display: flex;
}
	.raxo-rational .raxo-meta span {
		display: inline-block;
	}
	.raxo-rational .raxo-meta > span:not(:last-of-type) {
		margin-right: 14px;
	}



/* ----- RESPONSIVE Behavior ----- */
.raxo-rational {--max-cols: 1; --top-span: 1;}

/* --- X-SMALL devices (portrait phones, less than 576px) --- */
/*@media (max-width: 575.98px) {
	.raxo-rational.rational-xs-col1 {--max-cols: 1;}
	.raxo-rational.rational-xs-col2 {--max-cols: 2;}

	.raxo-rational.top-xs-span1 {--top-span: 1;}
	.raxo-rational.top-xs-span2 {--top-span: 2;}
}*/

/* --- SMALL devices (landscape phones, 576px and up) --- */
@media (min-width: 480px) {
	.raxo-rational {--max-cols: 2; --top-span: 2;}

	.raxo-rational.rational-sm-col1 {--max-cols: 1;}
	.raxo-rational.rational-sm-col2 {--max-cols: 2;}
	.raxo-rational.rational-sm-col3 {--max-cols: 3;}

	.raxo-rational.top-sm-span1 {--top-span: 1;}
	.raxo-rational.top-sm-span2 {--top-span: 2;}
	.raxo-rational.top-sm-span3 {--top-span: 3;}
}

/* --- MEDIUM devices (tablets, 768px and up) --- */
@media (min-width: 768px) {
	.raxo-rational {--max-cols: 3; --top-span: 2;}

	.raxo-rational.rational-md-col1 {--max-cols: 1;}
	.raxo-rational.rational-md-col2 {--max-cols: 2;}
	.raxo-rational.rational-md-col3 {--max-cols: 3;}
	.raxo-rational.rational-md-col4 {--max-cols: 4;}

	.raxo-rational.top-md-span1 {--top-span: 1;}
	.raxo-rational.top-md-span2 {--top-span: 2;}
	.raxo-rational.top-md-span3 {--top-span: 3;}
	.raxo-rational.top-md-span4 {--top-span: 4;}
}

/* --- LARGE devices (desktops, 992px and up) --- */
@media (min-width: 992px) {
	.raxo-rational {--max-cols: 4; --top-span: 2;}

	.raxo-rational.rational-lg-col1 {--max-cols: 1;}
	.raxo-rational.rational-lg-col2 {--max-cols: 2;}
	.raxo-rational.rational-lg-col3 {--max-cols: 3;}
	.raxo-rational.rational-lg-col4 {--max-cols: 4;}
	.raxo-rational.rational-lg-col5 {--max-cols: 5;}

	.raxo-rational.top-lg-span1 {--top-span: 1;}
	.raxo-rational.top-lg-span2 {--top-span: 2;}
	.raxo-rational.top-lg-span3 {--top-span: 3;}
	.raxo-rational.top-lg-span4 {--top-span: 4;}
	.raxo-rational.top-lg-span5 {--top-span: 5;}
}

/* --- X-LARGE devices (large desktops, 1200px and up) --- */
@media (min-width: 1200px) {
	.raxo-rational {--max-cols: 5; --top-span: 2;}

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

	.raxo-rational.top-xl-span1 {--top-span: 1;}
	.raxo-rational.top-xl-span2 {--top-span: 2;}
	.raxo-rational.top-xl-span3 {--top-span: 3;}
	.raxo-rational.top-xl-span4 {--top-span: 4;}
	.raxo-rational.top-xl-span5 {--top-span: 5;}
	.raxo-rational.top-xl-span6 {--top-span: 6;}
}

/* --- XX-LARGE devices (larger desktops, 1400px and up) --- */
@media (min-width: 1400px) {
	.raxo-rational {--max-cols: 6; --top-span: 2;}

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

	.raxo-rational.top-xxl-span1 {--top-span: 1;}
	.raxo-rational.top-xxl-span2 {--top-span: 2;}
	.raxo-rational.top-xxl-span3 {--top-span: 3;}
	.raxo-rational.top-xxl-span4 {--top-span: 4;}
	.raxo-rational.top-xxl-span5 {--top-span: 5;}
	.raxo-rational.top-xxl-span6 {--top-span: 6;}
}



/* ----- COLOR Schemes ----- */
.raxo-rational .raxo-item-nor:hover .raxo-title a,
.raxo-rational .raxo-block-intro a,
.raxo-rational .raxo-block-button a,
.raxo-rational .raxo-category a,
.raxo-rational .raxo-text a,
.raxo-rational a:hover {
	color: var(--rational-color-primary) !important;
}


/* ----- LIGHT Theme ----- */
.raxo-rational {
	--rational-color-primary: #cc1f1f;
	--rational-color-100: #fbfbfb;
	--rational-color-200: #dfdfe0;
	--rational-color-300: #adadb1;
	--rational-color-400: #6d6e73;
	--rational-color-600: #353538;
	--rational-color-900: #0e0e0f;
	--rational-rgb-999: 0,0,0;
}
.raxo-rational.rational-red {
	--rational-color-primary: #cc1f1f;
}
.raxo-rational.rational-pink {
	--rational-color-primary: #d24087;
}
.raxo-rational.rational-orange {
	--rational-color-primary: #d94d16;
}
.raxo-rational.rational-yellow {
	--rational-color-primary: #ebc300;
}
.raxo-rational.rational-green {
	--rational-color-primary: #4d9926;
}
.raxo-rational.rational-turquoise {
	--rational-color-primary: #288699;
}
.raxo-rational.rational-blue {
	--rational-color-primary: #0a55bf;
}
.raxo-rational.rational-lightblue {
	--rational-color-primary: #3598dc;
}
.raxo-rational.rational-violet {
	--rational-color-primary: #6c3aad;
}
.raxo-rational.rational-gray {
	--rational-color-primary: #5d5d5d;
}


/* ----- DARK Theme ----- */
.raxo-rational.rational-dark {
	--rational-color-primary: #a93030;
	--rational-color-100: #0b0c0c;
	--rational-color-200: #28292a;
	--rational-color-300: #46464a;
	--rational-color-400: #7d7e83;
	--rational-color-600: #b5b6b9;
	--rational-color-900: #dcdcdd;
	--rational-rgb-999: 255,255,255;
}
.rational-dark.rational-red {
	--rational-color-primary: #a93030;
}
.rational-dark.rational-pink {
	--rational-color-primary: #b24b7c;
}
.rational-dark.rational-orange {
	--rational-color-primary: #b25029;
}
.rational-dark.rational-yellow {
	--rational-color-primary: #bfa31a;
}
.rational-dark.rational-green {
	--rational-color-primary: #4b802f;
}
.rational-dark.rational-turquoise {
	--rational-color-primary: #317280;
}
.rational-dark.rational-blue {
	--rational-color-primary: #1d519c;
}
.rational-dark.rational-lightblue {
	--rational-color-primary: #4388b8;
}
.rational-dark.rational-violet {
	--rational-color-primary: #654192;
}
.rational-dark.rational-gray {
	--rational-color-primary: #828282;
}