/* ==========================================================================
   Articol (single post) — header/meta, hero, body typography, author bio
   card, related-articles grid.
   Shared utilities `.fi-card` (hover-lift) and `.fi-dot-list` (bullet dots)
   already live in style.css; this file only adds what's specific to the
   single-post template and its post-content typography.
   RO/EN toggling of template-level static strings (breadcrumb, author role,
   bio credentials, CTA, "Citește și"/"Read next" heading, related empty
   state) follows the same html[lang] pattern already used in resurse.css
   for archive.html's no-results text.
   ========================================================================== */

/* Article header ----------------------------------------------------------- */

.fi-article__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	gap: 20px;
	/* The block-support "constrained" layout only centers the header's own
	   box within its 1240px parent (via its wp-container rule) — it does not
	   shrink the header itself, so it rendered edge-to-edge with the header
	   flush against the 1240px band's left padding. Cap the header's own box
	   to the design's 820px inner column and center that within the band. */
	max-width: 820px;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: clamp(44px, 6vw, 72px) 0 36px;
}

.fi-article__header > * {
	/* Explicit 20px flex gap above replaces the default flow block-gap.
	   The block-support "constrained" layout also applies
	   `margin-left/right: auto !important` to every direct child (to center
	   narrower alignwide/alignfull elements) — that would re-center our
	   normal-width breadcrumb/meta/author children within the 820px header
	   above, pulling them off the H1's left edge. Zero it out with the same
	   !important so this header's children stay flush-left within the column. */
	margin: 0 !important;
}

.fi-breadcrumb {
	font-size: var(--wp--preset--font-size--xs);
}

.fi-breadcrumb a {
	font-weight: 600;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	transition: color var(--fi-dur-fast) var(--fi-ease);
}

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

.fi-breadcrumb-en {
	display: none;
}

html[lang^="en"] .fi-breadcrumb-ro {
	display: none;
}

html[lang^="en"] .fi-breadcrumb-en {
	display: inline;
}

/* Meta row: category · date · reading time --------------------------------- */

.fi-article__meta {
	gap: 8px;
	align-items: center;
}

.fi-article__cat,
.fi-related-card__cat {
	font-size: 12px; /* organic value, closest presets are 11.5/12.5 — see TOKENS.md §3 */
	letter-spacing: 0.15em;
	text-transform: uppercase;
	font-weight: 600;
	text-decoration: none;
	margin: 0;
}

.fi-article__date,
.fi-reading-time {
	font-size: 12px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--wp--preset--color--deep);
	margin: 0;
}

.fi-meta-dot {
	font-size: 12px;
	color: var(--wp--preset--color--deep);
	margin: 0;
}

.fi-date-en {
	display: none;
}

html[lang^="en"] .fi-date-ro {
	display: none;
}

html[lang^="en"] .fi-date-en {
	display: inline;
}

/* H1 --------------------------------------------------------------------- */

.fi-article__title {
	font-size: clamp(34px, 4vw, 52px); /* Article H1 tier — distinct from the global xx-large preset, see TOKENS.md §3 */
	line-height: 1.12;
	margin: 0;
	text-wrap: pretty;
}

/* Author badge (header) ----------------------------------------------------- */

.fi-article__author {
	gap: 12px;
	align-items: center;
}

.fi-article__avatar,
.fi-author-bio__avatar {
	margin: 0;
}

.fi-article__avatar img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.fi-article__author-info {
	gap: 0;
	line-height: 1.35;
}

.fi-article__author-name {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	margin: 0;
}

.fi-article__author-role {
	/* WP generates this custom property as --2-xs (hyphen inserted after the
	   leading digit), not --2xs — confirmed against the rendered
	   global-styles-inline-css output. */
	font-size: var(--wp--preset--font-size--2-xs);
	color: var(--wp--preset--color--muted);
	margin: 0;
}

.fi-role-en {
	display: none;
}

html[lang^="en"] .fi-role-ro {
	display: none;
}

html[lang^="en"] .fi-role-en {
	display: inline;
}

/* Hero image ---------------------------------------------------------------- */

/* The single-post template is excluded from the global block-gap-leak reset
   (that reset is what makes the in-body paragraph rhythm work), so these
   top-level wrappers keep WP's injected 24px margin-block-start. Design has them
   flush/contiguous — zero it here explicitly. */
.fi-article__hero,
.fi-article__body,
.fi-author-bio,
.fi-related {
	margin-top: 0;
}

.fi-article__hero {
	padding: 0 28px 44px;
}

.fi-article__hero-img {
	/* className lands on the <figure> wrapper post-featured-image renders,
	   not the <img> itself — crop/rounding go on the wrapper, sizing on the
	   nested img. */
	display: block;
	overflow: hidden;
	border-radius: 20px;
	background: var(--wp--preset--color--tint);
	margin: 0;
}

.fi-article__hero-img img {
	display: block;
	width: 100%;
	aspect-ratio: 21 / 9;
	object-fit: cover;
}

/* Article body (post-content) ------------------------------------------------
   22px block-gap is the baseline rhythm between body children; the two in-body
   subheads carry the spec's own per-element top margins (spec 4.2 = 18px on the
   first H2, spec 4.6 = 8px on the H2 that follows the callout), overriding the
   baseline for just those two elements. */

.fi-article__body {
	--wp--style--block-gap: 22px;
	padding: 0 28px;
}

.fi-article__body > * {
	text-wrap: pretty;
}

.fi-article__h2 {
	text-wrap: pretty;
}

/* Spec 4.2 — first in-body subheading: 18px top margin. */
.fi-article__body > .fi-article__h2 {
	margin-top: 18px;
}

/* Spec 4.6 — second subheading (immediately after the callout): 8px top margin. */
.fi-article__body > .fi-callout + .fi-article__h2 {
	margin-top: 8px;
}

/* Spec 4.4 — this article's signals list wants 12px between items and 6px of
   vertical padding on the wrapper. Scoped to the body so the shared
   .fi-dot-list utility (style.css, 10px / no padding) is unchanged elsewhere. */
.fi-article__body .fi-dot-list {
	gap: 12px;
	padding: 6px 0;
}

/* Placeholder content box (spec 4.8) removed (owner annotation C — demo-
   content notice deleted from the sample articles, RO post 1 + EN post 74).
   .fi-placeholder is no longer referenced anywhere and isn't shared with any
   other rule, so its CSS is dropped too. */

/* Callout / quote ------------------------------------------------------------ */

.fi-callout {
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
	border-left: none;
	padding: 26px 8px;
	margin: 10px 0;
}

.fi-callout p {
	font-family: var(--wp--preset--font-family--heading);
	font-style: italic;
	font-weight: 500;
	font-size: 25px;
	line-height: 1.45;
	text-align: center;
	color: var(--wp--preset--color--deep);
	text-wrap: pretty;
	margin: 0;
}

/* Author bio card ------------------------------------------------------------ */

.fi-author-bio {
	padding: 44px 28px 0;
}

.fi-author-bio__card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 20px;
	padding: 26px;
	gap: 18px;
	align-items: center;
}

.fi-author-bio__avatar img {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.fi-author-bio__text {
	flex: 1;
	min-width: 220px;
	gap: 4px;
}

.fi-author-bio__name {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 20px;
	line-height: normal;
	margin: 0;
}

.fi-author-bio__credentials {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
	line-height: 1.55;
	margin: 0;
}

.fi-bio-en {
	display: none;
}

html[lang^="en"] .fi-bio-ro {
	display: none;
}

html[lang^="en"] .fi-bio-en {
	display: inline;
}

.fi-author-bio__cta {
	margin: 0;
}

.fi-author-bio__cta .wp-block-button__link {
	padding: 12px 22px;
	font-size: var(--wp--preset--font-size--xs);
	white-space: nowrap;
}

/* Default-state hide must out-specify WordPress core's
   `.wp-block-buttons > .wp-block-button { display: inline-block; }`
   (specificity 0,2,0) — a bare `.fi-bio-cta-en{display:none}` (0,1,0) loses
   that fight regardless of source order, so both language CTAs render at
   once on the default/RO page. Qualify with the html[lang] prefix (0,2,1),
   the same pattern already used for the reverse (EN-page) case below. */
html[lang^="ro"] .fi-bio-cta-en {
	display: none;
}

html[lang^="en"] .fi-bio-cta-ro {
	display: none;
}

html[lang^="en"] .fi-bio-cta-en {
	display: block;
}

/* Related articles ------------------------------------------------------------ */

.fi-related {
	padding: 52px 28px clamp(64px, 9vw, 110px);
}

.fi-related__heading {
	font-size: 26px;
	margin: 0 0 22px;
}

.fi-related__heading-en {
	display: none;
}

html[lang^="en"] .fi-related__heading-ro {
	display: none;
}

html[lang^="en"] .fi-related__heading-en {
	display: block;
}

/* auto-fill, not auto-fit: this is a live wp:query (perPage:3, current post
   excluded — see functions.php), so it can genuinely return just 1 post.
   auto-fit would collapse the empty tracks and stretch that lone card to
   fill the whole row; auto-fill preserves them so it stays one column
   wide. See assets/css/resurse.css for the identical reasoning. */
.fi-related-grid .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	gap: 18px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.fi-related-grid .wp-block-post-template > li {
	margin: 0;
}

.fi-related-card {
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	padding: 22px;
	gap: 10px;
	transition: transform var(--fi-dur-fast) var(--fi-ease), border-color var(--fi-dur-fast) var(--fi-ease);
}

.fi-related-card:hover {
	/* Spec 6.2: translateY(-3px) + border-color change, no box-shadow — hence
	   this card does NOT reuse the shared .fi-card lift (which is -4px + shadow). */
	transform: translateY(-3px);
	border-color: var(--wp--preset--color--accent);
}

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

.fi-related-card__meta {
	gap: 8px;
	align-items: center;
}

.fi-related-card__title {
	font-size: 20px;
	line-height: 1.25;
}

.fi-related-card__title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.fi-related-empty {
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--muted);
	margin: 0;
}

.fi-related-empty-en {
	display: none;
}

html[lang^="en"] .fi-related-empty-ro {
	display: none;
}

html[lang^="en"] .fi-related-empty-en {
	display: block;
}

/* Category is a real archive link but the design renders it as plain meta text —
   keep it clickable, drop the underline (r5 finding). */
.fi-article__cat a,
.fi-related-card__cat a {
	text-decoration: none;
	color: inherit;
}