@layer components {
	/* Services page components (Phase 11).
	 *
	 * Same tonal-elevation rule as about.css: no box-shadow anywhere.
	 * Card hover is a background shift (established pattern) plus, here,
	 * a 1.1x icon scale per DESIGN.md's stated micro-interaction — never
	 * an elevation change. Only properties Elementor does not emit are
	 * set here; Elementor's generated CSS is unlayered and would outrank
	 * this file on anything it also sets.
	 */

	/* --- Service card (bento grid) ------------------------------------
	 * One shared shell; card 02 gets the --dark modifier, everything
	 * else about layout (icon position, tag style) is composed from the
	 * smaller pieces below so each of the ten cards can differ without
	 * ten separate card classes.
	 */
	.tf-service-card {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		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: background-color 300ms ease;
	}

	.tf-service-card:hover {
		background-color: var(--tf-surface-muted);
	}

	.tf-service-card--dark {
		background-color: var(--tf-surface-dark);
		border-color: var(--tf-border-on-dark);
	}

	.tf-service-card--dark:hover {
		background-color: var(--tf-accent);
	}

	/* Header row: ghost number + icon (cards 01-05), or number + rule +
	 * icon (cards 06-10) via the --with-rule modifier. */
	.tf-service-card__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--tf-space-s);
		margin-block-end: var(--tf-space-m);
	}

	.tf-service-card__head--with-rule {
		justify-content: flex-start;
	}

	.tf-service-card__rule {
		flex: 1 1 auto;
		block-size: 1px;
		min-inline-size: var(--tf-space-l);
		background-color: var(--tf-border-subtle);
	}

	/* Large numeral beside the icon. Solid --tf-text (#191e11, dark
	 * olive-black) on every card; card 02 (.tf-service-card--dark) keeps
	 * its own colour below. Targeted by the dark modifier class rather
	 * than :nth-child(2): the cards are separate Elementor containers,
	 * not siblings in one list, so a positional selector would not
	 * reliably mean "box 2". dir="ltr" keeps "01"
	 * from being reordered inside the Arabic paragraph context (decision
	 * D10: pillar/service numbers stay Western digits in both languages).
	 */
	.tf-service-number {
		font-size: var(--tf-font-size-2xl);
		font-weight: 700;
		line-height: 1;
		color: var(--tf-text);
	}

	.tf-service-card--dark .tf-service-number {
		color: var(--tf-color-white);
	}

	.tf-service-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		inline-size: 2.5rem;
		block-size: 2.5rem;
		color: var(--tf-accent);
		transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
	}

	.tf-service-card--dark .tf-service-icon {
		color: var(--tf-text-on-dark);
	}

	.tf-service-card:hover .tf-service-icon {
		transform: scale(1.1);
	}

	.tf-service-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--dark .tf-service-title {
		color: var(--tf-text-on-dark);
	}

	.tf-service-desc {
		margin: 0 0 var(--tf-space-m);
		max-inline-size: 42rem;
		color: var(--tf-text-muted);
		line-height: var(--tf-line-height-base);
	}

	.tf-service-card--dark .tf-service-desc {
		color: var(--tf-text-muted-on-dark);
	}

	/* --- Tag style A: dot list (card 01) -------------------------------
	 * Custom marker via pseudo-element rather than list-style, so it
	 * inherits brand colour and sits on the inline-start side
	 * automatically in RTL.
	 */
	.tf-service-tags--dots {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--tf-space-xs) var(--tf-space-m);
		margin: 0;
		padding-block-start: var(--tf-space-m);
		border-block-start: 1px solid var(--tf-border-subtle);
		list-style: none;
	}

	.tf-service-tags--dots li {
		position: relative;
		padding-inline-start: var(--tf-space-s);
		font-size: var(--tf-font-size-s);
		font-weight: 600;
		color: var(--tf-text-muted);
	}

	.tf-service-tags--dots li::before {
		content: "";
		position: absolute;
		inset-inline-start: 0;
		inset-block-start: 0.5em;
		inline-size: 0.375rem;
		block-size: 0.375rem;
		border-radius: var(--tf-radius-full);
		background-color: var(--tf-accent);
	}

	/* --- Tag style B: checkmark list (card 02, dark) ------------------- */
	.tf-service-tags--checks {
		display: flex;
		flex-direction: column;
		gap: var(--tf-space-s);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.tf-service-tags--checks li {
		display: flex;
		align-items: center;
		gap: var(--tf-space-2xs);
		font-size: var(--tf-font-size-s);
		font-weight: 600;
		color: var(--tf-text-muted-on-dark);
	}

	.tf-service-tags--checks svg {
		flex: 0 0 auto;
		inline-size: 1rem;
		block-size: 1rem;
		color: var(--tf-text-on-dark);
	}

	/* --- Tag style C: "Key Areas" single line (cards 03-05) ------------ */
	.tf-service-keyareas {
		display: flex;
		flex-direction: column;
		gap: var(--tf-space-2xs);
	}

	.tf-service-keyareas__label {
		font-size: var(--tf-font-size-s);
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		color: var(--tf-text-muted);
	}

	[dir="rtl"] .tf-service-keyareas__label {
		text-transform: none;
		letter-spacing: normal;
	}

	.tf-service-keyareas__value {
		font-size: var(--tf-font-size-s);
		color: var(--tf-text-muted);
		line-height: var(--tf-line-height-base);
	}

	/* --- Tag style D: pill chips (cards 06-10) ------------------------- */
	.tf-service-pills {
		display: flex;
		flex-wrap: wrap;
		gap: var(--tf-space-xs);
	}

	.tf-service-pill {
		padding: var(--tf-space-3xs) var(--tf-space-s);
		background-color: var(--tf-surface);
		border: 1px solid var(--tf-border-subtle);
		border-radius: var(--tf-radius-full);
		font-size: var(--tf-font-size-s);
		font-weight: 600;
		color: var(--tf-text-muted);
	}

	/* Card 10 (full-width) splits into two columns on desktop, stacks on
	 * mobile -- same direction-aware behaviour used throughout the site. */
	.tf-service-split {
		display: flex;
		flex-wrap: wrap;
		gap: var(--tf-space-m) var(--tf-space-l);
	}

	.tf-service-split > * {
		flex: 1 1 18rem;
	}

	/* --- Proven Operational Force panel --------------------------------
	 * Tonal muted panel (DESIGN.md's ash-grey), distinct from the dark
	 * Collective band on the About page -- lighter host, so the metric
	 * tiles need a different treatment than .tf-metric (which assumes a
	 * dark host).
	 *
	 * This class now sits on a real Elementor container, which emits its
	 * own unlayered flex/padding CSS and would beat any layout rule
	 * declared here -- so only background-color and border-radius are
	 * set: the two properties Elementor's container settings don't
	 * touch. Layout (column stack, gap, padding) is Elementor's own
	 * settings in build_services.php.
	 */
	.tf-force-panel {
		background-color: var(--tf-surface-muted);
		border-radius: var(--tf-radius-l);
	}

	/* Wrapper widget around the metrics grid -- exists so the stats have
	 * their own addressable container, independent from the heading and
	 * button groups either side of them (structural reset, round 2). */
	.tf-force-stats {
		inline-size: 100%;
	}

	/* 2x2 on desktop and tablet, one column on mobile. Capped and
	 * centred rather than stretched to the panel's full 760px inner
	 * column, so tiles stay a coherent square-ish size instead of
	 * ballooning into oversized boxes with mostly empty padding. */
	.tf-force-metrics {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--tf-space-l);
		max-inline-size: 30rem;
		margin-inline: auto;
	}

	.tf-force-metric {
		padding: var(--tf-space-m);
		background-color: color-mix(in srgb, var(--tf-surface) 30%, transparent);
		border: 1px solid color-mix(in srgb, var(--tf-accent) 10%, transparent);
		border-radius: var(--tf-radius-l);
		text-align: center;
	}

	.tf-force-metric__value {
		display: block;
		font-size: var(--tf-font-size-2xl);
		font-weight: 700;
		line-height: var(--tf-line-height-tight);
		color: var(--tf-text);
	}

	.tf-force-metric__label {
		display: block;
		margin-block-start: var(--tf-space-3xs);
		font-size: var(--tf-font-size-s);
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		color: var(--tf-text-muted);
	}

	[dir="rtl"] .tf-force-metric__label {
		text-transform: none;
		letter-spacing: normal;
	}
}