/* ==========================================================================
   Resources library — archive-dli_resource.php (tab styles in sections/programs.css
   are duplicated here so this page does not need programs.css)
   ========================================================================== */

.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: var(--s-6);
}

.tab {
	min-height: 44px;
	padding: 0 18px;
	border: 1.5px solid var(--color-border);
	border-radius: var(--r-pill);
	background: var(--color-surface);
	color: var(--color-text-2);
	font: 700 var(--fs-sm) / 1 var(--font-sans);
	cursor: pointer;
}

.tab.is-active {
	border-color: var(--color-invert-bg);
	background: var(--color-invert-bg);
	color: var(--color-invert-text);
}

.resource-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
	gap: var(--s-4);
}

.resource-card {
	display: flex;
	gap: var(--s-4);
	padding: var(--s-5);
	border: 1px solid var(--color-border);
	border-radius: var(--r-lg);
	background: var(--color-surface);
	transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur) var(--ease-out);
}

.resource-card:hover {
	border-color: rgb(0 164 80 / 0.35);
	box-shadow: var(--shadow-md);
	transform: translateY(-3px);
}

.resource-card.is-filtered {
	display: none;
}

.resource-card__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 52px;
	height: 52px;
	border-radius: 16px;
	background: var(--color-primary-soft);
	color: var(--color-primary-text);
}

.resource-card__icon--video { background: var(--color-danger-soft); color: var(--color-danger-text); }
.resource-card__icon--link { background: var(--color-surface-2); color: var(--color-heading); }
.resource-card__icon--audio { background: var(--color-amber-soft); color: var(--color-amber-text); }

.resource-card__body {
	display: grid;
	gap: 8px;
	flex: 1;
	min-width: 0;
}

.resource-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.resource-card__title {
	margin: 0;
	font-size: var(--fs-lg);
	line-height: var(--lh-snug);
}

.resource-card p {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
}

.resource-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
	margin-top: 4px;
}

.resource-card__foot .muted {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--fs-sm);
	font-weight: 600;
}