/**
 * Post Display Blocks — premium feature styles.
 *
 * Layered on top of the compiled view stylesheet. Classes come from two places:
 * values the view script passes through verbatim (accordion `theme-*`), and
 * modifier classes stamped by pro-frontend.js from the block attributes.
 */

/* ==========================================================================
   Infinite scroll
   ========================================================================== */

.pdbInfiniteHidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.pdbInfiniteSentinel {
	width: 100%;
	height: 1px;
	pointer-events: none;
}

.pdbInfiniteStatus {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 24px 0;
	font-size: 14px;
	opacity: 0.75;
}

.pdbInfiniteSpinner {
	width: 18px;
	height: 18px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: pdbSpin 0.7s linear infinite;
}

@keyframes pdbSpin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.pdbInfiniteSpinner { animation-duration: 2s; }
}

/* ==========================================================================
   Image hover animations
   The view script only emits transforms for zoom-in / zoom-out, so these
   values produce no inline CSS to compete with.
   ========================================================================== */

[class*="pdb-img-anim-"] .pdbThumb {
	overflow: hidden;
}

[class*="pdb-img-anim-"] .pdbThumb,
[class*="pdb-img-anim-"] .pdbThumb img {
	transition: transform 0.45s ease, filter 0.45s ease, box-shadow 0.45s ease;
	will-change: transform;
}

.pdb-img-anim-zoomIn .pdbPost:hover .pdbThumb img { transform: scale(1.08); }
.pdb-img-anim-scaleUp .pdbPost:hover .pdbThumb { transform: scale(1.04); }

.pdb-img-anim-liftUp .pdbPost {
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.pdb-img-anim-liftUp .pdbPost:hover {
	transform: translateY(-8px);
	box-shadow: 0 18px 40px rgba(12, 13, 60, 0.16);
}

.pdb-img-anim-pulse .pdbPost:hover .pdbThumb img {
	animation: pdbPulse 1.6s ease-in-out infinite;
}

@keyframes pdbPulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.05); }
}

.pdb-img-anim-tilt .pdbPost {
	transition: transform 0.4s ease;
	transform-style: preserve-3d;
}
.pdb-img-anim-tilt .pdbPost:hover {
	transform: perspective(900px) rotateX(2.5deg) rotateY(-2.5deg) translateY(-4px);
}

.pdb-img-anim-blurSiblings .pdbPost {
	transition: filter 0.35s ease, opacity 0.35s ease;
}
.pdb-img-anim-blurSiblings .pdbGridPosts:hover .pdbPost:not(:hover),
.pdb-img-anim-blurSiblings .pdbMasonryPosts:hover .pdbPost:not(:hover) {
	filter: blur(1.5px);
	opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
	[class*="pdb-img-anim-"] .pdbThumb,
	[class*="pdb-img-anim-"] .pdbThumb img,
	[class*="pdb-img-anim-"] .pdbPost {
		transition: none !important;
		animation: none !important;
		transform: none !important;
	}
}

/* ==========================================================================
   Read More — icon position, gap, animations, bottom alignment
   ========================================================================== */

.pdbReadMore a {
	display: inline-flex;
	align-items: center;
	gap: var(--pdb-rm-icon-gap, 10px);
}

.pdb-rm-icon-left .pdbReadMore a  { flex-direction: row-reverse; }
.pdb-rm-icon-right .pdbReadMore a { flex-direction: row; }

.pdb-rm-anim-scaleUp .pdbReadMore a,
.pdb-rm-anim-liftUp .pdbReadMore a,
.pdb-rm-anim-pulse .pdbReadMore a,
.pdb-rm-anim-zoomIn .pdbReadMore a {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pdb-rm-anim-scaleUp .pdbReadMore a:hover { transform: scale(1.06); }
.pdb-rm-anim-zoomIn .pdbReadMore a:hover  { transform: scale(1.04); }
.pdb-rm-anim-liftUp .pdbReadMore a:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 22px rgba(12, 13, 60, 0.22);
}
.pdb-rm-anim-pulse .pdbReadMore a:hover {
	animation: pdbPulse 1.4s ease-in-out infinite;
}

/* Push the button to the card bottom so it lines up across a row. */
.pdb-rm-bottom .pdbPost {
	display: flex;
	flex-direction: column;
}
.pdb-rm-bottom .pdbInnerContent {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.pdb-rm-bottom .pdbReadMore {
	margin-top: auto;
}

/* ==========================================================================
   Meta alignment
   ========================================================================== */

.pdb-meta-aligned .pdbMeta {
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--pdb-meta-align, flex-start);
}

/* ==========================================================================
   Title ellipsis on truncation
   ========================================================================== */

.pdb-title-ellipsis .pdbTitle,
.pdb-title-ellipsis .pdbTitle a {
	display: -webkit-box;
	-webkit-line-clamp: var(--pdb-title-lines, 2);
	line-clamp: var(--pdb-title-lines, 2);
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ==========================================================================
   Accordion themes
   The view script writes `theme-<value>` through verbatim, so any theme name
   set in the editor lands here as a selector.
   ========================================================================== */

/* -- Thumbnail: a leading image on each header ---------------------------- */
.pdbAccordionPosts.theme-thumbnail .pdbAccordionItem {
	border: 1px solid rgba(12, 13, 60, 0.12);
	border-radius: 8px;
	margin-bottom: 10px;
	overflow: hidden;
}
.pdbAccordionPosts.theme-thumbnail .pdbAccordionHeader {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
}
.pdbAccordionPosts.theme-thumbnail .pdbAccordionHeader .pdbThumb {
	flex: 0 0 auto;
	width: var(--pdb-acc-thumb, 64px);
	height: var(--pdb-acc-thumb, 64px);
	border-radius: 6px;
	overflow: hidden;
	padding-bottom: 0 !important;
}
.pdbAccordionPosts.theme-thumbnail .pdbAccordionHeader .pdbThumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* -- Numbered FAQ: an auto-incrementing counter badge --------------------- */
.pdbAccordionPosts.theme-numberedFaq {
	counter-reset: pdbFaq;
}
.pdbAccordionPosts.theme-numberedFaq .pdbAccordionItem {
	counter-increment: pdbFaq;
	border-bottom: 1px solid rgba(12, 13, 60, 0.12);
}
.pdbAccordionPosts.theme-numberedFaq .pdbAccordionHeaderText::before {
	content: counter(pdbFaq, decimal-leading-zero);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2em;
	height: 2em;
	margin-right: 12px;
	padding: 0 0.4em;
	border-radius: 999px;
	background: var(--pdb-acc-badge-bg, #146EF5);
	color: var(--pdb-acc-badge-color, #fff);
	font-size: 0.8em;
	font-weight: 700;
	line-height: 1;
}

/* -- Split Panel: header rail beside the content -------------------------- */
@media (min-width: 782px) {
	.pdbAccordionPosts.theme-splitPanel .pdbAccordionItem {
		display: grid;
		grid-template-columns: minmax(180px, 32%) 1fr;
		align-items: start;
		border-left: 3px solid transparent;
		transition: border-color 0.25s ease, background 0.25s ease;
	}
	.pdbAccordionPosts.theme-splitPanel .pdbAccordionItem:has(.pdbAccordionPanel[aria-hidden="false"]),
	.pdbAccordionPosts.theme-splitPanel .pdbAccordionItem.is-open {
		border-left-color: var(--pdb-acc-accent, #146EF5);
		background: rgba(20, 110, 245, 0.04);
	}
	.pdbAccordionPosts.theme-splitPanel .pdbAccordionHeader {
		position: sticky;
		top: 1rem;
		padding: 16px;
	}
	.pdbAccordionPosts.theme-splitPanel .pdbAccordionPanelInner {
		padding: 16px 16px 16px 0;
	}
}

/* -- Minimal Lines: rules only, no chrome --------------------------------- */
.pdbAccordionPosts.theme-minimalLines .pdbAccordionItem {
	border: 0;
	border-bottom: 1px solid rgba(12, 13, 60, 0.14);
	border-radius: 0;
	background: none;
	margin: 0;
}
.pdbAccordionPosts.theme-minimalLines .pdbAccordionHeader {
	padding: 18px 2px;
	background: none !important;
}
.pdbAccordionPosts.theme-minimalLines .pdbAccordionHeaderText {
	letter-spacing: 0.01em;
}
.pdbAccordionPosts.theme-minimalLines .pdbAccordionPanelInner {
	padding: 0 2px 18px;
}

/* ==========================================================================
   List sub-layouts
   ========================================================================== */

/* -- Even/odd: alternate the image side on a list layout ------------------ */
.pdbListPosts.subLayout-evenOdd .pdbPost:nth-child(even),
.pdbGridPosts.subLayout-evenOdd .pdbPost:nth-child(even) {
	flex-direction: row-reverse;
}

/* -- Overlay content box: text in a raised card over the image ------------ */
.subLayout-overlayContentBox .pdbPost {
	position: relative;
}
.subLayout-overlayContentBox .pdbInnerContent {
	position: relative;
	z-index: 2;
	margin: -60px 20px 0;
	padding: 22px;
	border-radius: 8px;
	background: var(--pdb-overlay-bg, #fff);
	box-shadow: 0 12px 30px rgba(12, 13, 60, 0.14);
}

/* ==========================================================================
   Timeline layout
   ========================================================================== */

.pdbTimelinePosts {
	position: relative;
	padding-left: 34px;
}
.pdbTimelinePosts::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 9px;
	width: 2px;
	background: var(--pdb-timeline-line, rgba(12, 13, 60, 0.16));
}
.pdbTimelinePosts .pdbPost {
	position: relative;
	margin-bottom: 28px;
}
.pdbTimelinePosts .pdbPost::before {
	content: "";
	position: absolute;
	top: 8px;
	left: -30px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--pdb-timeline-dot, #146EF5);
	box-shadow: 0 0 0 4px var(--pdb-timeline-ring, #fff);
}

@media (min-width: 782px) {
	.pdbTimelinePosts.timeline-alternate {
		padding-left: 0;
	}
	.pdbTimelinePosts.timeline-alternate::before {
		left: 50%;
		transform: translateX(-50%);
	}
	.pdbTimelinePosts.timeline-alternate .pdbPost {
		width: calc(50% - 30px);
	}
	.pdbTimelinePosts.timeline-alternate .pdbPost:nth-child(odd) {
		margin-left: auto;
	}
	.pdbTimelinePosts.timeline-alternate .pdbPost:nth-child(odd)::before {
		left: -37px;
	}
	.pdbTimelinePosts.timeline-alternate .pdbPost:nth-child(even)::before {
		left: auto;
		right: -37px;
	}
}

/* ==========================================================================
   Dark-scheme fallbacks for the tokens above
   ========================================================================== */

@media (prefers-color-scheme: dark) {
	.subLayout-overlayContentBox .pdbInnerContent {
		background: var(--pdb-overlay-bg, #16181d);
		box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
	}
	.pdbTimelinePosts::before {
		background: var(--pdb-timeline-line, rgba(255, 255, 255, 0.18));
	}
	.pdbTimelinePosts .pdbPost::before {
		box-shadow: 0 0 0 4px var(--pdb-timeline-ring, #16181d);
	}
}