/*
 * GC Card Grid Type 3 — subtle numbered feature matrix (light Gencore theme).
 * Root: .gc-cg3. Driven by the --cg3-* custom-property contract.
 * Full-bleed by default; per-cell accent set inline via --accent.
 * Three layouts: connected hairline matrix (default), separated cards
 * (.gc-cg3--cards), and bento asymmetric (.gc-cg3--bento, one 2x2 feature
 * cell via .gc-cg3-cell--feature). Marker per widget: number / icon / none.
 * Any cell can take an optional photo background (.gc-cg3-cell--media).
 */

.gc-cg3 {
	--cg3-cols: 3;
	--cg3-line: 1px;
	--cg3-gap: 20px;
	--cg3-max: 1400px;
	--cg3-pad: 48px;
	--cg3-cell-pad: 36px;
	--cg3-radius: 20px;

	--cg3-heading: #14212B;
	--cg3-eyebrow: #9FB4C2;
	--cg3-sub: #5A6B75;
	--cg3-num: #5BA7DB;
	--cg3-num-2: #6EC1E4;
	--cg3-title: #14212B;
	--cg3-desc: #5A6B75;

	--cg3-border: #DCEEFA;
	--cg3-cell-bg: #FFFFFF;
	--cg3-cell-hover: #EAF3FA;
	--cg3-accent: #5BA7DB;

	--cg3-glow: var(--cg3-accent);
	--cg3-glow-op: 0.28;
	--cg3-trace-w: 2px;
	--cg3-trace-speed: 4s;

	--cg3-bento-row: 160px;
	--cg3-bento-wash-op: 0.22;

	position: relative;
	font-family: var(--gc-font-body, "Inter", system-ui, sans-serif);
	color: var(--cg3-heading);
	line-height: 1.6;
	padding: 88px 0;
	-webkit-font-smoothing: antialiased;
}
.gc-cg3 *, .gc-cg3 *::before, .gc-cg3 *::after { box-sizing: border-box; }

.gc-cg3-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--cg3-max, none);
	margin-inline: auto;
	padding-inline: var(--cg3-pad, 48px);
}

/* ---- Emissive glow (optional) ---- */
.gc-cg3-glow {
	position: absolute;
	z-index: 0;
	left: 50%;
	top: 54%;
	transform: translate(-50%, -50%);
	width: min(88%, 1000px);
	height: 66%;
	pointer-events: none;
	background: radial-gradient(ellipse at center, var(--cg3-glow) 0%, transparent 70%);
	opacity: var(--cg3-glow-op);
	filter: blur(70px);
}

/* ---- Header ---- */
.gc-cg3-header { max-width: 680px; margin: 0 0 48px; }
.gc-cg3--center .gc-cg3-header { margin-inline: auto; text-align: center; }
.gc-cg3-eyebrow {
	display: block;
	margin: 0 0 14px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cg3-eyebrow);
}
.gc-cg3-header h2 {
	font-family: var(--gc-font-heading, "Manrope", system-ui, sans-serif);
	font-weight: 800;
	line-height: 1.15;
	margin: 0 0 0.4em;
	font-size: clamp(1.7rem, 1.35rem + 1.4vw, 2.5rem);
	color: var(--cg3-heading);
}
.gc-cg3-header p { color: var(--cg3-sub); font-size: 17px; margin: 0; }

/* ---- Connected hairline matrix (default) ---- */
.gc-cg3-grid {
	display: grid;
	grid-template-columns: repeat(var(--cg3-cols), minmax(0, 1fr));
	gap: var(--cg3-line);
	background: var(--cg3-border);
	border: var(--cg3-line) solid var(--cg3-border);
	border-radius: var(--cg3-radius);
	overflow: hidden;
	backdrop-filter: blur(var(--cg3-panel-blur));
	-webkit-backdrop-filter: blur(var(--cg3-panel-blur));
}
.gc-cg3-cell {
	position: relative;
	z-index: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: var(--cg3-cell-pad);
	background: var(--cg3-cell-bg);
	color: inherit;
	text-decoration: none;
	overflow: hidden;
	transition: background 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Top accent sweep — hidden until hover, subtle brand cue */
.gc-cg3-cell::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(135deg, var(--accent, var(--cg3-accent)), var(--cg3-num-2));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Marker (number / icon) ---- */
.gc-cg3-marker {
	display: inline-flex;
	align-items: center;
	line-height: 1;
	font-family: var(--gc-font-heading, "Manrope", system-ui, sans-serif);
	font-weight: 800;
	font-size: 15px;
	letter-spacing: 0.04em;
	background: linear-gradient(135deg, var(--accent, var(--cg3-num)), var(--cg3-num-2));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--cg3-num);
}
/* Icon marker mirrors the GC Card Grid 1/2 chip treatment */
.gc-cg3-marker--icon {
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	font-size: 20px;
	background: color-mix(in srgb, var(--accent, var(--cg3-accent)) 16%, transparent);
	border: 1px solid color-mix(in srgb, var(--accent, var(--cg3-accent)) 32%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	-webkit-text-fill-color: initial;
	color: var(--accent, var(--cg3-accent));
	transition: background 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.4, 0.5, 1);
}
.gc-cg3-marker--icon svg { width: 23px; height: 23px; fill: currentColor; }

.gc-cg3-bgicon {
	position: absolute;
	z-index: 0;
	right: max(14px, calc(var(--cg3-cell-pad) * 0.6));
	bottom: max(12px, calc(var(--cg3-cell-pad) * 0.5));
	line-height: 0;
	pointer-events: none;
	color: var(--accent, var(--cg3-accent));
	opacity: 0.28;
	transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.gc-cg3-bgicon svg { width: 60px; height: 60px; fill: currentColor; }
/* keep copy above the background icon */
.gc-cg3-cell > h3,
.gc-cg3-cell > p,
.gc-cg3-cell > .gc-cg3-link { position: relative; z-index: 1; }
@media (hover: hover) {
	.gc-cg3-cell:hover .gc-cg3-bgicon,
	.gc-cg3-cell:focus-visible .gc-cg3-bgicon {
		opacity: 0.4;
		transform: translateY(-3px);
	}
}

.gc-cg3-cell h3 {
	font-family: var(--gc-font-heading, "Manrope", system-ui, sans-serif);
	font-weight: 700;
	line-height: 1.25;
	margin: 0;
	font-size: 1.25rem;
	color: var(--cg3-title);
}
.gc-cg3-cell p {
	margin: 0;
	color: var(--cg3-desc);
	font-size: 15px;
	line-height: 1.6;
}
.gc-cg3-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 4px;
	font-size: 14px;
	font-weight: 700;
	color: var(--accent, var(--cg3-accent));
}
.gc-cg3-link svg { width: 15px; height: 15px; transition: transform 0.3s ease; }

/* ---- Hover ---- */
@media (hover: hover) {
	.gc-cg3-cell:hover,
	.gc-cg3-cell:focus-visible { background: var(--cg3-cell-hover); }
	.gc-cg3-cell:hover::before,
	.gc-cg3-cell:focus-visible::before { transform: scaleX(1); }
	.gc-cg3-cell:hover .gc-cg3-marker--icon,
	.gc-cg3-cell:focus-visible .gc-cg3-marker--icon {
		transform: scale(1.06);
		background: color-mix(in srgb, var(--accent, var(--cg3-accent)) 26%, transparent);
	}
	a.gc-cg3-cell:hover .gc-cg3-link svg { transform: translateX(4px); }
}
.gc-cg3-cell:focus-visible { outline: 3px solid var(--cg3-accent); outline-offset: -3px; }


/* ---- Separated cards layout ---- */
.gc-cg3--cards .gc-cg3-grid {
	gap: var(--cg3-gap);
	background: transparent;
	border: 0;
	border-radius: 0;
	overflow: visible;
}
.gc-cg3--cards .gc-cg3-cell {
	border: 1px solid var(--cg3-border);
	border-radius: var(--cg3-radius);
	box-shadow: var(--gc-shadow-card, 0 10px 30px -18px rgba(20, 33, 43, 0.25));
}
@media (hover: hover) {
	.gc-cg3--cards a.gc-cg3-cell:hover,
	.gc-cg3--cards a.gc-cg3-cell:focus-visible {
		transform: translateY(-6px);
		box-shadow: 0 22px 44px -22px rgba(20, 33, 43, 0.3);
	}
}

/* ---- Bento asymmetric layout ---- */
.gc-cg3--bento .gc-cg3-grid {
	gap: var(--cg3-gap);
	background: transparent;
	border: 0;
	border-radius: 0;
	overflow: visible;
	grid-auto-rows: minmax(var(--cg3-bento-row), auto);
}
.gc-cg3--bento .gc-cg3-cell {
	border: 1px solid var(--cg3-border);
	border-radius: var(--cg3-radius);
	box-shadow: var(--gc-shadow-card, 0 10px 30px -18px rgba(20, 33, 43, 0.25));
	justify-content: flex-end;
}
.gc-cg3--bento .gc-cg3-cell--feature {
	grid-column: span 2;
	grid-row: span 2;
	justify-content: space-between;
}
.gc-cg3--bento .gc-cg3-cell--feature h3 { font-size: 1.55rem; }
.gc-cg3--bento .gc-cg3-cell--feature:not(.gc-cg3-cell--media)::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(160deg, color-mix(in srgb, var(--accent, var(--cg3-accent)) 26%, transparent), transparent 70%);
	opacity: var(--cg3-bento-wash-op);
	transition: opacity 0.4s ease;
	pointer-events: none;
}
@media (hover: hover) {
	.gc-cg3--bento a.gc-cg3-cell:hover,
	.gc-cg3--bento a.gc-cg3-cell:focus-visible {
		transform: translateY(-6px);
		box-shadow: 0 22px 44px -22px rgba(20, 33, 43, 0.3);
	}
	.gc-cg3--bento .gc-cg3-cell--feature:hover::after,
	.gc-cg3--bento .gc-cg3-cell--feature:focus-visible::after {
		opacity: calc(var(--cg3-bento-wash-op) + 0.16);
	}
}

/* ---- Optional per-card image (any grid style) ---- */
.gc-cg3-cell--media { color: #FFFFFF; }
.gc-cg3-media {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
}
.gc-cg3-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.gc-cg3-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(14, 21, 36, 0) 0%, rgba(14, 21, 36, 0.75) 90%);
}
.gc-cg3-cell--media h3,
.gc-cg3-cell--media p,
.gc-cg3-cell--media .gc-cg3-link { color: #FFFFFF; }
.gc-cg3-cell--media .gc-cg3-marker:not(.gc-cg3-marker--icon) {
	background: none;
	-webkit-text-fill-color: #FFFFFF;
	color: #FFFFFF;
}
@media (hover: hover) {
	.gc-cg3-cell:hover .gc-cg3-media img,
	.gc-cg3-cell:focus-visible .gc-cg3-media img { transform: scale(1.06); }
}

/* ---- Responsive ---- */
@media (max-width: 960px) {
	.gc-cg3 { --cg3-cols: 2; }
}
@media (max-width: 640px) {
	.gc-cg3 { --cg3-cols: 1; --cg3-cell-pad: 20px; --cg3-gap: 14px; padding: 56px 0; }
	.gc-cg3-inner { padding-inline: 20px; }
	.gc-cg3-header { margin-bottom: 32px; }
	.gc-cg3-eyebrow { font-size: 11px; letter-spacing: 0.14em; margin-bottom: 10px; }
	.gc-cg3-header h2 { font-size: 1.6rem; }
	.gc-cg3-header p { font-size: 15px; line-height: 1.5; }
	.gc-cg3-glow { display: none; }
	.gc-cg3-bgicon { display: none; }
	.gc-cg3.gc-cg3--trace .gc-cg3-grid::after { display: none; }
	.gc-cg3-cell { gap: 8px; }
	.gc-cg3-cell h3 { font-size: 1.1rem; }
	.gc-cg3-cell p { font-size: 14.5px; line-height: 1.5; }
	.gc-cg3-marker--icon { width: 38px; height: 38px; font-size: 17px; }
	.gc-cg3-marker--icon svg { width: 19px; height: 19px; }
	.gc-cg3--bento .gc-cg3-grid { grid-auto-rows: auto; }
	.gc-cg3--bento .gc-cg3-cell--feature { grid-column: span 1; grid-row: span 1; }
	.gc-cg3--bento .gc-cg3-cell--feature h3 { font-size: 1.2rem; }
}
@media (max-width: 480px) {
	.gc-cg3 { --cg3-cell-pad: 18px; padding: 48px 0; }
	.gc-cg3-inner { padding-inline: 16px; }
	.gc-cg3-header h2 { font-size: 1.45rem; }
}

@media (prefers-reduced-motion: reduce) {
	.gc-cg3-cell,
	.gc-cg3-cell::before,
	.gc-cg3-cell--feature::after,
	.gc-cg3-media img,
	.gc-cg3-marker--icon,
	.gc-cg3-link svg { transition: none; }
	.gc-cg3-cell:hover { transform: none; }
	.gc-cg3-cell:hover .gc-cg3-media img { transform: none; }
	.gc-cg3-cell:hover .gc-cg3-bgicon { transform: none; }
}

/* ---- Animated trace border (optional, runs around the grid edge) ---- */
@property --cg3-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes gc-cg3-trace { to { --cg3-angle: 360deg; } }
.gc-cg3--trace .gc-cg3-grid { position: relative; }
.gc-cg3--trace .gc-cg3-grid::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
	border-radius: inherit;
	padding: var(--cg3-trace-w);
	background: conic-gradient(from var(--cg3-angle),
		transparent 0deg, transparent 280deg,
		var(--cg3-accent) 320deg, color-mix(in srgb, var(--cg3-accent) 60%, #fff) 340deg,
		var(--cg3-accent) 355deg, transparent 360deg);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	animation: gc-cg3-trace var(--cg3-trace-speed) linear infinite;
}
@media (prefers-reduced-motion: reduce) {
	.gc-cg3--trace .gc-cg3-grid::after { animation: none; }
}