.comp-cards {
	padding: 100px 40px;
	background: var(--theme-palette-color-9, #F8F9FA);
}

.comp-cards__inner {
	max-width: 1200px;
	margin: 0 auto;
}

/* ---- Header ---- */
.comp-cards__label {
	font-family: var(--fw-font-mono, 'JetBrains Mono', monospace);
	font-size: 0.75rem;
	color: var(--fw-text-tertiary, #9CA3AF);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	margin-bottom: 12px;
}

.comp-cards__headline {
	font-family: var(--fw-font-serif, 'DM Serif Display', Georgia, serif);
	font-size: clamp(2rem, 4vw, 2.625rem);
	font-weight: 400;
	margin-bottom: 16px;
	line-height: 1.2;
	color: var(--theme-palette-color-3, #1A2A3A);
}

.comp-cards__subtitle {
	font-size: 1.0625rem;
	color: var(--fw-text-secondary, #6B7280);
	margin-bottom: 56px;
	max-width: 540px;
	line-height: 1.65;
}

/* ---- Grid ---- */
.comp-cards__grid {
	display: grid;
	gap: 28px;
}

.comp-cards__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.comp-cards__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }

/* ---- Card ---- */
.comp-cards__card {
	background: var(--theme-palette-color-8, #FFFFFF);
	padding: 40px 36px;
	border-radius: 14px;
	border: 1px solid var(--fw-border, #E5E7EB);
	transition: transform 0.2s, box-shadow 0.2s;
	position: relative;
	overflow: hidden;
}

.comp-cards__card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 40px rgba(26, 42, 58, 0.06);
}

/* Yellow top-bar on hover */
.comp-cards__card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--theme-palette-color-1, #E8B931);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s;
}

.comp-cards__card:hover::before {
	transform: scaleX(1);
}

/* ---- Icon ---- */
.comp-cards__icon {
	width: 48px;
	height: 48px;
	background: var(--theme-palette-color-9, #F8F9FA);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 24px;
}

.comp-cards__icon svg {
	width: 24px;
	height: 24px;
	stroke: var(--theme-palette-color-3, #1A2A3A);
	fill: none;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---- Text ---- */
.comp-cards__title {
	font-size: 1.25rem;
	font-weight: 700;
	margin-bottom: 12px;
	color: var(--theme-palette-color-3, #1A2A3A);
}

.comp-cards__desc {
	font-size: 0.9375rem;
	color: var(--fw-text-secondary, #6B7280);
	line-height: 1.65;
	margin-bottom: 0;
}

/* ---- Tag ---- */
.comp-cards__tag {
	display: inline-block;
	margin-top: 20px;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--fw-accent-green, #2D8A6E);
	background: rgba(45, 138, 110, 0.08);
	padding: 4px 12px;
	border-radius: 4px;
}

/* ---- Color picker support ---- */
.comp-cards.has-text-color .comp-cards__label,
.comp-cards.has-text-color .comp-cards__headline,
.comp-cards.has-text-color .comp-cards__subtitle {
	color: inherit;
}

.comp-cards.has-text-color .comp-cards__label {
	opacity: 0.5;
}

.comp-cards.has-text-color .comp-cards__subtitle {
	opacity: 0.7;
}

/* Cards keep their own color context (white bg) */
.comp-cards.has-text-color .comp-cards__card {
	color: var(--theme-palette-color-3, #1A2A3A);
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
	.comp-cards__grid--cols-3 {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.comp-cards {
		padding: 64px 20px;
	}

	.comp-cards__grid--cols-2 {
		grid-template-columns: 1fr;
	}

	.comp-cards__card {
		padding: 32px 28px;
	}
}