/**
 * Service card styles
 * Loaded when: .service-card is present
 */

.service-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: transform var(--cam-duration) var(--cam-ease), box-shadow var(--cam-duration) var(--cam-ease);
	overflow: hidden;
	position: relative;
	cursor: pointer;

	&:hover {
		transform: translateY(-4px);
		box-shadow: var(--wp--preset--shadow--elevated) !important;

		.service-card-image .wp-block-cover__image-background {
			transform: scale(1.05);
		}
	}

	& > .wp-block-group {
		flex: 1;
	}

	.learn-more-link {
		margin-top: auto !important;

		a {
			color: inherit;
			text-decoration: none;
			transition: color var(--cam-duration) var(--cam-ease);

			&::before {
				content: '';
				position: absolute;
				inset: 0;
				z-index: 1;
			}

			&::after {
				content: '';
				display: inline-block;
				width: 14px;
				height: 14px;
				margin-left: 6px;
				vertical-align: middle;
				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231172ba' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
				background-size: contain;
				background-repeat: no-repeat;
				transition: transform var(--cam-duration) var(--cam-ease);
			}

			&:hover {
				color: var(--wp--preset--color--secondary) !important;

				&::after {
					transform: translateX(4px);
				}
			}
		}
	}
}

.service-card-image {
	height: 192px;
	overflow: hidden;
	flex-shrink: 0;

	.wp-block-cover__image-background {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform var(--cam-duration) var(--cam-ease);
	}
}

/* Tablet: service cards wrap to 2-column grid */
@media (max-width: 1100px) {
	#services .wp-block-columns {
		flex-wrap: wrap !important;
		gap: var(--wp--preset--spacing--40) !important;

		& > .wp-block-column {
			flex-basis: calc(50% - var(--wp--preset--spacing--20)) !important;
			flex-grow: 0 !important;
		}
	}
}