@layer components {
	/* 3D flip card — "Our Expertise" (Phase 09).
	 *
	 * Built for the HTML widget rather than a native Elementor widget:
	 * Elementor Free has no flip box, and because Elementor's generated
	 * CSS is unlayered it would outrank this layered file on any
	 * property it also sets. Inside an HTML widget Elementor sets
	 * nothing, so these rules have full, predictable control.
	 *
	 * The flip is a progressive enhancement, not the only route to the
	 * content — see the (hover: none) block near the bottom. Reduced
	 * motion is already handled globally by base/reset.css, which
	 * clamps every transition-duration; the flip then swaps instantly
	 * instead of animating, with no loss of function.
	 */
	.tf-flip {
		position: relative;
		perspective: 1200px;
		aspect-ratio: 3 / 4;
		border-radius: var(--tf-radius-l);
		box-shadow: var(--tf-shadow-m);
		transition: box-shadow 200ms ease;
	}

	.tf-flip:hover,
	.tf-flip:focus-within {
		box-shadow: var(--tf-shadow-l);
	}

	/* Cards carry tabindex="0" so keyboard users can reach the back
	 * face — without this the description would be mouse-only. */
	.tf-flip:focus-visible {
		outline: none;
		border-radius: var(--tf-radius-l);
		box-shadow: var(--tf-focus-ring);
	}

	.tf-flip__inner {
		position: relative;
		inline-size: 100%;
		block-size: 100%;
		transform-style: preserve-3d;
		transition: transform 500ms ease;
	}

	.tf-flip:hover .tf-flip__inner,
	.tf-flip:focus .tf-flip__inner,
	.tf-flip:focus-within .tf-flip__inner {
		transform: rotateY(180deg);
	}

	.tf-flip__face {
		position: absolute;
		inset: 0;
		display: flex;
		overflow: hidden;
		border-radius: var(--tf-radius-l);
		/* -webkit- prefix required or Safari bleeds the reverse face
		 * through mid-rotation. */
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
	}

	.tf-flip__face--front {
		align-items: flex-end;
		background-color: var(--tf-surface-muted);
	}

	.tf-flip__img {
		position: absolute;
		inset: 0;
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
	}

	/* Scrim keeps the title legible over an arbitrary photograph.
	 * Derived from the darkest brand neutral via color-mix — no new
	 * colour is introduced. */
	.tf-flip__title {
		position: relative;
		inline-size: 100%;
		margin: 0;
		padding: var(--tf-space-m) var(--tf-space-s) var(--tf-space-s);
		background-image: linear-gradient(
			to top,
			color-mix(in srgb, var(--tf-color-neutral-900) 85%, transparent),
			transparent
		);
		color: var(--tf-text-on-dark);
		font-size: var(--tf-font-size-l);
		line-height: var(--tf-line-height-tight);
	}

	.tf-flip__face--back {
		align-items: center;
		justify-content: center;
		padding: var(--tf-space-m);
		background-color: var(--tf-surface-dark);
		color: var(--tf-text-on-dark);
		text-align: center;
		transform: rotateY(180deg);
	}

	.tf-flip__text {
		margin: 0;
		font-size: var(--tf-font-size-s);
		line-height: var(--tf-line-height-base);
	}

	/* Touch devices cannot hover, so a hover-only flip would make every
	 * description permanently unreachable. Here the card stops being a
	 * flip entirely: both faces stack and stay visible. */
	@media (hover: none) {
		.tf-flip {
			aspect-ratio: auto;
			perspective: none;
		}

		.tf-flip__inner {
			display: flex;
			flex-direction: column;
			transform: none;
			transform-style: flat;
			transition: none;
		}

		.tf-flip__face {
			position: relative;
			inset: auto;
			transform: none;
			-webkit-backface-visibility: visible;
			backface-visibility: visible;
		}

		.tf-flip__face--front {
			aspect-ratio: 3 / 4;
		}

		.tf-flip__face--back {
			border-start-start-radius: 0;
			border-start-end-radius: 0;
		}
	}
}