@layer components {
	/* Homepage section helpers (Phase 09).
	 *
	 * Deliberately narrow. Elementor's generated CSS is unlayered and
	 * therefore outranks this layered file on any property it also
	 * sets — background, padding, typography, flex direction and so on
	 * are set from Elementor's own controls and must stay there.
	 * These rules only cover properties Elementor does NOT emit, so
	 * they apply predictably instead of losing a specificity fight.
	 */

	/* --- Portrait image ("Our Force") -------------------------------
	 * Elementor sets no aspect-ratio, so this reframes a landscape
	 * source into a portrait crop without touching the media file.
	 *
	 * Border-radius is deliberately NOT set here: Elementor ships an
	 * unlayered `.elementor img { border-radius: 0 }` that beats any
	 * layered theme rule, so image corners are set through Elementor's
	 * own image_border_radius control instead.
	 */
	.tf-portrait img {
		aspect-ratio: 3 / 4;
		object-fit: cover;
		inline-size: 100%;
		box-shadow: var(--tf-shadow-m);
	}

	/* --- Service card ("What We Do") --------------------------------
	 * Card surface, elevation and hover lift. Elementor sets none of
	 * background/border-radius/box-shadow/transform on a widget
	 * wrapper, so these apply cleanly.
	 */
	.tf-service {
		background-color: var(--tf-surface);
		border: 1px solid var(--tf-border-subtle);
		border-radius: var(--tf-radius-l);
		padding: var(--tf-space-s);
		box-shadow: var(--tf-shadow-s);
		/* Never animate `all`: it would also animate layout properties
		 * and fight Elementor's own transitions. */
		transition: transform 200ms ease, box-shadow 200ms ease;
	}

	.tf-service:hover {
		transform: translateY(-5px);
		box-shadow: var(--tf-shadow-l);
	}

	/* Stretched link: Elementor's Image Box already links the image and
	 * the title to the same URL. This extends the hit area to the whole
	 * card — including the "Read More" text and surrounding padding —
	 * while keeping exactly ONE anchor in the accessibility tree.
	 *
	 * Three separate <a> tags to one destination would also "work", but
	 * a screen reader would announce the same link three times per card
	 * (15 times across the section). One stretched link is both the
	 * better UX and the better semantics.
	 */
	.tf-service .elementor-image-box-wrapper {
		position: relative;
	}

	.tf-service .elementor-image-box-title a::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
	}

	/* Keyboard parity: the stretched anchor is invisible, so the focus
	 * ring has to be drawn on the card instead of the text. */
	.tf-service:focus-within {
		border-radius: var(--tf-radius-l);
		box-shadow: var(--tf-focus-ring);
	}

	.tf-service .elementor-image-box-title a:focus-visible {
		outline: none;
	}

	/* Typographic hierarchy inside the card: the description is
	 * deliberately quieter than the title so the eye lands on the
	 * title first. */
	.tf-service .elementor-image-box-description {
		color: var(--tf-text-muted);
		font-size: var(--tf-font-size-s);
		line-height: var(--tf-line-height-base);
	}

	/* Affordance for the "Read More" line, authored as the last part of
	 * the Image Box description. Block so it sits on its own line
	 * rather than running on from the description sentence. */
	.tf-service .elementor-image-box-description .tf-readmore {
		display: block;
		margin-block-start: var(--tf-space-xs);
		font-weight: 700;
		font-size: var(--tf-font-size-s);
		color: var(--tf-accent);
	}

	.tf-service:hover .elementor-image-box-description .tf-readmore {
		text-decoration: underline;
		text-underline-offset: 0.15em;
	}

	/* --- Expertise grid ---------------------------------------------
	 * Row layout is built with Elementor container settings so it stays
	 * client-editable; only shared card behaviour lives here.
	 */
	.tf-expertise-card {
		block-size: 100%;
	}

	/* --- Tablet / iPad (768-1024px) --------------------------------
	 * At this range the two "Our Force" columns no longer fit side by
	 * side: 2 x 48% plus the 64px gap overflows the container, so they
	 * wrap. Wrapped columns kept their 48% width, which left the whole
	 * block hugging the inline-start edge with ~433px of dead space
	 * beside it.
	 *
	 * The column width itself is fixed in Elementor (width_tablet 100%),
	 * because Elementor emits `width` as unlayered CSS that outranks any
	 * layered rule here. What is left for this file is the centring and
	 * the image sizing, neither of which Elementor sets, so these apply
	 * cleanly without !important.
	 *
	 * Bounds chosen to match the existing breakpoint tokens exactly:
	 * 768px is one pixel above --tf-bp-mobile (767) and 1024px is
	 * --tf-bp-tablet, so desktop and mobile are untouched.
	 */
	@media (min-width: 768px) and (max-width: 1024px) {
		.tf-section .elementor-widget-heading,
		.tf-section .elementor-widget-text-editor {
			text-align: center;
		}

		/* Wider and centred. The desktop 3:4 portrait is deliberately
		 * relaxed to 3:2 here: at ~700px wide a 3:4 crop would render
		 * roughly 930px tall and push the rest of the page off screen.
		 *
		 * No max-width is set here: Elementor also declares
		 * `max-width: 100%` on `.elementor img` unlayered, so a layered
		 * cap would be dead code. The image spans the container, which
		 * is the intended result.
		 */
		.tf-section .tf-portrait img {
			aspect-ratio: 3 / 2;
			margin-inline: auto;
		}
	}
}