/**
 * Cards #services: en escritorio el enlace del título gana el rojo marca al pasar el mouse
 * o al enfocar la card; en táctil / viewport angosto el título rojo queda siempre visible
 * y se neutraliza el "visibility:hidden" inicial de WOW.js sobre la columna .wow.
 */

#services.theme-repair-services .acr-services-grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
	width: min(100%, 1080px);
	margin: 0 auto;
	justify-items: stretch;
}

#services.theme-repair-services .acr-services-grid::before,
#services.theme-repair-services .acr-services-grid::after {
	content: none;
}

#services.theme-repair-services .acr-services-grid > .zr-theme-single-service {
	width: 100%;
	max-width: none;
	margin-bottom: 0;
	padding-left: 0;
	padding-right: 0;
}

#services.theme-repair-services .acr-services-grid .zr-theme-single-service-card {
	display: block;
	width: 100%;
	height: 100%;
	margin-bottom: 0;
	cursor: pointer;
	color: inherit;
}

#services.theme-repair-services .acr-services-grid .acr-home-service-detail-btn {
	margin-top: 6px;
}

#services.theme-repair-services .acr-services-grid .zr-theme-single-service-card p {
	margin-bottom: 18px;
}

#services.theme-repair-services .acr-services-grid .zr-theme-single-service-card:hover,
#services.theme-repair-services .acr-services-grid .zr-theme-single-service-card:focus {
	color: inherit;
}

#services.theme-repair-services .zr-theme-single-service-card img[src$=".svg"] {
	filter: none;
}

@media (max-width: 1199.98px) {
	#services.theme-repair-services .acr-services-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		max-width: 960px;
		width: 100%;
	}
}

@media (max-width: 991.98px) {
	#services.theme-repair-services .acr-services-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: 720px;
		gap: 28px;
	}
}

@media (max-width: 575.98px) {
	#services.theme-repair-services .acr-services-grid {
		grid-template-columns: 1fr;
		max-width: 340px;
		gap: 20px;
	}
}

/* Escritorio con puntero fino: título gris → rojo; card con hover premium (no aplica en táctil) */
@media (hover: hover) and (pointer: fine) and (min-width: 992px) {
	#services.theme-repair-services .zr-theme-single-service-card {
		transition:
			background 0.35s ease,
			box-shadow 0.35s ease,
			transform 0.35s ease,
			border-color 0.35s ease;
	}

	#services.theme-repair-services .zr-theme-single-service-card h5,
	#services.theme-repair-services .zr-theme-single-service-card h5 a {
		color: #6a6a6a;
		transition: color 0.35s ease;
	}

	#services.theme-repair-services .zr-theme-single-service-card:hover h5,
	#services.theme-repair-services .zr-theme-single-service-card:focus h5,
	#services.theme-repair-services .zr-theme-single-service-card:hover h5 a,
	#services.theme-repair-services .zr-theme-single-service-card:active h5 a {
		color: #c00113;
	}

	#services.theme-repair-services .zr-theme-single-service-card img {
		transition:
			transform 0.35s ease,
			opacity 0.35s ease;
		transform-origin: center;
	}

	#services.theme-repair-services .zr-theme-single-service-card:hover,
	#services.theme-repair-services .zr-theme-single-service-card:active {
		background: linear-gradient(180deg, #fafbfc 0%, #f4f5f7 100%);
		box-shadow:
			0 18px 44px rgba(36, 38, 62, 0.11),
			0 8px 20px rgba(0, 0, 0, 0.06);
		overflow: visible;
		z-index: 1;
	}

	@media (prefers-reduced-motion: no-preference) {
		#services.theme-repair-services .zr-theme-single-service-card:hover,
		#services.theme-repair-services .zr-theme-single-service-card:active {
			transform: translateY(-6px);
		}

		#services.theme-repair-services .zr-theme-single-service-card:hover img,
		#services.theme-repair-services .zr-theme-single-service-card:active img {
			transform: scale(1.05);
			opacity: 0.96;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		#services.theme-repair-services .zr-theme-single-service-card:hover img,
		#services.theme-repair-services .zr-theme-single-service-card:active img {
			opacity: 0.92;
		}
	}
}

/* Móvil, tablet y dispositivos sin hover fiable: rojo siempre */
@media (max-width: 991.98px), (hover: none) {
	#services.theme-repair-services .zr-theme-single-service-card h5,
	#services.theme-repair-services .zr-theme-single-service-card h5 a {
		color: #c00113 !important;
		opacity: 1 !important;
		visibility: visible !important;
	}
}

/*
 * WOW.js aplica visibility:hidden (inline) a .wow hasta que el bloque entra en viewport;
 * en táctil suele confundirse con "solo aparece al tocar". Forzamos visible en #services.
 */
@media (max-width: 991.98px), (hover: none), (pointer: coarse) {
	#services.theme-repair-services .zr-theme-single-service.wow {
		visibility: visible !important;
		-webkit-animation: none !important;
		animation: none !important;
	}
}

/* Entrada suave al marcar in-view (solo si el usuario no pide menos movimiento) */
@media (prefers-reduced-motion: no-preference) and (max-width: 991.98px),
	(prefers-reduced-motion: no-preference) and (hover: none) {
	@keyframes acr-service-card-in {
		from {
			opacity: 0.88;
			transform: translateY(10px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	#services.theme-repair-services .zr-theme-single-service-card.acr-service-card--in-view {
		animation: acr-service-card-in 0.55s ease forwards;
	}
}