/* KickerFlair — window mark + kicker + trailing 3px accent rule with a
   detached 16px dash at the far end (Figma section-header treatment). */

.kck-flr {
	display: flex;
	align-items: center;
	gap: 1rem;
	color: var(--accent);

	.icn {
		flex: none;
		width: 44px;
		height: 24px;
	}

	.fnt_t-k {
		white-space: nowrap;
	}

	&::after {
		content: '';
		flex: 1 1 auto;
		height: 3px;
		background:
			linear-gradient(currentColor, currentColor) left center / calc(100% - 24px) 3px no-repeat,
			linear-gradient(currentColor, currentColor) right center / 16px 3px no-repeat;
	}
}


/* ── Kicker flair driven by the alignment utilities ───────────────────────────
   Any .fnt_t-k inside an alignment utility gets the flanking accent rules, so
   the treatment travels with the kicker instead of needing a wrapper element.
   [class*="ta_"] is centred at every width (global.css) and .ta_r-* / .ta_l-*
   only flip at their breakpoint — so centred is the base state and the right /
   left variants live inside the matching media queries below.

   Geometry, measured off the Figma frames (right 15301:27876, centred
   15301:27913). The 3px rule and the detached 16px dash are one two-layer
   gradient; 24px is the dash plus its 8px gap:

     centred  [16 dash][8][──── rule ────][16][TEXT][16][──── rule ────][8][16 dash]
     right    [──── rule ────][8][16 dash][16][TEXT][16][mark]
     left                                     [mark][TEXT][16][──── rule ────][8][16 dash]

   The right variant reuses the left variant's rule group unflipped, which is
   why its dash lands inboard next to the text rather than mirrored outward.

   The accent goes on the pseudo-elements, never on the kicker itself — the text
   keeps its own --title-color: var(--fnt-t-k) from color-structure.css. The
   --accent lookup stays on the pseudo so it resolves in the kicker's own
   data-colors palette rather than at :root. */

[class*="ta_"] .fnt_t-k:not(.kck-flr > *),
.fnt_t-k[class*="ta_"]:not(.kck-flr > *),
[class*="ta_"] .kck-flr {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%; /* f_m parents centre-align their items, collapsing the rules */

	&::before,
	&::after {
		content: '';
		flex: 1 1 auto;
		height: 3px;
		color: var(--kck-flr-clr, var(--accent));
	}

	/* centred: the detached dash sits at the outer end of each side */
	&::before {
		background:
			linear-gradient(currentColor, currentColor) left center / 16px 3px no-repeat,
			linear-gradient(currentColor, currentColor) right center / calc(100% - 24px) 3px no-repeat;
	}

	&::after {
		background:
			linear-gradient(currentColor, currentColor) left center / calc(100% - 24px) 3px no-repeat,
			linear-gradient(currentColor, currentColor) right center / 16px 3px no-repeat;
	}
}

/* The centred comp is rules-only — no window mark. */
[class*="ta_"] .kck-flr .icn {
	display: none;
}


/* 700px Responsive (min-width) */
@media screen and (min-width:700px) {

	.ta_r-700 .fnt_t-k:not(.kck-flr > *),
	.fnt_t-k.ta_r-700,
	.ta_r-700 .kck-flr {

		&::after {
			display: none;
		}

		&::before {
			background:
				linear-gradient(currentColor, currentColor) left center / calc(100% - 24px) 3px no-repeat,
				linear-gradient(currentColor, currentColor) right center / 16px 3px no-repeat;
		}
	}

	.ta_l-700 .fnt_t-k:not(.kck-flr > *),
	.fnt_t-k.ta_l-700,
	.ta_l-700 .kck-flr {

		&::before {
			display: none;
		}
	}

	/* mark returns once the block is no longer centred; right-aligned trails it */
	.ta_l-700 .kck-flr .icn {
		display: block;
	}

	.ta_r-700 .kck-flr .icn {
		display: block;
		order: 1;
	}
}


/* 1280px Responsive (min-width) */
@media screen and (min-width:1280px) {

	.ta_r-1280 .fnt_t-k:not(.kck-flr > *),
	.fnt_t-k.ta_r-1280,
	.ta_r-1280 .kck-flr {

		&::after {
			display: none;
		}

		&::before {
			background:
				linear-gradient(currentColor, currentColor) left center / calc(100% - 24px) 3px no-repeat,
				linear-gradient(currentColor, currentColor) right center / 16px 3px no-repeat;
		}
	}

	.ta_l-1280 .fnt_t-k:not(.kck-flr > *),
	.fnt_t-k.ta_l-1280,
	.ta_l-1280 .kck-flr {

		&::before {
			display: none;
		}
	}

	.ta_l-1280 .kck-flr .icn {
		display: block;
	}

	.ta_r-1280 .kck-flr .icn {
		display: block;
		order: 1;
	}
}


/* 1920px Responsive (min-width) */
@media screen and (min-width:1920px) {

	.ta_r-1920 .fnt_t-k:not(.kck-flr > *),
	.fnt_t-k.ta_r-1920,
	.ta_r-1920 .kck-flr {

		&::after {
			display: none;
		}

		&::before {
			background:
				linear-gradient(currentColor, currentColor) left center / calc(100% - 24px) 3px no-repeat,
				linear-gradient(currentColor, currentColor) right center / 16px 3px no-repeat;
		}
	}

	.ta_l-1920 .fnt_t-k:not(.kck-flr > *),
	.fnt_t-k.ta_l-1920,
	.ta_l-1920 .kck-flr {

		&::before {
			display: none;
		}
	}

	.ta_l-1920 .kck-flr .icn {
		display: block;
	}

	.ta_r-1920 .kck-flr .icn {
		display: block;
		order: 1;
	}
}


/* When the flair leads a .cnt-stl block it takes the first-child slot, so the
   catalog's positional heading wiring maps the following headings one rung
   low (title gets t-2, subtitle gets t-3). Re-point the two headings after a
   leading flair at the t-1 / t-2 roles — same idiom the header wiring uses
   for .flr_hd. */

.cnt-stl > .kck-flr:first-child + :is(h1, h2, h3, h4, h5, h6) {
	--title-color: var(--fnt-t-1);
	font-family: var(--fnt-t-1-ff);
	font-size: var(--fnt-t-1-s);
	letter-spacing: var(--fnt-t-1-ls);
	line-height: var(--fnt-t-1-lh);
	font-weight: var(--fnt-t-1-w);
	text-transform: var(--fnt-t-1-tt);
	font-style: var(--fnt-t-1-fs);
	text-wrap: balance;
}

.cnt-stl > .kck-flr:first-child + :is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) {
	--title-color: var(--fnt-t-2);
	font-family: var(--fnt-t-2-ff);
	font-size: var(--fnt-t-2-s);
	letter-spacing: var(--fnt-t-2-ls);
	line-height: var(--fnt-t-2-lh);
	font-weight: var(--fnt-t-2-w);
	text-transform: var(--fnt-t-2-tt);
	font-style: var(--fnt-t-2-fs);
}