/* Gradient card — service cards on light background */
.gradient-card {
	position: relative;
	background: var(--wp--preset--color--white);
	border-radius: 16px;
	padding: 2rem;
	transition: transform var(--janarvuti-transition), box-shadow var(--janarvuti-transition);
	border: 1px solid var(--wp--preset--color--border-light);
}

.gradient-card::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: 17px;
	padding: 1px;
	background: var(--janarvuti-gradient-electric);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity var(--janarvuti-transition);
}

.gradient-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(59, 130, 246, 0.12);
}

.gradient-card:hover::before {
	opacity: 1;
}

/* Glow card — problem cards on dark background */
.glow-card {
	background: var(--wp--preset--color--surface-dark);
	border: 1px solid var(--wp--preset--color--border-subtle);
	border-radius: 16px;
	padding: 2rem;
	transition: transform var(--janarvuti-transition), box-shadow var(--janarvuti-transition), border-color var(--janarvuti-transition);
}

.glow-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 32px var(--janarvuti-glow-blue);
	border-color: rgba(59, 130, 246, 0.3);
}

/* Featured glow card — gradient top-bar accent */
.glow-card--featured {
	position: relative;
	overflow: hidden;
}

.glow-card--featured::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--janarvuti-gradient-electric);
}

/* Service icon wrapper — rounded rect with faint blue tint */
.service-icon-wrapper {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 16px;
	background: rgba(59, 130, 246, 0.08);
	margin-bottom: 0.5rem;
}

.service-icon-wrapper--small {
	width: 56px;
	height: 56px;
	border-radius: 12px;
}

/* Responsive: 4-col row wraps to 2x2 on tablet, 1-col on mobile */
@media (max-width: 782px) {
	.bento-row-small {
		flex-wrap: wrap !important;
	}

	.bento-row-small > .wp-block-column {
		flex-basis: calc(50% - var(--wp--preset--spacing--md) / 2) !important;
	}
}

@media (max-width: 480px) {
	.bento-row-small > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* Step number — gradient circle for process steps */
.step-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: var(--janarvuti-gradient-electric);
	color: #FFFFFF;
	font-size: 1.25rem;
	font-weight: 700;
	margin-bottom: 1rem;
	flex-shrink: 0;
}

/* Process steps container with connector line */
.process-steps-container {
	position: relative;
}

.process-steps-container::before {
	content: "";
	position: absolute;
	top: 1.75rem;
	left: 10%;
	right: 10%;
	height: 2px;
	background: var(--wp--preset--color--border-light);
}

@media (max-width: 782px) {
	.process-steps-container::before {
		display: none;
	}
}

/* Section accent — decorative gradient line above headings */
.section-accent {
	position: relative;
	padding-top: 1rem;
}

.section-accent::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 60px;
	height: 4px;
	border-radius: 2px;
	background: var(--janarvuti-gradient-electric);
}

/* Glow background overlay for dark sections */
.glow-bg {
	position: relative;
}

.glow-bg::before {
	content: "";
	position: absolute;
	top: 20%;
	left: 50%;
	transform: translateX(-50%);
	width: 600px;
	height: 400px;
	border-radius: 50%;
	background: radial-gradient(ellipse, var(--janarvuti-glow-blue), transparent 70%);
	pointer-events: none;
	z-index: 0;
}

.glow-bg > * {
	position: relative;
	z-index: 1;
}