/*
 * CERIC Resource Library — Active filter chips (Point 11) + Result count (Point 13)
 *                        + CTA button resize (Point 15).
 * Never edit library.css — all new styles go here.
 */

/* ── "View resource" CTA — smaller than default (Point 15) ─── */
/* .ceric-rl-cta {
	font-size: 0.8rem !important;
	padding: 0.35rem 0.85rem !important;
} */

/* ── Result count badge ─────────────────────────────────────── */
.ceric-rl-result-count {
	display: inline-flex;
	align-items: center;
	padding: 0.3rem 0.85rem;
	background: var(--rl-orange-text, #ffa56b);
	color: #fff;
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 600;
	white-space: nowrap;
	margin-right: auto; /* pushes Sort + Views to the right */
}

.ceric-rl-active-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1rem;
	padding: 0.65rem 0.85rem;
	background: #fff8f4;
	border: 1px solid var(--rl-orange-text, #ffa56b);
	border-radius: 6px;
}

.ceric-rl-active-label {
	font-size: 0.8rem;
	font-weight: 600;
	color: #000;
	white-space: nowrap;
	font-size: 15px;
}

/* Individual chip */
.ceric-rl-filter-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.25rem 0.5rem 0.25rem 0.65rem;
	background: var(--rl-orange-text, #ffa56b);
	color: #fff;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 500;
	line-height: 1.3;
}

.ceric-rl-chip-label {
	max-width: 220px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 15px;
}

/* ✕ remove button */
.ceric-rl-chip-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	padding: 0;
	background: rgba(255,255,255,0.35);
	border: none;
	border-radius: 50%;
	color: #fff;
	font-size: 0.7rem;
	cursor: pointer;
	line-height: 1;
	flex-shrink: 0;
	transition: background 0.15s;
}

.ceric-rl-chip-remove:hover {
	background: rgba(255,255,255,0.6);
}

/* "Clear all" button */
.ceric-rl-clear-all {
	margin-left: auto;
	padding: 0.2rem 0.6rem;
	background: transparent;
	border: 1px solid var(--rl-orange-text, #ffa56b);
	border-radius: 4px;
	color: var(--rl-orange-text, #ffa56b);
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s, color 0.15s;
}

.ceric-rl-clear-all:hover {
	background: var(--rl-orange-text, #ffa56b);
	color: #fff;
}

/* ── Bookmark tooltip "Save" / "Saved" (Point 18) ──────────── */
.ceric-rl-bookmark {
	position: relative;
	overflow: visible !important; /* library.css sets overflow:hidden which clips the tooltip */
}

.ceric-rl-bookmark::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	background: #18181b;
	color: #fff;
	font-size: 0.7rem;
	font-weight: 500;
	padding: 3px 8px;
	border-radius: 4px;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s ease;
	z-index: 10;
}

/* small caret */
.ceric-rl-bookmark::before {
	content: "";
	position: absolute;
	bottom: calc(100% + 1px);
	left: 50%;
	transform: translateX(-50%);
	border: 4px solid transparent;
	border-top-color: #18181b;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s ease;
	z-index: 10;
}

.ceric-rl-bookmark:hover::after,
.ceric-rl-bookmark:hover::before,
.ceric-rl-bookmark:focus-visible::after,
.ceric-rl-bookmark:focus-visible::before {
	opacity: 1;
}

/* ── Grid view: 3 columns + equal card heights (Point 17) ──── */
.ceric-rl-results.is-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	align-items: stretch;
}

/* Each card fills its grid cell fully */
.ceric-rl-results.is-grid .ceric-rl-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* Card image keeps a fixed ratio so all images are same height */
.ceric-rl-results.is-grid .ceric-rl-card-image {
	flex-shrink: 0;
}

/* Card body grows to fill remaining space */
.ceric-rl-results.is-grid .ceric-rl-card-body {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    justify-content: left;
    align-items: normal;
    height: auto;
    flex-direction: unset;
}
.ceric-rl-results.is-grid a.ceric-rl-card-title {
    width: 100%;
}
/* Description expands to push CTA to bottom */
.ceric-rl-results.is-grid .ceric-rl-card-desc {
	flex: 1;
	-webkit-line-clamp: 3;
}

/* CTA always at bottom */
.ceric-rl-results.is-grid .ceric-rl-cta {
	margin-top: auto;
}
@media (max-width: 1400px) {
	.ceric-rl-results.is-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 1024px) {
	.ceric-rl-results.is-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 600px) {
	.ceric-rl-results.is-grid {
		grid-template-columns: 1fr !important;
	}
}

/* ── Card meta: publication year + cost badge (Point 16) ───── */
.ceric-rl-card-meta {
	display: flex;
	align-items: center;
	gap: 15px;
	flex-wrap: wrap;
	border-left: 2px solid #787c7c;
    padding-left: 20px;
	height: fit-content;
	padding-right: 30px;
}

.ceric-rl-card-year {
	font-size: 0.78rem;
    color: #000;
    font-weight: 600;
}

.ceric-rl-card-cost {
	display: inline-block;
	padding: 0.15rem 0.55rem;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.ceric-rl-card-cost.is-free {
	background: #78a8c39c;
    color: #000;
}

.ceric-rl-card-cost.is-paid {
	background: #ffa56b7d;
	color: #000;
}