/*
 * jab-core-blocks — Related Authors + Related Listicles + Schema Graph
 *
 * Bundle of CSS for the three new blocks added in v0.5.0. All rules reference
 * --brand-* tokens declared by the active child theme; fallbacks in tokens.css
 * scream debug-pink if the child theme isn't loaded.
 *
 * Deployment: copy into wp-content/plugins/jab-core-blocks/assets/css/blocks-related.css
 *             then register in class-asset-loader.php (see AssetLoader.patch.md).
 *
 * BEM naming follows the same conventions as blocks.css / blocks-2.css.
 */

/* ============================================================
 * Related Authors — grid of linked author cards
 * ============================================================ */

.jab-related-authors {
	margin-top: var(--brand-space-6, 32px);
	margin-bottom: var(--brand-space-6, 32px);
}

.jab-related-authors__heading {
	font-family: var(--brand-font-display, system-ui, sans-serif);
	font-size: var(--brand-text-2xl, 24px);
	font-weight: var(--brand-font-weight-bold, 700);
	line-height: var(--brand-line-height-display, 1.2);
	color: var(--brand-text, #111);
	margin: 0 0 var(--brand-space-3, 12px);
}

.jab-related-authors__intro {
	font-size: var(--brand-text-base, 16px);
	line-height: var(--brand-line-height-body, 1.5);
	color: var(--brand-text-muted, #555);
	margin: 0 0 var(--brand-space-4, 16px);
}

.jab-related-authors__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--brand-space-4, 16px);
	list-style: none;
	padding: 0;
	margin: 0;
}

.jab-related-authors__item {
	display: flex;
}

.jab-related-authors__card {
	display: flex;
	flex-direction: column;
	gap: var(--brand-space-2, 8px);
	padding: var(--brand-space-4, 16px);
	width: 100%;
	background: var(--brand-surface, #fff);
	border: 1px solid var(--brand-border, #cbd5e1);
	border-radius: var(--brand-radius-md, 8px);
	color: inherit;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.jab-related-authors__card:hover,
.jab-related-authors__card:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--brand-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.10));
	border-color: var(--brand-primary, #2563eb);
	text-decoration: none;
}

.jab-related-authors__card:focus-visible {
	outline: 2px solid var(--brand-primary, #2563eb);
	outline-offset: 2px;
}

.jab-related-authors__name {
	font-family: var(--brand-font-display, system-ui, sans-serif);
	font-weight: var(--brand-font-weight-semibold, 600);
	font-size: var(--brand-text-lg, 18px);
	line-height: 1.3;
	color: var(--brand-text, #111);
}

.jab-related-authors__context {
	font-size: var(--brand-text-sm, 14px);
	line-height: 1.45;
	color: var(--brand-text-muted, #555);
}

.jab-related-authors__context em {
	font-style: italic;
}

/* Boxed variant — when the block is set to layout_variant=boxed */
.jab-related-authors--variant-boxed {
	padding: var(--brand-space-5, 24px);
	background: var(--brand-bg-light, #f1f5f9);
	border-radius: var(--brand-radius-lg, 12px);
}

/* ============================================================
 * Related Listicles — grid of linked post cards
 * Visually parallel to related-authors but distinct semantic
 * markup so future divergence (e.g. thumbnails, dates) is clean.
 * ============================================================ */

.jab-related-listicles {
	margin-top: var(--brand-space-6, 32px);
	margin-bottom: var(--brand-space-6, 32px);
}

.jab-related-listicles__heading {
	font-family: var(--brand-font-display, system-ui, sans-serif);
	font-size: var(--brand-text-2xl, 24px);
	font-weight: var(--brand-font-weight-bold, 700);
	line-height: var(--brand-line-height-display, 1.2);
	color: var(--brand-text, #111);
	margin: 0 0 var(--brand-space-3, 12px);
}

.jab-related-listicles__intro {
	font-size: var(--brand-text-base, 16px);
	line-height: var(--brand-line-height-body, 1.5);
	color: var(--brand-text-muted, #555);
	margin: 0 0 var(--brand-space-4, 16px);
}

.jab-related-listicles__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--brand-space-4, 16px);
	list-style: none;
	padding: 0;
	margin: 0;
}

.jab-related-listicles__item {
	display: flex;
}

.jab-related-listicles__card {
	display: flex;
	flex-direction: column;
	gap: var(--brand-space-2, 8px);
	padding: var(--brand-space-4, 16px);
	width: 100%;
	background: var(--brand-surface, #fff);
	border: 1px solid var(--brand-border, #cbd5e1);
	border-radius: var(--brand-radius-md, 8px);
	color: inherit;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.jab-related-listicles__card:hover,
.jab-related-listicles__card:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--brand-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.10));
	border-color: var(--brand-primary, #2563eb);
	text-decoration: none;
}

.jab-related-listicles__card:focus-visible {
	outline: 2px solid var(--brand-primary, #2563eb);
	outline-offset: 2px;
}

.jab-related-listicles__title {
	font-family: var(--brand-font-display, system-ui, sans-serif);
	font-weight: var(--brand-font-weight-semibold, 600);
	font-size: var(--brand-text-lg, 18px);
	line-height: 1.3;
	color: var(--brand-text, #111);
}

.jab-related-listicles__context {
	font-size: var(--brand-text-sm, 14px);
	line-height: 1.45;
	color: var(--brand-text-muted, #555);
}

.jab-related-listicles__context em {
	font-style: italic;
}

.jab-related-listicles--variant-boxed {
	padding: var(--brand-space-5, 24px);
	background: var(--brand-bg-light, #f1f5f9);
	border-radius: var(--brand-radius-lg, 12px);
}

/* ============================================================
 * Schema Graph — no visual rendering (script-only block)
 *
 * The block emits <script type="application/ld+json"> tags either to
 * <head> or inline. Inline mode still produces no visible output because
 * <script> is non-rendering. Editor-side preview is handled in editor.css.
 * ============================================================ */

/* ============================================================
 * Mobile — single column at narrow viewports
 * ============================================================ */

@media (max-width: 480px) {
	.jab-related-authors__grid,
	.jab-related-listicles__grid {
		grid-template-columns: 1fr;
	}
}