/* Category archive layouts (Customizer → Category Archives). Only
   enqueued on a category archive — see inc/category-archive-layout.php. */

/* The optional per-category map block (inc/category-archive-designer.php) —
   just a spacing reset from whatever margin the map shortcode's own
   wrapper (.nonotami-maps-world, css/maps-frontend.css) already carries. */
.nonotami-archive-map {
	margin: 0 0 1.5rem;
}

/* Infinite scroll's sentinel (inc/category-archive-designer.php,
   js/category-archive-infinite.js) — invisible, just a trigger point for
   the IntersectionObserver near the bottom of the page. */
.nonotami-archive-infinite-sentinel {
	height: 1px;
}

/* "Boxed page numbers" pagination (Customizer → Category Archives →
   Pagination) — core's own the_posts_pagination() markup, just given a
   design instead of the bare default link/text rendering. This file is
   enqueued on category archives, the front page, search results, the
   plain blog index and every single post/page (inc/category-archive-layout.php's
   maybe_enqueue()), so there's no need to scope this past the classes
   core itself already prints. the_comments_pagination()'s own wrapper
   (.comment-navigation, inside #comments) gets the exact same rules —
   core gives it the identical inner .nav-links/.page-numbers markup, this
   is the one shared "boxed" look everywhere pagination shows up at all. */
.pagination.navigation,
#comments .comment-navigation {
	margin: 2rem 0;
}

.pagination .nav-links,
#comments .comment-navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.pagination .page-numbers,
#comments .comment-navigation .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 0.65rem;
	border: 1px solid #ddd;
	border-radius: 4px;
	text-decoration: none;
	color: inherit;
	font-size: 0.95rem;
}

.pagination a.page-numbers:hover,
#comments .comment-navigation a.page-numbers:hover {
	border-color: #bc002d;
	color: #bc002d;
}

/* wp_link_pages() (inc/post-pagination.php, multi-page posts) wraps
   every page number the same way via link_before/link_after, but only
   the non-current ones are real <a> tags — :not(a) is how its current
   page is told apart, there's no literal .current class to target like
   the_posts_pagination()/the_comments_pagination() give us. */
.pagination .page-numbers.current,
.post-pagination .page-numbers:not( a ),
#comments .comment-navigation .page-numbers.current {
	background: #bc002d;
	border-color: #bc002d;
	color: #fff;
}

.pagination .page-numbers.dots,
#comments .comment-navigation .page-numbers.dots {
	border: none;
	min-width: auto;
	padding: 0 0.15rem;
}

/* "Previous / Next" pagination — core's the_posts_navigation() markup
   (.posts-navigation, .nav-previous/.nav-next — not .page-numbers, that's
   the boxed style above). Left/right, opposite ends. */
.posts-navigation.navigation {
	margin: 2rem 0;
}

.posts-navigation .nav-links {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}

/* Arrows, boxed the same way as the "Boxed page numbers" style's own
   .page-numbers — prev_text/next_text are set to plain arrows in
   render_pagination() (inc/category-archive-designer.php), so core's
   default "Older posts"/"Newer posts" text link never shows. */
.posts-navigation .nav-previous a,
.posts-navigation .nav-next a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 0.65rem;
	border: 1px solid #ddd;
	border-radius: 4px;
	text-decoration: none;
	color: inherit;
	font-size: 1.15rem;
	line-height: 1;
}

.posts-navigation .nav-previous a:hover,
.posts-navigation .nav-next a:hover {
	border-color: #bc002d;
	color: #bc002d;
}

/* Infinite scroll's loading wheel (js/category-archive-infinite.js) —
   shown only while a next page is actually being fetched, centered
   under the posts. */
.nonotami-archive-infinite-spinner {
	display: none;
	justify-content: center;
	padding: 2rem 0;
}

.nonotami-archive-infinite-spinner.is-active {
	display: flex;
}

.nonotami-archive-infinite-spinner::after {
	content: "";
	width: 1.75rem;
	height: 1.75rem;
	border: 3px solid #ddd;
	border-top-color: #bc002d;
	border-radius: 50%;
	animation: nonotami-archive-spin 0.8s linear infinite;
}

@keyframes nonotami-archive-spin {
	to {
		transform: rotate( 360deg );
	}
}

/* "That's all for now." — shown once infinite scroll genuinely reaches
   the last page (js/category-archive-infinite.js's reachedEnd()),
   replacing the sentinel/spinner. */
.nonotami-archive-infinite-end {
	margin: 2rem 0;
	text-align: center;
	color: #777;
}

/* Shared image-box recipe: a fixed-ratio box, the actual <img> (or site
   logo fallback) absolutely filling it with object-fit: cover — same
   technique as the post header's own media box (css/post-header.css). */
.nonotami-archive-card-media {
	position: relative;
	overflow: hidden;
}

.nonotami-archive-card-media-wide {
	aspect-ratio: 3 / 2;
}

.nonotami-archive-card-media-square {
	aspect-ratio: 1 / 1;
}

.nonotami-archive-card-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- List layouts (image left, title [+ excerpt] right) ---------- */

.nonotami-archive-list-item {
	list-style: none;
	margin: 0 0 1.5rem;
}

.nonotami-archive-list-link {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	text-decoration: none;
	color: inherit;
}

.nonotami-archive-list-link .nonotami-archive-card-media {
	flex: 0 0 auto;
	width: 96px;
}

.nonotami-archive-list-title {
	margin: 0 0 0.35rem;
}

.nonotami-archive-list-excerpt {
	opacity: 0.85;
}

/* ---------- Masonry layouts ---------- */

.nonotami-archive-masonry-aligned {
	display: grid;
	gap: 1.5rem;
	align-items: stretch;
}

.nonotami-archive-masonry-aligned.nonotami-archive-masonry-cols-1 {
	grid-template-columns: 1fr;
}

.nonotami-archive-masonry-aligned.nonotami-archive-masonry-cols-2 {
	grid-template-columns: repeat( 2, 1fr );
}

.nonotami-archive-masonry-aligned.nonotami-archive-masonry-cols-3 {
	grid-template-columns: repeat( 3, 1fr );
}

/* Staggered (true masonry): CSS multi-column packing — no JS needed, each
   card just breaks to the next column once it runs out of height, so one
   card can end well before (or after) its neighbor. */
.nonotami-archive-masonry-staggered {
	column-gap: 1.5rem;
}

.nonotami-archive-masonry-staggered.nonotami-archive-masonry-cols-1 {
	column-count: 1;
}

.nonotami-archive-masonry-staggered.nonotami-archive-masonry-cols-2 {
	column-count: 2;
}

.nonotami-archive-masonry-staggered.nonotami-archive-masonry-cols-3 {
	column-count: 3;
}

.nonotami-archive-masonry-staggered .nonotami-archive-card {
	break-inside: avoid;
	margin-bottom: 1.5rem;
}

@media ( max-width: 600px ) {
	.nonotami-archive-masonry-aligned,
	.nonotami-archive-masonry-staggered {
		grid-template-columns: 1fr !important;
		column-count: 1 !important;
	}
}

.nonotami-archive-card {
	overflow: hidden;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.12 );
}

/* Aligned mode: every card in the grid fills its row's full height (grid's
   own default stretch), so the card itself is a column flex box — the
   text block can then be pushed to the bottom (masonry_standard) or
   centered (masonry_overlay) within whatever room is left under the image. */
.nonotami-archive-masonry-aligned .nonotami-archive-card-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.nonotami-archive-masonry-staggered .nonotami-archive-card-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.nonotami-archive-card-text {
	text-align: center;
	padding: 1rem 1.25rem;
	box-sizing: border-box;
}

.nonotami-archive-card-title {
	margin: 0 0 0.5rem;
}

.nonotami-archive-card-excerpt {
	opacity: 0.85;
	font-size: 0.9rem;
}

/* Signature overlay card: same visual recipe as the single post header's
   card (css/post-header.css) — gradient fade from the page's own
   background color, pulled up over the image's bottom edge by
   --nonotami-archive-overlay-overlap (Customizer → Category Archives,
   same "% of image height" idea as the post header's own control). */
.nonotami-archive-card.is-overlay .nonotami-archive-card-media {
	margin-bottom: calc( -1 * var( --nonotami-archive-overlay-overlap, 16.6667% ) );
}

.nonotami-archive-card.is-overlay .nonotami-archive-card-text {
	position: relative;
	width: var( --nonotami-archive-overlay-width, 80% );
	margin-left: auto;
	margin-right: auto;
	background: linear-gradient(
		to bottom,
		color-mix( in srgb, var( --nonotami-color-bg, #fff ) 50%, transparent ),
		var( --nonotami-color-bg, #fff )
	);
}

.nonotami-archive-masonry-aligned .nonotami-archive-card.is-overlay .nonotami-archive-card-text {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Standard masonry: image, then the header flush below it — in aligned
   mode the text block is pushed to the bottom of the (stretched) card so
   every row's headers line up, same way the single post header's own
   meta row sits above its own fixed baseline. */
.nonotami-archive-masonry-aligned .nonotami-archive-card.is-standard .nonotami-archive-card-text {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

/* Category Messages (Content Boxes) always render centered — never
   affected by Simple Controller's text-justifier toggles (which target
   .entry-content only anyway) and never by a Special Box's own alignment
   or the sitewide "justify special box" toggle either, both of which
   this !important beats regardless of load order. The message is the
   one `.nonotami-cb-box` that's a DIRECT child of `.nonotami-content` on
   a category archive (loop_start, primed in template-parts/category-archive.php)
   — the pre/post content boxes are always nested inside `.entry-content`
   instead, so this selector can never catch those. */
.nonotami-content > .nonotami-cb-box .nonotami-cb-content,
.nonotami-content > .nonotami-cb-box .nonotami-sb-content {
	text-align: center !important;
}