@layer components {
	/* Pre-Opening & Training page components (rebuilt). Hero reuses the
	 * shared .tf-hero/.tf-hero__inner/.tf-hero__title/.tf-hero__description
	 * classes from hero.css unchanged -- only this page's own services
	 * grid lives here. Same tonal-elevation rule as every other page: no
	 * box-shadow, only properties Elementor does not emit are set here.
	 */

	.tf-services-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--tf-space-l);
	}

	@media (min-width: 768px) {
		.tf-services-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (min-width: 1024px) {
		.tf-services-grid {
			grid-template-columns: repeat(3, 1fr);
		}

		/* 7 items over 3 columns leaves a lone card on the last row --
		 * center it under the two above rather than stretching it, so
		 * the odd count reads as an intentional close rather than a
		 * layout accident. */
		.tf-services-grid > :last-child:nth-child(3n + 1) {
			grid-column: 2 / 3;
		}
	}

	.tf-service-card {
		display: flex;
		flex-direction: column;
		block-size: 100%;
		padding: var(--tf-space-l);
		background-color: var(--tf-surface-alt);
		border: 1px solid var(--tf-border-subtle);
		border-radius: var(--tf-radius-l);
		transition: transform 300ms ease, border-color 300ms ease;
	}

	.tf-service-card:hover {
		transform: translateY(-5px);
		border-color: var(--tf-accent);
	}

	.tf-service-card__number {
		margin: 0 0 var(--tf-space-m);
		font-size: var(--tf-font-size-l);
		font-weight: 700;
		line-height: var(--tf-line-height-tight);
		color: var(--tf-accent);
	}

	.tf-service-card__title {
		margin: 0 0 var(--tf-space-xs);
		font-size: var(--tf-font-size-l);
		font-weight: 600;
		color: var(--tf-text);
	}

	.tf-service-card__desc {
		flex-grow: 1;
		margin: 0;
		color: var(--tf-text-muted);
		line-height: var(--tf-line-height-base);
	}

	@media (prefers-reduced-motion: reduce) {
		.tf-service-card {
			transition: border-color 300ms ease;
		}

		.tf-service-card:hover {
			transform: none;
		}
	}
}