/* ===========================================================================
 * Resources Hub — Option 2.1 port
 *
 * Conditionally enqueued from `tbh_scripts()` for the `template-resources-hub.php`
 * page template only. Visual reference:
 *   planning/resource-redesign/advisa-blog-redesign/project/options/option2-1-refined.jsx
 *   planning/resource-redesign/advisa-blog-redesign/project/styles/tokens.css
 *
 * Class naming targets the U5 template-output (resources-hub__*, resource-card__*,
 * adv-chip, adv-photo). Tokens are scoped to `.resources-hub` so the rest of the
 * theme is unaffected.
 *
 * Font mapping (Typekit kit `ucl4aic` audit):
 *   --f-display: system serif. The kit's only serif is italic-only freight-macro-pro;
 *                upright editorial serifs match the design intent better than forcing
 *                italic on every headline.
 *   --f-sans:    freight-sans-pro (kit). Closest available match to Geist.
 *   --f-mono:    system mono. No monospace exists in the kit.
 * =========================================================================== */

/* -------- Tokens (scoped) --------
   Aligned to the ADVISA Brand Standards Manual (revised June 2022,
   pages 13–14). Token names kept stable so downstream references
   don't need to change; only the hex values updated.

   Primary brand colors:
     Mustlin     #F4F0EE   warm off-white (page background)
     Arabesque   #E14525   primary red-orange accent (CTAs, indicators)
     Turquoise   #44C0C0   primary digital teal (links, hover, accents)
     Slate       #2E3642   primary dark (body text, dark surfaces)

   Secondary brand colors:
     Dark Teal   #005D64   used where Turquoise contrast is insufficient
     White       #FFFFFF
*/
.resources-hub {
	--rh-teal:       #44C0C0;   /* Turquoise — brand digital teal */
	--rh-teal-deep:  #005D64;   /* Dark Teal — brand secondary */
	--rh-teal-soft:  #71CAC9;   /* Aqua — brand print teal (reserved) */
	--rh-coral:      #E14525;   /* Arabesque — brand primary red */
	--rh-coral-soft: rgba(225, 69, 37, 0.50);  /* Arabesque @ 50% — for subtle accents */
	--rh-red:        rgba(225, 69, 37, 0.85); /* Arabesque @ 85% — brand-canonical hover state (the 2022 Standards don't define a darker shade, so dimmed Arabesque is the closest in-brand "pressed" feel) */
	--rh-navy:       #2E3642;   /* Slate — brand primary dark */
	--rh-cream:      #F4F0EE;   /* Mustlin — brand primary background */
	--rh-cream-2:    #ECE6DD;   /* Mustlin shaded — for subtle surface layering */
	--rh-paper:      #FFFFFF;   /* White — brand secondary, for elevated cards */
	--rh-ink:        #2E3642;   /* Slate (alias for primary text) */
	--rh-ink-2:      rgba(46, 54, 66, 0.80);   /* Slate @ 80% — secondary text, AA-compliant */
	--rh-ink-3:      rgba(46, 54, 66, 0.60);   /* Slate @ 60% — tertiary text, AA-compliant */
	--rh-rule:       rgba(46, 54, 66, 0.10);   /* Slate @ 10% — borders */
	--rh-rule-soft:  rgba(46, 54, 66, 0.06);   /* Slate @ 6% — soft fills */

	--rh-r-xs: 0.25rem;
	--rh-r-sm: 0.5rem;
	--rh-r-md: 0.75rem;
	--rh-r-lg: 1rem;
	--rh-r-xl: 1.5rem;
	--rh-r-pill: 999px;

	/* Typography per the ADVISA Brand Standards Manual (page 17):
	     Prometo            primary font — headers, callouts, anything NOT body
	     Freight Macro Pro  body copy (PDF page 18 — Regular / Italic / Bold / Bold Italic)

	   Reality check:
	     - Prometo is in the Typekit kit (`ucl4aic`) at weights 300/400/700. Ready to use.
	     - Freight Macro Pro is in the kit but ONLY italic at 400/500/700 — upright
	       weights are missing and need someone with Adobe Fonts access at the client
	       to add them to the kit. Until then, body copy can't render in upright FMP.
	     - The rest of advisa.com renders body in `freight-sans-pro` at 18px (verified
	       by inspecting live body copy on advisa.com). Using freight-sans-pro for
	       body keeps the Resources Hub visually consistent with the surrounding site.

	   The brand PDF says body = Freight Macro Pro but the live site does not. We
	   match the live site for cross-page consistency and document the brand-PDF
	   deviation in the commit so the client can decide whether to update the PDF or
	   the site. */
	--rh-f-display: "prometo", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--rh-f-sans:    "freight-sans-pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--rh-f-ui:      "prometo", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--rh-f-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	background: var(--rh-cream);
	color: var(--rh-ink);
	font-family: var(--rh-f-sans);
	font-feature-settings: "ss01", "cv11";
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.resources-hub *,
.resources-hub *::before,
.resources-hub *::after {
	box-sizing: border-box;
}

/* Override site-wide theme h1-h4 color so the hub's display serif
   and link inheritance work. site.css colors headings teal/coral;
   inside the hub the title color is the ink token and link inheritance
   is restored by `a { color: inherit }` below. */
.resources-hub h1,
.resources-hub h2,
.resources-hub h3,
.resources-hub h4 {
	margin: 0;
	color: var(--rh-ink);
	letter-spacing: -0.01em;
}

.resources-hub p { margin: 0; }
.resources-hub a { color: inherit; text-decoration: none; }
.resources-hub button { font: inherit; cursor: pointer; }

/* The hub's accessibility-hidden text utility. site.css uses `.sr-only`
   already; this maps `.screen-reader-text` (WordPress core convention)
   to the same shape so `.screen-reader-text` and `.sr-only` are both
   visually hidden but reachable by AT. */
.resources-hub .screen-reader-text,
.resources-hub .sr-only {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.resources-hub .container {
	max-width: 80rem; /* 1280px at 16px root */
	margin: 0 auto;
	padding: 0 2rem;
	width: 100%;
}

/* -------- Shared chip (adv-chip mirrors the design's chip system) -------- */
.resources-hub .adv-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	height: 1.75rem;
	padding: 0 0.75rem;
	border-radius: var(--rh-r-pill);
	font-family: var(--rh-f-ui);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: var(--rh-rule-soft);
	color: var(--rh-ink-2);
}

/* Chip colors — option 2: variations on the brand palette.
   Seven content types in a four-color brand palette is a tight fit;
   we use color (Dark Teal / Arabesque / Turquoise / Slate) AND
   background opacity to differentiate while staying on-brand.
   See docs/runbooks/u10-hubspot-form-styling.md for the broader
   color reasoning; this mapping is the chip-level expression of it. */
.resources-hub .adv-chip[data-kind="article"]      { color: #005D64;             background: rgba(0, 93, 100, 0.10); }    /* Dark Teal — primary editorial */
.resources-hub .adv-chip[data-kind="news"]         { color: var(--rh-ink-2);     background: var(--rh-rule-soft); }       /* Slate — neutral / formal */
.resources-hub .adv-chip[data-kind="podcast"]      { color: #E14525;             background: rgba(225, 69, 37, 0.10); }   /* Arabesque — hot accent */
.resources-hub .adv-chip[data-kind="video"]        { color: #005D64;             background: rgba(68, 193, 192, 0.20); }  /* Turquoise bg with Dark Teal text — passes contrast */
.resources-hub .adv-chip[data-kind="webinar"]      { color: var(--rh-ink);       background: rgba(46, 54, 66, 0.12); }    /* Slate weighted heavier than news */
.resources-hub .adv-chip[data-kind="case-study"]   { color: #005D64;             background: rgba(0, 93, 100, 0.18); }    /* Dark Teal w/ heavier fill vs Article */
.resources-hub .adv-chip[data-kind="testimonial"]  { color: #E14525;             background: rgba(225, 69, 37, 0.06); }   /* Arabesque w/ lighter fill vs Podcast */

/* -------- Duotone photo fallback (port of tokens.css .adv-photo) -------- */
.resources-hub .adv-photo {
	position: relative;
	overflow: hidden;
	border-radius: var(--rh-r-md);
	background: #d8d2c8;
	isolation: isolate;
}

/* Duotone tones — restricted to brand colors. Amber and plum (previously
   invented off-brand colors) are remapped to their nearest brand cousins:
     amber → coral (Arabesque variations)
     plum  → navy  (Slate variations)
   so existing post-ID hash assignments still resolve to a valid tone. */
.resources-hub .adv-photo[data-tone="teal"]   { background: linear-gradient(135deg, #71CAC9 0%, #44C0C0 60%, #005D64 100%); } /* Aqua → Turquoise → Dark Teal */
.resources-hub .adv-photo[data-tone="coral"]  { background: linear-gradient(135deg, rgba(225, 69, 37, 0.45) 0%, #E14525 60%, #C0392B 100%); } /* Arabesque ramp */
.resources-hub .adv-photo[data-tone="navy"]   { background: linear-gradient(135deg, #4A5566 0%, #2E3642 60%, #1A1F26 100%); } /* Slate ramp */
.resources-hub .adv-photo[data-tone="cream"]  { background: linear-gradient(135deg, #F4F0EE 0%, #E6DDD3 60%, #CFC4B5 100%); } /* Mustlin ramp */
.resources-hub .adv-photo[data-tone="amber"]  { background: linear-gradient(135deg, rgba(225, 69, 37, 0.45) 0%, #E14525 60%, #C0392B 100%); } /* alias for coral */
.resources-hub .adv-photo[data-tone="plum"]   { background: linear-gradient(135deg, #4A5566 0%, #2E3642 60%, #1A1F26 100%); }  /* alias for navy */

.resources-hub .adv-photo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image:
		radial-gradient(circle at 22% 28%, rgba(255, 255, 255, 0.18), transparent 35%),
		radial-gradient(circle at 78% 72%, rgba(0, 0, 0, 0.22), transparent 40%);
	mix-blend-mode: overlay;
	pointer-events: none;
}

.resources-hub .adv-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
	opacity: 0.45;
	mix-blend-mode: overlay;
}

/* Real <img> renders above the duotone layers when present */
.resources-hub .adv-photo img {
	position: relative;
	z-index: 3;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ===========================================================================
 * Toolbar — search + category pills row above the feature block
 * =========================================================================== */
.resources-hub__toolbar-wrap {
	padding: 4rem 0 0;
}

.resources-hub__toolbar {
	display: flex;
	gap: 1rem;
	align-items: center;
	padding: 1.125rem 0;
	border-top: 1px solid var(--rh-rule);
	border-bottom: 1px solid var(--rh-rule);
	flex-wrap: wrap;
}

.resources-hub__toolbar-search {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	flex: 1;
	min-width: 17.5rem;
	padding: 0.75rem 1rem;
	background: var(--rh-paper);
	border-radius: var(--rh-r-pill);
	border: 1px solid var(--rh-rule-soft);
	color: var(--rh-ink-3);
	margin: 0;
}

.resources-hub__toolbar-search:focus-within {
	border-color: var(--rh-teal);
	color: var(--rh-ink);
}

.resources-hub__toolbar-search-icon {
	display: inline-flex;
	color: var(--rh-ink-3);
}

.resources-hub__toolbar-search input[type="search"] {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	outline: none;
	font: inherit;
	font-size: 0.90625rem;
	color: var(--rh-ink);
}

.resources-hub__toolbar-search input::placeholder {
	color: var(--rh-ink-3);
}

.resources-hub__toolbar-cats {
	display: flex;
	gap: 0.25rem;
	flex-wrap: wrap;
}

.resources-hub__toolbar-cat {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5625rem 0.875rem;
	border-radius: var(--rh-r-pill);
	font-family: var(--rh-f-ui);
	font-size: 0.84375rem;
	font-weight: 500;
	color: var(--rh-ink-2);
	transition: background 0.12s, color 0.12s;
}

.resources-hub__toolbar-cat:hover {
	background: var(--rh-rule-soft);
	color: var(--rh-ink);
}

.resources-hub__toolbar-cat.is-active {
	background: var(--rh-ink);
	color: var(--rh-cream);
}

.resources-hub__toolbar-count {
	font-size: 0.6875rem;
	opacity: 0.55;
	font-variant-numeric: tabular-nums;
	font-weight: 500;
}

.resources-hub__toolbar-cat.is-active .resources-hub__toolbar-count {
	opacity: 0.75;
}

/* -------- Coming-soon state (zero resources) -------- */
.resources-hub__coming-soon {
	padding: 4rem 2rem;
	text-align: center;
}

.resources-hub__coming-soon-message {
	font-family: var(--rh-f-display);
	font-size: 1.75rem;
	color: var(--rh-ink-2);
}

/* ===========================================================================
 * Feature block (page 1 only)
 * =========================================================================== */
/* Selector bumped to .resources-hub .resources-hub__feature-block so the
   padding wins over `.resources-hub .container { padding: 0 2rem }` — the
   feature-block element also carries the `container` class for max-width
   centering, and the container rule has higher specificity than a single
   class selector. */
.resources-hub .resources-hub__feature-block {
	padding: 2.5rem 2rem 0; /* gap between toolbar and feature card */
	margin-bottom: 2.5rem;  /* gap between feature card and body grid */
}

.resources-hub__feature-grid {
	display: grid;
	grid-template-columns: 1.55fr 1fr;
	gap: 1.75rem;
	background: var(--rh-paper);
	border: 1px solid var(--rh-rule);
	border-radius: var(--rh-r-xl);
	padding: 1.25rem;
}

.resources-hub__feature-article {
	display: flex;
	flex-direction: column;
	gap: 1.125rem;
	background: var(--rh-cream);
	border-radius: var(--rh-r-lg);
	padding: 1rem;
	margin: 0;
	position: relative;
	transition: background-color 0.18s ease;
}

.resources-hub__feature-title a {
	position: static;
}

.resources-hub__feature-title a::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--rh-r-lg);
	z-index: 1;
}

.resources-hub__feature-article:hover {
	background: var(--rh-cream-2);
}

/* Feature CTA + byline sit above the stretched link so they remain
   directly clickable / individually focusable. */
.resources-hub__feature-foot,
.resources-hub__feature-cta,
.resources-hub__feature-byline {
	position: relative;
	z-index: 2;
}

.resources-hub__feature-photo {
	width: 100%;
	aspect-ratio: 16 / 9;
	position: relative;
	border-radius: var(--rh-r-md);
}

.resources-hub__feature-tag {
	position: absolute;
	top: 0.875rem;
	left: 0.875rem;
	z-index: 3;
	background: rgba(255, 255, 255, 0.95);
	color: var(--rh-ink);
	padding: 0.3125rem 0.75rem;
	border-radius: var(--rh-r-pill);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 500;
}

.resources-hub__feature-body {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	padding: 0.25rem 0.5rem 0.5rem;
}

.resources-hub__feature-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-size: 0.8125rem;
	color: var(--rh-ink-3);
}

.resources-hub__feature-sep {
	opacity: 0.4;
}

.resources-hub__feature-topic,
.resources-hub__feature-eyebrow {
	font-size: 0.8125rem;
	color: var(--rh-ink-3);
}

.resources-hub__feature-title {
	font-family: var(--rh-f-display);
	font-size: 2.125rem;
	line-height: 1.08;
	font-weight: 400;
	letter-spacing: -0.015em;
}

.resources-hub__feature-title a:hover {
	color: var(--rh-teal-deep);
}

.resources-hub__feature-excerpt {
	font-size: 0.96875rem;
	line-height: 1.55;
	color: var(--rh-ink);
	text-wrap: pretty;
}

.resources-hub__feature-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding-top: 0.75rem;
	border-top: 1px solid var(--rh-rule);
	margin: 0;
}

.resources-hub__feature-byline {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.resources-hub__feature-avatar {
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	object-fit: cover;
}

.resources-hub__byline-name {
	font-size: 0.84375rem;
	font-weight: 500;
}

.resources-hub__byline-meta {
	font-size: 0.75rem;
	color: var(--rh-ink-3);
}

.resources-hub__feature-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 1.125rem;
	border-radius: var(--rh-r-pill);
	border: 1px solid var(--rh-rule);
	color: var(--rh-ink);
	font-size: 0.875rem;
	font-weight: 500;
	transition: background 0.15s, border-color 0.15s;
}

.resources-hub__feature-cta:hover {
	background: var(--rh-rule-soft);
	border-color: var(--rh-ink-3);
}

/* Right column inside the feature block */
.resources-hub__feature-side {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-width: 0;
}

.resources-hub__feature-side-newsletter:empty {
	display: none; /* suppress blank slot when newsletter component returns nothing */
}

/* ===========================================================================
 * Newsletter card ("The Spark")
 *
 * Two render paths share this skin:
 *  - configured: HubSpot form generated into `.resources-hub__newsletter-target`
 *  - unconfigured / failure: static `.resources-hub__newsletter-fallback` CTA
 *
 * The HubSpot overrides target `.hbspt-form` + `input`/`label`/button
 * selectors scoped inside `.resources-hub__newsletter-target` so the
 * styling never leaks to other HubSpot embeds elsewhere on the site.
 * =========================================================================== */
.resources-hub__newsletter {
	background: var(--rh-navy);
	color: #fff;
	border: 0;
	padding: 1.5rem;
	border-radius: var(--rh-r-lg);
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-height: 18rem; /* keeps the card visually balanced with the feature article when the form / bullets are short */
}

.resources-hub__newsletter-top {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.resources-hub__newsletter-mark {
	display: inline-block;
	font-size: 0.6875rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--rh-coral);
}

/* `.resources-hub h3` from the U6 cascade fix sets color: var(--rh-ink)
   (navy) — which becomes invisible on the navy newsletter card. Bumping
   specificity so the white color wins back. Same pattern needed for any
   other heading element that renders inside a dark-bg sub-component. */
.resources-hub__newsletter .resources-hub__newsletter-heading {
	font-family: var(--rh-f-display);
	font-size: 1.375rem;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0;
	color: #fff;
}

.resources-hub__newsletter-sub {
	font-size: 0.84375rem;
	color: rgba(255, 255, 255, 0.72);
	line-height: 1.45;
	margin: 0;
}

.resources-hub__newsletter-sub strong {
	color: #fff;
	font-weight: 600;
}

.resources-hub__newsletter-bullets {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	font-size: 0.84375rem;
	color: rgba(255, 255, 255, 0.78);
}

.resources-hub__newsletter-bullets li {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.resources-hub__newsletter-bullets li::before {
	content: "";
	flex: 0 0 auto;
	width: 0.375rem;
	height: 0.375rem;
	margin-top: 0.5rem;
	border-radius: 50%;
	background: var(--rh-coral);
}

.resources-hub__newsletter-target {
	min-height: 4rem;
}

.resources-hub__newsletter-loading {
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.5);
	padding: 0.875rem 0;
}

/* HubSpot "developer code" embed renders the form as inline DOM in the
   parent document (not iframed), so we can style fields, labels, button,
   etc. with normal CSS scoped to `.resources-hub__newsletter-target`.
   The `.hs-form-html` element is the slot HubSpot's script targets;
   everything below it is HubSpot-generated markup we re-skin. */

.resources-hub__newsletter-target {
	width: 100%;
	background: transparent;
}

/* ---------------------------------------------------------------------------
   Inline HubSpot form skin. HubSpot's BaseStyle uses selectors like
   `[data-hsfc-id=Renderer] .hsfc-Button` whose specificity is (0,2,0)
   (attribute selectors weigh the same as classes). They inject that
   `<style>` block into `document.head` at runtime AFTER our stylesheet
   loads, so any same-specificity rule of ours loses the cascade tie.
   We bump to (0,3,0) by chaining three classes ahead of each `.hsfc-X`:
   `.resources-hub__newsletter .resources-hub__newsletter-target .hsfc-X`
   wins without needing `!important` and stays scoped to this card.
   --------------------------------------------------------------------------- */

.resources-hub__newsletter .resources-hub__newsletter-target .hsfc-Form {
	background: transparent;
	font-family: var(--rh-f-sans);
}

/* HubSpot wraps each step in a "background box" with its own padding /
   border-width. The parent card already provides padding + radius, so
   collapse these layers down. */
.resources-hub__newsletter .resources-hub__newsletter-target .hsfc-Step {
	background: transparent;
	border: 0;
	padding: 0;
	border-radius: 0;
}

/* HubSpot targets this element with `[data-hsfc-id=Renderer] .hsfc-Step
   .hsfc-Step__Content` — specificity (0,3,0). We chain `.hsfc-Step` so
   ours becomes (0,4,0) and wins the cascade without `!important`. */
/* Flex column so we can use `order` to swap the visual position of the
   submit button and the privacy notice without touching HubSpot's DOM
   (which we don't control). Source order stays "fields → privacy →
   submit" — the conservative "inform before action" arrangement screen
   readers will hear — but sighted users see the button immediately
   after the fields, with the legal fine print tucked below. */
.resources-hub__newsletter .resources-hub__newsletter-target .hsfc-Step .hsfc-Step__Content {
	padding: 10px;
	display: flex;
	flex-direction: column;
}

.resources-hub__newsletter .resources-hub__newsletter-target .hsfc-Row {
	margin-bottom: 0.625rem; /* HubSpot default is 20px; tighter fits the card */
}

/* HubSpot's labels are empty (`<label><span></span></label>`) because
   the Form Builder uses placeholders as visible labels. Visually hide
   them but keep them in the AT tree so screen readers still get the
   `aria-labelledby` linkage. If the editor sets real labels later,
   delete this rule. */
.resources-hub__newsletter .resources-hub__newsletter-target .hsfc-FieldLabel {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.resources-hub__newsletter .resources-hub__newsletter-target .hsfc-TextInput,
.resources-hub__newsletter .resources-hub__newsletter-target .hsfc-TextareaInput {
	background-color: rgba(255, 255, 255, 0.10);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--rh-r-md);
	color: #fff;
	font-family: var(--rh-f-sans);
	font-size: 0.9375rem;
	padding: 0.5rem 0.875rem; /* tighter vertical for compact card layout — bump back to 0.75rem if hit targets feel cramped */
}

.resources-hub__newsletter .resources-hub__newsletter-target .hsfc-TextInput::placeholder,
.resources-hub__newsletter .resources-hub__newsletter-target .hsfc-TextareaInput::placeholder {
	color: rgba(255, 255, 255, 0.55);
	opacity: 1; /* Firefox lowers placeholder opacity by default */
}

.resources-hub__newsletter .resources-hub__newsletter-target .hsfc-TextInput:focus,
.resources-hub__newsletter .resources-hub__newsletter-target .hsfc-TextareaInput:focus {
	outline: 2px solid var(--rh-coral);
	outline-offset: 2px;
	background-color: rgba(255, 255, 255, 0.14);
	box-shadow: none;
}

/* Chrome autofills the email field (and any other field matching its
   saved-profile data) with its own opaque background + black text via
   `!important` user-agent rules. Direct `background-color` can't override
   that, but `box-shadow: 0 0 0 1000px <color> inset` paints over Chrome's
   autofill fill since Chrome doesn't `!important` the shadow. Pair with
   `-webkit-text-fill-color` to keep our white text white instead of the
   black autofill default. `caret-color` keeps the cursor visible. */
.resources-hub__newsletter .resources-hub__newsletter-target .hsfc-TextInput:-webkit-autofill,
.resources-hub__newsletter .resources-hub__newsletter-target .hsfc-TextInput:-webkit-autofill:hover,
.resources-hub__newsletter .resources-hub__newsletter-target .hsfc-TextInput:-webkit-autofill:focus,
.resources-hub__newsletter .resources-hub__newsletter-target .hsfc-TextInput:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 1000px rgb(67, 73, 83) inset !important; /* matches translucent-white-on-navy at the autofilled state — pure rgba won't work because the underlying autofill fill bleeds through */
	-webkit-text-fill-color: #fff !important;
	caret-color: #fff;
	transition: background-color 9999s ease-in-out 0s; /* delays Chrome's autofill animation so the shadow paints first */
}

.resources-hub__newsletter .resources-hub__newsletter-target .hsfc-Button {
	background-color: var(--rh-coral);
	background-image: none;
	color: #fff;
	border: 0;
	border-radius: var(--rh-r-md);
	font-family: var(--rh-f-ui);
	font-size: 1rem;
	font-weight: 700;
	padding: 0.75rem 1.5rem;
	box-shadow: none;
	cursor: pointer;
	width: 100%; /* stretch full width inside the narrow card */
}

.resources-hub__newsletter .resources-hub__newsletter-target .hsfc-Button:not([disabled]):hover,
.resources-hub__newsletter .resources-hub__newsletter-target .hsfc-Button:not([disabled]):focus {
	background-color: var(--rh-red);
	color: #fff;
	transform: none; /* HubSpot's translateY hover bump looks wrong inside a card */
}

.resources-hub__newsletter .resources-hub__newsletter-target .hsfc-NavigationRow {
	margin-top: 0;
	order: 1; /* submit button moves above the privacy text */
}

/* HubSpot's default 20px bottom margin on the empty alerts div pushes
   the button down even when there's no error to display. Zero it; when
   the div fills with actual error content, the error element's own
   styling (font-size, line-height) supplies enough visual separation. */
.resources-hub__newsletter .resources-hub__newsletter-target .hsfc-NavigationRow__Alerts {
	margin-bottom: 0;
}

/* Privacy notice moves below the button. `:has()` lets us target only
   the privacy-containing row, not the hidden lead-source rows below it. */
.resources-hub__newsletter .resources-hub__newsletter-target .hsfc-Row:has(> .hsfc-DataPrivacyField) {
	margin-top: 0.625rem; /* breathing room between button and fine print */
	margin-bottom: 0;
	order: 2;
}

.resources-hub__newsletter .resources-hub__newsletter-target .hsfc-NavigationRow__Buttons {
	justify-content: stretch;
}

/* Privacy notice text. HubSpot hardcodes inline `font-size: 14px;
   color: #cccccc` on the inner <span> and `color: #cccccc` on the
   <a> — those win normal cascade. The only override path is
   `!important`, which we use sparingly here to (a) shrink the text
   to a "fine print" size and (b) make the link visibly Arabesque
   so it reads as a link rather than blending into the body copy. */
.resources-hub__newsletter .resources-hub__newsletter-target .hsfc-RichText {
	color: rgba(255, 255, 255, 0.7);
	font-family: var(--rh-f-sans);
	font-size: 0.6875rem; /* 11px — tiny but still legible at body line-height */
	line-height: 1.4;
}

.resources-hub__newsletter .resources-hub__newsletter-target .hsfc-RichText span {
	font-size: 0.6875rem !important; /* override inline `font-size: 14px` */
	color: rgba(255, 255, 255, 0.7) !important; /* override inline `#cccccc` so the body text inherits our token */
}

.resources-hub__newsletter .resources-hub__newsletter-target .hsfc-RichText a {
	color: var(--rh-coral) !important; /* Arabesque — distinct from body, signals link */
	text-decoration: underline;
	text-underline-offset: 2px;
}

.resources-hub__newsletter .resources-hub__newsletter-target .hsfc-RichText a:hover,
.resources-hub__newsletter .resources-hub__newsletter-target .hsfc-RichText a:focus {
	color: var(--rh-red) !important; /* deeper Arabesque on interaction */
}

.resources-hub__newsletter .resources-hub__newsletter-target .hsfc-DataPrivacyField {
	margin-top: 0.25rem;
}

.resources-hub__newsletter .resources-hub__newsletter-target .hsfc-ErrorAlert {
	color: var(--rh-coral);
	font-family: var(--rh-f-sans);
	font-size: 0.75rem;
	margin-top: 0.25rem;
}

/* Static fallback CTA — shown when the form fails to load OR when no
   form ID is configured at all. `margin-top: auto` bottom-anchors it
   inside the flex-column newsletter card so the button always sits
   at the foot regardless of how much content is above. */
.resources-hub__newsletter-fallback {
	display: inline-flex;
	align-self: stretch;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem;
	border-radius: var(--rh-r-pill);
	background: var(--rh-coral);
	color: #fff;
	font-weight: 500;
	font-size: 0.9375rem;
	margin-top: auto;
	transition: background 0.15s;
}

/* The `[hidden]` HTML attribute on the fallback element should suppress
   it visually until the JS times out and flips it on. Our class
   selector's `display: inline-flex` was beating the user-agent
   `[hidden] { display: none }` rule — making the fallback render
   alongside a successful HubSpot embed. Explicit override fixes it. */
.resources-hub__newsletter-fallback[hidden] {
	display: none;
}

.resources-hub__newsletter-fallback:hover {
	background: var(--rh-red);
	color: #fff;
}

.resources-hub__newsletter-admin-notice {
	margin: 0;
	font-size: 0.6875rem;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.5);
	font-style: italic;
}

.resources-hub__newsletter-admin-notice a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.resources-hub__feature-side-recent {
	background: var(--rh-cream);
	border: 1px solid var(--rh-rule);
	border-radius: var(--rh-r-lg);
	padding: 1.125rem;
}

.resources-hub__recent-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.75rem;
}

.resources-hub__recent-title {
	font-family: var(--rh-f-ui);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: -0.005em;
}

.resources-hub__recent-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.resources-hub__recent-item {
	display: grid;
	grid-template-columns: 1.625rem 1fr;
	gap: 0.5rem;
	align-items: start;
}

.resources-hub__recent-num {
	font-family: var(--rh-f-mono);
	font-size: 0.6875rem;
	color: var(--rh-ink-3);
	padding-top: 0.125rem;
}

.resources-hub__recent-body {
	min-width: 0;
}

.resources-hub__recent-cat {
	font-family: var(--rh-f-ui);
	font-size: 0.625rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rh-ink-3);
	margin-bottom: 0.1875rem;
}

.resources-hub__recent-link {
	font-size: 0.8125rem;
	line-height: 1.35;
	font-weight: 500;
	color: var(--rh-ink);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.resources-hub__recent-link:hover {
	color: var(--rh-teal-deep);
}

/* ===========================================================================
 * Body — sidebar + grid
 * =========================================================================== */
/* Same specificity bump as feature-block — `.container` wins over a
   single class. */
.resources-hub .resources-hub__body {
	display: grid;
	grid-template-columns: 17.5rem 1fr; /* 280px sidebar at 16px root */
	gap: 3rem;
	padding: 2.5rem 2rem 3.5rem; /* top: gap from feature card; bottom: gap before site footer */
	align-items: start;
}

.resources-hub__sidebar {
	position: sticky;
	top: 1.5rem;
	align-self: start;
}

.resources-hub__sidebar-sticky {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.resources-hub__sidebar-card {
	background: var(--rh-paper);
	border: 1px solid var(--rh-rule);
	border-radius: var(--rh-r-lg);
	padding: 1.125rem;
}

.resources-hub__sidebar-label {
	display: block;
	font-family: var(--rh-f-ui);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--rh-ink-3);
	margin-bottom: 0.625rem;
}

/* Active-filter indicator — shows above the sidebar search input when
   any type / topic / series filter is active, so visitors understand
   the search input is scoped. Server-rendered for initial page load,
   then synced client-side from `syncActiveFilterIndicator()` in
   resources-hub.js when filters change via AJAX. */
.resources-hub__active-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem 0.5rem;
	align-items: baseline;
	padding: 0.5rem 0.75rem;
	margin-bottom: 0.625rem;
	background: var(--rh-cream);
	border-radius: var(--rh-r-sm);
	font-size: 0.78125rem;
	color: var(--rh-ink-2);
}

.resources-hub__active-filters[hidden] {
	display: none;
}

.resources-hub__active-filters-label {
	font-weight: 500;
	color: var(--rh-ink-2);
}

.resources-hub__active-filters-list {
	color: var(--rh-ink);
	font-weight: 600;
}

.resources-hub__active-filters-clear {
	margin-left: auto;
	color: var(--rh-teal-deep);
	text-decoration: underline;
	font-size: 0.75rem;
}

.resources-hub__active-filters-clear:hover {
	color: var(--rh-ink);
}

/* Sidebar search */
.resources-hub__sidebar-search {
	margin: 0;
}

.resources-hub__sidebar-search input[type="search"] {
	width: 100%;
	padding: 0.625rem 0.875rem;
	background: var(--rh-cream);
	border: 1px solid var(--rh-rule);
	border-radius: var(--rh-r-pill);
	color: var(--rh-ink);
	font: inherit;
	font-size: 0.84375rem;
	outline: none;
}

.resources-hub__sidebar-search input::placeholder {
	color: var(--rh-ink-3);
}

.resources-hub__sidebar-search input:focus {
	border-color: var(--rh-teal);
}

/* Type filter list */
.resources-hub__type-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	max-height: 22rem;
	overflow-y: auto;
}

.resources-hub__type-link {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5rem 0.625rem;
	border-radius: var(--rh-r-sm);
	font-size: 0.84375rem;
	color: var(--rh-ink-2);
	transition: background 0.12s, color 0.12s;
}

.resources-hub__type-link:hover {
	background: var(--rh-cream);
	color: var(--rh-ink);
}

.resources-hub__type-link.is-active {
	background: var(--rh-ink);
	color: var(--rh-cream);
	font-weight: 500;
}

.resources-hub__type-count {
	font-size: 0.6875rem;
	opacity: 0.55;
	font-variant-numeric: tabular-nums;
}

.resources-hub__type-link.is-active .resources-hub__type-count {
	opacity: 0.75;
}

/* Topic cloud */
.resources-hub__topic-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}

.resources-hub__topic-tag {
	padding: 0.375rem 0.75rem;
	border-radius: var(--rh-r-pill);
	font-size: 0.78125rem;
	color: var(--rh-ink-2);
	border: 1px solid var(--rh-rule);
	transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.resources-hub__topic-tag:hover {
	background: var(--rh-cream);
	color: var(--rh-ink);
	border-color: var(--rh-ink-3);
}

.resources-hub__topic-tag.is-active {
	background: var(--rh-ink);
	color: var(--rh-cream);
	border-color: var(--rh-ink);
}

.resources-hub__topic-view-all {
	display: inline-block;
	margin-top: 0.75rem;
	font-size: 0.75rem;
	color: var(--rh-teal);
}

.resources-hub__topic-view-all:hover {
	color: var(--rh-teal-deep);
}

/* ===========================================================================
 * Main grid column
 * =========================================================================== */
.resources-hub__main {
	min-width: 0;
}

.resources-hub__grid-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--rh-rule);
	margin-bottom: 2.25rem;
}

.resources-hub__grid-title {
	font-family: var(--rh-f-ui);
	font-size: 1.125rem;
	font-weight: 600;
	flex: 1 1 auto;
}

.resources-hub__grid-controls {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
}

.resources-hub__sort {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
}

.resources-hub__sort select {
	font: inherit;
	font-size: 0.84375rem;
	padding: 0.5rem 1.75rem 0.5rem 0.75rem;
	border-radius: var(--rh-r-sm);
	border: 1px solid var(--rh-rule);
	background-color: var(--rh-paper);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%2315212B' stroke-width='1.5'/></svg>");
	background-repeat: no-repeat;
	background-position: right 0.625rem center;
	color: var(--rh-ink);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

.resources-hub__view-toggle {
	display: inline-flex;
	gap: 0.25rem;
	padding: 0.25rem;
	background: var(--rh-paper);
	border-radius: var(--rh-r-sm);
	border: 1px solid var(--rh-rule);
}

.resources-hub__view-toggle-button {
	width: 1.875rem;
	height: 1.75rem;
	border-radius: 0.3125rem;
	color: var(--rh-ink-3);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.875rem;
	line-height: 1;
}

.resources-hub__view-toggle-button.is-active {
	background: var(--rh-cream);
	color: var(--rh-ink);
}

/* Grid layout */
.resources-hub__grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 1.75rem 1.5rem;
}

.resources-hub__grid[data-view="list"] {
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

/* ===========================================================================
 * Resource card
 * =========================================================================== */
.resource-card {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	margin: 0;
	position: relative;
	padding: 0.75rem;
	border-radius: var(--rh-r-lg);
	transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/* Stretched link: the title link covers the entire card surface so the
   media, meta, title, and body row all link to the post. Inner footer
   links (none today) would need z-index: 1 to sit above. */
.resource-card__title-link::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--rh-r-lg);
	z-index: 1;
}

.resource-card:hover {
	background: rgba(21, 33, 43, 0.08);
	box-shadow: 0 6px 18px rgba(21, 33, 43, 0.08);
	transform: translateY(-2px);
}

.resource-card:hover .resource-card__media {
	transform: translateY(-3px);
}

.resource-card__media {
	aspect-ratio: 16 / 9;
	width: 100%;
	border-radius: var(--rh-r-md);
	transition: transform 0.18s ease;
}

.resource-card__image {
	/* `get_the_post_thumbnail()` emits an <img> with natural width/height
	   attributes (up to 1024px for the 'large' size). Without sizing CSS,
	   the image renders at natural width and pushes the card past the
	   viewport on narrow screens — iOS Safari surfaces this where Chrome
	   DevTools mobile emulation forgives it. width/height + object-fit
	   pins the image to its 16:9 `.resource-card__media` container. */
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--rh-r-md);
}

/* Media play / headphones overlay — bottom-right of the photo,
   shown for podcast / video / webinar only. */
.resources-hub .resource-card__play-icon {
	position: absolute;
	bottom: 0.75rem;
	right: 0.75rem;
	z-index: 4;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.95);
	color: var(--rh-ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

.resources-hub__feature-photo .resource-card__play-icon {
	width: 2.75rem;
	height: 2.75rem;
}

.resource-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.resource-card__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-size: 0.75rem;
	color: var(--rh-ink-3);
}

.resource-card__topic {
	font-size: 0.75rem;
	color: var(--rh-ink-3);
	/* Client request: hide the topic label next to the type chip for now.
	   Kept as CSS-only (instead of removing the <span> from the template)
	   so we can flip it back without a redeploy if the client changes
	   their mind. Data and taxonomy assignments are unaffected. */
	display: none;
}

.resource-card__eyebrow {
	font-family: var(--rh-f-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--rh-ink-3);
}

.resource-card__title {
	font-family: var(--rh-f-display);
	font-size: 1.3125rem;
	line-height: 1.18;
	font-weight: 400;
	letter-spacing: -0.005em;
}

.resource-card__title-link {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.resource-card__title-link:hover {
	color: var(--rh-teal-deep);
}

.resource-card__excerpt {
	font-size: 0.84375rem;
	line-height: 1.5;
	color: var(--rh-ink);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.resource-card__foot {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.375rem;
	font-size: 0.78125rem;
	color: var(--rh-ink-3);
	margin-top: 0.125rem;
}

.resource-card__byline-name {
	font-size: 0.78125rem;
	color: var(--rh-ink-3);
}

.resource-card__time::before {
	content: "·";
	margin-right: 0.375rem;
	opacity: 0.5;
}

/* List view variant */
.resources-hub__grid[data-view="list"] .resource-card {
	display: grid;
	grid-template-columns: 12rem 1fr;
	gap: 1.5rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--rh-rule);
}

.resources-hub__grid[data-view="list"] .resource-card:last-child {
	border-bottom: 0;
}

.resources-hub__grid[data-view="list"] .resource-card__title {
	font-size: 1.5rem;
}

/* ===========================================================================
 * Pagination
 * =========================================================================== */
.resources-hub__pagination {
	margin-top: 3rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
}

.resources-hub__pagination ul {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.375rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.resources-hub__pagination li {
	display: inline-flex;
}

.resources-hub__pagination a,
.resources-hub__pagination > ul > li > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border-radius: 50%;
	font-size: 1rem;
	line-height: 1;
	color: var(--rh-ink-2);
	background: transparent;
	font-variant-numeric: tabular-nums;
	border: 1px solid transparent;
	box-sizing: border-box;
}

.resources-hub__pagination a:hover {
	background: var(--rh-rule-soft);
	color: var(--rh-ink);
}

.resources-hub__pagination .current {
	background: var(--rh-ink);
	color: var(--rh-cream);
	border-color: var(--rh-ink);
	font-weight: 500;
}

.resources-hub__pagination .dots {
	color: var(--rh-ink-3);
	border-color: transparent !important;
	background: transparent !important;
}

.resources-hub__pagination a.prev,
.resources-hub__pagination a.next {
	font-size: 1.25rem;
	color: var(--rh-ink-3);
}

.resources-hub__pagination a.prev:hover,
.resources-hub__pagination a.next:hover {
	color: var(--rh-ink);
}

.resources-hub__pagination-meta {
	font-size: 0.875rem;
	color: var(--rh-ink-3);
	margin: 0;
	text-align: center;
}

/* ===========================================================================
 * Empty state
 * =========================================================================== */
.resources-hub__empty-state {
	padding: 3rem 1.5rem;
	text-align: center;
	background: var(--rh-paper);
	border: 1px dashed var(--rh-rule);
	border-radius: var(--rh-r-lg);
}

.resources-hub__empty-state-message {
	font-family: var(--rh-f-display);
	font-size: 1.375rem;
	line-height: 1.3;
	color: var(--rh-ink);
	margin-bottom: 1rem;
}

/* Uses Dark Teal (not Turquoise) so white text passes WCAG AAA contrast.
   Turquoise + white = ~1.6:1, a hard fail. Hover state lifts to Slate.

   Selector chains `.resources-hub` ahead of `.resources-hub__empty-state-clear`
   to reach specificity (0,2,0). Otherwise the theme's
   `.resources-hub a { color: inherit }` at (0,1,1) wins the cascade and
   makes the link inherit the empty-state-message's dark ink color
   instead of staying white — the "dark text on dark button" bug. */
.resources-hub .resources-hub__empty-state-clear {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.625rem 1.25rem;
	border-radius: var(--rh-r-pill);
	background: var(--rh-teal-deep);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 500;
	transition: background 0.15s;
}

.resources-hub .resources-hub__empty-state-clear:hover {
	background: var(--rh-ink);
	color: #fff;
}

/* ===========================================================================
 * AJAX loading state
 * =========================================================================== */
.resources-hub__grid-wrapper {
	min-height: 8rem;
	position: relative;
	transition: opacity 0.15s ease;
}

.resources-hub__grid-wrapper.is-loading {
	opacity: 0.5;
	pointer-events: none;
}

/* ===========================================================================
 * Filter drawer (tablet/mobile)
 *
 * Hidden by default; the .is-open class (added by MicroModal or the JS
 * fallback) reveals the overlay + slide-in panel. Above 1280px the
 * trigger button + drawer are hidden entirely — the sidebar is visible
 * and serves the filter role.
 * =========================================================================== */
.resources-hub__filters-trigger {
	display: none;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 1rem;
	border-radius: var(--rh-r-pill);
	background: var(--rh-paper);
	border: 1px solid var(--rh-rule);
	color: var(--rh-ink-2);
	font-size: 0.84375rem;
	font-weight: 500;
	margin-bottom: 1rem;
	cursor: pointer;
	transition: background 0.15s;
}

.resources-hub__filters-trigger:hover {
	background: var(--rh-cream);
	color: var(--rh-ink);
}

.resources-hub__drawer {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 1000;
}

.resources-hub__drawer.is-open,
.resources-hub__drawer[aria-hidden="false"] {
	display: block;
}

.resources-hub__drawer-overlay {
	position: absolute;
	inset: 0;
	background: rgba(21, 33, 43, 0.55);
	animation: rhDrawerFade 0.15s ease;
}

.resources-hub__drawer-container {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: min(22rem, 86vw);
	background: var(--rh-cream);
	display: flex;
	flex-direction: column;
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
	animation: rhDrawerSlide 0.2s ease;
}

@keyframes rhDrawerSlide {
	from { transform: translateX(-100%); }
	to   { transform: translateX(0); }
}

@keyframes rhDrawerFade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.resources-hub__drawer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.125rem 1.25rem;
	border-bottom: 1px solid var(--rh-rule);
}

.resources-hub__drawer-title {
	font-family: var(--rh-f-ui);
	font-size: 1rem;
	font-weight: 600;
	margin: 0;
}

.resources-hub__drawer-close {
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: transparent;
	border: 0;
	color: var(--rh-ink-2);
	font-size: 1.5rem;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.resources-hub__drawer-close:hover {
	background: var(--rh-rule-soft);
	color: var(--rh-ink);
}

.resources-hub__drawer-body {
	flex: 1;
	overflow-y: auto;
	padding: 1rem 1.25rem;
}

/* Inside the drawer, the sidebar's sticky behavior is no longer
   appropriate (it's already in a scroll container) and the cards
   should fill width. */
.resources-hub__drawer .resources-hub__sidebar {
	position: static;
	display: block;
}

.resources-hub__drawer .resources-hub__sidebar-sticky {
	gap: 1.25rem;
}

.resources-hub__drawer-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	border-top: 1px solid var(--rh-rule);
}

.resources-hub__drawer-clear {
	font-size: 0.84375rem;
	color: var(--rh-ink-3);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.resources-hub__drawer-clear:hover {
	color: var(--rh-ink);
}

.resources-hub__drawer-apply {
	padding: 0.625rem 1.25rem;
	border-radius: var(--rh-r-pill);
	background: var(--rh-ink);
	color: var(--rh-cream);
	border: 0;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
}

.resources-hub__drawer-apply:hover {
	background: var(--rh-teal-deep);
}

/* ===========================================================================
 * Responsive
 * =========================================================================== */

/* Tablet & narrow desktop: drop the sidebar, 2-up grid.
   Note: rules that target elements with a higher-specificity base
   selector (`.resources-hub .resources-hub__body`,
   `.resources-hub .resources-hub__feature-block`) must repeat the
   `.resources-hub` ancestor inside the media query — otherwise the
   single-class selector loses the cascade and the desktop values
   apply on mobile. */
@media (max-width: 79.9375rem) { /* 1279px */
	.resources-hub .resources-hub__body {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.resources-hub__sidebar {
		/* Sidebar collapses; the off-canvas filter drawer takes over
		   via the .resources-hub__filters-trigger button below. */
		display: none;
	}

	.resources-hub__filters-trigger {
		display: inline-flex;
	}

	.resources-hub__grid {
		grid-template-columns: 1fr 1fr;
	}

	.resources-hub .resources-hub__feature-block {
		padding: 2rem 2rem 0;
	}
}

/* Mobile */
@media (max-width: 56.1875rem) { /* 899px */
	.resources-hub .container {
		padding: 0 1.25rem;
	}

	.resources-hub__toolbar-wrap {
		padding-top: 1rem;
	}

	.resources-hub__toolbar {
		padding: 0.875rem 0;
		gap: 0.75rem;
	}

	.resources-hub__toolbar-search {
		min-width: 0;
		padding: 0.625rem 0.875rem;
	}

	.resources-hub__toolbar-cats {
		gap: 0.25rem;
		overflow-x: auto;
		flex-wrap: nowrap;
		max-width: 100%;
		padding-bottom: 0.25rem;
		-webkit-overflow-scrolling: touch;
	}

	.resources-hub__toolbar-cat {
		flex: none;
		padding: 0.4375rem 0.75rem;
		font-size: 0.78125rem;
		white-space: nowrap;
	}

	.resources-hub .resources-hub__feature-block {
		/* More breathing room between toolbar and feature card on mobile */
		padding: 2.5rem 1.25rem 0;
		margin-bottom: 2.5rem;
	}

	.resources-hub__feature-grid {
		grid-template-columns: 1fr;
		padding: 0.875rem;
		gap: 0.875rem;
	}

	.resources-hub__feature-article {
		padding: 0.75rem;
	}

	.resources-hub__feature-title {
		font-size: 1.5rem;
	}

	.resources-hub__feature-foot {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
	}

	.resources-hub__feature-cta {
		align-self: stretch;
		justify-content: center;
	}

	.resources-hub .resources-hub__body {
		/* More breathing room between cards and the site footer on mobile */
		padding: 2rem 1.25rem 4rem;
		gap: 2rem;
	}

	.resources-hub__grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.resources-hub__grid-head {
		gap: 0.75rem;
	}

	.resources-hub__grid-title {
		flex: 1 1 100%;
	}

	.resources-hub__grid[data-view="list"] .resource-card {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}
}

/* ===========================================================================
 * Reduced motion + focus
 * =========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.resources-hub *,
	.resources-hub *::before,
	.resources-hub *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

.resources-hub a:focus-visible,
.resources-hub button:focus-visible,
.resources-hub input:focus-visible,
.resources-hub select:focus-visible {
	outline: 2px solid var(--rh-teal);
	outline-offset: 2px;
}