/**
 * Components the index and the single both render, loaded by both.
 *
 * Kept in one file so the featured card at the top of the index and the hero
 * on a post cannot drift apart: they call the same NYBB_Render::meta_bar_html()
 * and they read the same rules from here.
 */

/* ---------------------------------------------------------------
 * Labelled meta columns: Published on / Reading time / Interests
 * ------------------------------------------------------------- */
.nybb-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 44px;
	align-items: flex-end;
}
.nybb-meta__col {
	display: grid;
	gap: 5px;
	min-width: 0;
}
.nybb-meta__lb {
	font-family: 'Lato', system-ui, sans-serif;
	font-size: 11.5px;
	line-height: 1.3;
	letter-spacing: 0.03em;
	color: #737580;
}
.nybb-meta__vl {
	font-family: 'Poppins', system-ui, sans-serif;
	font-size: 15px;
	line-height: 1.3;
	font-weight: 500;
	color: #15192c;
}
.nybb-meta__col--interests {
	margin-left: auto;
}

.nybb-interests {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.nybb-interest {
	font-family: 'Radio Canada', 'Poppins', system-ui, sans-serif;
	font-size: 12px;
	line-height: 1.4;
	font-weight: 500;
	color: #444756;
	border: 1px solid #d9d9d9;
	border-radius: 40px;
	padding: 5px 13px;
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease;
}
.nybb-interest:hover,
.nybb-interest:focus-visible {
	border-color: #8d22c3;
	color: #8d22c3;
}

/* Over a photograph the same component inverts. */
.nybb-meta--on-media .nybb-meta__lb { color: rgba(255, 255, 255, 0.66); }
.nybb-meta--on-media .nybb-meta__vl { color: #ffffff; }
.nybb-meta--on-media .nybb-interest {
	color: #ffffff;
	border-color: rgba(255, 255, 255, 0.4);
	background: rgba(255, 255, 255, 0.14);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

/* ---------------------------------------------------------------
 * The in-text program mention.
 *
 * [nybb_program] renders the link; a writer puts the sentence in a
 * paragraph with .nybb-mention when it should stand away from the body.
 * No picture, no price, no button: pricing lives in the Program Hub
 * block at the end of the post.
 * ------------------------------------------------------------- */
.nybb-mention {
	border-left: 2px solid #8d22c3;
	padding: 2px 0 2px 24px;
	margin: 30px 0;
	font-family: 'Radio Canada', 'Poppins', system-ui, sans-serif;
	font-size: 17.5px;
	line-height: 1.6;
	color: #15192c;
}
.nybb-mention .nybb-program,
.nybb-program {
	color: #8d22c3;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.nybb-program:hover,
.nybb-program:focus-visible { color: #6f1a9b; }

@media (max-width: 768px) {
	.nybb-meta { gap: 10px 22px; }
	.nybb-meta__lb { font-size: 10.5px; }
	.nybb-meta__vl { font-size: 13.5px; }
	.nybb-meta__col--interests { margin-left: 0; width: 100%; }
	.nybb-mention { padding-left: 18px; margin: 24px 0; font-size: 16px; }
}