/**
 * Custom styles to immediately follow Tailwind’s `utilities` layer
 *
 * Add your own utility classes to this theme. Complex utility classes should
 * be added using Tailwind’s plugin system:
 *
 * https://tailwindcss.com/docs/plugins#adding-utilities
 */

/* Realisations Grid Parallax */
.posts-grid .grid-item {
	will-change: transform;
	backface-visibility: hidden;
}

/* Add staggered margin to create parallax depth effect */
.posts-grid .grid-item:nth-child(4n + 1),
.posts-grid .grid-item:nth-child(4n + 3) {
	margin-top: 0;
}

.posts-grid .grid-item:nth-child(4n + 2),
.posts-grid .grid-item:nth-child(4n + 4) {
	margin-top: 60px;
}

/* Card Realisation Additional Styles */
.card-realisation {
	border-radius: 0;
}

.card-realisation .card-image-wrapper {
	position: relative;
}

/* Responsive adjustments for parallax columns */
@media (max-width: 1023px) {
	.posts-grid .grid-item:nth-child(4n + 2),
	.posts-grid .grid-item:nth-child(4n + 4) {
		margin-top: 0;
	}
}

/* Smooth parallax performance */
[data-parallax] {
	will-change: transform;
	transform: translate3d(var(--parallax-x, 0), var(--parallax-y, 0), 0)
		scale(var(--parallax-scale, 1));
	opacity: var(--parallax-opacity, 1);
	transition: none;
}

@media (max-width: 1023px), (hover: none) and (pointer: coarse) {
	.card-realisation .card-realisation-overlay {
		position: relative;
		transform: none;
		transition: none;

		.card-realisation-overlay-bg {
			display: none;
		}
		.card-realisation-overlay-plus {
			opacity: 1;
			right: 0.5rem;
			top:50%;
			transform: translateY(-50%);
		}

		.card-realisation-overlay-content {
			position: relative;
			transform: none;
			transition: none;
			color: theme("colors.neutral");
			padding: 0.925rem 2.5rem 1.25rem 0.925rem;
		}
	}
	.card-realisation .card-image {
		transform: scale(1) !important;
	}
	.card-realisation .card-image-wrapper > .absolute.inset-0 {
		opacity: 0.85;
		transition: none;
	}

	.card-realisation .card-image-wrapper > .absolute.top-4.right-4 {
		opacity: 1;
		transform: none;
		transition: none;
	}
}
