/*
 * This block's markup is fully namespaced (.pmtpofob-* classes throughout) so
 * it never collides with Context Blog Pro's own .blog-snippet / .row /
 * .col-lg-* etc. -- intentional, on request. That means it does NOT
 * inherit the theme's CSS automatically; everything the grid needs
 * (layout, spacing, colors, type) is defined below, modeled on the
 * theme's own "Grid column section" look.
 */

/* Scoped box-sizing reset. Without this, any descendant that doesn't
   explicitly declare box-sizing falls back to the browser default
   (content-box), so width:100% + padding/border/margin can silently
   push it wider than its parent -- exactly the "image shifts outside
   the card" symptom. Scoped to .pmtpofob-post-grid-block only, so it can't
   affect anything else on the page. */
.pmtpofob-post-grid-block,
.pmtpofob-post-grid-block *,
.pmtpofob-post-grid-block *::before,
.pmtpofob-post-grid-block *::after {
	box-sizing: border-box;
}

.pmtpofob-post-grid-block .pmtpofob-row>[class*='pmtpofob-col-'] {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

/* Gap-safe column widths: calc((100% - (N-1)*gap) / N) for N columns
   per row, so N items + (N-1) gaps always total exactly 100% -- no
   overflow, and no need for the row's old negative-margin/padding
   trick (which doubled the visible gap between cards versus the row
   gap, since two adjacent cards' padding summed together). */
.pmtpofob-post-grid-block .pmtpofob-col-lg-2 {
	/* 6 per row */
	flex: 0 0 calc((100% - 5 * var(--pmtpofob-column-margin, 15px)) / 6);
	max-width: calc((100% - 5 * var(--pmtpofob-column-margin, 15px)) / 6);
}

.pmtpofob-post-grid-block .pmtpofob-col-lg-3 {
	/* 4 per row */
	flex: 0 0 calc((100% - 3 * var(--pmtpofob-column-margin, 15px)) / 4);
	max-width: calc((100% - 3 * var(--pmtpofob-column-margin, 15px)) / 4);
}

.pmtpofob-post-grid-block .pmtpofob-col-lg-4 {
	/* 3 per row */
	flex: 0 0 calc((100% - 2 * var(--pmtpofob-column-margin, 15px)) / 3);
	max-width: calc((100% - 2 * var(--pmtpofob-column-margin, 15px)) / 3);
}

.pmtpofob-post-grid-block .pmtpofob-col-lg-6 {
	/* 2 per row */
	flex: 0 0 calc((100% - var(--pmtpofob-column-margin, 15px)) / 2);
	max-width: calc((100% - var(--pmtpofob-column-margin, 15px)) / 2);
}

.pmtpofob-post-grid-block .pmtpofob-col-lg-12 {
	/* 1 per row -- no gap to subtract */
	flex: 0 0 100%;
	max-width: 100%;
}

@media (max-width: 991px) {
	.pmtpofob-post-grid-block .pmtpofob-col-md-6 {
		flex: 0 0 calc((100% - var(--pmtpofob-column-margin, 15px)) / 2);
		max-width: calc((100% - var(--pmtpofob-column-margin, 15px)) / 2);
	}
}

@media (max-width: 575px) {
	.pmtpofob-post-grid-block .pmtpofob-col-sm-6 {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

.pmtpofob-post-grid-block--empty {
	padding: 24px;
	border: 1px dashed #ccc;
	border-radius: 6px;
	color: #757575;
	text-align: center;
}

.pmtpofob-thumb-blog.pmtpofob-post-grid-block {

	.pmtpofob-row {
		display: flex;
		flex-wrap: wrap;
		gap: var(--pmtpofob-row-margin, 30px) var(--pmtpofob-column-margin, 15px);
	}

	.pmtpofob-col-lg-4,
	.pmtpofob-col-lg-3 {
		border-radius: 5px;
	}

	.pmtpofob-blog-snippet {
		width: 100%;
		overflow: hidden;
		position: relative;
		box-shadow: var(--pmtpofob-box-shadow, 0px 2px 12px 0px rgba(0, 0, 0, 0.09));
		border: var(--pmtpofob-box-border, 0px solid grey);
		border-radius: var(--pmtpofob-box-radius-top, 10px) var(--pmtpofob-box-radius-top, 10px) var(--pmtpofob-box-radius-bottom, 10px) var(--pmtpofob-box-radius-bottom, 10px);
		text-align: start;
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
	}

	img {
		object-fit: cover;
		width: 100%;
		aspect-ratio: 1.618;
		border-radius: var(--pmtpofob-image-radius, 10px);
		height: 100%;
	}

	.pmtpofob-design2-col-a img {
		aspect-ratio: 1.2;
	}

	.pmtpofob-related-post__image img {
		aspect-ratio: 1;
	}

	.pmtpofob-img-holder {
		display: block;
		margin: 2px 2px 2px;
		flex-shrink: 0;
	}

	.pmtpofob-blog-content {
		padding: 10px 20px;
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
	}

	/* Design 3: image + content side by side at the golden ratio.
	   Same gap-safe flex-grow-ratio technique as Design 2's Column A/B
	   (basis 0, ratios 382:618), so Column margin never causes overflow
	   regardless of its value. */
	.pmtpofob-blog-snippet--row {
		flex-direction: row;
		align-items: stretch;
		gap: var(--pmtpofob-column-margin, 15px);
	}

	.pmtpofob-blog-snippet--row.pmtpofob-row-reverse {
		flex-direction: row-reverse;
	}

	.pmtpofob-blog-snippet--row .pmtpofob-img-holder {
		flex: 382 1 0%;
		min-width: 0;
		/* margin: 0; */
		/* background-color: #f1f0f0; */
	}

	.pmtpofob-blog-snippet--row .pmtpofob-img-holder img {
		width: 100%;
		height: 100%;
	}

	.pmtpofob-blog-snippet--row .pmtpofob-blog-content {
		flex: 618 1 0%;
		min-width: 0;
		padding: 0;
	}

	.pmtpofob-extra-info span,
	.pmtpofob-extra-info span a,
	.pmtpofob-extra-info a,
	.social-share li a,
	.social-share,
	.image-inner-content .pmtpofob-blog-snippet .pmtpofob-blog-content .pmtpofob-extra-info a {
		color: inherit;
	}

	.social-share {
		letter-spacing: 1px;
		font-size: 12px;
	}

	.social-share li a {
		color: #999;
	}

	.pmtpofob-extra-info {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		list-style: none;
		font-size: 12px;
		font-weight: 400;
		color: #aaa;
		letter-spacing: 1px;
		border: 1px solid #f1f0f0;
		border-style: solid none;
		padding: 5px 0;
		justify-content: flex-start;
		margin-block: 10px;
		margin-inline: 0 10px;
		margin-top: auto;
		order: 98;
	}

	.pmtpofob-extra-info,
	.social-share {
		line-height: 1;
	}

	.pmtpofob-extra-info li {
		margin-block: 5px;
		margin-inline: 0 10px;
	}

	.pmtpofob-meta-author {
		display: inline-flex;
		align-items: center;
		gap: 5px;
	}

	.pmtpofob-author-avatar {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		vertical-align: middle;
		flex-shrink: 0;
	}

	.pmtpofob-category-tag {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		margin: 10px 6px 10px 0;
		flex-wrap: wrap;
	}

	.pmtpofob-category-tag__prefix,
	.pmtpofob-category-tag__label {
		display: inline-block;
		font-size: 12px;
		font-weight: 500;
		letter-spacing: 0.02em;
		padding: 4px 9px;
		border-radius: var(--pmtpofob-box-radius-top, 0px);
		word-break: break-word;
	}


	.pmtpofob-category-tag__prefix {
		margin-right: -12px;
		z-index: 10;
	}

	.pmtpofob-category-tag__label {
		text-decoration: none;
	}

	.pmtpofob-title {
		/* font-family: sans-serif;  not added casuse theme h tag must have some family already*/
		font-size: var(--pmtpofob-title-font-size, 20px);
		word-break: break-word;
		overflow-wrap: break-word;
		margin: 0 0 5px;
		line-height: 1.4;
	}

	/* .pmtpofob-title a {
		color: #6b6b6b;
	} */

	.pmtpofob-blog-snippet--simple .pmtpofob-title {
		font-size: calc(var(--pmtpofob-title-font-size, 20px) * var(--pmtpofob-title-scale-b, 0.75));
		line-height: 1.3;
		margin: 0 0 12px;
	}

	.pmtpofob-blog-snippet--row .pmtpofob-title {
		min-height: 40px;
	}

	.pmtpofob-blog-snippet--simple .pmtpofob-blog-content {
		padding: 4px 10px;
	}

	.pmtpofob-excerpt {
		font-size: 14px;
		line-height: 1.6;
		color: #6b6b6b;
		margin: 0 0 10px;
	}

	/* Tags: distinct pill style, separate from the category badge. */
	.pmtpofob-tag-list {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		list-style: none;
		margin: 5px 0 10px;
		padding: 0;
	}

	.pmtpofob-design3-list:not(.pmtpofob-row-reverse) .pmtpofob-blog-content.no_image {
		margin-left: 12px;
	}

	.pmtpofob-design3-list .pmtpofob-row-reverse .pmtpofob-blog-content {
		margin-left: 12px;
		margin-top: 12px;
	}

	.pmtpofob-design3-list:not(.pmtpofob-row-reverse) .pmtpofob-blog-content {
		margin-top: 12px;
	}

	/* .pmtpofob-design3-list img {
		padding: 2px 2px 2px 2px;
	} */

	.pmtpofob-tag-list li {
		margin: 0;
	}

	.pmtpofob-tag-list li a {
		display: inline-block;
		font-size: 11px;
		font-weight: 500;
		line-height: 1;
		letter-spacing: 0.02em;
		color: #666;
		background: #f1f0f0;
		border-radius: 999px;
		padding: 5px 12px;
		text-decoration: none;
		transition: background-color 0.15s ease, color 0.15s ease;
	}

	.pmtpofob-tag-list li a:hover {
		filter: brightness(0.92);
	}

	.pmtpofob-read-more {
		display: inline-flex;
		align-items: center;
		align-self: flex-start;
		gap: 6px;
		font-weight: 500;
		color: #fff;
		padding: 8px 18px;
		border-radius: 6px;
		margin-top: 10px;
		order: 99;
		transition: opacity 0.15s ease;
	}

	.pmtpofob-read-more:hover {
		opacity: 0.88;
	}

	.pmtpofob-read-more span {
		transition: transform 0.15s ease;
	}

	.pmtpofob-read-more:hover span {
		transform: translateX(2px);
	}

	/* Text alignment: title / excerpt / meta rows. */
	&.pmtpofob-align-left {
		.pmtpofob-blog-content {
			text-align: start;
		}

		.pmtpofob-category-tag,
		.pmtpofob-extra-info,
		.pmtpofob-tag-list {
			justify-content: flex-start;
		}
	}

	&.pmtpofob-align-center {
		.pmtpofob-blog-content {
			text-align: center;
		}

		.pmtpofob-category-tag,
		.pmtpofob-extra-info,
		.pmtpofob-tag-list {
			justify-content: center;
		}
	}

	&.pmtpofob-align-right {
		.pmtpofob-blog-content {
			text-align: end;
		}

		.pmtpofob-category-tag,
		.pmtpofob-extra-info,
		.pmtpofob-tag-list {
			justify-content: flex-end;
		}
	}

	select {
		height: inherit !important;
	}
}

.home-section.pmtpofob-thumb-blog {
	padding: 30px 0;
}

.pmtpofob-main-title {
	font-weight: 600;
	line-height: 1.25;
	margin: 0 0 24px;
	color: #17181b;
}

h1.pmtpofob-main-title {
	font-size: 32px;
}

h2.pmtpofob-main-title {
	font-size: 26px;
}

/* Design 2: golden-ratio two-column layout (38.2% / 61.8%), 5 posts.
   Reuses the same .pmtpofob-blog-snippet / .pmtpofob-title / .pmtpofob-extra-info etc.
   rules above (this wrapper still carries .pmtpofob-thumb-blog.pmtpofob-post-grid-block),
   so box-shadow, border, radius, and all Style-panel options apply
   identically to Design 1 and Design 2. Only the grid scaffolding below
   is new. */

.pmtpofob-design2-grid {
	display: flex;
	align-items: stretch;
	gap: var(--pmtpofob-column-margin, 15px);
}

.pmtpofob-design2-col-a {
	flex: 382 1 0%;
	min-width: 0;
	display: flex;
}

.pmtpofob-design2-col-a .pmtpofob-blog-snippet {
	width: 100%;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.pmtpofob-design2-col-b {
	flex: 618 1 0%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--pmtpofob-row-margin, 30px);
}

.pmtpofob-design2-row {
	display: flex;
	flex: 1;
	gap: var(--pmtpofob-column-margin, 15px);
}

.pmtpofob-design2-cell {
	flex: 1 1 0%;
	min-width: 0;
	display: flex;
}

.pmtpofob-design2-cell--empty {
	border: 1px dashed #d9d9d9;
	border-radius: var(--pmtpofob-box-radius-top, 10px) var(--pmtpofob-box-radius-top, 10px) var(--pmtpofob-box-radius-bottom, 10px) var(--pmtpofob-box-radius-bottom, 10px);
	background: transparent;
}

.pmtpofob-design2-cell .pmtpofob-blog-snippet {
	width: 100%;
}

/* Simplified card (Design 2, Column B): lighter footprint -- smaller
   title, single compact meta line, tighter padding. Title/content
   overrides live inside the .pmtpofob-thumb-blog.pmtpofob-post-grid-block block
   above (needed for CSS specificity to actually beat the base
   .pmtpofob-title rule -- see 2.11.1 fix note in readme.txt). */

.pmtpofob-extra-info--simple {
	font-size: 11px;
	padding: 4px 0;
}

@media (max-width: 767px) {
	.pmtpofob-design2-grid {
		flex-direction: column;
	}

	.pmtpofob-design2-col-a,
	.pmtpofob-design2-col-b {
		flex: 1 1 100%;
	}

	.pmtpofob-design2-row {
		flex-direction: row;
	}
}

/* Design 3: stacked list of image+content rows. */
.pmtpofob-design3-list {
	display: flex;
	flex-direction: column;
	gap: var(--pmtpofob-row-margin, 30px);
}

.pmtpofob-design3-item {
	width: 100%;
}

@media (max-width: 575px) {

	.pmtpofob-blog-snippet--row,
	.pmtpofob-blog-snippet--row.pmtpofob-row-reverse {
		flex-direction: column;
	}
}

/* "Show more" button: bottom-right of .home-section, links to the
   selected category's archive (or the blog page if no category is
   set). Hidden whenever Specific Posts is active, or when there
   simply aren't more matching posts than what's already shown. */
.pmtpofob-show-more-wrap {
	display: flex;
	justify-content: flex-end;
	margin-top: 10px;
}

.pmtpofob-show-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 500;
	color: #17181b;
	text-decoration: none;
	padding: 8px 18px;
}

.pmtpofob-show-more span {
	transition: transform 0.15s ease;
}

.pmtpofob-show-more:hover span {
	transform: translateX(2px);
}

/* Section header: main title (left) + live category filter dropdown
   (right), same line. margin-left:auto on the dropdown wrapper pins it
   to the right edge whether or not a title is actually present. */
.pmtpofob-section-header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 20px;
}

.pmtpofob-section-header .pmtpofob-main-title {
	margin-bottom: 0;
}

.pmtpofob-filter-controls {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

.pmtpofob-orderby-filter-wrap,
.pmtpofob-category-filter-wrap {
	margin: 0;
}

.pmtpofob-orderby-filter-wrap .pmtpofob-orderby-filter,
.pmtpofob-category-filter-wrap .pmtpofob-category-filter {
	font-size: 13px;
	color: #17181b;
	padding: 2px 27px 2px 4px;
	border: 1px solid #d9d9d9;
	border-radius: 6px;
	background: #fff;
	cursor: pointer;
	appearance: none;
	line-height: 1;
	min-height: auto;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2317181b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
}

.pmtpofob-orderby-filter-wrap .pmtpofob-orderby-filter:focus,
.pmtpofob-category-filter-wrap .pmtpofob-category-filter:focus {
	outline: 2px solid #17181b;
	outline-offset: 1px;
}

/* Loading state while the AJAX category swap is in flight. */
.pmtpofob-grid-content {
	transition: opacity 0.15s ease;
}

.pmtpofob-grid-content.pmtpofob-loading {
	pointer-events: none;
}

/* Skeleton loading state: placeholder shapes matching whichever design
   is active, with a shimmering gradient sweep instead of the previous
   plain opacity fade. */
.pmtpofob-skeleton-wrap {
	animation: pmtpofob-skeleton-fade-in 0.15s ease;
}

@keyframes pmtpofob-skeleton-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.pmtpofob-skeleton-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}

.pmtpofob-skeleton-card--row {
	flex-direction: row;
	align-items: flex-start;
	gap: var(--pmtpofob-column-margin, 15px);
}

.pmtpofob-skeleton-card--row .pmtpofob-skeleton-image {
	flex: 382 1 0%;
	aspect-ratio: 1.618;
}

.pmtpofob-skeleton-card-content {
	flex: 618 1 0%;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pmtpofob-skeleton-card--simple .pmtpofob-skeleton-image {
	aspect-ratio: 1.4;
}

.pmtpofob-skeleton-block {
	background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%);
	background-size: 400% 100%;
	animation: pmtpofob-skeleton-shimmer 1.4s ease infinite;
	border-radius: 6px;
}

.pmtpofob-skeleton-image {
	width: 100%;
	aspect-ratio: 1.618;
	border-radius: var(--pmtpofob-image-radius, 10px);
}

.pmtpofob-skeleton-line {
	height: 14px;
	width: 100%;
}

.pmtpofob-skeleton-line--title {
	height: 18px;
	width: 80%;
}

.pmtpofob-skeleton-line--short {
	width: 55%;
}

@keyframes pmtpofob-skeleton-shimmer {
	0% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pmtpofob-skeleton-block {
		animation: none;
		background: #eee;
	}
}

/* Design 3: related posts strip under each row's content -- up to 4
   items, square images, title 20% smaller than the parent by default
   (adjustable via --pmtpofob-related-title-scale, Typography panel). */
.pmtpofob-related-posts {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid #eee;
}

.pmtpofob-related-posts__label {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #757575;
	margin: 0 0 10px;
}

.pmtpofob-related-posts__list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.pmtpofob-related-post {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 calc(25% - 9px);
	min-width: 90px;
	text-decoration: none;
	color: inherit;
	box-shadow: var(--pmtpofob-box-shadow, 0px 2px 12px 0px rgba(0, 0, 0, 0.09));
	border: var(--pmtpofob-box-border, 0px solid grey);
	border-radius: var(--pmtpofob-box-radius-top, 10px) var(--pmtpofob-box-radius-top, 10px) var(--pmtpofob-box-radius-bottom, 10px) var(--pmtpofob-box-radius-bottom, 10px);
}

.pmtpofob-related-post--empty {
	aspect-ratio: 1;
	border: 1px dashed #d9d9d9;
	border-radius: var(--pmtpofob-image-radius, 10px);
	background: transparent;
}

.pmtpofob-related-post__image {
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--pmtpofob-image-radius, 10px);
	background: #f1f0f0;
	margin: 2px 2px 2px 2px;
}

.pmtpofob-related-post__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 1;
	border-radius: var(--pmtpofob-image-radius, 10px);
}

.pmtpofob-related-post__title {
	font-size: calc(var(--pmtpofob-title-font-size, 20px) * var(--pmtpofob-related-title-scale, 0.8));
	line-height: 1.35;
	margin: 8px;
	word-break: break-word;
	overflow-wrap: break-word;
	color: #6b6b6b;
}

@media (max-width: 480px) {
	.pmtpofob-related-post {
		flex: 1 1 calc(50% - 6px);
	}
}