/* Jhilik Core — front-end styles for CPT singles, archives, and the recent list.
   Deliberately light: it inherits the active theme's tokens where present. */

.jhilik-meta {
	list-style: none;
	margin: 2.5rem 0 0;
	padding: 1.1rem 1.35rem;
	display: grid;
	gap: 0.45rem;
	font-size: 0.95rem;
	border: 1px solid rgba(42, 41, 38, 0.12);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.5);
}

.jhilik-meta__label {
	font-weight: 600;
}

.jhilik-meta__label::after {
	content: ":";
}

.jhilik-recent {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.jhilik-recent__item { min-width: 0; }

/* A real card — border, padding, background — not a naked thumbnail with
   text underneath. The screenshot used as a featured image is cropped to
   a 16:9 media slot inside the card, not left to define the card itself. */
.jhilik-recent__link {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	height: 100%;
	padding: 1rem;
	border-radius: 16px;
	border: 1px solid rgba(42, 41, 38, 0.12);
	background: #fff;
	text-decoration: none;
	color: inherit;
}

.jhilik-recent__media {
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	overflow: hidden;
	background: rgba(42, 41, 38, 0.06);
}

.jhilik-recent__thumb {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.jhilik-recent__category {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.65;
}

.jhilik-recent__title {
	/* Now a real h3 (was a span) for correct document hierarchy — margin:0
	   keeps the heading's UA-default block spacing from changing the
	   existing card rhythm. */
	margin: 0;
	font-weight: 600;
	font-size: 1.05rem;
}

.jhilik-recent__excerpt {
	font-size: 0.9rem;
	opacity: 0.8;
}

.jhilik-recent__cta {
	margin-top: auto;
	padding-top: 0.4rem;
	font-size: 0.88rem;
	font-weight: 600;
}

@media (max-width: 640px) {
	.jhilik-recent { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: no-preference) {
	.jhilik-recent__link {
		transition: transform 0.2s ease, box-shadow 0.2s ease;
	}

	.jhilik-recent__link:hover {
		transform: translateY(-3px);
		box-shadow: 0 10px 24px rgba(42, 41, 38, 0.08);
	}
}

/* [jhilik_social_links] — a subtle inline text list, no icon set */
.jhilik-social-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.9rem;
}
.jhilik-social-links a {
	text-decoration: none;
	opacity: 0.75;
}
.jhilik-social-links a:hover,
.jhilik-social-links a:focus-visible {
	opacity: 1;
	text-decoration: underline;
}

/* Implementation Batch 1 — Research Hub: My Research / Research Bulletin
   section spacing, and the Bulletin card grid ([jhilik_research_bulletin_grid]).
   Reuses the existing card/meta visual language rather than introducing a
   new design system. */
.jhilik-research-hub-section {
	margin-top: 3rem;
}

.jhilik-bulletin-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	margin-top: 1.5rem;
}

.jhilik-bulletin-card {
	border: 1px solid rgba(42, 41, 38, 0.12);
	border-radius: 14px;
	padding: 1.25rem 1.4rem;
	background: rgba(255, 255, 255, 0.5);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.jhilik-bulletin-card__category {
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.7;
}

.jhilik-bulletin-card__title {
	margin: 0;
	font-size: 1.1rem;
}

.jhilik-bulletin-card__meta {
	margin: 0;
	font-size: 0.85rem;
	opacity: 0.75;
}

.jhilik-bulletin-card__summary {
	margin: 0;
	font-size: 0.95rem;
}

.jhilik-bulletin-card__link {
	margin-top: auto;
	font-weight: 600;
	text-decoration: none;
}
.jhilik-bulletin-card__link:hover,
.jhilik-bulletin-card__link:focus-visible {
	text-decoration: underline;
}

/* Implementation Batch 3 — GitHub Radar ([jhilik_github_radar_grid]) on
   /tools/. Deliberately a visually distinct card style from Jil's own
   Tools cards (different border/badge treatment) so third-party repos
   never read as her own work — see components.css for the Tools cards
   this sits alongside. */
.jhilik-gh-radar-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	margin-top: 1.5rem;
}

.jhilik-gh-radar-card {
	border: 1px dashed rgba(42, 41, 38, 0.25);
	border-radius: 14px;
	padding: 1.25rem 1.4rem;
	background: rgba(255, 255, 255, 0.35);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.jhilik-gh-radar-card__badge {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.6;
}

.jhilik-gh-radar-card__name {
	margin: 0;
	font-size: 1.05rem;
	font-family: monospace, monospace;
}

.jhilik-gh-radar-card__description,
.jhilik-gh-radar-card__note {
	margin: 0;
	font-size: 0.92rem;
}

.jhilik-gh-radar-card__note {
	font-style: italic;
	opacity: 0.85;
}

.jhilik-gh-radar-card__meta {
	margin: 0;
	font-size: 0.82rem;
	opacity: 0.7;
}

.jhilik-gh-radar-card__link {
	margin-top: auto;
	font-weight: 600;
	text-decoration: none;
}
.jhilik-gh-radar-card__link:hover,
.jhilik-gh-radar-card__link:focus-visible {
	text-decoration: underline;
}

/* Related Tools cards ([jhilik_recent type="tool"]) — a small icon, a
   one-line purpose (the tool's own "purpose" field, not an excerpt trim),
   and each tool's own pastel accent pair (passed in as --jh-recent-accent-a/b
   custom properties from the shortcode, the same pair each tool's own page
   already uses) instead of a bare title + arrow in a blank card. */
.jhilik-recent__item--tool .jhilik-recent__link {
	border-color: color-mix(in srgb, var(--jh-recent-accent-a, transparent) 35%, rgba(42, 41, 38, 0.12));
	background: color-mix(in srgb, var(--jh-recent-accent-a, #fff) 8%, #fff);
	gap: 0.6rem;
}
.jhilik-recent__tool-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	font-size: 1.1rem;
	background: linear-gradient(135deg, color-mix(in srgb, var(--jh-recent-accent-a, #ccc) 55%, #fff), color-mix(in srgb, var(--jh-recent-accent-b, #ccc) 40%, #fff));
}
.jhilik-recent__cta--button {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 0.3rem;
	margin-top: auto;
	padding: 0.4rem 0.95rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--jh-recent-accent-a, #ccc) 45%, #fff);
	font-weight: 700;
	font-size: 0.85rem;
}