/* Research Compound Library
 * Card grid ([compound_library] shortcode) + single profile page.
 * Per-category colours are applied inline from the term colour meta.
 */

/* ===== Card grid ===== */
.compound-library {
	max-width: 1180px;
	margin: 0 auto;
}

/* Design tokens — mirror the site's Elementor global typography/colours.
 * Headings: Source Serif 4 (600). Body/UI: Plus Jakarta Sans.
 * Brand blue #1A6BCA, ink #000, muted #878C95, hairline #ECEEF2. */
.compound-library,
.compound-single {
	--smr-font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--smr-font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
	--smr-ink: #000000;
	--smr-muted: #878c95;
	--smr-blue: #1a6bca;
	--smr-line: #eceef2;
	font-family: var( --smr-font-sans );
}

/* Hide the theme page title on library pages (set via body_class). */
.smr-hide-page-header .page-header { display: none; }

/* ===== Header + search ===== */
.compound-library .cl-header {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 2.75rem;
	padding-top: 3.5rem;
}

.compound-library .cl-eyebrow {
	font-family: var( --smr-font-sans );
	font-size: 0.95rem;
	font-weight: 600;
	color: var( --smr-blue );
	margin: 0 0 0.6rem;
}

.compound-library .cl-title {
	font-family: var( --smr-font-serif );
	font-size: 2.25rem;
	font-weight: 600;
	line-height: 1.15;
	color: var( --smr-ink );
	margin: 0 0 1rem;
}

.compound-library .cl-subtitle {
	font-family: var( --smr-font-sans );
	font-size: 1.05rem;
	line-height: 1.6;
	color: var( --smr-muted );
	margin: 0 0 1.75rem;
}

.compound-library .cl-search {
	display: flex;
	gap: 0.5rem;
	align-items: stretch;
	text-align: left;
}

.compound-library .cl-search-field {
	position: relative;
	flex: 1 1 auto;
}

.compound-library .cl-search-input {
	width: 100%;
	font-family: var( --smr-font-sans );
	font-size: 1rem;
	padding: 0.85rem 1.1rem;
	border: 1px solid #d6dbe5;
	border-radius: 10px;
	color: var( --smr-ink );
	background: #ffffff;
	outline: none;
}

.compound-library .cl-search-input:focus {
	border-color: #1a6bca;
	box-shadow: 0 0 0 3px rgba(26, 107, 202, 0.12);
}

.compound-library .cl-search-input::placeholder {
	color: #9aa2af;
}

.compound-library .cl-search-btn {
	flex: 0 0 auto;
	font-family: var( --smr-font-sans );
	font-size: 1rem;
	font-weight: 600;
	color: #ffffff;
	background: #1f2430;
	border: none;
	border-radius: 10px;
	padding: 0 1.5rem;
	cursor: pointer;
	transition: background 0.15s ease;
}

.compound-library .cl-search-btn:hover {
	background: #2b313c;
}

.compound-library .cl-noresults {
	text-align: center;
	color: var( --smr-muted );
	font-size: 1.05rem;
	padding: 2rem 0;
}

/* ===== Live-search dropdown ===== */
.compound-library .cl-search-dropdown {
	position: absolute;
	top: calc( 100% + 6px );
	left: 0;
	right: 0;
	z-index: 30;
	background: #ffffff;
	border: 1px solid var( --smr-line );
	border-radius: 12px;
	box-shadow: 0 12px 30px rgba( 0, 0, 0, 0.10 );
	overflow: hidden;
	max-height: 70vh;
	overflow-y: auto;
}

.compound-library .cl-sd-item {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.7rem 1rem;
	text-decoration: none;
	border-bottom: 1px solid #f1f3f7;
}

.compound-library .cl-sd-item:hover { background: #f6f8fb; }

.compound-library .cl-sd-dot {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-radius: 50%;
}

.compound-library .cl-sd-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.compound-library .cl-sd-title {
	font-family: var( --smr-font-sans );
	font-size: 0.95rem;
	font-weight: 600;
	color: var( --smr-ink );
	line-height: 1.25;
}

.compound-library .cl-sd-cat {
	font-family: var( --smr-font-sans );
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --smr-muted );
	margin-top: 2px;
}

.compound-library .cl-sd-empty {
	padding: 1rem;
	font-family: var( --smr-font-sans );
	font-size: 0.92rem;
	color: var( --smr-muted );
}

.compound-library .cl-sd-viewall {
	display: block;
	width: 100%;
	text-align: center;
	font-family: var( --smr-font-sans );
	font-size: 0.88rem;
	font-weight: 700;
	color: var( --smr-blue );
	background: #f6f8fb;
	border: none;
	padding: 0.8rem 1rem;
	cursor: pointer;
}

.compound-library .cl-sd-viewall:hover { background: #eef2f8; }

/* ===== Full results view (?cs=) ===== */
.compound-library .cl-results-head {
	margin: 0 0 1.75rem;
}

.compound-library .cl-results-back {
	display: inline-block;
	font-family: var( --smr-font-sans );
	font-size: 0.85rem;
	font-weight: 600;
	color: var( --smr-muted );
	text-decoration: none;
	margin-bottom: 0.75rem;
}

.compound-library .cl-results-back:hover { text-decoration: underline; }

.compound-library .cl-results-title {
	font-family: var( --smr-font-serif );
	font-size: 1.6rem;
	font-weight: 600;
	color: var( --smr-ink );
	margin: 0 0 0.25rem;
}

.compound-library .cl-results-count {
	font-family: var( --smr-font-sans );
	font-size: 0.95rem;
	color: var( --smr-muted );
	margin: 0;
}

/* ===== Category filter cloud ===== */
.compound-library .cl-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0 0 2.25rem;
}

.compound-library .cl-filter-pill {
	font-family: var( --smr-font-sans );
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1;
	color: #3a4250;
	background: #ffffff;
	border: 1px solid #d6dbe5;
	border-radius: 50px;
	padding: 0.6rem 1.15rem;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.compound-library .cl-filter-pill:hover {
	border-color: #1a6bca;
	color: #1a6bca;
}

.compound-library .cl-filter-pill.is-active {
	background: #1a6bca;
	border-color: #1a6bca;
	color: #ffffff;
}

.compound-library .cl-section {
	margin-bottom: 3rem;
	scroll-margin-top: 100px;
}

.compound-library .cl-section-title {
	font-family: var( --smr-font-serif );
	font-size: 1.5rem;
	font-weight: 600;
	margin: 0 0 1.25rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var( --smr-line );
}

.compound-library .cl-carousel {
	position: relative;
}

.compound-library .cl-grid {
	--cl-gap: 1.25rem;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var( --cl-gap );
}

.compound-library .cl-card {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid var( --smr-line );
	border-radius: 14px;
	padding: 1.5rem;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.compound-library .cl-card:hover {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
	transform: translateY(-2px);
}

.compound-library .cl-badge {
	display: inline-block;
	align-self: flex-start;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 50px;
	border: 1px solid transparent;
	margin-bottom: 0.9rem;
}

.compound-library .cl-card-title {
	font-family: var( --smr-font-serif );
	font-size: 1.25rem;
	font-weight: 600;
	color: var( --smr-ink );
	margin: 0 0 0.6rem;
}

.compound-library .cl-card-blurb {
	font-family: var( --smr-font-sans );
	font-size: 0.875rem;
	line-height: 1.55;
	color: var( --smr-muted );
	margin: 0 0 1.25rem;
	flex: 1 1 auto;
}

.compound-library .cl-readmore {
	font-family: var( --smr-font-sans );
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

.compound-library .cl-readmore:hover { text-decoration: underline; }

/* ===== Carousel mode =====
 * The `is-carousel` class is added by JS to any section that holds more cards
 * than fit in one row at the current breakpoint (so: > 1 on phones, > 4 on
 * desktop). It turns the grid into a horizontal, snap-scrolling track that the
 * visitor can swipe or page through with the prev / next arrows. Sections that
 * fit in a single row keep the plain grid and never show arrows. */
/* Side gutters reserve room for the arrows so they never sit over card text. */
.compound-library .cl-carousel.is-carousel {
	padding: 0 52px;
}

.compound-library .cl-carousel.is-carousel .cl-grid {
	display: flex;
	grid-template-columns: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	/* No `scroll-behavior: smooth` here: the JS parks the scroll on the real
	 * card block on load and silently jumps across clone boundaries while
	 * looping — those MUST be instant or they animate visibly (carousels
	 * appear to scroll then snap back on load). Arrow paging stays smooth
	 * because page() passes behavior:'smooth' to scrollBy() directly. */
	-webkit-overflow-scrolling: touch;
	/* Vertical breathing room so the card hover lift + shadow aren't clipped
	 * by the horizontal-scroll container. */
	padding: 6px 0 16px;
	scrollbar-width: none; /* Firefox */
}

.compound-library .cl-carousel.is-carousel .cl-grid::-webkit-scrollbar {
	display: none; /* WebKit/Blink */
}

/* 4 cards per view on desktop (matches the default grid). */
.compound-library .cl-carousel.is-carousel .cl-card {
	flex: 0 0 calc( ( 100% - 3 * var( --cl-gap ) ) / 4 );
	scroll-snap-align: start;
}

/* Arrows — hidden until JS marks a section as a carousel. */
.compound-library .cl-carousel-arrow {
	display: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 42px;
	height: 42px;
	align-items: center;
	justify-content: center;
	padding: 0;
	color: var( --smr-ink );
	background: #ffffff;
	border: 1px solid var( --smr-line );
	border-radius: 50%;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.compound-library .cl-carousel.is-carousel .cl-carousel-arrow {
	display: flex;
}

/* Arrows live inside the carousel's side gutters (see padding above). */
.compound-library .cl-carousel-arrow.cl-prev { left: 5px; }
.compound-library .cl-carousel-arrow.cl-next { right: 5px; }

.compound-library .cl-carousel-arrow:hover {
	color: var( --smr-blue );
	border-color: var( --smr-blue );
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
}

@media (max-width: 1024px) {
	.compound-library .cl-grid { grid-template-columns: repeat(3, 1fr); }
	/* 3 per view */
	.compound-library .cl-carousel.is-carousel .cl-card {
		flex-basis: calc( ( 100% - 2 * var( --cl-gap ) ) / 3 );
	}
}

@media (max-width: 768px) {
	.compound-library .cl-grid { grid-template-columns: repeat(2, 1fr); }
	/* 2 per view */
	.compound-library .cl-carousel.is-carousel .cl-card {
		flex-basis: calc( ( 100% - 1 * var( --cl-gap ) ) / 2 );
	}
}

@media (max-width: 520px) {
	.compound-library .cl-grid { grid-template-columns: 1fr; }
	/* 1 per view — full-width card swiper on phones */
	.compound-library .cl-carousel.is-carousel .cl-card {
		flex-basis: 100%;
	}
}

/* ===== Single profile ===== */
.compound-single {
	max-width: 820px;
	margin: 0 auto;
	padding: 2.5rem 1.25rem 4rem;
}

.compound-single .cs-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.compound-single .cs-back {
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	color: #5a6271;
}

.compound-single .cs-back:hover { text-decoration: underline; }

.compound-single .cs-badge {
	display: inline-block;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 50px;
	border: 1px solid transparent;
	white-space: nowrap;
}

.compound-single .cs-title {
	font-family: var( --smr-font-serif );
	font-size: 2.25rem;
	font-weight: 600;
	line-height: 1.15;
	color: var( --smr-ink );
	margin: 0 0 1.75rem;
}

/* The pasted profile body */
.compound-single .cs-body {
	font-family: var( --smr-font-sans );
	font-size: 1.02rem;
	line-height: 1.7;
	color: #2b313c;
}

.compound-single .cs-body h2,
.compound-single .cs-body h3 {
	font-family: var( --smr-font-serif );
	font-weight: 600;
	margin: 1.75rem 0 0.75rem;
	color: var( --smr-ink );
}

.compound-single .cs-body h2 { font-size: 1.4rem; }
.compound-single .cs-body h3 { font-size: 1.15rem; }
.compound-single .cs-body p { margin: 0 0 1rem; }
.compound-single .cs-body ul,
.compound-single .cs-body ol { margin: 0 0 1rem 1.5rem; }
.compound-single .cs-body li { margin-bottom: 0.4rem; }
.compound-single .cs-body a { color: #1a6bca; }
.compound-single .cs-body img { max-width: 100%; height: auto; border-radius: 8px; }
.compound-single .cs-body table {
	width: 100%;
	border-collapse: collapse;
	margin: 1rem 0;
}
.compound-single .cs-body th,
.compound-single .cs-body td {
	border: 1px solid #e2e6ee;
	padding: 8px 12px;
	text-align: left;
}

/* Previous / next compound navigation */
.compound-single .cs-adjacent {
	display: flex;
	gap: 1rem;
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var( --smr-line );
}

.compound-single .cs-adjacent-link {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1rem 1.25rem;
	border: 1px solid var( --smr-line );
	border-radius: 10px;
	text-decoration: none;
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.compound-single .cs-adjacent-link.cs-empty {
	border: none;
	background: none;
	pointer-events: none;
}

.compound-single a.cs-adjacent-link:hover {
	border-color: var( --cs-accent, var( --smr-blue ) );
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.05 );
}

.compound-single .cs-adjacent-link.cs-next {
	text-align: right;
	align-items: flex-end;
}

.compound-single .cs-adjacent-dir {
	font-family: var( --smr-font-sans );
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --smr-muted );
}

.compound-single .cs-adjacent-title {
	font-family: var( --smr-font-serif );
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.25;
	color: var( --smr-ink );
}

.compound-single a.cs-adjacent-link:hover .cs-adjacent-dir {
	color: var( --cs-accent, var( --smr-blue ) );
}

@media ( max-width: 560px ) {
	.compound-single .cs-adjacent {
		flex-direction: column;
	}
	.compound-single .cs-adjacent-link.cs-empty {
		display: none;
	}
	.compound-single .cs-adjacent-link.cs-next {
		text-align: left;
		align-items: flex-start;
	}
}