/*
 * Posts Slider
 * Hover/focus on a card expands it to ~50% of the container width while the
 * remaining cards share the other 50%. Pure CSS via flex-grow + :has().
 */

.ps-posts-slider {
	/* Defaults — overridden by inline <style> printed from saved options. */
	--ps-radius: 8x;
	--ps-font: inherit;
	--ps-title-size: clamp(1rem, 1vw + 0.75rem, 1.35rem);
	--ps-meta-size: clamp(0.8rem, 0.4vw + 0.7rem, 0.9rem);
	--ps-excerpt-size: clamp(0.85rem, 0.4vw + 0.75rem, 1rem);
	--ps-bg: #0f1115;
	--ps-surface: #1a1d24;
	--ps-text: #f5f6f8;
	--ps-muted: #a8adb8;
	--ps-accent: #ff5b1f;
	--ps-overlay: rgba(15, 17, 21, 0.55);

	/* Per-instance — set inline by the renderer based on post count. */
	--ps-count: 4;
	--ps-grow: 3;

	--ps-card-min-h: clamp(280px, 38vw, 460px);
	--ps-gap: clamp(8px, 1vw, 16px);
	--ps-transition: 480ms cubic-bezier(0.22, 1, 0.36, 1);

	display: block;
	width: 100%;
	font-family: var(--ps-font);
	color: var(--ps-text);
	box-sizing: border-box;
}

.ps-posts-slider *,
.ps-posts-slider *::before,
.ps-posts-slider *::after {
	box-sizing: border-box;
}

/* Viewport is a no-op in grid mode (just lays out the track). In slider mode
   it clips the overflowing track so off-screen cards stay hidden. */
.ps-posts-slider__viewport {
	display: block;
	position: relative;
	width: 100%;
}

.ps-posts-slider.is-slider {
	position: relative; /* anchor for absolute-positioned nav buttons */
}

.ps-posts-slider.is-slider .ps-posts-slider__viewport {
	overflow: hidden;
}

.ps-posts-slider__track {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--ps-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
	min-height: var(--ps-card-min-h);
}

/* Slider mode: track gets sized + transformed by JS via inline style. CSS
   only owns the transition + cards' fixed widths. */
.ps-posts-slider.is-slider .ps-posts-slider__track {
	transition: transform var(--ps-transition);
	will-change: transform;
}

.ps-posts-slider.is-slider .ps-posts-slider__item {
	/* Each card is exactly 1/visible of the viewport width, gap-aware. */
	flex: 0 0 calc((100% - (var(--ps-visible) - 1) * var(--ps-gap)) / var(--ps-visible));
}

/* Disable hover-expand in slider mode — hovered card keeps its fixed width
   so off-screen cards never get pulled into view. Image scale, overlay,
   meta-extra and excerpt reveal still fire from the hover rules above. */
.ps-posts-slider.is-slider .ps-posts-slider__track .ps-posts-slider__item:hover,
.ps-posts-slider.is-slider .ps-posts-slider__track .ps-posts-slider__item:focus-within,
.ps-posts-slider.is-slider .ps-posts-slider__track .ps-posts-slider__item.is-active {
	flex-grow: 0;
	flex-basis: calc((100% - (var(--ps-visible) - 1) * var(--ps-gap)) / var(--ps-visible));
}

/* Nav buttons — circular, semi-transparent, perched on top of the slider. */
.ps-posts-slider__nav {
	position: absolute;
	top: 50%;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	cursor: pointer;
	transform: translateY(-50%);
	transition: background-color 200ms ease, transform 200ms ease, opacity 200ms ease;
	opacity: 0.85;
	-webkit-appearance: none;
	appearance: none;
}

.ps-posts-slider__nav:hover {
	background: rgba(0, 0, 0, 0.78);
	opacity: 1;
}

.ps-posts-slider__nav:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--ps-accent);
}

.ps-posts-slider__nav--prev { left: 8px; }
.ps-posts-slider__nav--next { right: 8px; }

.ps-posts-slider__arrow {
	display: block;
	width: 20px;
	height: 20px;
}

.ps-posts-slider__item {
	flex: 1 1 0;
	min-width: 0; /* allow shrinking inside flex */
	display: flex;
	transition: flex-grow var(--ps-transition);
}

/* Hover/focus expansion. The two rules below MUST have equal specificity
   so the cascade resolves on source order — same trick the Hotmart layout
   uses (.wrapper:hover .card vs .wrapper .card:hover). The track-hover
   rule keeps non-active siblings at flex-grow:1 while the active rule,
   placed later and with the same specificity, wins for the hovered card. */
.ps-posts-slider__track:hover .ps-posts-slider__item,
.ps-posts-slider__track:focus-within .ps-posts-slider__item {
	flex-grow: 1;
}

.ps-posts-slider__track .ps-posts-slider__item:hover,
.ps-posts-slider__track .ps-posts-slider__item:focus-within,
.ps-posts-slider__track .ps-posts-slider__item.is-active {
	flex-grow: var(--ps-grow);
}

/* The card itself is the link, fills the item, hosts media + content layers. */
.ps-posts-slider__card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
	min-height: var(--ps-card-min-h);
	overflow: hidden;
	border-radius: var(--ps-radius);
	background: var(--ps-surface);
	color: inherit;
	text-decoration: none;
	isolation: isolate;
	transition: transform var(--ps-transition), box-shadow var(--ps-transition);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 24px rgba(0, 0, 0, 0.18);
}

.ps-posts-slider__card:focus {
	outline: none;
}
.ps-posts-slider__card:focus-visible {
	box-shadow:
		0 0 0 3px var(--ps-accent),
		0 8px 24px rgba(0, 0, 0, 0.28);
}

.ps-posts-slider__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	overflow: hidden;
}


.ps-posts-slider__media--empty {
	background: linear-gradient(135deg, var(--ps-surface) 0%, var(--ps-bg) 100%);
}

.ps-posts-slider__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: scale(1.02);
	transition: transform var(--ps-transition), filter var(--ps-transition);
	filter: saturate(0.9) brightness(0.85);
}

.ps-posts-slider__item:hover .ps-posts-slider__image,
.ps-posts-slider__item:focus-within .ps-posts-slider__image,
.ps-posts-slider__item.is-active .ps-posts-slider__image {
	transform: scale(1.06);
	filter: saturate(1.05) brightness(1);
}

.ps-posts-slider__overlay {
	display: block;
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(
			to top,
			rgba(0, 0, 0, 0.78) 0%,
			rgba(0, 0, 0, 0.6) 28%,
			rgba(0, 0, 0, 0.25) 55%,
			transparent 80%
		);
	transition: opacity var(--ps-transition);
}

.ps-posts-slider__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: clamp(16px, 1.6vw, 28px);
	color: var(--ps-text);
	/* Soft shadow on every text node inside the card. Two-stop stack: a tight
	   1px halo for sharpness on top of the photo, plus a wider 6px diffusion
	   for legibility against bright image areas. */
	text-shadow:
		0 1px 1px rgba(0, 0, 0, 0.55),
		0 2px 6px rgba(0, 0, 0, 0.45);
}

.ps-posts-slider__title {
	display: block;
	margin: 0;
	font-family: var(--font-family-secondary);
	font-size: var(--ps-title-size);
	font-weight: 700;
	line-height: 1.2;
	color: inherit;
	text-wrap: balance; /* progressively enhanced; harmless when unsupported */
	overflow-wrap: break-word;
	transition: transform var(--ps-transition);
}

.ps-posts-slider__meta {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	font-family: var(--font-family-secondary, inherit);
	font-size: var(--ps-meta-size);
	color: var(--ps-muted);
	line-height: 1.3;
}

.ps-posts-slider__date,
.ps-posts-slider__author {
	font-family: var(--font-family-secondary, inherit);
}

.ps-posts-slider__author-prefix {
	opacity: 0.75;
	font-weight: 400;
	margin-right: 0.15em;
}

.ps-posts-slider__separator {
	opacity: 0.55;
	margin: 0 0.15em;
}

.ps-posts-slider__meta-extra {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	opacity: 0;
	transform: translateY(2px);
	transition:
		max-width var(--ps-transition),
		opacity var(--ps-transition),
		transform var(--ps-transition);
}

.ps-posts-slider__item:hover .ps-posts-slider__meta-extra,
.ps-posts-slider__item:focus-within .ps-posts-slider__meta-extra,
.ps-posts-slider__item.is-active .ps-posts-slider__meta-extra {
	max-width: 100%;
	opacity: 1;
	transform: translateY(0);
}

.ps-posts-slider__comments {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.ps-posts-slider__icon {
	display: inline-block;
	flex: none;
	width: 1em;
	height: 1em;
	stroke: currentColor;
}

/* Excerpt is hidden in the resting state and revealed when active. */
.ps-posts-slider__excerpt {
	display: block;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	overflow: hidden;
	margin-top: 6px;
	font-family: inherit;
	font-size: var(--ps-excerpt-size);
	line-height: 1.5;
	color: var(--ps-text);
	opacity: 0;
	max-height: 0;
	transform: translateY(6px);
	transition:
		max-height var(--ps-transition),
		opacity var(--ps-transition),
		transform var(--ps-transition);
	text-wrap: pretty;
}

.ps-posts-slider__item:hover .ps-posts-slider__excerpt,
.ps-posts-slider__item:focus-within .ps-posts-slider__excerpt,
.ps-posts-slider__item.is-active .ps-posts-slider__excerpt {
	opacity: 1;
	max-height: 12em;
	transform: translateY(0);
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* Responsive — drop to a vertical stack on small screens so each card stays
   readable and tappable instead of relying on hover. */
@media (max-width: 900px) {
	.ps-posts-slider__track {
		flex-wrap: wrap;
		min-height: 0;
	}
	.ps-posts-slider__item,
	.ps-posts-slider__item:hover,
	.ps-posts-slider__item:focus-within {
		flex: 1 1 100%;
	}
	.ps-posts-slider__card {
		min-height: clamp(220px, 60vw, 360px);
	}
	/* Always show the meta-extra and excerpt on small screens — there's no
	   useful "rest" state when the slider is stacked. */
	.ps-posts-slider__meta-extra {
		max-width: 100%;
		opacity: 1;
		transform: none;
	}
	.ps-posts-slider__excerpt {
		opacity: 1;
		max-height: none;
		transform: none;
		-webkit-line-clamp: 3;
		line-clamp: 3;
	}
}

/* Two-column intermediate breakpoint for tablets. */
@media (min-width: 600px) and (max-width: 900px) {
	.ps-posts-slider__item,
	.ps-posts-slider__item:hover,
	.ps-posts-slider__item:focus-within {
		flex: 1 1 calc(50% - var(--ps-gap));
	}
}

/* Slider mode keeps the carousel UX even on mobile — drop visible to 1
   so a single full-width card slides at a time. The grid-mode media
   queries above don't apply because we override flex here. */
@media (max-width: 900px) {
	.ps-posts-slider.is-slider .ps-posts-slider__track {
		flex-wrap: nowrap;
	}
	.ps-posts-slider.is-slider .ps-posts-slider__item,
	.ps-posts-slider.is-slider .ps-posts-slider__track .ps-posts-slider__item:hover,
	.ps-posts-slider.is-slider .ps-posts-slider__track .ps-posts-slider__item:focus-within {
		flex: 0 0 100%;
	}
	.ps-posts-slider.is-slider .ps-posts-slider__nav {
		width: 36px;
		height: 36px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ps-posts-slider * {
		transition-duration: 0.01ms !important;
	}
}