/**
 * Finewerk Section Title
 *
 * Scoped, BEM-style styles for the section header row: a content-width pill
 * on the left and the title + optional description column on the right. That
 * column is a flex item with a zero flex-basis, so it occupies exactly the
 * space left over after the pill and the gap — no fixed or percentage width
 * anywhere, at any breakpoint — and the description wraps inside it rather
 * than reaching back underneath the pill. Pure CSS — no JavaScript. All
 * custom properties are namespaced with --fw-st- to avoid collisions.
 *
 * Line breaks inside the title are whatever the editor typed: this file never
 * re-wraps, balances or hyphenates the title, so manually placed <br> tags
 * stay exactly where they were put.
 */

/* ------------------------------------------------------------------
 * Typography defaults (see assets/css/fonts.css)
 *
 * Hubot Sans for headings/titles/stat numbers, Archivo for everything
 * else. Declared at single-class specificity — the tag group through a
 * zero-specificity :where() — so an explicit Elementor Typography
 * control (which Elementor writes at element-id specificity) always
 * overrides it. No !important anywhere.
 * ---------------------------------------------------------------- */

.finewerk-section-title {
	font-family: var(--fw-font-body);
}

.finewerk-section-title :where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--fw-font-title);
}

/* Form controls do not inherit the document font: the UA sheet gives
   button/input/select/textarea their own `font: 400 13.33px Arial`.
   Opt them back into the component's face. */
.finewerk-section-title :where(button, input, select, textarea, optgroup) {
	font-family: inherit;
}

.finewerk-section-title {
	--fw-st-gap: 48px;
	--fw-st-valign: baseline;
	--fw-st-description-gap: 20px;
	display: block;
	width: 100%;
	box-sizing: border-box;
}

/* ---------- Row ---------- */

/* Baseline alignment by default: the pill sits on the first title line,
   which is what the reference shows. The other alignments come from the
   Vertical alignment control through --fw-st-valign. */
.finewerk-section-title__inner {
	display: flex;
	align-items: var(--fw-st-valign);
	gap: var(--fw-st-gap);
	width: 100%;
	box-sizing: border-box;
}

/* ---------- Pill ---------- */

/* Never grows: the pill is exactly as wide as its own text plus padding.
   It may shrink (and wrap internally) only when the row is too narrow to
   hold it, which keeps it from pushing the row into overflow. */
.finewerk-section-title__pill {
	flex: 0 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	max-width: 100%;
	margin: 0;
	padding: 4px 14px;
	border: 1px solid #D4D4D4;
	border-radius: 999px;
	background-color: transparent;
	color: #1E1E1E;
	font-family: var(--fw-font-body);
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
	text-align: center;
}

/* ---------- Content column ---------- */

/* flex-basis 0 + grow 1: the column measures "all remaining space" rather
   than its own content, so long or short titles both end flush with the
   right edge of the widget. min-width: 0 lets it shrink instead of forcing
   the row wider than its container. Being a block container, its baseline is
   the first title line's baseline, which is what --fw-st-valign: baseline
   aligns the pill to. */
.finewerk-section-title__content {
	flex: 1 1 0%;
	min-width: 0;
	box-sizing: border-box;
}

/* ---------- Title ---------- */

.finewerk-section-title__title {
	margin: 0;
	color: #1E1E1E;
	font-family: var(--fw-font-title);
	font-size: clamp(30px, 4.4vw, 66px);
	font-weight: 700;
	line-height: 0.98;
	letter-spacing: -0.01em;
	text-align: right;
	text-wrap: wrap;
	overflow-wrap: break-word;
}

/* The title is authored as rich text, so guard against a stray block the
   editor may leave behind pushing the row apart. */
.finewerk-section-title__title > :first-child {
	margin-top: 0;
}

.finewerk-section-title__title > :last-child {
	margin-bottom: 0;
}

.finewerk-section-title__title a {
	color: inherit;
}

/* ---------- Description ---------- */

/* No width of its own: it simply wraps to whatever the content column is,
   directly underneath the title. */
.finewerk-section-title__description {
	margin: var(--fw-st-description-gap) 0 0;
	color: rgba(30, 30, 30, 0.7);
	font-family: var(--fw-font-body);
	font-size: clamp(15px, 1.15vw, 18px);
	font-weight: 400;
	line-height: 1.55;
	letter-spacing: 0;
	text-align: right;
	overflow-wrap: break-word;
}

/* ---------- Responsive ---------- */

/* The reference proportions are kept on desktop and compacted gently as the
   viewport narrows; the title column keeps filling the remaining width the
   whole way down because nothing here sets a width on it. */
@media (max-width: 1024px) {
	.finewerk-section-title {
		--fw-st-gap: 32px;
	}

	.finewerk-section-title__pill {
		font-size: 15px;
	}
}

@media (max-width: 767px) {
	.finewerk-section-title {
		--fw-st-gap: 18px;
		--fw-st-description-gap: 14px;
	}

	.finewerk-section-title__pill {
		font-size: 14px;
		padding: 4px 12px;
	}
}

/* ---------- Stacked layouts ---------- */

/* Below the breakpoint chosen in the Layout section the pill moves onto its
   own line above the content column. The pill keeps hugging its text on the
   left, the title and description keep their configured text alignment, and
   the column drops back to automatic sizing so the column flex-direction does
   not collapse its height. */
@media (max-width: 1024px) {
	.finewerk-st-stack-tablet .finewerk-section-title__inner {
		flex-direction: column;
		align-items: stretch;
	}

	.finewerk-st-stack-tablet .finewerk-section-title__pill {
		flex: 0 0 auto;
		align-self: flex-start;
	}

	.finewerk-st-stack-tablet .finewerk-section-title__content {
		flex: 0 1 auto;
		width: 100%;
	}
}

@media (max-width: 767px) {
	.finewerk-st-stack-mobile .finewerk-section-title__inner {
		flex-direction: column;
		align-items: stretch;
	}

	.finewerk-st-stack-mobile .finewerk-section-title__pill {
		flex: 0 0 auto;
		align-self: flex-start;
	}

	.finewerk-st-stack-mobile .finewerk-section-title__content {
		flex: 0 1 auto;
		width: 100%;
	}
}