/* The post slider shares BlogArise's colors, borders, fonts and shadow. */
.bs-post-slider {
	min-width: 0;
	margin: 0 0 34px;
	overflow: hidden;
	border: var(--bxbr, 3px solid #000);
	border-radius: var(--bxbra, 15px);
	background: var(--box-color, #fff);
	box-shadow: var(--bxsh, 7px 7px 0 #000);
}
.bs-post-slider__stage { position: relative; isolation: isolate; background: #151515; touch-action: pan-y pinch-zoom; }
.bs-post-slider__slide[hidden] { display: none !important; }
.bs-post-slider.is-ready .bs-post-slider__slide:not([hidden]) { animation: blogarise-post-slider-reveal .35s ease-out; }
@keyframes blogarise-post-slider-reveal { from { opacity: .4; } to { opacity: 1; } }
.bs-post-slider__link {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	min-height: 270px;
	color: #fff;
	overflow: hidden;
}
.bs-post-slider__link::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.05) 25%, rgba(0,0,0,.45) 60%, rgba(0,0,0,.91) 100%);
}
.bs-post-slider__image, .bs-post-slider__fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bs-post-slider__image { transition: transform .45s ease; }
@media (hover: hover) { .bs-post-slider__link:hover .bs-post-slider__image { transform: scale(1.025); } }
.bs-post-slider__fallback {
	display: grid;
	place-items: start center;
	padding: 12% 12% 30%;
	background: radial-gradient(ellipse at top right, #756414, transparent 70%), #18191c;
	color: #fff;
	font: 700 clamp(22px, 3vw, 40px) / 1.2 var(--headFont, sans-serif);
	text-align: center;
}
.bs-post-slider__fallback > span { opacity: .65; }
.bs-post-slider__caption { position: absolute; z-index: 1; inset-inline: 28px; bottom: 25px; pointer-events: none; }
.bs-post-slider__category {
	display: inline-block;
	max-width: 100%;
	margin-bottom: 10px;
	padding: 2px 11px;
	border: 2px solid #000;
	border-radius: 20px;
	background: var(--pri-color, #fc0);
	color: #000;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.6;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.bs-post-slider .bs-post-slider__title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	color: #fff;
	font-family: var(--headFont, sans-serif);
	font-size: clamp(23px, 2.4vw, 34px);
	font-weight: 700;
	line-height: 1.18;
	overflow-wrap: anywhere;
	text-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.bs-post-slider button { cursor: pointer; box-shadow: none; text-transform: none; }
.bs-post-slider .bs-post-slider__arrow {
	position: absolute;
	z-index: 2;
	top: 36%;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0 0 4px;
	border: 2px solid rgba(255,255,255,.8);
	border-radius: 50%;
	background: rgba(0,0,0,.55);
	color: #fff;
	font: 38px / 1 Arial, sans-serif;
	transition: background .2s, color .2s;
}
.bs-post-slider__arrow--prev { left: 16px; }
.bs-post-slider__arrow--next { right: 16px; }
.bs-post-slider .bs-post-slider__arrow:hover { background: var(--pri-color, #fc0); color: #000; border-color: #000; }
.bs-post-slider__count { position: absolute; z-index: 2; top: 16px; right: 16px; padding: 3px 10px; border: 1px solid rgba(255,255,255,.5); border-radius: 20px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; line-height: 1.6; font-variant-numeric: tabular-nums; }
.bs-post-slider__footer { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: var(--bxbr, 3px solid #000); }
.bs-post-slider__thumbs { display: flex; flex: 1; gap: 9px; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding: 3px; }
.bs-post-slider .bs-post-slider__thumb { flex: 0 0 88px; height: 62px; margin: 0; padding: 3px; overflow: hidden; border: 2px solid transparent; border-radius: 8px; background: transparent; opacity: .65; transition: opacity .2s, border-color .2s, background .2s; }
.bs-post-slider .bs-post-slider__thumb[aria-pressed="true"] { border-color: #000; background: var(--pri-color, #fc0); opacity: 1; }
.bs-post-slider .bs-post-slider__thumb:hover { opacity: 1; border-color: var(--pri-color, #fc0); }
.bs-post-slider__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
.bs-post-slider__thumb-placeholder { display: grid; place-items: center; height: 100%; background: #222; color: var(--pri-color, #fc0); border-radius: 3px; font: 700 22px / 1 var(--headFont, sans-serif); }
.bs-post-slider .bs-post-slider__toggle { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; margin: 0; padding: 0; border: 2px solid var(--text-color, #000); border-radius: 50%; background: var(--box-color, #fff); color: var(--text-color, #000); font: 700 18px / 1 Arial, sans-serif; }
.bs-post-slider .bs-post-slider__toggle:hover { background: var(--pri-color, #fc0); color: #000; }
.bs-post-slider__toggle-icon { width: 12px; height: 14px; border-inline: 4px solid currentColor; }
.bs-post-slider__toggle-icon.is-paused { width: 0; height: 0; margin-left: 3px; border: 6px solid transparent; border-left: 10px solid currentColor; border-right: 0; }
.bs-post-slider button:focus-visible { outline: 3px solid var(--text-color, #000); outline-offset: 2px; }
.bs-post-slider .bs-post-slider__arrow:focus-visible { outline-color: #fff; }
.bs-post-slider__link:focus-visible { outline: 3px solid var(--pri-color, #fc0); outline-offset: -6px; }
.bs-post-slider:not(.is-ready) .bs-post-slider__footer,
.bs-post-slider:not(.is-ready) .bs-post-slider__arrow,
.bs-post-slider:not(.is-ready) .bs-post-slider__count { display: none; }
@media (max-width: 575px) {
	.bs-post-slider { margin-bottom: 28px; }
	.bs-post-slider__link { aspect-ratio: 4 / 3; min-height: 270px; }
	.bs-post-slider__caption { inset-inline: 18px; bottom: 18px; }
	.bs-post-slider .bs-post-slider__title { font-size: 23px; }
	.bs-post-slider__category { margin-bottom: 7px; font-size: 11px; }
	.bs-post-slider__footer { padding: 8px; gap: 5px; }
	.bs-post-slider .bs-post-slider__thumb { flex-basis: 72px; height: 54px; }
	.bs-post-slider__thumbs { gap: 5px; }
	.bs-post-slider__arrow--prev { left: 10px; }
	.bs-post-slider__arrow--next { right: 10px; }
	.bs-post-slider .bs-post-slider__arrow { top: 24%; }
}
@media (prefers-reduced-motion: reduce) { .bs-post-slider *, .bs-post-slider *::after { animation: none !important; transition: none !important; } }