/* The Boss Digital – Services Grid: base structural styles.
   Colours, spacing, sizes and per-breakpoint rules are injected inline
   per-instance from includes/class-tbs-render.php so the section always
   matches the live dashboard settings without needing a build step. */

.tbs-section {
	box-sizing: border-box;
}
.tbs-section *,
.tbs-section *::before,
.tbs-section *::after {
	box-sizing: border-box;
}

.tbs-card {
	will-change: transform;
}

.tbs-image-placeholder {
	position: relative;
}
.tbs-image-placeholder::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(45deg, rgba(255,255,255,0.03) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.03) 75%),
		linear-gradient(45deg, rgba(255,255,255,0.03) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.03) 75%);
	background-size: 24px 24px;
	background-position: 0 0, 12px 12px;
}

/* Scroll-in animation states (toggled via JS by adding .tbs-in-view) */
.tbs-animate .tbs-card {
	opacity: 0;
	transition-property: opacity, transform;
	transition-timing-function: cubic-bezier(.2, .7, .3, 1);
}
.tbs-anim-fade-in .tbs-card {
	transform: none;
}
.tbs-anim-fade-up .tbs-card {
	transform: translateY(28px);
}
.tbs-animate .tbs-card.tbs-in-view {
	opacity: 1;
	transform: translateY(0);
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
	.tbs-animate .tbs-card {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.tbs-card,
	.tbs-image,
	.tbs-arrow {
		transition: none !important;
	}
}