/* ==================================================================
 * KNOWLEDGE BASE — article templates (single-resource.php) and the hub
 * upgrades (hero photo, guide cards, image tiles).
 * Loaded on resource singles and kb_topic / resource archives only
 * (inc/kb.php). Uses the global --rr-* tokens from style.css.
 * No sticky elements anywhere in here.
 * ================================================================== */

.rr-kb, .rr-kb *, .rr-kb *::before, .rr-kb *::after { box-sizing: border-box; }
.rr-kb img { max-width: 100%; height: auto; }
.rr-kb h1, .rr-kb h2, .rr-kb h3 { margin: 0; }

/* ---- shared small parts ------------------------------------------------ */
.rr-kb-label {
	margin: 0; font-family: var(--rr-font-body); font-weight: 600; font-size: 0.75rem;
	letter-spacing: 1.5px; text-transform: uppercase; color: var(--rr-slate-500);
}
.rr-kb-h1 {
	font-family: var(--rr-font-head); font-weight: 700; font-size: 52px; line-height: var(--rr-lh-tight);
	letter-spacing: -0.02em; text-wrap: balance;
}
.rr-kb-lead { margin: 20px 0 0; max-width: 760px; font-size: var(--rr-text-lead); line-height: var(--rr-lh-body); }
.rr-kb-meta { margin: 18px 0 0; font-size: var(--rr-text-small); letter-spacing: .01em; }

/* ---- breadcrumbs -------------------------------------------------------- */
.rr-kb-crumbs { margin-bottom: 28px; }
.rr-kb-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: var(--rr-text-small); }
.rr-kb-crumbs li { display: inline-flex; align-items: center; }
.rr-kb-crumbs li + li::before { content: "/"; margin: 0 10px; opacity: .45; }
.rr-kb-crumbs a { text-decoration: none; border-radius: 3px; }
.rr-kb-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- heroes ------------------------------------------------------------- */
.rr-kb-hero { padding: clamp(36px, 5vw, 64px) 32px 0; }
.rr-kb-hero--dark h1 { color: var(--rr-white); }
.rr-kb-hero--dark .rr-kb-crumbs a { color: var(--rr-grey-300); }
.rr-kb-hero--dark .rr-kb-crumbs a:hover { color: var(--rr-white); }
.rr-kb-hero--dark .rr-hub-eyebrow { margin: 0; }
.rr-kb-hero--dark .rr-kb-h1 { margin-top: 18px; }
.rr-kb-hero--dark .rr-kb-lead { color: var(--rr-grey-200); }
.rr-kb-hero--dark .rr-kb-meta { color: var(--rr-grey-400); }

.rr-kb-hero__fig { margin: 40px 0 0; overflow: hidden; background: var(--rr-slate-900); }
.rr-kb-hero__fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rr-kb-hero__fig--169 { aspect-ratio: 16 / 9; border-radius: var(--rr-radius-xl) var(--rr-radius-xl) 0 0; }

.rr-kb-hero--light { background: var(--rr-grey-50); border-bottom: 1px solid var(--rr-grey-200); color: var(--rr-slate); padding-bottom: clamp(36px, 5vw, 64px); }
.rr-kb-hero--light h1 { color: var(--rr-slate); }
.rr-kb-hero--light .rr-kb-crumbs a { color: var(--rr-slate-500); }
.rr-kb-hero--light .rr-kb-crumbs a:hover { color: var(--rr-slate); }
.rr-kb-hero--light .rr-kb-lead { color: var(--rr-slate-600); }
.rr-kb-hero--light .rr-kb-meta { color: var(--rr-grey-500); }
.rr-kb-phero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 56px; align-items: center; }
.rr-kb-phero .rr-kb-hero__fig { margin: 0; }
.rr-kb-hero__fig--43 { aspect-ratio: 4 / 3; border-radius: var(--rr-radius-xl); background: var(--rr-grey-200); }

.rr-kb-pill {
	display: inline-block; max-width: 100%; margin-bottom: 18px; padding: 8px 16px; border-radius: var(--rr-radius-full);
	background: var(--rr-white); border: 1px solid var(--rr-grey-200); color: var(--rr-slate);
	font-size: var(--rr-text-small); font-weight: 600; text-decoration: none; overflow-wrap: anywhere;
}
a.rr-kb-pill:hover { border-color: #C3D94F; }
.rr-kb-label--part { color: var(--rr-slate); }
.rr-kb-prog { display: flex; gap: 6px; margin: 10px 0 22px; max-width: 260px; }
.rr-kb-prog span { flex: 1; height: 6px; border-radius: 3px; background: var(--rr-grey-300); }
.rr-kb-prog span.is-on { background: var(--rr-slate); }
.rr-kb-phero .rr-kb-h1 { font-size: 44px; }

/* ---- two-column body ----------------------------------------------------- */
.rr-kb-body { background: var(--rr-white); color: var(--rr-slate); padding: clamp(40px, 6vw, 80px) 32px; }
.rr-kb-cols { display: grid; grid-template-columns: 280px minmax(0, 1fr); grid-template-areas: "aside main"; gap: 56px; align-items: start; }
.rr-kb-cols--part { grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "main aside"; }
.rr-kb-main { grid-area: main; min-width: 0; }
.rr-kb-aside { grid-area: aside; min-width: 0; display: grid; gap: 24px; }
.rr-kb-main > .rr-kb-prose { max-width: 760px; }
.rr-kb-cols--part .rr-kb-main > * { max-width: 740px; }

.rr-kb-toc, .rr-kb-series { border: 1px solid var(--rr-grey-200); border-radius: var(--rr-radius-lg); padding: 22px 22px 20px; background: var(--rr-white); }
.rr-kb-series--card { background: var(--rr-grey-50); }
.rr-kb-toc ol, .rr-kb-series__list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.rr-kb-toc ol { counter-reset: toc; }
.rr-kb-toc li { counter-increment: toc; display: grid; grid-template-columns: 22px 1fr; gap: 6px; font-size: 0.9375rem; line-height: 1.4; }
.rr-kb-toc li::before { content: counter(toc) "."; color: var(--rr-grey-500); font-variant-numeric: tabular-nums; }
.rr-kb-toc a, .rr-kb-series a { color: var(--rr-slate); text-decoration: none; border-radius: 3px; overflow-wrap: anywhere; }
.rr-kb-toc a:hover, .rr-kb-series a:hover { text-decoration: underline; text-decoration-color: var(--rr-lime-600); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.rr-kb-series__list li { display: grid; gap: 2px; padding-left: 12px; border-left: 3px solid transparent; font-size: 0.9375rem; line-height: 1.4; }
.rr-kb-series__list li.is-current { border-left-color: var(--rr-slate); }
.rr-kb-series__n { font-size: 0.75rem; letter-spacing: .04em; color: var(--rr-grey-500); font-weight: 600; }
.rr-kb-series__t { color: var(--rr-slate-600); }
.rr-kb-series__list li.is-current .rr-kb-series__t { color: var(--rr-slate); font-weight: 600; }

.rr-kb-topic {
	display: grid; gap: 10px; padding: 24px 24px 22px; text-decoration: none;
	background: var(--rr-slate-950); color: var(--rr-white); border-radius: var(--rr-radius-lg);
	border: 1px solid var(--rr-slate-700); border-left: 3px solid var(--rr-lime); align-content: start;
	transition: border-color .18s ease;
}
.rr-kb-topic:hover { border-color: var(--rr-slate-500); border-left-color: var(--rr-lime); }
.rr-kb-topic .rr-hub-eyebrow { font-size: 0.75rem; letter-spacing: 1.5px; }
.rr-kb-topic__h { font-family: var(--rr-font-head); font-weight: 600; font-size: 1.25rem; line-height: 1.2; color: var(--rr-white); }
.rr-kb-topic__go { color: var(--rr-lime); font-weight: 600; font-size: 0.9375rem; }

/* ---- article prose ------------------------------------------------------- */
.rr-kb-prose { font-family: var(--rr-font-body); font-size: 18px; line-height: 1.65; color: var(--rr-slate-600); overflow-wrap: break-word; }
.rr-kb-prose > :first-child { margin-top: 0; }
.rr-kb-prose p { margin: 0 0 1.1em; }
.rr-kb-prose h2 { font-family: var(--rr-font-head); font-weight: 700; font-size: 30px; line-height: 1.2; letter-spacing: -0.015em; color: var(--rr-slate); margin: 2em 0 .6em; scroll-margin-top: 24px; }
.rr-kb-prose h3 { font-family: var(--rr-font-head); font-weight: 600; font-size: 22px; line-height: 1.25; color: var(--rr-slate); margin: 1.6em 0 .5em; }
.rr-kb-prose h4 { font-family: var(--rr-font-head); font-weight: 600; font-size: 18px; color: var(--rr-slate); margin: 1.4em 0 .4em; }
.rr-kb-prose strong { color: var(--rr-slate); font-weight: 600; }
.rr-kb-prose ul, .rr-kb-prose ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.rr-kb-prose li { margin: .35em 0; }
.rr-kb-prose a { color: var(--rr-slate); text-decoration: underline; text-decoration-color: var(--rr-lime); text-decoration-thickness: 2px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.rr-kb-prose a:hover { text-decoration-color: var(--rr-slate); }
.rr-kb-prose a:focus-visible { outline: 0; box-shadow: var(--rr-focus-ring); border-radius: 2px; }
.rr-kb-prose blockquote { margin: 1.4em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--rr-lime); color: var(--rr-slate); }
.rr-kb-prose img { border-radius: var(--rr-radius-md); }
.rr-kb-prose pre { overflow-x: auto; padding: 16px; border-radius: var(--rr-radius-md); background: var(--rr-grey-50); border: 1px solid var(--rr-grey-200); font-size: 0.9rem; }
.rr-kb-prose table {
	display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
	margin: 1.6em 0; border: 1px solid var(--rr-grey-200); border-radius: var(--rr-radius-md);
	border-collapse: separate; border-spacing: 0; font-size: 0.9375rem; line-height: 1.5;
}
.rr-kb-prose th, .rr-kb-prose td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rr-grey-200); }
.rr-kb-prose th { background: var(--rr-grey-50); color: var(--rr-slate); font-weight: 700; white-space: nowrap; }
.rr-kb-prose tr:last-child td { border-bottom: 0; }
.rr-kb-prose td { min-width: 120px; }

/* ---- sources + series navigation ---------------------------------------- */
.rr-kb-sources { margin-top: 48px; padding: 24px 26px; border: 1px solid var(--rr-grey-200); border-radius: var(--rr-radius-lg); background: var(--rr-white); }
.rr-kb-sources ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; font-size: 0.9375rem; line-height: 1.45; }
.rr-kb-sources a { color: var(--rr-slate); text-decoration: underline; text-decoration-color: var(--rr-lime); text-decoration-thickness: 2px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.rr-kb-sources a:hover { text-decoration-color: var(--rr-slate); }
.rr-kb-nav { margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rr-kb-nav--one { grid-template-columns: 1fr; }
.rr-kb-ncard {
	display: grid; gap: 8px; align-content: start; padding: 22px 24px; text-decoration: none;
	border: 1px solid var(--rr-grey-200); border-radius: var(--rr-radius-lg); background: var(--rr-grey-50);
	transition: border-color .18s ease, transform .18s ease;
}
.rr-kb-ncard:hover { border-color: #C3D94F; transform: translateY(-2px); }
.rr-kb-ncard--next { text-align: right; }
.rr-kb-ncard__t { font-family: var(--rr-font-head); font-weight: 600; font-size: 1.125rem; line-height: 1.25; color: var(--rr-slate); overflow-wrap: anywhere; }

/* ---- guide: parts band + more guides ------------------------------------ */
.rr-kb-parts { margin-top: 40px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.rr-kb-pcard {
	display: flex; flex-direction: column; text-decoration: none; overflow: hidden;
	background: var(--rr-white); border: 1px solid var(--rr-grey-200); border-radius: var(--rr-radius-lg);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.rr-kb-pcard:hover { transform: translateY(-4px); border-color: #C3D94F; box-shadow: 0 8px 24px rgba(16,26,32,.12); }
.rr-kb-pcard__media { display: block; aspect-ratio: 4 / 3; background: var(--rr-grey-200); }
.rr-kb-pcard__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rr-kb-pcard__body { display: grid; gap: 10px; padding: 20px 20px 22px; }
.rr-kb-pcard__t { font-family: var(--rr-font-head); font-weight: 600; font-size: 1.0625rem; line-height: 1.3; color: var(--rr-slate); overflow-wrap: anywhere; }

.rr-kb-more { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
.rr-kb-more--solo { grid-template-columns: minmax(0, 420px); }
.rr-kb-more__cards { margin-top: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rr-kb-mcard {
	display: grid; gap: 10px; align-content: start; padding: 22px 24px; text-decoration: none;
	border: 1px solid var(--rr-grey-200); border-radius: var(--rr-radius-lg); background: var(--rr-white);
	transition: border-color .18s ease, transform .18s ease;
}
.rr-kb-mcard:hover { border-color: #C3D94F; transform: translateY(-2px); }
.rr-kb-mcard__t { font-family: var(--rr-font-head); font-weight: 600; font-size: 1.125rem; line-height: 1.3; color: var(--rr-slate); overflow-wrap: anywhere; }

/* ---- L2 hub: guide cards -------------------------------------------------- */
.rr-kb-gcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.rr-kb-gcard { display: flex; flex-direction: column; overflow: hidden; background: var(--rr-white); border: 1px solid var(--rr-grey-200); border-radius: var(--rr-radius-lg); box-shadow: 0 1px 3px rgba(16,26,32,.06); }
.rr-kb-gcard__media { display: block; aspect-ratio: 16 / 9; background: var(--rr-grey-200); }
.rr-kb-gcard__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rr-kb-gcard__ph { display: block; width: 100%; height: 100%; }
.rr-kb-gcard__body { padding: 24px 26px 26px; }
.rr-kb-gcard h3 { font-family: var(--rr-font-head); font-size: var(--rr-text-h4); line-height: 1.25; }
.rr-kb-gcard h3 a { color: var(--rr-slate); text-decoration: none; }
.rr-kb-gcard h3 a:hover { text-decoration: underline; text-decoration-color: var(--rr-lime-600); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.rr-kb-gcard__parts { margin: 16px 0 0; padding: 0 0 0 1.3em; display: grid; gap: 8px; font-size: 0.9375rem; line-height: 1.4; color: var(--rr-slate-600); }
.rr-kb-gcard__parts li::marker { color: var(--rr-grey-500); font-weight: 600; }
.rr-kb-gcard__parts a { color: var(--rr-slate); text-decoration: underline; text-decoration-color: var(--rr-lime); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.rr-kb-gcard__parts a:hover { text-decoration-color: var(--rr-slate); }

/* hub-card thumb produced by rr_kb_image() */
.rr-hub-card-media img.rr-kb-fill { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---- hub hero with a photo ------------------------------------------------ */
.rr-hub-hero-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; }
.rr-hub-hero-fig { margin: 0; min-width: 0; }
.rr-hub-hero-fig img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rr-radius-xl); background: var(--rr-slate-900); }
.rr-hub-hero-fig figcaption { margin-top: 10px; font-size: 0.75rem; line-height: 1.5; color: var(--rr-grey-400); }
.rr-hub-hero-fig figcaption a { color: var(--rr-grey-300); text-decoration: underline; text-underline-offset: 2px; }
.rr-hub-hero-fig figcaption a:hover { color: var(--rr-white); }

/* ---- hub tile with a photo + status --------------------------------------- */
.rr-hub-tile--img { padding-top: 0; overflow: hidden; }
.rr-hub-tile-media { display: block; margin: 0 -28px 22px; aspect-ratio: 16 / 9; background: var(--rr-grey-200); overflow: hidden; }
.rr-hub-tile-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rr-hub-tile-status { margin-top: 14px; font-size: 0.75rem; font-weight: 600; letter-spacing: 1.5px; color: var(--rr-slate-500); }

/* ---- hub body copy: in-body link ------------------------------------------ */
.rr-hub-entity-intro a, .rr-hub-entity-grid p a { color: var(--rr-slate); text-decoration: underline; text-decoration-color: var(--rr-lime); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.rr-hub-entity-intro a:hover, .rr-hub-entity-grid p a:hover { text-decoration-color: var(--rr-slate); }

/* ---- responsive ----------------------------------------------------------- */
@media (max-width: 1080px) {
	.rr-kb-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rr-kb-more { grid-template-columns: minmax(0, 1fr); }
	.rr-kb-more--solo { grid-template-columns: minmax(0, 420px); }
}
@media (max-width: 900px) {
	.rr-kb-cols, .rr-kb-cols--part { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "aside"; gap: 40px; }
	.rr-kb-phero { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.rr-hub-hero-split { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}
@media (max-width: 640px) {
	.rr-kb-hero, .rr-kb-body { padding-left: 20px; padding-right: 20px; }
	.rr-kb-h1, .rr-kb-phero .rr-kb-h1 { font-size: 36px; }
	.rr-kb-hero__fig--169 { border-radius: var(--rr-radius-lg) var(--rr-radius-lg) 0 0; }
	.rr-kb-parts { grid-template-columns: minmax(0, 1fr); }
	.rr-kb-more__cards { grid-template-columns: minmax(0, 1fr); }
	.rr-kb-nav { grid-template-columns: minmax(0, 1fr); }
	.rr-kb-ncard--next { text-align: left; }
	.rr-kb-prose h2 { font-size: 26px; }
	.rr-kb-gcards { grid-template-columns: minmax(0, 1fr); }
}

/* L1 hubs carry six topic tiles: lay them out 3 + 3 instead of 5 + 1. */
@media (min-width: 900px) {
	.rr-hub-grid:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}