@layer components {
	/* Blog Insight page components (Phase 21 -- client-numbered Phase
	 * 19). Same tonal-elevation rule as every other page: no
	 * box-shadow. Built statically for now (§ design-system.md) --
	 * the featured card and the 3 grid cards are hand-authored content,
	 * not a live query against real posts; the category tabs and sort
	 * control are inert UI, not working filters.
	 */

	/* --- Featured Article ---------------------------------------------- */
	.tf-featured-article {
		display: flex;
		flex-wrap: wrap;
		overflow: hidden;
		background-color: var(--tf-surface-alt);
		border: 1px solid var(--tf-border-subtle);
		border-radius: var(--tf-radius-l);
	}

	.tf-featured-article__image {
		flex: 1 1 55%;
		overflow: hidden;
		min-block-size: 20rem;
	}

	.tf-featured-article__image img {
		display: block;
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
		transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
	}

	.tf-featured-article:hover .tf-featured-article__image img {
		transform: scale(1.05);
	}

	.tf-featured-article__content {
		flex: 1 1 40%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: var(--tf-space-2xl) var(--tf-space-l);
	}

	.tf-featured-article__eyebrow {
		display: block;
		margin-block-end: var(--tf-space-s);
		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-featured-article__eyebrow {
		text-transform: none;
		letter-spacing: normal;
	}

	.tf-featured-article__title {
		margin: 0 0 var(--tf-space-m);
		font-size: var(--tf-font-size-2xl);
		font-weight: 700;
		line-height: var(--tf-line-height-tight);
		color: var(--tf-text);
	}

	.tf-featured-article__desc {
		margin: 0 0 var(--tf-space-m);
		color: var(--tf-text-muted);
		line-height: var(--tf-line-height-base);
	}

	.tf-featured-article__link {
		display: inline-flex;
		align-items: center;
		gap: var(--tf-space-2xs);
		align-self: flex-start;
		font-size: var(--tf-font-size-s);
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		color: var(--tf-text);
		text-decoration: none;
	}

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

	.tf-featured-article__link svg {
		inline-size: 1.1rem;
		block-size: 1.1rem;
		transition: transform 200ms ease;
	}

	/* Logical transform exception (documented since Phase 18): the
	 * arrow nudges toward reading-direction "forward" on hover.
	 * transform has no logical equivalent, so RTL genuinely needs a
	 * direction-aware override. */
	.tf-featured-article__link:hover svg {
		transform: translateX(0.25rem);
	}

	[dir="rtl"] .tf-featured-article__link:hover svg {
		transform: translateX(-0.25rem) scaleX(-1);
	}

	/* --- Category Nav & Filter (static, inert UI) --------------------------
	 * Sticky under the global header. inset-block-start, not "top" --
	 * matches the header's own block-size (5rem / 80px) so the bar
	 * docks flush beneath it on scroll.
	 */
	.tf-category-nav {
		position: sticky;
		inset-block-start: 5rem;
		z-index: 40;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--tf-space-m);
		padding-block: var(--tf-space-m);
		background-color: var(--tf-surface);
		border-block: 1px solid var(--tf-border-subtle);
	}

	.tf-category-nav__tabs {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--tf-space-l);
	}

	.tf-category-tab {
		padding-block-end: var(--tf-space-2xs);
		font-size: var(--tf-font-size-s);
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		color: var(--tf-text-muted);
		border-block-end: 2px solid transparent;
	}

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

	.tf-category-tab--active {
		color: var(--tf-text);
		font-weight: 700;
		border-block-end-color: var(--tf-text);
	}

	.tf-category-nav__sort {
		display: flex;
		align-items: center;
		gap: var(--tf-space-xs);
		font-size: var(--tf-font-size-s);
		color: var(--tf-text-muted);
	}

	.tf-category-nav__sort strong {
		color: var(--tf-text);
		font-weight: 600;
	}

	/* --- Article Grid ---------------------------------------------------- */
	.tf-article-card {
		display: flex;
		flex-direction: column;
		block-size: 100%;
	}

	.tf-article-card__image {
		overflow: hidden;
		margin-block-end: var(--tf-space-m);
		aspect-ratio: 4 / 3;
		border: 1px solid var(--tf-border-subtle);
		border-radius: var(--tf-radius-l);
		background-color: var(--tf-surface-alt);
	}

	.tf-article-card__image img {
		display: block;
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
		transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
	}

	.tf-article-card:hover .tf-article-card__image img {
		transform: scale(1.05);
	}

	.tf-article-card__meta {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-block-end: var(--tf-space-xs);
		font-size: var(--tf-font-size-s);
	}

	.tf-article-card__category {
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		color: var(--tf-accent);
	}

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

	.tf-article-card__date {
		color: var(--tf-text-muted);
	}

	.tf-article-card__title {
		margin: 0 0 var(--tf-space-xs);
		font-size: var(--tf-font-size-l);
		font-weight: 600;
		line-height: var(--tf-line-height-tight);
		color: var(--tf-text);
		transition: color 300ms ease;
	}

	.tf-article-card:hover .tf-article-card__title {
		color: var(--tf-text-muted);
	}

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

	/* Underline-on-hover via border-block-end, not text-decoration --
	 * Elementor's own `.elementor a { text-decoration: none }` is
	 * unlayered and would beat a layered text-decoration override
	 * regardless of specificity (the trap documented since Phase 09,
	 * first hit on the Pre-Opening page). Pre-empted here rather than
	 * rediscovered. */
	.tf-article-card__link {
		display: inline-flex;
		align-self: flex-start;
		padding-block-end: 0.2em;
		font-size: var(--tf-font-size-s);
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		color: var(--tf-text);
		text-decoration: none;
		border-block-end: 1px solid var(--tf-text);
	}

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

	/* --- Newsletter panel ("Join The Force") ------------------------------- */
	.tf-newsletter-panel {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--tf-space-xl);
		padding: var(--tf-space-2xl) var(--tf-space-l);
		background-color: var(--tf-surface-muted);
		border: 1px solid var(--tf-border-subtle);
		border-radius: var(--tf-radius-l);
	}

	.tf-newsletter-panel__note {
		margin-block-start: var(--tf-space-xs);
		font-size: var(--tf-font-size-s);
		color: var(--tf-text-muted);
	}

	/* --- Newsletter Fluent Forms styling, scoped --------------------------
	 * Confirmed by rendering the actual shortcode output, not assumed.
	 *
	 * FLAT FIELDS, NOT Fluent Forms' own "two column container"
	 * element -- that was tried first and discarded. The container
	 * element renders each column with an inline `flex-basis: 50%` we
	 * cannot override (inline styles beat any external stylesheet
	 * rule regardless of layers/specificity), and two exact 50%
	 * splits always sum to exactly 100% of the row by definition.
	 * Confirmed live that independent sub-pixel rounding on the two
	 * halves was enough to tip that exact sum over the row's width
	 * and wrap the button onto its own line (Fluent Forms' own
	 * `.ff-t-cell` rule then grows that lone cell to fill 100%) --
	 * this reproduced regardless of the row's own size, since it's a
	 * structural certainty of any exact 50/50 split, not a one-off
	 * rounding coincidence a wider container could dodge.
	 *
	 * The email field and the submit button are instead flat sibling
	 * fields with no inline sizing at all -- the layout below is
	 * built entirely with `flex: 1` / `flex: 0 0 auto`, which never
	 * has an exact-sum tie to begin with.
	 *
	 * No `.ff-el-input--label` rule is needed: the email field's own
	 * `label` setting is left empty, and confirmed live that Fluent
	 * Forms then skips rendering a label wrapper entirely -- there is
	 * nothing to hide.
	 */
	.tf-newsletter-form fieldset {
		display: flex;
		flex-wrap: wrap;
		gap: var(--tf-space-s);
		align-items: flex-start;
	}

	.tf-newsletter-form .ff-el-group {
		flex: 1 1 auto;
		min-inline-size: 12rem;
	}

	.tf-newsletter-form .ff_submit_btn_wrapper {
		flex: 0 0 auto;
	}

	/* Fluent Forms sets its input border via its OWN unlayered CSS
	 * variable, --fluentform-border-color -- confirmed live that the
	 * layered `border` declaration below alone can't win against it
	 * regardless of specificity (the same "unlayered always wins" trap
	 * this project has hit repeatedly with Elementor). Overriding
	 * Fluent Forms' own variable, scoped to this form, reaches the
	 * unlayered rule that reads it (Accessibility Audit Phase 17, fix
	 * M1) -- see contact.css for the same fix and fuller rationale.
	 */
	.tf-newsletter-form {
		--fluentform-border-color: var(--tf-border-interactive);
	}

	.tf-newsletter-form .ff-el-form-control {
		display: block;
		inline-size: 100%;
		padding: var(--tf-space-s) var(--tf-space-m);
		background-color: var(--tf-surface);
		color: var(--tf-text);
		border: 1px solid var(--tf-border-interactive);
		border-radius: var(--tf-radius-m);
		font-family: inherit;
		font-size: var(--tf-font-size-m);
		transition: border-color 200ms ease;
	}

	.tf-newsletter-form .ff-el-form-control:focus {
		outline: none;
		border-color: var(--tf-text);
	}

	.tf-newsletter-form .ff-btn-submit {
		inline-size: 100%;
		padding: var(--tf-space-s) var(--tf-space-m);
		border-radius: var(--tf-radius-m);
		font-size: var(--tf-font-size-s);
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		cursor: pointer;
		border: none;
	}

	/* Colors are NOT set here -- Fluent Forms bakes this button's
	 * normal/hover colors into a per-form inline <style> tag it writes
	 * itself (confirmed live rendering the shortcode), unlayered and
	 * unconditionally winning over any layered rule regardless of
	 * specificity, the same "set anything the plugin emits, at the
	 * source" rule already applied to the Contact page's submit
	 * button. Both colors are set directly in the form's own field
	 * JSON (build_bloginsight.php), not here. */

	[dir="rtl"] .tf-newsletter-form .ff-btn-submit {
		text-transform: none;
		letter-spacing: normal;
	}

	.tf-newsletter-form .error,
	.tf-newsletter-form [class*="error_message"] {
		display: block;
		margin-block-start: var(--tf-space-3xs);
		font-size: var(--tf-font-size-s);
		color: var(--tf-text);
	}

	.tf-newsletter-form .ff-message-success,
	.tf-newsletter-form .ff_message_success {
		margin-block-start: var(--tf-space-s);
		padding: var(--tf-space-s);
		background-color: var(--tf-surface);
		border: 1px solid var(--tf-border-subtle);
		border-radius: var(--tf-radius-m);
		color: var(--tf-text);
	}
}