/* ------------------------------------------------------------------
   Slider najnowszych wpisow – strona startowa
   Blocksy Child (janadamski.eu)
------------------------------------------------------------------ */

.ja-hs {
	--ja-hs-per: 4;                 /* liczba kafelkow widocznych naraz */
	--ja-hs-gap: 4px;               /* odstep miedzy kafelkami */
	--ja-hs-ratio: 1 / 1;           /* proporcje kafelka – 1/1 = kwadrat */
	--ja-hs-max-height: 70vh;       /* zabezpieczenie na malych ekranach */
	--ja-hs-badge: #cc1414;         /* tlo etykiety kategorii */
	--ja-hs-nav: var(--theme-palette-color-1, #1878c3);
	--ja-hs-radius: 0px;

	position: relative;
	margin-block: 0 clamp(24px, 4vw, 48px);
	overflow: hidden;
	background: #111;
}

/* pelna szerokosc okna, niezaleznie od kontenera Blocksy */
.ja-hs--full {
	width: var(--ja-vw, 100vw);
	margin-left: calc(50% - var(--ja-vw, 100vw) / 2);
	margin-right: calc(50% - var(--ja-vw, 100vw) / 2);
}

.ja-hs,
.ja-hs *,
.ja-hs *::before,
.ja-hs *::after {
	box-sizing: border-box;
}

.ja-hs__viewport {
	overflow: hidden;
	touch-action: pan-y;
}

.ja-hs__track {
	display: flex;
	gap: var(--ja-hs-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	transition: transform 550ms cubic-bezier(0.33, 1, 0.68, 1);
	will-change: transform;
}

.ja-hs.is-dragging .ja-hs__track {
	transition: none;
}

.ja-hs__slide {
	flex: 0 0 calc((100% - (var(--ja-hs-per) - 1) * var(--ja-hs-gap)) / var(--ja-hs-per));
	margin: 0;
	list-style: none;
}

.ja-hs__card {
	position: relative;
	display: block;
	height: auto;
	aspect-ratio: var(--ja-hs-ratio);
	max-height: var(--ja-hs-max-height);
	overflow: hidden;
	border-radius: var(--ja-hs-radius);
	background: #1c1c1c;
	isolation: isolate;
}

.ja-hs__media {
	position: absolute;
	inset: 0;
}

.ja-hs__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.45) 26%, rgba(0, 0, 0, 0) 55%);
}

.ja-hs__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
	transition: transform 700ms cubic-bezier(0.33, 1, 0.68, 1);
}

.ja-hs__card:hover .ja-hs__img,
.ja-hs__card:focus-within .ja-hs__img {
	transform: scale(1.04);
}

.ja-hs__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	height: 100%;
	padding: 18px;
	justify-content: flex-end;
	color: #fff;
}

.ja-hs__cat {
	display: inline-block;
	padding: 4px 9px;
	background: var(--ja-hs-badge);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.3;
}

.ja-hs__title {
	margin: 0;
	font-size: clamp(15px, 1.15vw, 19px);
	line-height: 1.32;
	font-weight: 600;
	color: #fff;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

.ja-hs__link {
	color: inherit;
	text-decoration: none;
}

/* klikalny cały kafelek */
.ja-hs__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.ja-hs__link:hover,
.ja-hs__link:focus-visible {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ja-hs__link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
}

.ja-hs__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.85);
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

.ja-hs__sep {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.7;
}

/* ---------- strzalki ---------- */

.ja-hs__nav {
	position: absolute;
	top: 50%;
	z-index: 5;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	transform: translateY(-50%);
	border: 0;
	border-radius: 50%;
	background: var(--ja-hs-nav);
	color: #fff;
	cursor: pointer;
	opacity: 0.92;
	transition: opacity 200ms ease, transform 200ms ease;
}

.ja-hs__nav:hover {
	opacity: 1;
	transform: translateY(-50%) scale(1.08);
}

.ja-hs__nav:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.ja-hs__nav[disabled] {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

.ja-hs__nav--prev { left: 14px; }
.ja-hs__nav--next { right: 14px; }

.ja-hs__nav svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---------- kropki ---------- */

.ja-hs__dots {
	position: absolute;
	top: 14px;
	right: 16px;
	z-index: 5;
	display: flex;
	gap: 7px;
	padding: 6px 9px;
	border-radius: 20px;
	background: rgba(0, 0, 0, 0.28);
	backdrop-filter: blur(3px);
}

.ja-hs__dots:empty {
	display: none;
}

.ja-hs__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
	cursor: pointer;
	transition: background 200ms ease, width 200ms ease;
}

.ja-hs__dot.is-active {
	width: 20px;
	border-radius: 4px;
	background: #fff;
}

.ja-hs__dot:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* ---------- responsywnosc ---------- */

@media (max-width: 1200px) {
	.ja-hs { --ja-hs-per: 3; }
}

@media (max-width: 900px) {
	.ja-hs { --ja-hs-per: 2; }
}

@media (max-width: 600px) {
	.ja-hs { --ja-hs-per: 1; --ja-hs-max-height: 78vh; }
	.ja-hs__nav { width: 30px; height: 30px; }
	.ja-hs__nav--prev { left: 8px; }
	.ja-hs__nav--next { right: 8px; }
	.ja-hs__body { padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.ja-hs__track,
	.ja-hs__img,
	.ja-hs__nav {
		transition: none;
	}
}