/**
 * Canvas Blog Styles
 *
 * Enqueued as `canvas-blog` only on blog archive and single post pages.
 * All base entry/grid/timeline/tagcloud styles live in assets/css/style.css.
 * This file contains layout-variant overrides, WordPress-specific controls,
 * single-post reading bar, share card, related posts, and pagination.
 *
 * Depends on: canvas-style (assets/css/style.css), Bootstrap 5
 *
 * @package Canvas
 * @since   1.0.0
 */

/* ================================================================
   1. CSS Custom Properties — Blog Tokens
================================================================ */
:root {
	/* List-1 overlay card */
	--cnvs-blog-overlay-offset:   -6rem;
	--cnvs-blog-overlay-maxw:     90%;
	--cnvs-blog-overlay-padding:  1.5rem 2rem;
	--cnvs-blog-overlay-bg:       var(--cnvs-contrast-0, #fff);
	--cnvs-blog-overlay-radius:   var(--bs-border-radius, 0.25rem);
	--cnvs-blog-overlay-z:        1;

	/* Load-more button */
	--cnvs-blog-loadmore-mt:      3rem;
	--cnvs-blog-loadmore-mb:      1rem;

	/* Infinite scroll sentinel */
	--cnvs-blog-sentinel-h:       1px;

	/* Single post reading bar */
	--cnvs-blog-rbar-min-height:  3rem;

	/* Article share card */
	--cnvs-blog-share-gap:        0.375rem;

	/* Related posts */
	--cnvs-blog-related-gap:      1.5rem;

	/* Post navigation */
	--cnvs-blog-nav-my:           3rem;

	/* Author card */
	--cnvs-blog-author-avatar:    5rem;
}

/* ================================================================
   2. Post Grid Container  (#posts)
   Applies to: archive.php main post loop.
   Note: .post-grid, .grid-container, .grid-inner styles live
         in style.css. This only adds the ID-level override.
================================================================ */
#posts {
	/* Ensure the grid element resets so Isotope can measure it. */
	overflow: visible;
}

/* ================================================================
   3. List-1 Layout — Overlay Card  (.entry-content-wrap)
   Floats the content block up over the bottom of the image.
   The inline-style fallback in blog-entry-list-1.php is superseded
   by this rule once blog.css is loaded.
================================================================ */
.entry-content-wrap {
	position: relative;
	background-color: var(--cnvs-blog-overlay-bg);
	margin-top: var(--cnvs-blog-overlay-offset);
	max-width: var(--cnvs-blog-overlay-maxw);
	margin-left: auto;
	margin-right: auto;
	padding: var(--cnvs-blog-overlay-padding);
	padding-bottom: 0;
	border-radius: var(--cnvs-blog-overlay-radius);
	z-index: var(--cnvs-blog-overlay-z);
}

/* Prevent the separator line from .entry::after overlapping the
   overlay card on list-1 entries. */
.entry:has(.entry-content-wrap)::after {
	margin-top: 0;
}

/* ================================================================
   4. List-2  (.grid-inner.row.g-0) — Horizontal Card
   Image left (col-md-4) / content right (col-md-8).
   Bootstrap .row + .g-0 handles the gutters; we only tighten
   the image display so it fills its column height.
================================================================ */
.grid-inner.row.g-0 .entry-image {
	margin-bottom: 0;
	height: 100%;
}

.grid-inner.row.g-0 .entry-image > a,
.grid-inner.row.g-0 .entry-image img {
	height: 100%;
	object-fit: cover;
}

/* On small screens (< md) stack vertically — remove height stretching. */
@media (max-width: 767.98px) {
	.grid-inner.row.g-0 .entry-image,
	.grid-inner.row.g-0 .entry-image > a,
	.grid-inner.row.g-0 .entry-image img {
		height: auto;
	}
}

/* ================================================================
   5. List-3 Featured Card  (.grid-inner.bg-white.p-5.rounded.shadow-sm)
   object-fit override so the fixed-height thumbnail fills its box.
================================================================ */
.grid-inner .object-cover {
	-o-object-fit: cover;
	   object-fit: cover;
	width: 100%;
	display: block;
}

/* ================================================================
   6. Small-Alt Layout  (horizontal small card)
   Image col-md-4, content col-md-8. Ensure image does not shrink
   on mobile and that .entry-image fills the column.
================================================================ */
.grid-inner.row > [class*="col-md-"] > .entry-image {
	margin-bottom: 0;
}

@media (max-width: 767.98px) {
	.grid-inner.row > [class*="col-md-"] > .entry-image {
		margin-bottom: 1rem;
	}
}

/* ================================================================
   7. Timeline Layout — Additions
   Core .post-timeline, .entry-timeline, .timeline-border,
   .timeline-divider, .entry-date-section already defined in style.css.
   Here we only add the WordPress-specific border element.
================================================================ */
.post-timeline .timeline-border {
	pointer-events: none;
}

/* ================================================================
   8. Masonry — #posts.grid-container
   Isotope adds inline width/transform. Ensure items have no
   bottom overlap before JS initializes.
================================================================ */
#posts.grid-container {
	overflow: visible;
	transition: height 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
	#posts.grid-container {
		transition: none;
	}
}

#posts.grid-container .entry {
	/* Isotope absolutely positions entries; ensure they paint correctly. */
	will-change: transform;
}

/* ================================================================
   9. Pagination — Load More  (.canvas-pagination-load-more)
================================================================ */
.canvas-pagination-load-more {
	display: flex;
	justify-content: center;
	margin-top: var(--cnvs-blog-loadmore-mt);
	margin-bottom: var(--cnvs-blog-loadmore-mb);
}

.canvas-load-more-btn {
	--cnvs-btn-bg:     var(--cnvs-contrast-100);
	--cnvs-btn-color:  var(--cnvs-contrast-900);

	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 2rem;
	background-color: var(--cnvs-btn-bg);
	color: var(--cnvs-btn-color);
	font-size: 0.9375rem;
	font-weight: 500;
	border: 2px solid transparent;
	border-radius: 0.25rem;
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
	.canvas-load-more-btn {
		transition: none;
	}
}

.canvas-load-more-btn:hover,
.canvas-load-more-btn:focus-visible {
	background-color: var(--cnvs-themecolor);
	border-color: var(--cnvs-themecolor);
	color: #fff;
	outline: none;
}

.canvas-load-more-btn:disabled,
.canvas-load-more-btn[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
}

/* Spinner while loading */
.canvas-load-more-btn .canvas-spinner {
	display: inline-block;
	width: 0.875rem;
	height: 0.875rem;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: cnvs-btn-spin 0.65s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
	.canvas-load-more-btn .canvas-spinner {
		animation: none;
		border-top-color: currentColor;
		opacity: 0.5;
	}
}

@keyframes cnvs-btn-spin {
	to { transform: rotate(360deg); }
}

/* ================================================================
   10. Pagination — Infinite Scroll Sentinel
   A 1 px transparent element at the bottom of the post list.
   The IntersectionObserver in blog.js watches this.
================================================================ */
.canvas-infinite-sentinel {
	display: block;
	width: 100%;
	height: var(--cnvs-blog-sentinel-h);
	visibility: hidden;
	pointer-events: none;
}

/* ================================================================
   11. Single Post  (.single-post)
   Structural additions beyond what style.css provides.
================================================================ */
.single-post {
	/* Prevent footer overlap when there are no comments. */
	padding-bottom: 1px;
}

/* ================================================================
   12. Reading Bar  (.font-sizer, reading time card)
   The card itself is .card.border-default. We only add the
   font-sizer button sizing to avoid icon scaling issues.
================================================================ */
.font-sizer {
	display: inline-flex;
	align-items: center;
	gap: 0.125rem;
}

.font-sizer .font-size-minus,
.font-sizer .font-size-plus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

/* ================================================================
   13. Article Share Card  (#cnvs-article-share)
================================================================ */
#cnvs-article-share {
	scroll-margin-top: 5rem;
}

#cnvs-article-share .d-flex {
	gap: var(--cnvs-blog-share-gap);
	flex-wrap: wrap;
}

/* si-small size is set in style.css; here we just tighten the
   spacing between icons inside the share card. */
#cnvs-article-share .social-icon {
	margin-right: 0;
}

/* ================================================================
   14. Post Navigation  (.post-navigation row)
   The navigation row uses Bootstrap cols. We add hover color
   tokens so the links match the theme's interactive color.
================================================================ */
.single-post .post-navigation-row {
	margin-top: var(--cnvs-blog-nav-my);
	margin-bottom: var(--cnvs-blog-nav-my);
}

/* Prev/next link color from matching HTML template pattern. */
.single-post .post-navigation-row a {
	color: var(--cnvs-heading-color);
	text-decoration: none;
	transition: color 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
	.single-post .post-navigation-row a {
		transition: none;
	}
}

.single-post .post-navigation-row a:hover {
	color: var(--cnvs-themecolor);
}

/* ================================================================
   15. Author Card  (.card.border-default.mb-6 inside .single-post)
   The .square.square-md sets width/height via style.css.
   We only ensure the avatar img fills the square correctly.
================================================================ */
.single-post .card .rounded-circle.square {
	object-fit: cover;
	object-position: center;
}

/* ================================================================
   16. Related Posts  (.related-posts)
================================================================ */
.related-posts {
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
}

/* Ensure entry-image thumbnails in .posts-md entries keep aspect. */
.related-posts .entry-image img {
	object-fit: cover;
	object-position: center;
}

/* ================================================================
   17. posts-md  (.posts-md) — used by related posts row
   Core .posts-md rules in style.css reset margin/padding.
   Here we keep thumbnail proportions intact.
================================================================ */
.posts-md .entry-image .square {
	-o-object-fit: cover;
	   object-fit: cover;
	-o-object-position: center;
	   object-position: center;
}

/* ================================================================
   18. Bootstrap-Compatible Gutter + Column-Margin Utilities
   .gutter-{n} and .col-mb-{n} are defined in style.css.
   No duplicate declarations here — only blog-page-specific
   overrides that tighten or expand spacing in post loop rows.
================================================================ */

/* The standard blog list row uses gutter-30 (style.css).
   On very small screens collapse horizontal gutter. */
@media (max-width: 575.98px) {
	#posts.row {
		--bs-gutter-x: 0;
	}
}

/* ================================================================
   19. Responsive Overrides
================================================================ */

/* md — 768 px */
@media (min-width: 768px) {
	/* List-1 overlay card: give a bit more width room on tablets. */
	.entry-content-wrap {
		--cnvs-blog-overlay-maxw: 85%;
	}
}

/* lg — 992 px */
@media (min-width: 992px) {
	/* List-1 overlay card: full-desktop proportions. */
	.entry-content-wrap {
		--cnvs-blog-overlay-maxw: 80%;
		--cnvs-blog-overlay-padding: 2rem 2.5rem;
	}

	/* Load More button sits below a multi-column post grid. */
	.canvas-pagination-load-more {
		margin-top: 4rem;
	}
}

/* ================================================================
   20. Dark-mode token overrides
   Canvas respects .not-dark / .dark context classes.
================================================================ */
.dark .entry-content-wrap,
[data-bs-theme="dark"] .entry-content-wrap {
	--cnvs-blog-overlay-bg: var(--cnvs-contrast-100, #1a1a1a);
}

.dark .canvas-load-more-btn {
	--cnvs-btn-bg:    var(--cnvs-contrast-200);
	--cnvs-btn-color: var(--cnvs-contrast-900);
}

/* ================================================================
   21. Print
   Hide interactive controls that make no sense on paper.
================================================================ */
@media print {
	.canvas-pagination-load-more,
	.font-sizer,
	#cnvs-article-share,
	.single-post .post-navigation-row {
		display: none !important;
	}
}