/*
 * Karuzela zdjęć – style frontendu (WCAG 2.1 AA)
 *
 * Zależność: splide-core.min.css (layout Splide bez wizualnego motywu)
 *
 * Custom properties – nadpisz w motywie dziecku lub :root:
 *   --carousel-ratio        aspect-ratio obrazu      (domyślnie 16/9)
 *   --carousel-radius       zaokrąglenie rogów        (domyślnie 0)
 *   --carousel-arrow-size   rozmiar przycisku strzałki (domyślnie 44px)
 *   --carousel-focus-color  kolor fokusa               (domyślnie #005fcc)
 *   --carousel-accent       kolor aktywnej kropki      (domyślnie #005fcc)
 */

/* ═══════════════════════════════════════════════════════════════
   1. Zmienne i kontener główny
═══════════════════════════════════════════════════════════════ */

.wp-block-theme-carousel {
	--carousel-ratio       : 16 / 9;
	--carousel-radius      : 0px;
	--carousel-arrow-size  : 44px;
	--carousel-focus-color : #005fcc;
	--carousel-accent      : #005fcc;
	--carousel-arrow-bg    : rgba(0, 0, 0, 0.60);
	--carousel-arrow-hover : rgba(0, 0, 0, 0.85);
	--carousel-arrow-color : #ffffff;
	--carousel-caption-bg  : rgba(0, 0, 0, 0.72);
	--carousel-caption-fg  : #ffffff;
	--carousel-bar-bg      : #f5f5f5;
	--carousel-bar-fg      : #333333;
	--carousel-dot-idle    : rgba(0, 0, 0, 0.25);
	--carousel-dot-border  : rgba(0, 0, 0, 0.40);
	--carousel-dot-size    : 10px;

	position       : relative;
	border-radius  : var(--carousel-radius);
	overflow       : hidden;
	background     : #000;
}


/* ═══════════════════════════════════════════════════════════════
   2. Track i slajdy
═══════════════════════════════════════════════════════════════ */

.wp-block-theme-carousel .carousel__track-wrapper {
	position : relative;
	overflow : hidden; /* clip arrow overflow */
}

/* Splide nadpisuje te właściwości – reset zbędnych marginesów */
.wp-block-theme-carousel .splide__track {
	margin : 0 !important;
}

.wp-block-theme-carousel .splide__slide {
	overflow : hidden;
}

.wp-block-theme-carousel .carousel__figure {
	margin         : 0;
	padding        : 0;
	display        : block;
	position       : relative;
	aspect-ratio   : var(--carousel-ratio);
	background     : #111;
	overflow       : hidden;
}

.wp-block-theme-carousel .carousel__figure img {
	display    : block;
	width      : 100%;
	height     : 100%;
	object-fit : cover;
	/* Zapobiega layout shift zanim lazy-load się wykona */
	background : #111;
}

/* Podpis slajdu */
.wp-block-theme-carousel .carousel__caption {
	position    : absolute;
	inset-block-end  : 0;
	inset-inline     : 0;
	padding     : 0.75rem 1rem;
	background  : var(--carousel-caption-bg);
	color       : var(--carousel-caption-fg);
	font-size   : 0.875rem;
	line-height : 1.5;
	/* Kontrast: biały (#fff) na rgba(0,0,0,0.72) ≈ 8.5:1 ✓ */
}


/* ═══════════════════════════════════════════════════════════════
   3. Strzałki nawigacji
═══════════════════════════════════════════════════════════════ */

/*
 * Strzałki pozycjonowane absolutnie nad obrazem.
 * Splide doda do nich aria-label i obsłuży disabled.
 */
.wp-block-theme-carousel .splide__arrows {
	position        : absolute;
	inset           : 0;
	display         : flex;
	align-items     : center;
	justify-content : space-between;
	padding         : 0 0.5rem;
	pointer-events  : none; /* klik przechodzi przez div, trafia w przyciski */
	z-index         : 10;
}

.wp-block-theme-carousel .splide__arrow {
	pointer-events  : all;
	display         : inline-flex;
	align-items     : center;
	justify-content : center;
	width           : var(--carousel-arrow-size);
	height          : var(--carousel-arrow-size);
	min-width       : var(--carousel-arrow-size); /* WCAG 2.5.8 */
	background      : var(--carousel-arrow-bg);
	color           : var(--carousel-arrow-color);
	border          : 2px solid transparent;
	border-radius   : 50%;
	cursor          : pointer;
	transition      : background 0.2s ease, opacity 0.2s ease;
	-webkit-backdrop-filter : blur(4px);
	        backdrop-filter : blur(4px);
	flex-shrink     : 0;
	/*
	 * Kontrast tekstu: biały na rgba(0,0,0,0.60) ≈ 5.8:1 ✓
	 * Non-text contrast (WCAG 1.4.11): przycisk vs tło > 3:1 ✓
	 */
}

.wp-block-theme-carousel .splide__arrow:hover:not(:disabled):not([aria-disabled="true"]) {
	background : var(--carousel-arrow-hover);
}

/* Nieaktywna strzałka (koniec slajdów, bez pętli) */
.wp-block-theme-carousel .splide__arrow:disabled,
.wp-block-theme-carousel .splide__arrow[aria-disabled="true"] {
	opacity        : 0.35;
	cursor         : not-allowed;
	pointer-events : none;
}

/* Fokus – WCAG 2.4.7 (visible) + WCAG 2.4.11 (2.2, minimum appearance) */
.wp-block-theme-carousel .splide__arrow:focus-visible {
	outline        : 3px solid var(--carousel-focus-color);
	outline-offset : 3px;
	/* 3px offset + 3px solid na ciemnym tle > 3:1 ✓ */
}

.wp-block-theme-carousel .splide__arrow svg {
	fill       : currentColor;
	flex-shrink: 0;
	/* ikona odwrócona przez Splide dla strzałki prev */
	pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════
   4. Pasek dolny (licznik | kropki | pauza)
═══════════════════════════════════════════════════════════════ */

.wp-block-theme-carousel .carousel__bottom-bar {
	display          : flex;
	align-items      : center;
	justify-content  : space-between;
	padding          : 0.375rem 0.75rem;
	background       : var(--carousel-bar-bg);
	color            : var(--carousel-bar-fg);
	gap              : 0.5rem;
}

/* Licznik "X / N" */
.wp-block-theme-carousel .carousel__counter {
	font-size    : 0.8125rem;
	font-variant-numeric : tabular-nums;
	min-width    : 2.5rem; /* stabilna szerokość, bez przesunięć layoutu */
	white-space  : nowrap;
	color        : inherit;
	flex-shrink  : 0;
}

/* Wrapper pauzy – lustrzany z licznikiem dla symetrii */
.wp-block-theme-carousel .carousel__autoplay-wrapper {
	display      : flex;
	align-items  : center;
	min-width    : 2.5rem;
	justify-content: flex-end;
	flex-shrink  : 0;
}

.wp-block-theme-carousel .carousel__autoplay-placeholder {
	display  : inline-block;
	min-width: 44px;
}


/* ═══════════════════════════════════════════════════════════════
   5. Paginacja (kropki)
═══════════════════════════════════════════════════════════════ */

/*
 * Splide generuje: <li role="presentation"><button class="splide__pagination__page"></button></li>
 * Splide doda: aria-label, aria-controls, aria-selected
 */
.wp-block-theme-carousel .splide__pagination {
	display         : flex;
	align-items     : center;
	justify-content : center;
	flex-wrap       : wrap;
	gap             : 0;
	list-style      : none;
	margin          : 0;
	padding         : 0;
	flex            : 1;
}

.wp-block-theme-carousel .splide__pagination li {
	display      : flex;
	align-items  : center;
	margin       : 0;
	padding      : 0;
}

/*
 * Dotykowy cel 44×44 px (WCAG 2.5.8 / Apple HIG / Google MD3)
 * Wizualna kropka 10×10 px wewnątrz – przez pseudoelement
 */
.wp-block-theme-carousel .splide__pagination__page {
	display         : inline-flex;
	align-items     : center;
	justify-content : center;
	width           : 44px;
	height          : 44px;
	background      : transparent;
	border          : none;
	padding         : 0;
	cursor          : pointer;
	position        : relative;
}

.wp-block-theme-carousel .splide__pagination__page::after {
	content       : '';
	display       : block;
	width         : var(--carousel-dot-size);
	height        : var(--carousel-dot-size);
	border-radius : 50%;
	background    : var(--carousel-dot-idle);
	border        : 1px solid var(--carousel-dot-border);
	transition    : background 0.2s ease, transform 0.2s ease;
	/* Non-text contrast vs białe tło: rgba(0,0,0,0.25)+border ≈ 3:1 ✓ */
}

.wp-block-theme-carousel .splide__pagination__page:hover::after {
	background : rgba(0, 0, 0, 0.55);
}

/* Aktywna kropka */
.wp-block-theme-carousel .splide__pagination__page.is-active::after {
	background  : var(--carousel-accent);
	border-color: var(--carousel-accent);
	transform   : scale(1.4);
	/* #005fcc vs #f5f5f5 (tło paska) ≈ 5.5:1 ✓ */
}

.wp-block-theme-carousel .splide__pagination__page:focus-visible {
	outline        : 3px solid var(--carousel-focus-color);
	outline-offset : 2px;
	border-radius  : 4px;
}


/* ═══════════════════════════════════════════════════════════════
   6. Przycisk pauzy (toggle)
═══════════════════════════════════════════════════════════════ */

.wp-block-theme-carousel .carousel__toggle {
	display         : inline-flex;
	align-items     : center;
	justify-content : center;
	width           : 44px;   /* WCAG 2.5.8 */
	height          : 44px;
	background      : transparent;
	border          : 2px solid rgba(0, 0, 0, 0.30);
	border-radius   : 50%;
	cursor          : pointer;
	color           : var(--carousel-bar-fg);
	transition      : background 0.15s, border-color 0.15s;
}

.wp-block-theme-carousel .carousel__toggle:hover {
	background   : rgba(0, 0, 0, 0.08);
	border-color : rgba(0, 0, 0, 0.55);
}

.wp-block-theme-carousel .carousel__toggle:focus-visible {
	outline        : 3px solid var(--carousel-focus-color);
	outline-offset : 3px;
	border-radius  : 50%;
}

.wp-block-theme-carousel .carousel__toggle svg {
	fill        : currentColor;
	flex-shrink : 0;
}

/* Ikona pauzy domyślnie widoczna (autoplay działa);
   ikona play ukryta – JS przełącza hidden atrybutem */
.wp-block-theme-carousel .carousel__icon-play[hidden] { display: none; }
.wp-block-theme-carousel .carousel__icon-pause[hidden] { display: none; }


/* ═══════════════════════════════════════════════════════════════
   7. Utility: screen reader only
═══════════════════════════════════════════════════════════════ */

.wp-block-theme-carousel .sr-only {
	position   : absolute;
	width      : 1px;
	height     : 1px;
	padding    : 0;
	margin     : -1px;
	overflow   : hidden;
	clip       : rect(0, 0, 0, 0);
	white-space: nowrap;
	border     : 0;
}


/* ═══════════════════════════════════════════════════════════════
   8. prefers-reduced-motion
   Zatrzymuje animacje slajdowania; JS również wstrzymuje autoplay
═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	.wp-block-theme-carousel .splide__track,
	.wp-block-theme-carousel .splide__list,
	.wp-block-theme-carousel .splide__slide,
	.wp-block-theme-carousel .splide__pagination__page::after,
	.wp-block-theme-carousel .splide__arrow,
	.wp-block-theme-carousel .carousel__toggle {
		transition : none !important;
		animation  : none !important;
	}
}


/* ═══════════════════════════════════════════════════════════════
   9. Responsywność
═══════════════════════════════════════════════════════════════ */

/* Na wąskich ekranach strzałki nieco mniejsze, ale min. 44px dotykowy cel */
@media (max-width: 480px) {
	.wp-block-theme-carousel {
		--carousel-arrow-size : 44px; /* bez zmian – WCAG 2.5.8 */
	}

	.wp-block-theme-carousel .carousel__caption {
		font-size : 0.8125rem;
		padding   : 0.5rem 0.75rem;
	}

	.wp-block-theme-carousel .carousel__counter {
		font-size : 0.75rem;
	}
}

/* Szerokie – ułożenie pełna szerokość z wyrównaniem bloków WordPress */
.wp-block-theme-carousel.alignwide,
.wp-block-theme-carousel.alignfull {
	border-radius : 0;
}