/* ==========================================================================
   Resurse / Resources — hero, filter pills, article grid.
   Also reused by templates/archive.html (category archives share the same
   card treatment — see that template for the exact same class names).
   Site-wide utilities `.fi-eyebrow` and `.fi-card` (hover-lift) already live
   in style.css; this file only adds what's specific to the Resurse layout.
   ========================================================================== */

/* Hero header ------------------------------------------------------------ */

.fi-resurse-hero {
	display: flex;
	flex-direction: column;
	gap: 22px; /* organic value, no matching spacing preset — TOKENS.md §5 */
	max-width: 1240px;
	margin: 0 auto;
	/* Inline spacing-110 renders 92px at 1440; design hero padding-top is 88px. */
	padding-top: 88px !important;
}

.fi-resurse-hero > * {
	/* Flex layout + WP's own `.is-layout-flow > * + *` block-gap margin would
	   otherwise stack on top of the explicit 22px flex gap above. */
	margin: 0;
}

.fi-resurse-hero h1 {
	text-wrap: pretty;
}

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

.fi-resurse-subtitle {
	max-width: 56ch;
	text-wrap: pretty;
}

/* Filter pills ------------------------------------------------------------ */

.fi-filter-pills {
	gap: 9px; /* organic value, no matching spacing preset */
}

.fi-filter-pills .wp-block-button__link {
	padding: 9px 17px; /* spec value, overrides theme.json default button padding */
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.2; /* keeps the pill at the design's 38px height; theme.json's body line-height alone renders ~3px taller */
	border: 1px solid var(--wp--preset--color--deep); /* active/"Toate" pill also carries a 1px border in the design (deep on deep, invisible but present in the box model) */
}

.fi-pill-outline .wp-block-button__link {
	background: var(--wp--preset--color--card);
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--line);
	transition: background var(--fi-dur-fast) var(--fi-ease), border-color var(--fi-dur-fast) var(--fi-ease);
}

.fi-pill-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--accent);
}

/* Content wrapper ---------------------------------------------------------- */

.fi-resurse-content {
	max-width: 1240px;
	margin: 0 auto;
}

/* Article grid -------------------------------------------------------------
   Own grid CSS rather than the query block's built-in "minimumColumnWidth"
   layout. Uses `auto-fill`, not `auto-fit`: with `auto-fit`, a query that
   returns only 1-2 posts (a real, common state on this page before the
   full article lane is populated) has its empty tracks collapsed, so the
   lone card's `1fr` stretches to consume the entire ~1240px row — a single
   post rendering as one huge ~1128×704 thumbnail. `auto-fill` keeps the
   empty tracks in the grid instead of collapsing them, so a lone/short
   card stays pinned to one ~290-390px column and the row's remaining
   space is left blank rather than being absorbed by the card. Below the
   290px `minmax` floor both behave identically (single column). */

.fi-resurse-grid .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
	gap: 26px; /* organic value, no matching spacing preset */
	list-style: none;
	margin: 0;
	padding: 0;
}

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

/* Card ---------------------------------------------------------------------
   `.fi-card` (hover-lift transform/shadow) is a shared utility from
   style.css; the rest of the card layout is defined here. */

.fi-card {
	display: flex;
	flex-direction: column;
	gap: 13px; /* organic value, no matching spacing preset */
	text-decoration: none;
	position: relative; /* containing block for the whole-card ::after overlay below */
}

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

/* Whole-card click target ---------------------------------------------------
   Only the title text was a link (wp:post-title isLink), so hovering the
   thumbnail/excerpt/date did nothing. The title anchor's ::after stretches
   to cover the entire card, making it fully clickable; the category badge
   link (.fi-card-cat) sits above that overlay via z-index so it keeps its
   own destination (the category archive). */

.fi-card .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.fi-card-cat {
	position: relative;
	z-index: 2;
}

.fi-card-thumb {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	border-radius: 14px;
	border: 1px solid var(--wp--preset--color--line);
	background: linear-gradient(135deg, var(--wp--preset--color--wash-a), var(--wp--preset--color--wash-b));
}

/* Cycle the gradient direction on alternating cards, matching the spec's
   article-gradient-pairs table. Also covers templates/archive.html, whose
   wp:query block shares this same "fi-resurse-grid" className. */
.fi-resurse-grid .wp-block-post-template > li:nth-child(even) .fi-card-thumb {
	background: linear-gradient(135deg, var(--wp--preset--color--wash-b), var(--wp--preset--color--wash-a));
}

.fi-card-cat {
	font-size: 12px; /* organic value, no matching font-size preset (closest are 11.5/12.5) */
	letter-spacing: 0.15em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--wp--preset--color--deep);
	text-decoration: none;
	display: inline-flex;
	align-items: baseline;
}

/* post-terms renders its own <a>; the site's global link style underlines
   it (0-specificity :where() rule from core, but still wins over a plain
   class selector once cascade order is considered) — force it off, same
   !important pattern already used elsewhere in the theme for link resets. */
.fi-card-cat a {
	text-decoration: none !important;
	color: inherit;
}

.fi-card-cat .fi-reading-time {
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
	/* The " · " leading space in ::before content is trimmed as flex-item
	   whitespace, collapsing the gap before the middot ("ANXIETATE· 1 MIN").
	   Push the whole element right explicitly so both sides of the middot
	   read with even spacing, matching the design's "Anxietate · 6 min". */
	margin-left: 0.35em;
}

.fi-card-cat .fi-reading-time::before {
	content: "\0020\00b7\0020"; /* middle dot separator, design's "CATEGORY · N MIN" */
}

.fi-card .wp-block-post-title {
	font-size: 23px;
}

.fi-card .wp-block-post-title a {
	/* Global elements.link style is `deep`; the card title must stay `ink`. */
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.fi-card-desc {
	line-height: 1.65;
	text-wrap: pretty;
}

.fi-card-date {
	font-size: 13px; /* organic value, no matching font-size preset (closest are 12.5/13.5) */
}

/* Placeholder notice box removed (owner annotation C — demo-content notice
   deleted from the Resurse page, RO+EN). .fi-resurse-notice / .fi-notice-dot
   / .fi-notice-text are no longer referenced anywhere; the shared base rules
   they borrowed from (.fi-confidentiality / .fi-confidentiality__dot in
   patterns.css) remain, since the homepage confidentiality box still uses
   them. */

/* templates/archive.html reuses this exact same treatment: its wp:query
   block also carries the "fi-resurse-grid" className, so every rule above
   (grid, card, thumb, meta, title-color override, notice box n/a there)
   applies unchanged to category archives. */

/* No-results fallback (templates/archive.html) --------------------------
   archive.html is one shared template for both languages, so the RO/EN
   query-no-results text is authored as two paragraphs and toggled with
   the <html lang> attribute Polylang already sets ("ro-RO" / "en-US"),
   mirroring the language-swap the theme does in PHP for nav/footer but
   staying inside this page-specific stylesheet. display:none also drops
   the inactive paragraph from the accessibility tree. */

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

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

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