/**
 * =============================================================
 * @subpackage	RAXO Columns 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-columns {
	container: raxo-columns / 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;
		outline: 0;
		text-decoration: none;
		transition: all .25s ease-in-out;
	}
	& a:hover { text-decoration: underline; }
}



/* ----- Module BLOCK ----- */
.raxo-columns {
	/* --- Layout SETTINGS --- */
	--top-col-min-width: 288px;	/* min column width for Top items */
	--nor-col-min-width: 192px;	/* min column width for Normal items */
	--item-gap-x: 24px;			/* horizontal gap between items */
	--item-gap-y: 28px;			/* vertical gap between items */

	--top-font-size: 16px;
	--nor-font-size: 14px;
	--top-image-border: 5px;
	--nor-image-border: 3px;

	border-bottom: 3px solid transparent;

	/* --- Block HEADER --- */
	& .raxo-header {
		margin-bottom: 16px;
	}

	/* --- Block NAME --- */
	& .raxo-block-name {
		padding: 0 8px 4px;
		color: var(--raxo-theme-color);
		font-size: 16px;
		font-weight: bold;
		line-height: 22px;
		text-transform: uppercase;
		border-bottom: 3px solid transparent;
	}

	/* --- Block INTRO --- */
	& .raxo-block-intro {
		padding: 8px;
		font-size: 15px;
		line-height: 21px;
	}

	/* --- Block FOOTER --- */
	& .raxo-footer { 
		display: flex;
		justify-content: center;
		margin-top: 24px;
	}


	/* ----- MODULE Items ----- */
	& .raxo-top {
		--max-cols: 2;
		--col-min-width: var(--top-col-min-width);
		--image-border: var(--top-image-border);
		--icon-size: calc(var(--top-font-size) - 1px);
		font-size: var(--top-font-size);
	}
	& .raxo-normal {
		--max-cols: 4;
		--col-min-width: var(--nor-col-min-width);
		--image-border: var(--nor-image-border);
		--icon-size: var(--nor-font-size);
		font-size: var(--nor-font-size);
	}
	& :is(.raxo-top, .raxo-normal) {
		--col-gap-size: calc((var(--max-cols) - 1) * 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-width), var(--col-max-size)), 1fr));
		gap: var(--item-gap-y) var(--item-gap-x);
	}
	& .raxo-top + .raxo-normal {
		margin-top: var(--item-gap-y);
	}
	& .raxo-wrap {
		position: relative;
		height: 100%;
		display: flex;
		flex-flow: column nowrap;
		overflow: hidden;
		transition: all .2s;

		.raxo-top & {
			--spacer: clamp(8px, 5%, 32px);
			border-bottom: 2px solid var(--raxo-gray-140);
		}
		.raxo-normal & {
			gap: 8px;
		}
	}


	/* ----- Item IMAGE ----- */
	& .raxo-image {
		border: var(--image-border) solid transparent;
		border-radius: var(--image-border);
		transition: border .4s ease-out;
		z-index: 10;

		&:hover { border-color: var(--raxo-theme-color); }
		& img {
			max-width: 100%;
			height: auto;
		}
	}
	& .raxo-top .raxo-image {
		box-shadow: 0 0 3px var(--raxo-gray-200);

		& img { width: 100%; }
	}


	/* ----- Item CONTENT ----- */
	& .raxo-top .raxo-content {
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		gap: 12px;
		padding: 1.5em var(--spacer) 1em;
		overflow: hidden;
	}
	& .raxo-normal .raxo-content {
		display: flex;
		flex-wrap: wrap;
		/* align-items: center; */
		gap: 8px 12px;

		& .raxo-image {
			flex: 0 1 auto;
			align-self: flex-start;
		}
		& .raxo-text {
			flex: 1 1 144px;
		}
	}
	& .raxo-title {
		font-weight: bold;
		text-transform: none;

		.raxo-top & {
			font-size: clamp(20px, 2.8cqi, 24px);
			line-height: 1.15em;
		}
		.raxo-normal & {
			font-size: clamp(16px, 1.3cqi, 20px);
			line-height: 1.25em;
		}
	}
	& .raxo-text {
		line-height: 1.3;
		color: var(--raxo-text-base);
	}
	& .raxo-text,
	& .raxo-block-intro {
		hyphens: auto;
		hyphenate-limit-chars: 7 3 2;
	}


	/* --- READMORE Links --- */
	& :is(.raxo-readmore, .raxo-block-button) {
		margin-top: auto;
		color: var(--raxo-theme-color);

		& a {
			display: inline-flex;
			justify-content: center;
			padding: 8px 22px;
			min-width: 128px;
			min-height: 40px;
			line-height: 1.25;
			text-align: center;
			text-decoration: none;
			background-color: var(--raxo-button-bg, transparent);
			border: 2px solid var(--raxo-border-color, transparent);
			border-radius: 3px;
		}
		& a:hover {
			color: var(--raxo-gray-100) !important;
			background-color: var(--raxo-theme-color);
			border-color: var(--raxo-theme-color);
		}
	}
	& .raxo-normal .raxo-readmore {
		margin-top: 12px;

		& a {
			padding: 5px 22px;
			min-height: 28px;
		}
	}


	/* ----- Item FIELDS ----- */
	& .raxo-meta {
		display: flex;
		padding: 4px 8px;
		gap: 6px 16px;
		flex-wrap: wrap;
		color: var(--raxo-text-muted);
		font-size: .93em;
		line-height: 1.2;
		background-color: var(--raxo-gray-140);
		
		.raxo-top & {
			padding: 8px var(--spacer);
			border-radius: 4px;
		}
		.raxo-normal & {
			margin-bottom: 8px;
			border-radius: 2px;
		}
	}
	& .raxo-top .raxo-image + .raxo-meta {
		margin-top: -4px;
		padding-top: 12px;
		border-radius: 0 0 4px 4px;
	}
	& .raxo-top .raxo-date {
		margin-top: -4px;
		font-size: 14px;
		line-height: 20px;
	}
	& .raxo-comments {
		margin-left: 8px;
		vertical-align: top;
		color: var(--raxo-text-muted);
		font-size: .85em;

		& a { font-weight: normal; }
	}

	/* --- Fields ICONS --- */
	& :where(.raxo-meta span, .raxo-comments) {
		display: inline-flex;
		align-items: center;
		gap: 5px;

		& svg {
			width: var(--icon-size);
			height: var(--icon-size);
			fill: currentColor;
		}
	}
	& .raxo-rating svg {
		width: calc(var(--icon-size) * 5);
		fill: var(--raxo-gray-300);
	}

}


/* ----- Predefined Number of Columns ----- */
/*
 * Limits based on min column widths:
 *   top-col-min-width: 288px  |  nor-col-min-width: 192px
 *
 *   sm  (448px)  → top: max 1 col  (448/288≈1.5) | nor: max 2 col  (448/192≈2.3)
 *   md  (696px)  → top: max 2 col  (696/288≈2.4) | nor: max 3 col  (696/192≈3.6)
 *   lg  (944px)  → top: max 3 col  (944/288≈3.3) | nor: max 4 col  (944/192≈4.9)
 *   xl  (1192px) → top: max 4 col  (1192/288≈4.1)| nor: max 6 col  (1192/192≈6.2)
 *   xxl (1440px) → top: max 5 col  (1440/288=5)  | nor: max 6 col
 */

 /* Extra small (< 400px)  top: 1 col | nor: 1 col */
@container raxo-columns (width < 400px) {
	.raxo-columns .raxo-top,
	.raxo-columns .raxo-normal { grid-template-columns: 1fr !important; }
}

/* Small (>= 448px)  top: 1 col | nor: 1–2 col */
@container raxo-columns (width >= 448px) {
	.raxo-columns .raxo-top    { --max-cols: 1; }
	.raxo-columns .raxo-normal { --max-cols: 2; }

	.raxo-columns.top-sm-col1 .raxo-top    { --max-cols: 1; }

	.raxo-columns.nor-sm-col1 .raxo-normal { --max-cols: 1; }
	.raxo-columns.nor-sm-col2 .raxo-normal { --max-cols: 2; }
}

/* Medium (>= 696px)  top: 1–2 col | nor: 1–3 col */
@container raxo-columns (width >= 696px) {
	.raxo-columns .raxo-top    { --max-cols: 2; }
	.raxo-columns .raxo-normal { --max-cols: 3; }

	.raxo-columns.top-md-col1 .raxo-top    { --max-cols: 1; }
	.raxo-columns.top-md-col2 .raxo-top    { --max-cols: 2; }

	.raxo-columns.nor-md-col1 .raxo-normal { --max-cols: 1; }
	.raxo-columns.nor-md-col2 .raxo-normal { --max-cols: 2; }
	.raxo-columns.nor-md-col3 .raxo-normal { --max-cols: 3; }
}

/* Large (>= 944px)  top: 1–3 col | nor: 1–4 col */
@container raxo-columns (width >= 944px) {
	.raxo-columns .raxo-top    { --max-cols: 2; }
	.raxo-columns .raxo-normal { --max-cols: 4; }

	.raxo-columns.top-lg-col1 .raxo-top    { --max-cols: 1; }
	.raxo-columns.top-lg-col2 .raxo-top    { --max-cols: 2; }
	.raxo-columns.top-lg-col3 .raxo-top    { --max-cols: 3; }

	.raxo-columns.nor-lg-col1 .raxo-normal { --max-cols: 1; }
	.raxo-columns.nor-lg-col2 .raxo-normal { --max-cols: 2; }
	.raxo-columns.nor-lg-col3 .raxo-normal { --max-cols: 3; }
	.raxo-columns.nor-lg-col4 .raxo-normal { --max-cols: 4; }
}

/* X-Large (>= 1192px)  top: 1–4 col | nor: 1–6 col */
@container raxo-columns (width >= 1192px) {
	.raxo-columns .raxo-top    { --max-cols: 3; }
	.raxo-columns .raxo-normal { --max-cols: 5; }

	.raxo-columns.top-xl-col1 .raxo-top    { --max-cols: 1; }
	.raxo-columns.top-xl-col2 .raxo-top    { --max-cols: 2; }
	.raxo-columns.top-xl-col3 .raxo-top    { --max-cols: 3; }
	.raxo-columns.top-xl-col4 .raxo-top    { --max-cols: 4; }

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

/* XX-Large (>= 1440px)  top: 1–5 col | nor: 1–6 col */
@container raxo-columns (width >= 1440px) {
	.raxo-columns .raxo-top    { --max-cols: 3; }
	.raxo-columns .raxo-normal { --max-cols: 6; }

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

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


/* ----- COLOR Schemes ----- */
.raxo-columns {
	/* --- 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-140: hsl(232, 1%, 95%);
	--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-600);
	--raxo-text-base:  var(--raxo-gray-500);
	--raxo-text-muted: var(--raxo-gray-400);
	--raxo-text-light: var(--raxo-gray-300);

	--raxo-border-color: color-mix(in oklch, var(--raxo-theme-color) 32%, white);

	/* --- 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-140: hsl(232, 7%, 10%);
		--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-border-color: color-mix(in oklch, var(--raxo-theme-color) 64%, black);
	}

	/* --- COLOR Palette --- */
	/* Backwards compatibility with previous module classes: columns-colorname */
	&.color-red							{ --raxo-color-base: oklch(0.53 0.19 28.82); }
	&.color-pink,   &.columns-pink		{ --raxo-color-base: oklch(0.58 0.19 354.7); }
	&.color-orange, &.columns-orange	{ --raxo-color-base: oklch(0.61 0.18 45.23); }
	&.color-yellow, &.columns-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,  &.columns-green		{ --raxo-color-base: oklch(0.54 0.17 140.3); }
	&.color-teal,   &.columns-turquoise	{ --raxo-color-base: oklch(0.58 0.11 186.8); }
	&.color-blue,   &.columns-blue		{ --raxo-color-base: oklch(0.48 0.18 259.4); }
	&.color-sky,    &.columns-lightblue	{ --raxo-color-base: oklch(0.62 0.15 243.2); }
	&.color-violet, &.columns-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,   &.columns-gray		{ --raxo-color-base: oklch(0.38 0.0186 254); }

	/* --- COLOR Tuning --- */
	& a { color: var(--raxo-theme-color) !important; }
	& a:hover { color: var(--raxo-text-deep) !important; }

	& .raxo-block-name,
	& .raxo-image { border-color: var(--raxo-border-color); }


	/* --- CLEAN Style (no decorative borders) --- */
	&.style-clean {
		--raxo-border-color: transparent;
		--top-image-border: 0px;
		--nor-image-border: 0px;
		--raxo-button-bg: var(--raxo-gray-140);
		& .raxo-top .raxo-wrap, 
		& .raxo-readmore a:hover { border-color: transparent; }
		& .raxo-top .raxo-image { box-shadow: none; }
	}
}