/*
 * PsiConecta Blog Masonry
 * Turns the Kadence post archive into a fixed-width / variable-height masonry.
 * Loaded only on the post archive by the mu-plugin.
 *
 * DOM that Kadence emits:
 *   <ul.kadence-posts-list.psn-masonry>
 *     <li.entry-list-item>
 *       <article.loop-entry.has-post-thumbnail>
 *         <a.post-thumbnail><div.post-thumbnail-inner><img></div></a>
 *         <div.entry-content-wrap>...title/meta/excerpt/readmore...</div>
 *       </article>
 *     </li>
 *   </ul>
 *
 * The MASONRY ITEM is `.entry-list-item` (the <li>), not `.loop-entry`.
 */

/* --- container ---------------------------------------------------------- */

.kadence-posts-list.psn-masonry {
	display: block !important;
	padding: 0 !important;
	margin: 0 -0.75rem !important;
	list-style: none !important;
	overflow: visible !important;
	grid-template-columns: none !important;
	gap: 0 !important;
}

/* Hide the layout flicker until Masonry has positioned the items. */
.kadence-posts-list.psn-masonry:not(.psn-masonry-ready) > .entry-list-item, .kadence-posts-list.psn-masonry:not(.psn-masonry-ready) > .kb-post-list-item {
	visibility: hidden;
}

/* --- items: per-column-count widths driven by Kadence's grid-lg-col-X /
   grid-sm-col-X classes (left intact on the wrapper). Default 4-up if no
   class is present (e.g. legacy theme archive markup). ------------------ */

.kadence-posts-list.psn-masonry > .entry-list-item, .kadence-posts-list.psn-masonry > .kb-post-list-item {
	float: left;
	width: calc(25% - 1.5rem); /* sane default, overridden by grid-lg-col-X below */
	margin: 0 0.75rem 1.5rem;
	box-sizing: border-box;
	min-height: 0;
	max-width: none;
	display: block;
}

/* Desktop column counts (Kadence's grid-lg-col-N class on the <ul>). */
.kadence-posts-list.psn-masonry.grid-lg-col-1 > .entry-list-item, .kadence-posts-list.psn-masonry.grid-lg-col-1 > .kb-post-list-item { width: calc(100% - 1.5rem); }
.kadence-posts-list.psn-masonry.grid-lg-col-2 > .entry-list-item, .kadence-posts-list.psn-masonry.grid-lg-col-2 > .kb-post-list-item { width: calc(50% - 1.5rem); }
.kadence-posts-list.psn-masonry.grid-lg-col-3 > .entry-list-item, .kadence-posts-list.psn-masonry.grid-lg-col-3 > .kb-post-list-item { width: calc(33.3333% - 1.5rem); }
.kadence-posts-list.psn-masonry.grid-lg-col-4 > .entry-list-item, .kadence-posts-list.psn-masonry.grid-lg-col-4 > .kb-post-list-item { width: calc(25% - 1.5rem); }

/* Tablet breakpoint follows the editor's tabletColumns (grid-sm-col-N).
   Default tablet = 2-up when no grid-sm-col-N is present. */
@media (max-width: 1024px) {
	.kadence-posts-list.psn-masonry > .entry-list-item, .kadence-posts-list.psn-masonry > .kb-post-list-item {
		width: calc(50% - 1.5rem);
	}
	.kadence-posts-list.psn-masonry.grid-sm-col-1 > .entry-list-item, .kadence-posts-list.psn-masonry.grid-sm-col-1 > .kb-post-list-item { width: calc(100% - 1.5rem); }
	.kadence-posts-list.psn-masonry.grid-sm-col-2 > .entry-list-item, .kadence-posts-list.psn-masonry.grid-sm-col-2 > .kb-post-list-item { width: calc(50% - 1.5rem); }
	.kadence-posts-list.psn-masonry.grid-sm-col-3 > .entry-list-item, .kadence-posts-list.psn-masonry.grid-sm-col-3 > .kb-post-list-item { width: calc(33.3333% - 1.5rem); }
	.kadence-posts-list.psn-masonry.grid-sm-col-4 > .entry-list-item, .kadence-posts-list.psn-masonry.grid-sm-col-4 > .kb-post-list-item { width: calc(50% - 1.5rem); }
}

/* Mobile: always single-column. */
@media (max-width: 600px) {
	.kadence-posts-list.psn-masonry > .entry-list-item, .kadence-posts-list.psn-masonry > .kb-post-list-item,
	.kadence-posts-list.psn-masonry.grid-lg-col-1 > .entry-list-item, .kadence-posts-list.psn-masonry.grid-lg-col-2 > .entry-list-item, .kadence-posts-list.psn-masonry.grid-lg-col-3 > .entry-list-item, .kadence-posts-list.psn-masonry.grid-lg-col-4 > .entry-list-item,
	.kadence-posts-list.psn-masonry.grid-lg-col-1 > .kb-post-list-item, .kadence-posts-list.psn-masonry.grid-lg-col-2 > .kb-post-list-item, .kadence-posts-list.psn-masonry.grid-lg-col-3 > .kb-post-list-item, .kadence-posts-list.psn-masonry.grid-lg-col-4 > .kb-post-list-item {
		width: calc(100% - 1.5rem);
		float: none;
	}
}

/* The article inside the <li> still needs to stack image-then-text vertically. */
.kadence-posts-list.psn-masonry .loop-entry.has-post-thumbnail:not(.kb-post-no-image) {
	display: block !important;
	grid-template-columns: none !important;
	grid-gap: 0 !important;
	gap: 0 !important;
}

/* --- thumbnail: drop the fixed aspect ratio ---------------------------- */

.psn-masonry .post-thumbnail {
	display: block !important;
	position: relative !important;
	height: auto !important;
	min-height: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
	aspect-ratio: auto !important;
	margin-bottom: 0.75rem !important;
}

.psn-masonry .post-thumbnail-inner {
	position: static !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	inset: auto !important;
	display: block !important;
	height: auto !important;
}

.psn-masonry .post-thumbnail img,
.psn-masonry .post-thumbnail-inner img {
	position: static !important;
	display: block !important;
	width: 100% !important;
	height: auto !important;
	max-width: 100% !important;
	object-fit: initial !important;
	object-position: initial !important;
	flex: initial !important;
}

/* --- content spacing inside each card ---------------------------------- */

.psn-masonry .loop-entry .entry-content-wrap {
	padding: 0 !important;
}

.psn-masonry .loop-entry .entry-summary {
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

/* Clearfix for the floats so the pagination below isn't pulled up. */
.kadence-posts-list.psn-masonry::after {
	content: "";
	display: block;
	clear: both;
}

/* --- thumbnail border (applies to both /blog archive and /ninos block) --- */
.psn-masonry .post-thumbnail img,
.psn-masonry .post-thumbnail-inner img {
	border: 1px solid #000 !important;
	box-sizing: border-box !important;
}