/* ==========================================================================
   Servicii / Services — page-specific styles
   Colors/fonts reference theme.json presets throughout (var(--wp--preset--*)).
   Reuses global utilities already in style.css — NOT duplicated here:
   .fi-eyebrow (eyebrow tag), .fi-dot-list (bullet-dot list marker),
   .is-style-sticky (sticky left column, top:100px), html{scroll-behavior:smooth}
   and main [id]{scroll-margin-top} (anchor offset for the TOC).
   Hardcoded fluid clamp() values below are the CTA-box padding and the
   section/card grid gaps — these don't match any theme.json spacingSizes
   preset (see TOKENS.md §5 "no clean base grid"); flagged in the build report.
   ========================================================================== */

/* ---- Header ---- */

.fi-svc-header {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.fi-svc-header > * {
	margin: 0;
}

/* Hero eyebrow line-height fix: moved to assets/css/patterns.css
   (.fi-svc-header .fi-eyebrow, grouped with the same fix on other pages). */

.fi-svc-h1 {
	max-width: 20ch;
	text-wrap: pretty;
}

.fi-svc-sub {
	max-width: 58ch;
	text-wrap: pretty;
}

/* Table-of-contents pill row */
.fi-svc-toc {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 6px;
}

.fi-svc-toc-pill .wp-block-button__link {
	border: 1px solid var(--wp--preset--color--line);
	padding: 9px 17px !important;
	font-size: 13.5px;
	line-height: 20px;
	transition: background-color var(--fi-dur-fast) var(--fi-ease), border-color var(--fi-dur-fast) var(--fi-ease);
}

.fi-svc-toc-pill .wp-block-button__link:hover {
	background: var(--wp--preset--color--tint) !important;
	border-color: var(--wp--preset--color--accent);
	transform: none;
	opacity: 1;
}

/* ---- Service sections ---- */

.fi-svc-section {
	/* Divider is drawn full-bleed by the ::before below (design: edge-to-edge
	   1px rule) — the section box itself stays constrained to the 1240px band. */
	position: relative;
	border-top: 0;
	padding-top: 80px !important;
	padding-bottom: 80px !important;
}

.fi-svc-section::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	border-top: 1px solid var(--wp--preset--color--line);
}

.fi-svc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: clamp(32px, 5vw, 64px);
	align-items: start;
}

/* Left column: sticky position/top comes from .is-style-sticky (style.css) */
.fi-svc-left {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.fi-svc-left > * {
	margin: 0;
}

.fi-svc-left h2 {
	font-size: 40px;
	text-wrap: pretty;
}

.fi-svc-num {
	font-family: var(--wp--preset--font-family--heading);
	font-style: italic;
	font-weight: 500;
	/* Was inheriting the body 1.7 line-height → 28.9px box (+8px each), which
	   accumulates ~+73px down the contiguous sections. Design box is ~21px. */
	line-height: normal;
}

.fi-svc-desc {
	max-width: 44ch;
	text-wrap: pretty;
}

.fi-svc-link {
	align-self: flex-start;
}

.fi-svc-link a {
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--deep);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--accent);
	padding-bottom: 3px;
}

.fi-svc-link a:hover {
	color: var(--wp--preset--color--ink);
}

/* Right column: card grid */
.fi-svc-right {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
	gap: 16px;
	align-content: start;
}

.fi-svc-card {
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.fi-svc-card > * {
	margin: 0;
}

.fi-svc-card h3 {
	font-family: var(--wp--preset--font-family--body);
	font-size: 15.5px;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.3;
}

.fi-svc-card .fi-dot-list {
	gap: 9px;
}

.fi-svc-card .fi-dot-list li {
	font-size: 14px;
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
}

/* Spec §3.2.1.2 calls for a 5px dot nudged -2px via transform; the shared
   .fi-dot-list utility in style.css ships a 6px dot on absolute top:0.6em
   positioning (used site-wide, e.g. Despre) — override scoped to this
   page's cards only rather than editing the shared utility. */
.fi-svc-card .fi-dot-list li::before {
	width: 5px;
	height: 5px;
	top: 0.5em;
	transform: translateY(-2px);
}

/* ---- Final CTA ---- */

.fi-svc-cta-box {
	padding: clamp(36px, 5vw, 60px);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 26px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
}

.fi-svc-cta-box > * {
	margin: 0;
}

.fi-svc-cta-box h2 {
	font-size: 40px;
	text-wrap: pretty;
}

.fi-svc-cta-desc {
	max-width: 52ch;
	text-wrap: pretty;
}

.fi-svc-cta-btn .wp-block-button__link {
	font-size: 14.5px;
	line-height: 19px;
	padding: 14px 26px;
}

/* Owner request (annotation #4): when a service card grid holds an odd number
   of cards, the design leaves the last card alone at the left — the owner
   prefers it centered. Span both tracks, cap at one-column width, center. */
@media (min-width: 768px) {
	.fi-svc-right .fi-svc-card:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		justify-self: center;
		width: calc(50% - 12px); /* match one track of the 2-col grid (24px gap) */
	}
}