@media (max-width: 991.98px) {
  body.qjk-bs .hero-inner.hero-slider .slide .hero-text {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100%;
    display: block;
  }
  body.qjk-bs .hero-inner.hero-slider .slides .slide {
    position: static !important;
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(16px) !important;
    transition: opacity 0.5s cubic-bezier(.2,.9,.28,1), transform 0.5s cubic-bezier(.2,.9,.28,1) !important;
  }
  body.qjk-bs .hero-inner.hero-slider .slides .slide.is-active {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    z-index: 2 !important;
  }
}
@media (max-width: 991.98px) {
  body.qjk-bs .hero-inner.hero-slider .slide .hero-media {
    display: none !important;
  }
}
@media (max-width: 991.98px) {
  /* Wyśrodkowanie hero na mobile bez sztucznej wysokości */
  #hero > .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
  .hero-inner.hero-slider {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
	body.qjk-bs .hero-inner.hero-slider .slides {
		width: 100%;
		transition: height 0.5s cubic-bezier(.4,0,.2,1);
		min-height: unset !important;
	}
}
/* (Removed explicit .hero-accent-blue / .hero-accent-green — now provided via generic
   .hero-accent[data-color] in style.css using design tokens.) */
/* Fade-in dla sekcji hero i slidera po załadowaniu */
body.qjk-bs #hero {
	opacity: 0;
	transition: opacity 0.7s cubic-bezier(.4,0,.2,1);
	min-height: 500px; /* Zapobiega nachodzeniu treści podczas ładowania */
}
body.qjk-bs .hero-inner.hero-slider {
	opacity: 0;
	transition: opacity 0.7s cubic-bezier(.4,0,.2,1);
}
body.qjk-bs.hero-ready #hero,
body.qjk-bs.hero-ready .hero-inner.hero-slider {
	opacity: 1;
}
/* Zapobiega skakaniu treści na mobile zanim JS ustawi wysokość */
/* (min-height: 340px is set above for mobile, only one rule needed) */
/* hero.css — dots centering and mobile hide rules (minimal, non-duplicating)
	 This file only contains the selectors needed to center the dots and
	 hide them on small screens. It intentionally uses the demo scope
	 `.qjk-bs` and matches both `.hero-inner.hero-slider` (same element)
	 and `.hero-inner .hero-slider` (nested) markup patterns. */

body.qjk-bs .hero-inner.hero-slider .slider-dots,
body.qjk-bs .hero-inner .hero-slider .slider-dots {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 12px;
	display: flex;
	gap: 10px;
	padding: 6px 10px;
	border-radius: 999px;
	background: rgba(255,255,255,0.6);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	box-shadow: 0 4px 10px rgba(17,24,39,0.06);
	z-index: 60;
	pointer-events: auto;
}

/* Ensure the hero container is the positioned ancestor so .slider-dots
	 (position: absolute) are placed inside the hero section and not
	 elsewhere on the page. Kept minimal to avoid layout shifts. */
body.qjk-bs .hero-inner.hero-slider,
body.qjk-bs .hero-inner .hero-slider {
	position: relative;
  z-index: 100;
}

body.qjk-bs .slider-dots button{
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: none;
	background: rgba(0,0,0,0.12);
}

body.qjk-bs .slider-dots button[aria-selected="true"]{
	background: var(--brand);
}

/* Hide dots on small screens to reduce clutter */
@media (max-width: 767.98px){
	body.qjk-bs .hero-inner.hero-slider .slider-dots,
	body.qjk-bs .hero-inner .hero-slider .slider-dots {
		display: none !important;
	}
}

/* Show only the active slide. The slider JS toggles `.is-active` on articles.
	 This avoids stacking all slides vertically and is the simplest, non-invasive
	 approach: hide non-active slides and reveal the one with `.is-active`. */
@media (min-width: 992px) {
	body.qjk-bs .hero-inner.hero-slider .slides {
		position: relative;
		transition: height .25s ease;
		min-height: 450px; /* Fallback height to prevent content overlap */
	}
}

/* Ensure only active slide is interactive */
body.qjk-bs .hero-inner.hero-slider .slides .slide {
  pointer-events: none;
}
body.qjk-bs .hero-inner.hero-slider .slides .slide.is-active {
  pointer-events: auto;
}

/* Desktop: absolute stacking + opacity transition (legacy behavior)
	 This matches the original timings in old/style_old.css: opacity .4s ease,
	 height transition .25s ease. */
@media (min-width: 992px){
	body.qjk-bs .hero-inner.hero-slider .slides .slide{
		position: absolute;
		inset: 0;
		opacity: 0;
		pointer-events: none;
		/* Match original theme: smoother opacity + eased transform (cubic-bezier) */
		transition: opacity .5s ease, transform .5s cubic-bezier(.2,.9,.28,1);
		transform: translateY(6px);
		will-change: opacity, transform;
	}

	body.qjk-bs .hero-inner.hero-slider .slides .slide.is-active{
		opacity: 1;
		pointer-events: auto;
		transform: translateY(0);
		z-index: 2;
	}
}

/* Subtle hero image scale like the original design */
@media (min-width: 992px){
  body.qjk-bs .hero-inner.hero-slider .slide .hero-media img{
    transform: scale(1);
    transition: transform 1200ms cubic-bezier(.2,.9,.28,1);
  }
  body.qjk-bs .hero-inner.hero-slider .slide.is-active .hero-media img{
    transform: scale(1.035);
  }
}


/* Mobile: płynne przejścia i animacja wysokości kontenera */
/* (handled above with !important for all relevant props) */

@media (max-width: 767.98px){
	body.qjk-bs .hero-inner.hero-slider .slide .hero-text {
		text-align: center !important;
		margin-left: auto !important;
		margin-right: auto !important;
		width: 100%;
		display: block;
	}
	body.qjk-bs .hero-inner.hero-slider .slide .hero-cta { justify-content: center !important; }
	body.qjk-bs .hero-inner.hero-slider .slide .hero-media { margin-top: 14px !important; }
	body.qjk-bs .hero-inner.hero-slider .slide .hero-media img { max-width: 100% !important; height: auto !important; }
}