/**
 * Single posts and pages (templates/single.html and the parts it includes).
 * Loaded on singular views only.
 * Formerly Fluent snippet 10, "Single Page CSS".
 */

/* ── Featured image ──────────────────────────────────────────────────────── */

/* Credit links in the Featured Image Caption overlay stay light on its dark
   background. */
.wp-block-post-featured-image > .featured-image-caption a {
	color: var(--wp--preset--color--main-accent);
	text-decoration: none;
}

/* Video posts lead with the video itself. */
.single-format-video .single-featured-cjb {
	display: none;
}

/* Below the desktop layout the featured image runs edge to edge.
   !important: the block writes its corner radius inline. */
@media (max-width: 1023px) {
	.single-mobile-featured-img-cjb {
		padding-right: 0;
		padding-left: 0;
	}

	.single-mobile-featured-img-cjb .wp-block-post-featured-image img {
		display: block;
		width: 100%;
		height: auto;
		border-radius: 0 !important;
	}
}

/* ── Post header and content ─────────────────────────────────────────────── */

.single-post .wp-block-post-content {
	margin-top: 0;
}

/* ── Comments tabs ───────────────────────────────────────────────────────── */

/* The comment count beside the Comments tab label, added only when there are
   comments (functions.php, comments_tab_count). */
.comments-tab-count-cjb {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 22px;
	height: 20px;
	margin-left: 0.5rem;
	padding: 0 6px;
	border-radius: 10px;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-accent);
	font-size: 12px;
	line-height: 1;
	vertical-align: 0.15em;
}

/* Titles stay on one line. Under 320px they don't fit even at the smaller size
   below, so they may wrap there rather than widen the page. */
@media (min-width: 320px) {
	.wp-block-tab-list.comments-tabs-cjb button[role="tab"] {
		white-space: nowrap;
	}
}

/* Below 360px the two titles no longer fit on one line at full size, so they
   get smaller and closer together. Two classes outrank the base rules in
   theme.json's custom CSS. */
@media (max-width: 359px) {
	.wp-block-tab-list.comments-tabs-cjb {
		gap: 12px;
	}

	.wp-block-tab-list.comments-tabs-cjb button[role="tab"] {
		font-size: 0.875rem;
	}

	.comments-tabs-cjb .comments-tab-count-cjb {
		margin-left: 6px;
	}
}

/* ── Follow bar (parts/follow-bar.html) ──────────────────────────────────── */

@media (max-width: 767px) {
	.follow-bar-logo-cjb {
		width: 50px;
		height: 50px;
	}

	.follow-bar-social-cjb {
		font-size: 20px;
	}
}

@media (max-width: 400px) {
	.follow-bar-title {
		display: none;
	}
}

/* ── From the Forums (parts/from-the-forums.html) ────────────────────────── */

/* On posts its tinted band gets more padding and a divider above as well as
   below, setting it apart from the comments and More Batman News.
   !important: the inline padding. */
.single .from-the-forums-cjb {
	padding-top: var(--wp--preset--spacing--large) !important;
	padding-bottom: var(--wp--preset--spacing--large) !important;
	border-top: 1px solid var(--wp--preset--color--border-light);
}

/* ── More News ───────────────────────────────────────────────────────────── */

/* Core forces grid post templates to one column under 600px, using a
   selector of four repeated classes. This one outranks it and restores the
   block's own auto-fill grid (230px minimum, 3 columns), so the grid keeps
   two columns down to about 480px. */
@media (max-width: 600px) {
	.more-news-grid-cjb.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid {
		grid-template-columns: repeat(auto-fill, minmax(max(min(230px, 100%), (100% - (var(--wp--preset--spacing--medium) * (3 - 1))) / 3), 1fr));
	}
}

/* Once the grid is down to one column (below 523px: two 230px columns plus
   the 4vw gap no longer fit), each post becomes a post river row: a 96px
   square image on the left, the category and headline beside it, and a
   divider between posts. !important: the image sets its 16:9 ratio inline. */
@media (max-width: 522px) {
	.more-news-grid-cjb.wp-block-post-template {
		row-gap: 10px;
	}

	.more-news-grid-cjb > li {
		display: flex;
		gap: 14px;
		align-items: flex-start;
	}

	.more-news-grid-cjb > li:not(:last-child) {
		padding-bottom: 10px;
		border-bottom: 1px solid var(--wp--preset--color--border-light);
	}

	.more-news-grid-cjb .wp-block-post-featured-image {
		flex: 0 0 96px;
		margin: 0;
	}

	.more-news-grid-cjb .wp-block-post-featured-image img {
		aspect-ratio: 1 !important;
	}

	.more-news-grid-cjb > li > .wp-block-group {
		flex: 1;
		min-width: 0;
	}
}

/* In the grid, long headlines stop at three lines. The one-column rows show
   them in full, like the post river. */
@media (min-width: 523px) {
	.single-more-news-cjb .post-river-title-cjb a {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		line-clamp: 3;
		overflow: hidden;
	}
}