/* Post Slider – front end */
.ps-slider {
	--ps-visible: 5.5;
	--ps-gap: 18px;
	--ps-fg: #16161a;
	--ps-muted: #6b6b75;
	margin: 0 0 2.5rem;
	color: var(--ps-fg);
	box-sizing: border-box;
}
.ps-slider *, .ps-slider *::before, .ps-slider *::after { box-sizing: border-box; }
.ps-slider a { color: inherit; text-decoration: none; box-shadow: none; }
.ps-slider h2, .ps-slider h3, .ps-slider p { margin: 0; padding: 0; }

/* ---------- Header ---------- */
.ps-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}
.ps-title {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: clamp(24px, 3vw, 38px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--ps-fg);
	min-width: 0;
}
.ps-total {
	display: inline-block;
	background: #16161a;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1;
	padding: 7px 11px;
	border-radius: 999px;
	flex: none;
}
.ps-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.ps-see-all {
	display: inline-block;
	background: #f1f1f5;
	color: var(--ps-fg) !important;
	font-size: 14px;
	font-weight: 700;
	padding: 10px 16px;
	border-radius: 999px;
	transition: background .15s ease;
}
.ps-see-all:hover { background: #e4e4ea; }


/* ---------- Track ---------- */
.ps-track {
	display: flex;
	gap: var(--ps-gap);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	/* hide the scroll bar */
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.ps-track::-webkit-scrollbar { display: none; width: 0; height: 0; }
.ps-track:focus-visible { outline: 2px solid var(--ps-fg); outline-offset: 4px; border-radius: 4px; }
.ps-track.ps-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; }
.ps-track.ps-dragging a { pointer-events: none; }

/* Card width = full cards + a half card visible at the end */
.ps-card {
	flex: 0 0 calc((100% - (var(--ps-visible) - 0.5) * var(--ps-gap)) / var(--ps-visible));
	min-width: 0;
	scroll-snap-align: start;
	user-select: none;
}
.ps-media {
	display: block;
	aspect-ratio: 2 / 3;
	border-radius: 18px;
	overflow: hidden;
	background: #eee;
	margin-bottom: 12px;
}
.ps-media img,
.ps-placeholder {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	margin: 0 !important;
	transition: transform .4s ease;
	-webkit-user-drag: none;
}
.ps-placeholder { background: linear-gradient(135deg, #eee, #ddd); }
.ps-card:hover .ps-media img { transform: scale(1.03); }

.ps-card-title {
	font-size: 18px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--ps-fg);
	margin-bottom: 8px !important;
	overflow-wrap: break-word;
}
.ps-card-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ps-meta { font-size: 13px; color: var(--ps-muted); }

.ps-notice { padding: 10px 14px; background: #fff4e5; border-left: 4px solid #f0a020; }

/* ---------- Responsive: fewer cards, still ending on a half card ---------- */
@media (max-width: 1100px) { .ps-slider { --ps-visible: 4.5 !important; } }
@media (max-width: 860px)  { .ps-slider { --ps-visible: 3.5 !important; --ps-gap: 14px; } }
@media (max-width: 600px)  {
	.ps-slider { --ps-visible: 2.5 !important; --ps-gap: 12px; }
	.ps-head { margin-bottom: 14px; }
	.ps-title { gap: 8px; }
	.ps-total { font-size: 12px; padding: 6px 9px; }
	.ps-see-all { font-size: 13px; padding: 8px 13px; }
	.ps-media { border-radius: 14px; margin-bottom: 10px; }
	.ps-card-title { font-size: 15px; }
	.ps-meta { font-size: 12px; }
}
@media (max-width: 380px)  { .ps-slider { --ps-visible: 1.5 !important; } }