/* mod_my_services - บริการประชาชน */

.my-services { --sv-cols: 4; }

.my-services__grid {
	display: grid; gap: 18px;
	grid-template-columns: repeat(var(--sv-cols), minmax(0, 1fr));
}

.my-services__card {
	display: flex; flex-direction: column; gap: 8px;
	background: #fff; border: 1px solid var(--my-line, #e5e7eb);
	border-radius: var(--my-radius, 14px); padding: 22px 18px;
	box-shadow: var(--my-shadow, 0 2px 14px rgba(16, 40, 80, .08));
	color: #23324d; text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.my-services.align-center .my-services__card { align-items: center; text-align: center; }
.my-services.align-start .my-services__card { align-items: flex-start; text-align: start; }

a.my-services__card:hover {
	transform: translateY(-5px);
	box-shadow: var(--my-shadow-lg, 0 10px 34px rgba(16, 40, 80, .14));
	border-color: var(--c1, #2e80d6);
	text-decoration: none;
}

.my-services__icon {
	width: 62px; height: 62px; border-radius: 18px;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 1.55rem; flex: 0 0 auto;
	transition: transform .2s ease;
}
a.my-services__card:hover .my-services__icon { transform: scale(1.06); }

/* icon variants */
.my-services.icon-solid .my-services__icon {
	background: linear-gradient(135deg, var(--c1), var(--c2)); color: #fff;
}
.my-services.icon-soft .my-services__icon {
	background: color-mix(in srgb, var(--c1) 16%, #ffffff);
	color: var(--c2);
}
.my-services.icon-outline .my-services__icon {
	background: transparent; color: var(--c2); border: 2px solid var(--c1);
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.my-services.icon-soft .my-services__icon { background: #eef4fb; }
}

.my-services__title { font-size: 1rem; font-weight: 600; line-height: 1.45; }
.my-services__text { font-size: .85rem; color: var(--my-muted, #6b7280); line-height: 1.55; }

@media (max-width: 991px) {
	.my-services__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.my-services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.my-services__card { padding: 16px 12px; }
	.my-services__icon { width: 52px; height: 52px; font-size: 1.3rem; border-radius: 14px; }
}