.mas {
	--mas-card-w: 280px;
	--mas-gap: 20px;
	--mas-img-h: 160px;
	--mas-bg: #fff;
	--mas-fg: #212529;
	--mas-muted: #6c757d;
	--mas-border: rgba(0, 0, 0, .125);
	--mas-accent: var(--bs-primary, #0d6efd);
	position: relative;
}

[data-bs-theme="dark"] .mas {
	--mas-bg: #2b3035;
	--mas-fg: #e9ecef;
	--mas-muted: #adb5bd;
	--mas-border: rgba(255, 255, 255, .15);
}

/* Bez JS: zwykłe przewijanie poziome */
.mas-viewport {
	overflow-x: auto;
	padding: 4px 0 10px;
	touch-action: pan-y;
}

/* Z JS: autoprzewijanie */
.mas.is-active .mas-viewport {
	overflow: hidden;
	cursor: grab;
}

.mas.is-active .mas-viewport.is-dragging {
	cursor: grabbing;
	user-select: none;
}

.mas-track {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	gap: var(--mas-gap);
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
	will-change: transform;
}

.mas-item {
	display: flex;
	flex: 0 0 var(--mas-card-w);
	width: var(--mas-card-w);
	min-width: 0;
	margin: 0;
}

.mas-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--mas-bg);
	color: var(--mas-fg);
	border: var(--mas-bw, 1px) solid var(--mas-border);
	border-radius: var(--mas-radius, .5rem);
	overflow: hidden;
	box-shadow: var(--mas-shadow, 0 1px 3px rgba(0, 0, 0, .08));
}

.mas-media {
	display: block;
	height: var(--mas-img-h);
	background: rgba(127, 127, 127, .15);
}

.mas-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-user-drag: none;
	user-select: none;
}

.mas-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: .4rem;
	padding: .9rem 1rem 1rem;
}

.mas-cat {
	align-self: flex-start;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--mas-accent);
	text-decoration: none;
}

.mas-title {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.3;
}

.mas-title a {
	color: inherit;
	text-decoration: none;
}

.mas-title a:hover,
.mas-title a:focus-visible {
	text-decoration: underline;
}

.mas-meta {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem .75rem;
	font-size: .8rem;
	color: var(--mas-muted);
}

.mas-intro {
	margin: 0;
	font-size: .92rem;
	line-height: 1.45;
}

.mas-more {
	margin-top: auto;
	padding-top: .3rem;
	font-weight: 600;
	color: var(--mas-accent);
	text-decoration: none;
}

.mas-more:hover,
.mas-more:focus-visible {
	text-decoration: underline;
}

/* Przyciski sterowania */
.mas-controls {
	display: flex;
	justify-content: flex-end;
	gap: .4rem;
	margin-bottom: .5rem;
}

.mas-controls[hidden] {
	display: none;
}

.mas-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 .6rem;
	font-size: 1.1rem;
	line-height: 1;
	color: var(--mas-ctl-fg, var(--mas-fg));
	background: var(--mas-ctl-bg, var(--mas-bg));
	border: 1px solid var(--mas-border);
	border-radius: 999px;
	cursor: pointer;
}

.mas-btn:hover {
	border-color: var(--mas-accent);
	color: var(--mas-accent);
}

.mas-btn:focus-visible,
.mas-title a:focus-visible,
.mas-more:focus-visible,
.mas-cat:focus-visible {
	outline: 2px solid var(--mas-accent);
	outline-offset: 2px;
}

/* ---- Kolory konfigurowalne z ustawień modułu ---- */
.mas--has-bg {
	padding: 14px;
	background: var(--mas-module-bg);
	border-radius: .5rem;
}

.mas-title a {
	color: var(--mas-title, inherit);
}

.mas-title a:hover,
.mas-title a:focus-visible {
	color: var(--mas-title-hover, var(--mas-title, inherit));
}

.mas-cat {
	color: var(--mas-cat, var(--mas-accent));
}

.mas-cat--bg {
	padding: .15rem .6rem;
	background: var(--mas-cat-bg);
	border-radius: 999px;
}

.mas-more {
	color: var(--mas-more, var(--mas-accent));
}

.mas-cat:hover,
.mas-cat:focus-visible {
	color: var(--mas-cat-hover, var(--mas-cat, var(--mas-accent)));
	text-decoration: underline;
}

/* ---- Ramka karty ---- */
.mas--no-border .mas-card {
	border: 0;
}

.mas--square .mas-card,
.mas--square.mas--has-bg,
.mas--square .mas-btn,
.mas--square .mas-cat--bg {
	border-radius: 0;
}

/* ---- Styl graficzny: Material Design ---- */
.mas--material {
	--mas-elev-1: 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12);
	--mas-elev-2: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
	--mas-elev-8: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
}

[data-bs-theme="dark"] .mas--material {
	--mas-elev-1: 0 1px 3px rgba(0, 0, 0, .7), 0 1px 1px rgba(255, 255, 255, .05);
	--mas-elev-2: 0 2px 5px rgba(0, 0, 0, .7), 0 1px 1px rgba(255, 255, 255, .05);
	--mas-elev-8: 0 8px 18px rgba(0, 0, 0, .75), 0 1px 1px rgba(255, 255, 255, .06);
}

.mas--material .mas-viewport {
	padding: 10px 2px 26px;
}

.mas--material .mas-card {
	border: var(--mas-bw, 0) solid var(--mas-border);
	border-radius: var(--mas-radius, 12px);
	box-shadow: var(--mas-shadow, var(--mas-elev-1));
	transition: box-shadow .28s cubic-bezier(.4, 0, .2, 1), transform .28s cubic-bezier(.4, 0, .2, 1);
}

.mas--material .mas-card:hover,
.mas--material .mas-card:focus-within {
	box-shadow: var(--mas-shadow-hover, var(--mas-elev-8));
	transform: translateY(-3px);
}

.mas--material .mas-body {
	gap: .5rem;
	padding: 1rem 1.1rem 1.1rem;
}

.mas--material .mas-title {
	font-size: 1.1rem;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: .01em;
}

/* Kategoria jako "chip" */
.mas--material .mas-cat {
	display: inline-flex;
	align-items: center;
	padding: .2rem .7rem;
	font-size: .7rem;
	font-weight: 500;
	letter-spacing: .08em;
	background: var(--mas-cat-bg, rgba(127, 127, 127, .16));
	border-radius: 8px;
}

.mas--material .mas-cat:hover,
.mas--material .mas-cat:focus-visible {
	text-decoration: none;
}

/* "Czytaj więcej" jako przycisk tekstowy */
.mas--material .mas-more {
	align-self: flex-start;
	margin-top: auto;
	margin-left: -.75rem;
	padding: .45rem .75rem;
	font-size: .8rem;
	font-weight: 500;
	letter-spacing: .07em;
	text-transform: uppercase;
	border-radius: 8px;
	transition: background-color .2s;
}

.mas--material .mas-more:hover,
.mas--material .mas-more:focus-visible {
	text-decoration: none;
	background: rgba(127, 127, 127, .14);
}

.mas--material .mas-more:active {
	background: rgba(127, 127, 127, .24);
}

/* Przyciski sterowania jako okrągłe, uniesione przyciski */
.mas--material .mas-controls {
	gap: .6rem;
	padding: 0 4px;
}

.mas--material .mas-btn {
	position: relative;
	overflow: hidden;
	width: 2.5rem;
	height: 2.5rem;
	min-width: 0;
	padding: 0;
	background: var(--mas-ctl-bg, var(--mas-bg));
	border: 0;
	border-radius: 50%;
	box-shadow: var(--mas-elev-2);
	transition: box-shadow .2s;
}

.mas--material .mas-btn::after {
	position: absolute;
	inset: 0;
	content: "";
	background: currentColor;
	opacity: 0;
	transition: opacity .2s;
}

.mas--material .mas-btn:hover {
	box-shadow: var(--mas-elev-8);
}

.mas--material .mas-btn:hover::after,
.mas--material .mas-btn:focus-visible::after {
	opacity: .08;
}

.mas--material .mas-btn:active::after {
	opacity: .16;
}

.mas--material.mas--has-bg {
	border-radius: 16px;
}

/* Proste rogi mają pierwszeństwo także w stylu Material */
.mas--square.mas--material .mas-card,
.mas--square.mas--material.mas--has-bg,
.mas--square.mas--material .mas-cat,
.mas--square.mas--material .mas-more,
.mas--square.mas--material .mas-btn {
	border-radius: 0;
}

@media (prefers-reduced-motion: reduce) {
	.mas--material .mas-card {
		transition: none;
	}

	.mas--material .mas-card:hover,
	.mas--material .mas-card:focus-within {
		transform: none;
	}
}

/* Material: dokładniejsze kolory w nowoczesnych przeglądarkach (color-mix) */
@supports (background: color-mix(in srgb, red, blue)) {
	.mas--material .mas-cat {
		background: var(--mas-cat-bg, color-mix(in srgb, var(--mas-cat, var(--mas-accent)) 14%, transparent));
	}

	.mas--material .mas-more:hover,
	.mas--material .mas-more:focus-visible {
		background: color-mix(in srgb, currentColor 10%, transparent);
	}

	.mas--material .mas-more:active {
		background: color-mix(in srgb, currentColor 18%, transparent);
	}
}

/* ---- Tryb przewijania: ręczny (pasek przewijania, przesuwanie, przeciąganie) ---- */
.mas--manual .mas-viewport {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	touch-action: auto;
	cursor: grab;
}

.mas--manual .mas-item {
	scroll-snap-align: start;
}

.mas--manual .mas-viewport.is-dragging {
	cursor: grabbing;
	user-select: none;
	scroll-snap-type: none;
}

/* ---- Orientacja pionowa ---- */
.mas--vertical .mas-viewport {
	height: var(--mas-vh, 420px);
	padding: 4px;
	overflow-x: hidden;
	overflow-y: auto;
	touch-action: auto;
}

.mas--vertical .mas-track {
	flex-direction: column;
	width: 100%;
	height: max-content;
}

.mas--vertical .mas-item {
	flex: 0 0 auto;
	width: 100%;
}

.mas--material.mas--vertical .mas-viewport {
	padding: 10px 8px;
}

.mas--manual.mas--vertical .mas-viewport {
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: auto;
	scroll-snap-type: y proximity;
}

/* ==========================================================================
   Wersja 2.0
   ========================================================================== */

/* ---- Podstawy: RTL, ukryte elementy, pozycjonowanie ---- */
.mas .visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.mas-viewport {
	direction: ltr;
}

.mas-card[dir="rtl"] {
	direction: rtl;
	text-align: right;
}

.mas-item[hidden] {
	display: none !important;
}

.mas-media {
	position: relative;
}

/* ---- Liczba widocznych kart zależna od szerokości modułu (container queries) ---- */
@supports (container-type: inline-size) {
	.mas--responsive:not(.mas--vertical):not(.mas--grid) .mas-viewport {
		container-type: inline-size;
		container-name: mas;
	}

	.mas--responsive:not(.mas--vertical):not(.mas--grid) .mas-item {
		--mas-visible: var(--mas-v-d, 4);
		flex: 0 0 calc((100cqw - (var(--mas-visible) - 1) * var(--mas-gap)) / var(--mas-visible));
		width: calc((100cqw - (var(--mas-visible) - 1) * var(--mas-gap)) / var(--mas-visible));
	}

	@container mas (max-width: 899px) {
		.mas--responsive:not(.mas--vertical):not(.mas--grid) .mas-item {
			--mas-visible: var(--mas-v-t, 2);
		}
	}

	@container mas (max-width: 559px) {
		.mas--responsive:not(.mas--vertical):not(.mas--grid) .mas-item {
			--mas-visible: var(--mas-v-m, 1);
		}
	}
}

/* ---- Widok: siatka (bez przewijania) ---- */
.mas--grid .mas-viewport {
	padding: 4px;
	overflow: visible;
	touch-action: auto;
}

.mas--grid .mas-track {
	--mas-visible: var(--mas-v-d, 4);
	display: grid;
	grid-template-columns: repeat(var(--mas-visible), minmax(0, 1fr));
	gap: var(--mas-gap);
	width: 100%;
}

.mas--grid .mas-item {
	flex: none;
	width: auto;
}

@media (max-width: 991.98px) {
	.mas--grid .mas-track {
		--mas-visible: var(--mas-v-t, 2);
	}
}

@media (max-width: 575.98px) {
	.mas--grid .mas-track {
		--mas-visible: var(--mas-v-m, 1);
	}
}

@supports (container-type: inline-size) {
	.mas--grid .mas-viewport {
		container-type: inline-size;
		container-name: mas;
	}

	.mas--grid .mas-track {
		--mas-visible: var(--mas-v-d, 4);
	}

	@container mas (max-width: 899px) {
		.mas--grid .mas-track {
			--mas-visible: var(--mas-v-t, 2);
		}
	}

	@container mas (max-width: 559px) {
		.mas--grid .mas-track {
			--mas-visible: var(--mas-v-m, 1);
		}
	}
}

/* ---- Układ karty: tekst na zdjęciu ---- */
.mas--layout-overlay .mas-card {
	position: relative;
	justify-content: flex-end;
	min-height: calc(var(--mas-img-h) + 100px);
	color: #fff;
	background: linear-gradient(135deg, var(--mas-accent), #212529);
}

.mas--layout-overlay .mas-media {
	position: absolute;
	inset: 0;
	z-index: 0;
	height: auto;
}

.mas--layout-overlay .mas-media::after {
	position: absolute;
	inset: 0;
	content: "";
	background: linear-gradient(to top, rgba(0, 0, 0, .82), rgba(0, 0, 0, .12) 70%);
}

.mas--layout-overlay .mas-body {
	position: relative;
	z-index: 1;
	margin-top: auto;
	color: #fff;
}

.mas--layout-overlay .mas-title a,
.mas--layout-overlay .mas-meta,
.mas--layout-overlay .mas-intro,
.mas--layout-overlay .mas-more,
.mas--layout-overlay .mas-cat,
.mas--layout-overlay .mas-fields {
	color: #fff;
}

.mas--layout-overlay .mas-meta {
	opacity: .85;
}

.mas--layout-overlay .mas-intro {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	opacity: .92;
}

/* ---- Układ karty: lista (zdjęcie z boku) ---- */
.mas--layout-list .mas-card {
	flex-direction: row;
}

.mas--layout-list .mas-media {
	flex: 0 0 38%;
	height: auto;
	min-height: 100%;
	aspect-ratio: auto;
}

.mas--layout-list .mas-media img {
	height: 100%;
}

.mas--layout-list .mas-body {
	min-width: 0;
}

/* ---- Widok: pasek samych tytułów (ticker) ---- */
.mas--ticker {
	display: flex;
	align-items: center;
	gap: .75rem;
}

.mas--ticker .mas-viewport {
	flex: 1 1 auto;
	min-width: 0;
	padding: .35rem 0;
}

.mas--ticker .mas-track {
	align-items: center;
}

.mas--ticker .mas-item {
	display: block;
	flex: 0 0 auto;
	width: auto;
	white-space: nowrap;
}

.mas--ticker .mas-item::before {
	margin-inline-end: var(--mas-gap);
	content: "\2022";
	opacity: .45;
}

.mas--ticker .mas-controls {
	order: 3;
	margin: 0;
}

.mas-tick {
	display: inline-flex;
	gap: .55rem;
	align-items: baseline;
}

.mas-tick-link {
	font-weight: 500;
	color: var(--mas-title, inherit);
	text-decoration: none;
}

.mas-tick-link:hover,
.mas-tick-link:focus-visible {
	color: var(--mas-title-hover, var(--mas-title, inherit));
	text-decoration: underline;
}

.mas-ticker-label {
	flex: 0 0 auto;
	padding: .35rem .9rem;
	font-size: .85rem;
	font-weight: 600;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: .04em;
	background: var(--mas-accent);
	border-radius: .35rem;
}

/* ---- Kropki / licznik i pasek postępu ---- */
.mas-pager {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	align-items: center;
	justify-content: center;
	margin-top: .6rem;
}

.mas-dot {
	position: relative;
	width: .6rem;
	height: .6rem;
	padding: 0;
	cursor: pointer;
	background: rgba(127, 127, 127, .45);
	border: 0;
	border-radius: 50%;
	transition: transform .2s, background-color .2s;
}

.mas-dot::before {
	position: absolute;
	inset: -7px;
	content: "";
}

.mas-dot[aria-current="true"] {
	background: var(--mas-accent);
	transform: scale(1.3);
}

.mas-dot:focus-visible {
	outline: 2px solid var(--mas-accent);
	outline-offset: 3px;
}

.mas-counter {
	font-size: .85rem;
	color: var(--mas-muted);
}

.mas-progress {
	height: 3px;
	margin-top: .5rem;
	overflow: hidden;
	background: rgba(127, 127, 127, .22);
	border-radius: 2px;
}

.mas-progress > span {
	display: block;
	height: 100%;
	background: var(--mas-accent);
	transform: scaleX(0);
	transform-origin: left center;
}

/* ---- Tryb: zanikanie (fade) ---- */
.mas--fade .mas-track {
	transition: opacity .35s ease;
}

.mas--fade .mas-track.is-fading {
	opacity: 0;
}

.mas--fade.mas--vertical .mas-viewport {
	height: auto;
}

.mas--fade.mas--vertical .mas-track {
	height: auto;
}

/* ---- Elementy karty: znaczniki, tagi, pola własne, placeholder, proporcje ---- */
.mas-badge-new {
	position: absolute;
	top: .6rem;
	left: .6rem;
	z-index: 2;
	padding: .15rem .55rem;
	font-size: .7rem;
	font-weight: 700;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: .06em;
	background: var(--mas-accent);
	border-radius: 999px;
}

.mas-format {
	position: absolute;
	top: .6rem;
	right: .6rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	font-size: .95rem;
	color: #fff;
	background: rgba(0, 0, 0, .6);
	border-radius: 50%;
}

.mas-tags {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem;
	padding: 0;
	margin: 0;
	list-style: none;
}

.mas-tag {
	padding: .1rem .55rem;
	font-size: .72rem;
	background: rgba(127, 127, 127, .16);
	border-radius: 999px;
}

.mas-fields {
	display: grid;
	gap: .15rem;
	margin: 0;
	font-size: .82rem;
}

.mas-fields > div {
	display: flex;
	gap: .4rem;
}

.mas-fields dt {
	margin: 0;
	font-weight: 600;
}

.mas-fields dd {
	margin: 0;
}

.mas-media--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(127, 127, 127, .75);
	background: linear-gradient(135deg, rgba(127, 127, 127, .18), rgba(127, 127, 127, .36));
}

.mas-media--empty::before {
	width: 2.6rem;
	height: 2.6rem;
	content: "";
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2zM8.5 13.5l2.5 3 3.5-4.5 4.5 6H5l3.5-4.5z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2zM8.5 13.5l2.5 3 3.5-4.5 4.5 6H5l3.5-4.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mas--ratio .mas-media {
	height: auto;
	aspect-ratio: var(--mas-ratio, 16 / 9);
}

.mas--ratio .mas-media img {
	height: 100%;
}

.mas--layout-list.mas--ratio .mas-media,
.mas--layout-overlay.mas--ratio .mas-media {
	aspect-ratio: auto;
}

/* ---- Styl graficzny: Minimalistyczny ---- */
.mas--minimal .mas-card {
	background: transparent;
	border: 0;
	border-bottom: var(--mas-bw, 2px) solid var(--mas-border);
	border-radius: var(--mas-radius, 0);
	box-shadow: var(--mas-shadow, none);
}

.mas--minimal .mas-media {
	overflow: hidden;
	border-radius: .25rem;
}

.mas--minimal .mas-body {
	padding: .9rem 0 1rem;
}

.mas--minimal .mas-title {
	font-weight: 600;
}

.mas--minimal .mas-title a {
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 2px;
	transition: background-size .25s;
}

.mas--minimal .mas-title a:hover,
.mas--minimal .mas-title a:focus-visible {
	text-decoration: none;
	background-size: 100% 2px;
}

.mas--minimal.mas--no-border .mas-card {
	border-bottom: 0;
}

/* ---- Styl graficzny: Szkło (glassmorphism) – najlepiej na tle z kolorem/zdjęciem ---- */
.mas--glass .mas-card {
	background: rgba(255, 255, 255, .55);
	border: var(--mas-bw, 1px) solid var(--mas-border-set, rgba(255, 255, 255, .45));
	border-radius: var(--mas-radius, 16px);
	box-shadow: var(--mas-shadow, 0 8px 32px rgba(31, 38, 135, .15));
	-webkit-backdrop-filter: blur(var(--mas-glass-blur, 14px)) saturate(160%);
	backdrop-filter: blur(var(--mas-glass-blur, 14px)) saturate(160%);
}

[data-bs-theme="dark"] .mas--glass .mas-card {
	background: rgba(30, 34, 43, .55);
	border-color: var(--mas-border-set, rgba(255, 255, 255, .12));
}

@supports (background: color-mix(in srgb, red, blue)) {
	.mas--glass .mas-card {
		background: color-mix(in srgb, var(--mas-glass-tint, var(--mas-bg)) calc(var(--mas-glass-alpha, 58) * 1%), transparent);
	}
}

.mas--glass.mas--no-border .mas-card {
	border: 0;
}

/* ---- Styl graficzny: Bootstrap 5 (naśladuje karty Bootstrap, nie wymaga biblioteki) ---- */
.mas--bootstrap .mas-card {
	color: var(--bs-body-color, #212529);
	background: var(--bs-body-bg, #fff);
	border: var(--mas-bw, var(--bs-border-width, 1px)) solid var(--mas-border-set, var(--bs-border-color-translucent, rgba(0, 0, 0, .175)));
	border-radius: var(--mas-radius, var(--bs-border-radius, .375rem));
	box-shadow: var(--mas-shadow, none);
}

.mas--bootstrap .mas-title {
	font-size: 1.25rem;
	font-weight: 500;
}

.mas--bootstrap .mas-cat {
	display: inline-block;
	padding: .35em .65em;
	font-size: .75em;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	text-transform: none;
	letter-spacing: 0;
	background: var(--mas-cat-bg, var(--mas-cat, var(--bs-primary, #0d6efd)));
	border-radius: var(--bs-border-radius, .375rem);
}

.mas--bootstrap .mas-more {
	align-self: flex-start;
	padding: .25rem .5rem;
	font-size: .875rem;
	font-weight: 400;
	color: var(--mas-more, var(--bs-primary, #0d6efd));
	text-align: center;
	text-decoration: none;
	border: 1px solid currentColor;
	border-radius: var(--bs-border-radius-sm, .25rem);
}

.mas--bootstrap .mas-more:hover,
.mas--bootstrap .mas-more:focus-visible {
	color: #fff;
	text-decoration: none;
	background: var(--mas-more, var(--bs-primary, #0d6efd));
}

.mas--bootstrap.mas--no-border .mas-card {
	border: 0;
}

/* ---- Proste rogi we wszystkich stylach ---- */
.mas--square.mas--glass .mas-card,
.mas--square.mas--bootstrap .mas-card,
.mas--square.mas--bootstrap .mas-cat,
.mas--square.mas--bootstrap .mas-more,
.mas--square.mas--bootstrap .mas-btn,
.mas--square.mas--minimal .mas-media,
.mas--square .mas-badge-new,
.mas--square .mas-tag,
.mas--square .mas-ticker-label {
	border-radius: 0;
}

/* ---- Redukcja ruchu ---- */
@media (prefers-reduced-motion: reduce) {
	.mas--fade .mas-track,
	.mas-dot,
	.mas--minimal .mas-title a {
		transition: none;
	}
}

/* ==========================================================================
   Wersja 2.1 – efekty kart
   ========================================================================== */

/* ---- Efekty przejść stron (tryb Zanikanie): fazy is-out -> is-in -> spoczynek ---- */
.mas--fade .mas-track {
	transition: opacity .35s ease, transform .35s ease, filter .35s ease;
}

.mas--fade .mas-track.is-out {
	opacity: 0;
	filter: var(--mas-exit-filter, none);
	transform: var(--mas-exit, none);
}

.mas--fade .mas-track.is-in {
	opacity: 0;
	filter: var(--mas-enter-filter, none);
	transform: var(--mas-enter, none);
	transition: none;
}

/* slide: strona wysuwa się w bok i wsuwa z przeciwnej strony (kierunek zależy od przycisku) */
.mas--fx-slide {
	--mas-exit: translateX(-70px);
	--mas-enter: translateX(70px);
}

.mas--fx-slide .mas-track.is-rev {
	--mas-exit: translateX(70px);
	--mas-enter: translateX(-70px);
}

.mas--fx-slide.mas--vertical {
	--mas-exit: translateY(-50px);
	--mas-enter: translateY(50px);
}

.mas--fx-slide.mas--vertical .mas-track.is-rev {
	--mas-exit: translateY(50px);
	--mas-enter: translateY(-50px);
}

/* zoom */
.mas--fx-zoom {
	--mas-exit: scale(.82);
	--mas-enter: scale(1.14);
}

/* flip 3D */
.mas--fx-flip {
	--mas-exit: perspective(900px) rotateY(-80deg);
	--mas-enter: perspective(900px) rotateY(80deg);
}

.mas--fx-flip .mas-track.is-rev {
	--mas-exit: perspective(900px) rotateY(80deg);
	--mas-enter: perspective(900px) rotateY(-80deg);
}

.mas--fx-flip.mas--vertical {
	--mas-exit: perspective(900px) rotateX(70deg);
	--mas-enter: perspective(900px) rotateX(-70deg);
}

.mas--fx-flip.mas--vertical .mas-track.is-rev {
	--mas-exit: perspective(900px) rotateX(-70deg);
	--mas-enter: perspective(900px) rotateX(70deg);
}

/* blur */
.mas--fx-blur {
	--mas-exit-filter: blur(12px);
	--mas-enter-filter: blur(12px);
}

/* rotate (pochylenie) */
.mas--fx-rotate {
	--mas-exit: rotate(-5deg) scale(.92);
	--mas-enter: rotate(5deg) scale(.92);
}

.mas--fx-rotate .mas-track.is-rev {
	--mas-exit: rotate(5deg) scale(.92);
	--mas-enter: rotate(-5deg) scale(.92);
}

/* cascade: karty zmieniają się jedna po drugiej */
.mas--fx-cascade .mas-track,
.mas--fx-cascade .mas-track.is-out,
.mas--fx-cascade .mas-track.is-in {
	opacity: 1;
	filter: none;
	transform: none;
	transition: none;
}

.mas--fx-cascade .mas-item {
	transition: opacity .35s ease, transform .35s ease;
	transition-delay: calc(var(--i, 0) * 70ms);
}

.mas--fx-cascade .mas-track.is-out .mas-item {
	opacity: 0;
	transform: translateY(22px) scale(.96);
}

.mas--fx-cascade .mas-track.is-in .mas-item {
	opacity: 0;
	transform: translateY(-22px) scale(.96);
	transition: none;
}

/* ---- Efekty podczas ruchu (focus / coverflow): style ustawia skrypt ---- */
.mas--motion .mas-item {
	will-change: transform, opacity;
	backface-visibility: hidden;
}

.mas--motion .mas-viewport {
	perspective: none;
}

/* ---- Efekty po najechaniu na kartę ---- */
.mas--hover-lift .mas-card {
	transition: transform .25s ease, box-shadow .25s ease;
}

.mas--hover-lift .mas-card:hover,
.mas--hover-lift .mas-card:focus-within {
	box-shadow: var(--mas-shadow-hover, 0 16px 30px rgba(0, 0, 0, .2));
	transform: translateY(-7px);
}

.mas--hover-zoom .mas-media {
	overflow: hidden;
}

.mas--hover-zoom .mas-media img {
	transition: transform .6s ease;
}

.mas--hover-zoom .mas-card:hover .mas-media img,
.mas--hover-zoom .mas-card:focus-within .mas-media img {
	transform: scale(1.1);
}

.mas--hover-glow .mas-card {
	transition: box-shadow .3s ease;
}

.mas--hover-glow .mas-card:hover,
.mas--hover-glow .mas-card:focus-within {
	box-shadow: 0 0 0 2px var(--mas-accent), 0 10px 28px rgba(13, 110, 253, .35);
}

@supports (background: color-mix(in srgb, red, blue)) {
	.mas--hover-glow .mas-card:hover,
	.mas--hover-glow .mas-card:focus-within {
		box-shadow: 0 0 0 2px var(--mas-accent), 0 10px 28px color-mix(in srgb, var(--mas-accent) 40%, transparent);
	}
}

/* ---- Animacja wejścia: karty pojawiają się po kolei, gdy moduł wejdzie w widok ---- */
@keyframes mas-rv-fade-up {
	from { opacity: 0; transform: translateY(26px); }
}

@keyframes mas-rv-zoom {
	from { opacity: 0; transform: scale(.82); }
}

@keyframes mas-rv-slide {
	from { opacity: 0; transform: translateX(46px); }
}

.mas--reveal-fade-up.is-armed:not(.is-revealed) .mas-card,
.mas--reveal-zoom.is-armed:not(.is-revealed) .mas-card,
.mas--reveal-slide.is-armed:not(.is-revealed) .mas-card {
	opacity: 0;
}

.mas--reveal-fade-up.is-revealed .mas-card {
	animation: mas-rv-fade-up .6s ease backwards;
	animation-delay: calc(var(--mas-ri, 0) * 80ms);
}

.mas--reveal-zoom.is-revealed .mas-card {
	animation: mas-rv-zoom .55s ease backwards;
	animation-delay: calc(var(--mas-ri, 0) * 80ms);
}

.mas--reveal-slide.is-revealed .mas-card {
	animation: mas-rv-slide .6s ease backwards;
	animation-delay: calc(var(--mas-ri, 0) * 80ms);
}

/* ---- Redukcja ruchu dla nowych efektów ---- */
@media (prefers-reduced-motion: reduce) {
	.mas--fade .mas-track,
	.mas--fx-cascade .mas-item,
	.mas--hover-lift .mas-card,
	.mas--hover-zoom .mas-media img,
	.mas--hover-glow .mas-card {
		transition: none;
	}

	.mas--reveal-fade-up .mas-card,
	.mas--reveal-zoom .mas-card,
	.mas--reveal-slide .mas-card {
		animation: none !important;
	}
}

/* ==========================================================================
   Wersja 2.1.1 – układ karty: cały tekst na dole zdjęcia
   ========================================================================== */
.mas-figure {
	position: relative;
	display: grid;
}

/* zdjęcie i podpis dzielą jedną komórkę siatki: karta rośnie razem z tekstem, zdjęcie wypełnia całość */
.mas-figure > .mas-media {
	position: relative;
	grid-area: 1 / 1;
	height: auto; /* nadpisuje stałą wysokość: obszar zdjęcia rozciąga się do wysokości podpisu */
	min-height: var(--mas-img-h);
}

.mas-figure > .mas-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mas-caption {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	grid-area: 1 / 1;
	gap: .3rem;
	align-self: end;
	padding: 3.4rem 1rem .9rem;
	color: #fff;
	pointer-events: none; /* kliknięcie w pusty gradient trafia w link zdjęcia */
	background: linear-gradient(to top, rgba(0, 0, 0, .86) 0%, rgba(0, 0, 0, .6) 60%, rgba(0, 0, 0, 0) 100%);
}

.mas-caption a {
	pointer-events: auto;
}

.mas--layout-caption .mas-caption .mas-title {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.25;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .65);
}

.mas--layout-caption .mas-caption .mas-title a,
.mas--layout-caption .mas-caption .mas-title a:hover,
.mas--layout-caption .mas-caption .mas-title a:focus-visible {
	color: #fff;
}

.mas--layout-caption .mas-caption .mas-cat {
	align-self: flex-start;
	color: #fff;
}

.mas--layout-caption .mas-caption .mas-meta {
	font-size: .78rem;
	color: rgba(255, 255, 255, .9);
	text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

.mas--layout-caption .mas-caption .mas-intro {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	font-size: .88rem;
	line-height: 1.4;
	color: rgba(255, 255, 255, .93);
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}

.mas--layout-caption .mas-caption .mas-more {
	align-self: flex-start;
	margin-left: 0;
	margin-top: .15rem;
	color: #fff;
	font-weight: 600;
}

.mas--layout-caption .mas-caption .mas-more:hover,
.mas--layout-caption .mas-caption .mas-more:focus-visible {
	color: #fff;
	text-decoration: underline;
}

.mas--layout-caption .mas-body {
	padding-top: .8rem;
}

/* zaślepka (karta bez zdjęcia) w układzie z podpisem: ładne tło, ikonka u góry, tekst na dole */
.mas--layout-caption .mas-figure > .mas-media--empty {
	align-items: flex-start;
	padding-top: 1.1rem;
	color: rgba(255, 255, 255, .4);
	background: linear-gradient(135deg, var(--mas-accent), #212529);
}

/* karty w rzędzie mają tę samą wysokość: zdjęcie z podpisem wypełnia całą kartę (bez białego paska pod spodem) */
.mas--layout-caption .mas-card > .mas-figure {
	flex: 1 1 auto;
}

/* ==========================================================================
   Wersja 2.1.2 – położenie tekstu na zdjęciu: góra / środek / dół (domyślnie dół)
   ========================================================================== */

/* układ „podpis” */
.mas--pos-top .mas-caption {
	align-self: start;
	padding: .9rem 1rem 3.4rem;
	background: linear-gradient(to bottom, rgba(0, 0, 0, .86) 0%, rgba(0, 0, 0, .6) 60%, rgba(0, 0, 0, 0) 100%);
}

.mas--pos-middle .mas-caption {
	align-self: center;
	padding: 2.4rem 1rem;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .68) 28%, rgba(0, 0, 0, .68) 72%, rgba(0, 0, 0, 0) 100%);
}

/* ikonka zaślepki nie wchodzi w tekst */
.mas--layout-caption.mas--pos-top .mas-figure > .mas-media--empty {
	align-items: flex-end;
	padding-top: 0;
	padding-bottom: 1.1rem;
}

/* układ „tekst na całym obrazku” */
.mas--layout-overlay.mas--pos-top .mas-card {
	justify-content: flex-start;
}

.mas--layout-overlay.mas--pos-top .mas-body {
	margin-top: 0;
	margin-bottom: auto;
}

.mas--layout-overlay.mas--pos-top .mas-media::after {
	background: linear-gradient(to bottom, rgba(0, 0, 0, .82), rgba(0, 0, 0, .12) 70%);
}

.mas--layout-overlay.mas--pos-middle .mas-card {
	justify-content: center;
}

.mas--layout-overlay.mas--pos-middle .mas-body {
	margin-top: auto;
	margin-bottom: auto;
}

.mas--layout-overlay.mas--pos-middle .mas-media::after {
	background: linear-gradient(to bottom, rgba(0, 0, 0, .25), rgba(0, 0, 0, .68) 50%, rgba(0, 0, 0, .25));
}

/* ==========================================================================
   Wersja 2.1.5 – poprawki wykryte testami w przeglądarce
   ========================================================================== */

/* Układ „podpis” + proporcje obrazu: proporcja dotyczy całej figury (zdjęcie + podpis). Gdy na zdjęciu
   zastosowano proporcję, a obszar zdjęcia był rozciągany na wysokość karty, wysokość „przerzucała się”
   na szerokość i treść wychodziła poza kartę. */
.mas--layout-caption.mas--ratio .mas-media {
	aspect-ratio: auto;
}

.mas--layout-caption.mas--ratio .mas-figure {
	aspect-ratio: var(--mas-ratio, 16 / 9);
}

/* Animacja wejścia „wsunięcie z boku”: karty startują poza prawą krawędzią modułu, co w trakcie animacji
   dawało chwilowy poziomy pasek przewijania całej strony (np. w widoku siatki). */
.mas--reveal-slide {
	overflow-x: clip;
}

@supports not (overflow: clip) {
	.mas--reveal-slide {
		overflow-x: hidden;
	}
}

/* ---- 2.1.5: układ „tekst na całym obrazku” ---- */

/* Karty bez zdjęcia mają zawsze ciemne tło z białym tekstem. Style graficzne (Szkło, Minimalistyczny, Bootstrap)
   ustawiały jasne lub przezroczyste tło, na którym biały tekst był niewidoczny. */
.mas.mas--layout-overlay .mas-card {
	color: #fff;
	background: linear-gradient(135deg, var(--mas-accent), #212529);
}

/* Położenie „u góry” i „na środku”: blok tekstu nie rozciąga się na całą kartę, więc „Czytaj więcej”
   leży zaraz pod resztą tekstu, a nie przyklejone do dolnej krawędzi. */
.mas--layout-overlay.mas--pos-top .mas-body,
.mas--layout-overlay.mas--pos-middle .mas-body {
	flex: 0 0 auto;
}

.mas--layout-overlay.mas--pos-top .mas-more,
.mas--layout-overlay.mas--pos-middle .mas-more {
	margin-top: .15rem;
}

/* Plakietka kategorii z własnym tłem zachowuje własny kolor tekstu (wcześniej wymuszano biały,
   który na jasnym tle plakietki był nieczytelny). */
.mas--layout-overlay .mas-card .mas-cat--bg,
.mas--layout-caption .mas-caption .mas-cat.mas-cat--bg,
.mas--bootstrap .mas-cat.mas-cat--bg {
	color: var(--mas-cat, #fff);
}

/* „Czytaj więcej” w układzie „tekst na całym obrazku” jest zawsze jasne, także w stylu Bootstrap
   (wcześniej przyjmowało kolor akcentu i na ciemnym gradiencie było słabo widoczne). */
.mas--layout-overlay .mas-card .mas-more {
	color: #fff;
}

/* ==========================================================================
   Wersja 2.2.0 – szczegóły stylów: ramka, zaokrąglenie, cień, Szkło, Bootstrap, Material, kolory
   Zmienne ustawia szablon tylko wtedy, gdy wybrano wartość inną niż domyślna dla stylu.
   ========================================================================== */

/* poziomy cienia (kolor cienia z --mas-shadow-c; bez color-mix zawsze czarny) */
.mas--shadow-none {
	--mas-shadow: none;
	--mas-shadow-hover: none;
}

.mas--shadow-small {
	--mas-shadow: 0 1px 3px rgba(0, 0, 0, .2);
	--mas-shadow-hover: 0 4px 12px rgba(0, 0, 0, .25);
}

.mas--shadow-medium {
	--mas-shadow: 0 4px 12px rgba(0, 0, 0, .25);
	--mas-shadow-hover: 0 12px 28px rgba(0, 0, 0, .3);
}

.mas--shadow-large {
	--mas-shadow: 0 12px 28px rgba(0, 0, 0, .3);
	--mas-shadow-hover: 0 18px 38px rgba(0, 0, 0, .36);
}

@supports (background: color-mix(in srgb, red, blue)) {
	.mas--shadow-small {
		--mas-shadow: 0 1px 3px color-mix(in srgb, var(--mas-shadow-c, #000) 20%, transparent);
		--mas-shadow-hover: 0 4px 12px color-mix(in srgb, var(--mas-shadow-c, #000) 25%, transparent);
	}

	.mas--shadow-medium {
		--mas-shadow: 0 4px 12px color-mix(in srgb, var(--mas-shadow-c, #000) 25%, transparent);
		--mas-shadow-hover: 0 12px 28px color-mix(in srgb, var(--mas-shadow-c, #000) 30%, transparent);
	}

	.mas--shadow-large {
		--mas-shadow: 0 12px 28px color-mix(in srgb, var(--mas-shadow-c, #000) 30%, transparent);
		--mas-shadow-hover: 0 18px 38px color-mix(in srgb, var(--mas-shadow-c, #000) 36%, transparent);
	}
}

/* Material: wyłączenie unoszenia karty po najechaniu */
.mas--material.mas--no-lift .mas-card:hover,
.mas--material.mas--no-lift .mas-card:focus-within {
	transform: none;
}

/* Bootstrap: „Czytaj więcej” jako przycisk wypełniony (zamiast samego obrysu) */
.mas--bootstrap.mas--bs-solid .mas-more {
	color: #fff;
	background: var(--mas-more, var(--bs-primary, #0d6efd));
}

.mas--bootstrap.mas--bs-solid .mas-more:hover,
.mas--bootstrap.mas--bs-solid .mas-more:focus-visible {
	filter: brightness(1.12);
}

.mas--layout-overlay.mas--bootstrap.mas--bs-solid .mas-card .mas-more,
.mas--layout-caption.mas--bootstrap.mas--bs-solid .mas-caption .mas-more {
	background: transparent;
}

/* ==========================================================================
   Wersja 2.4.0 – filtry dla odwiedzających: kategorie, tagi, wyszukiwarka, sortowanie
   Pasek jest ukryty (atrybut hidden), dopóki nie uruchomi się JavaScript.
   ========================================================================== */
.mas-filter {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem .9rem;
	align-items: center;
	margin-bottom: .75rem;
}

.mas-filter[hidden],
.mas-empty[hidden],
.mas-viewport[hidden] {
	display: none;
}

.mas-filter--center {
	justify-content: center;
}

.mas-filter--end {
	justify-content: flex-end;
}

.mas-filter-group {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	align-items: center;
}

.mas-chip {
	display: inline-flex;
	gap: .4rem;
	align-items: center;
	padding: .3rem .85rem;
	font: inherit;
	font-size: .85rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--mas-fg);
	cursor: pointer;
	background: var(--mas-bg);
	border: 1px solid var(--mas-border);
	border-radius: 999px;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.mas-chip:hover {
	color: var(--mas-accent);
	border-color: var(--mas-accent);
}

.mas-chip:focus-visible,
.mas-search:focus-visible,
.mas-sort:focus-visible,
.mas-select:focus-visible {
	outline: 2px solid var(--mas-accent);
	outline-offset: 2px;
}

.mas-chip.is-active,
.mas-chip.is-active:hover {
	color: var(--mas-accent-fg, #fff);
	background: var(--mas-accent);
	border-color: var(--mas-accent);
}

.mas-chip-count {
	padding: .05em .5em;
	font-size: .75em;
	font-weight: 700;
	background: rgba(127, 127, 127, .25);
	border-radius: 999px;
}

.mas-filter-label {
	font-size: .8rem;
	font-weight: 600;
	color: var(--mas-muted);
}

.mas-filter-search,
.mas-filter-sort,
.mas-filter-select {
	display: inline-flex;
	gap: .45rem;
	align-items: center;
}

.mas-filter-search {
	flex: 1 1 12rem;
	max-width: 20rem;
}

.mas-search,
.mas-sort,
.mas-select {
	min-height: 2.1rem;
	padding: .35rem .75rem;
	font: inherit;
	font-size: .9rem;
	color: var(--mas-fg);
	background: var(--mas-bg);
	border: 1px solid var(--mas-border);
	border-radius: .5rem;
}

.mas-search {
	width: 100%;
	min-width: 0;
}

/* długie nazwy opcji nie rozpychają list rozwijanych poza moduł */
.mas-filter-select,
.mas-filter-sort {
	max-width: 100%;
	min-width: 0;
}

.mas-select,
.mas-sort {
	max-width: 100%;
	min-width: 0;
	text-overflow: ellipsis;
}

.mas-filter-status {
	margin: 0;
}

.mas-empty {
	padding: 1.1rem 1rem;
	margin: .5rem 0 1rem;
	color: var(--mas-muted);
	text-align: center;
	background: var(--mas-bg);
	border: 1px dashed var(--mas-border);
	border-radius: .5rem;
}

/* style graficzne */
.mas--minimal .mas-chip {
	padding: .25rem .15rem;
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
}

.mas--minimal .mas-chip:hover,
.mas--minimal .mas-chip.is-active,
.mas--minimal .mas-chip.is-active:hover {
	color: var(--mas-fg);
	background: transparent;
	border-bottom-color: var(--mas-accent);
}

.mas--material .mas-chip {
	border-color: transparent;
	box-shadow: var(--mas-elev-1);
}

.mas--bootstrap .mas-chip,
.mas--bootstrap .mas-search,
.mas--bootstrap .mas-sort,
.mas--bootstrap .mas-select {
	border-radius: var(--bs-border-radius, .375rem);
}

.mas--glass .mas-chip,
.mas--glass .mas-search,
.mas--glass .mas-sort,
.mas--glass .mas-select {
	background: rgba(255, 255, 255, .55);
	border-color: rgba(255, 255, 255, .5);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

[data-bs-theme="dark"] .mas--glass .mas-chip,
[data-bs-theme="dark"] .mas--glass .mas-search,
[data-bs-theme="dark"] .mas--glass .mas-sort,
[data-bs-theme="dark"] .mas--glass .mas-select {
	background: rgba(30, 34, 43, .55);
	border-color: rgba(255, 255, 255, .15);
}

.mas--glass .mas-chip.is-active,
.mas--glass .mas-chip.is-active:hover {
	background: var(--mas-accent);
	border-color: var(--mas-accent);
}

@media (max-width: 575.98px) {
	.mas-filter-search {
		flex-basis: 100%;
		max-width: none;
	}

	.mas-filter-select,
	.mas-filter-sort {
		flex: 1 1 100%;
	}

	.mas-filter-select .mas-select,
	.mas-filter-sort .mas-sort {
		flex: 1 1 auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mas-chip {
		transition: none;
	}
}

/* ==========================================================================
   Wersja 2.4.1 – przyciski filtrów odporne na style szablonu strony
   ========================================================================== */

/* Szablony często ustawiają wszystkim przyciskom width: 100% (zwłaszcza na telefonach), przez co „Wszystkie” i każda
   kategoria lądowały w osobnej linii. Przyciski filtrów mają teraz własną, automatyczną szerokość i zawijają się
   w wierszach; długa nazwa nadal zawija się wewnątrz przycisku, a nie wychodzi poza moduł. */
.mas-filter .mas-filter-group {
	flex-direction: row;
	flex-wrap: wrap;
}

.mas-filter .mas-chip {
	box-sizing: border-box;
	flex: 0 1 auto;
	width: auto !important;
	min-width: 0 !important;
	max-width: 100%;
	margin: 0 !important;
	float: none !important;
}

/* Tak samo przyciski sterowania (poprzedni / pauza / następny) i kropki stronicowania: szablon strony ustawiający
   button { width: 100% } rozciągał kropkę na cały wiersz, a strzałki robił szerokie. Rozmiary są teraz niezależne od szablonu. */
.mas .mas-btn {
	box-sizing: border-box;
	flex: 0 0 auto;
	width: auto !important;
	min-width: 2.25rem !important;
	margin: 0 !important;
	float: none !important;
}

.mas--material .mas-btn {
	width: 2.5rem !important;
	min-width: 0 !important;
}

.mas .mas-dot {
	box-sizing: border-box;
	flex: 0 0 auto;
	width: .6rem !important;
	height: .6rem !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	float: none !important;
}

/* ==========================================================================
   Wersja 2.4.4 – moduł wypełnia kontener (flex, grid, page buildery), także gdy rodzic dopasowuje się do zawartości
   ========================================================================== */

/* Tor kart ma szerokość wszystkich kart razem (width: max-content). W kontenerze, który dopasowuje się do zawartości
   (Div w Oxygen Builderze: element flex z align-items: flex-start, kolumna flex, komórka grid 1fr; podobnie Elementor
   i Bricks), taki rozmiar przejmował rodzic i rozpychał stronę w poziomie. Dlatego sam tor nie wpływa na rozmiar
   kontenera (contain: inline-size na obszarze przewijania).

   Samo to sprawia jednak, że moduł ma „zerową” szerokość zawartości, więc rodzic dopasowujący się do zawartości zwijał go
   do zera. Ukryty pasek tekstu (pseudoelement ::before) daje modułowi DUŻĄ szerokość maksymalną (jedna długa linia) i MAŁĄ
   szerokość minimalną (najdłuższe słowo): rodzic dopasowujący się do zawartości rozciąga się wtedy do całej dostępnej
   szerokości, a rodzic o określonej szerokości, element flex lub komórka grid zachowują się jak zwykle (można je zmniejszyć).
   Szerokość maksymalna paska jest ograniczona do szerokości okna (max-width: 100vw), więc nawet rodzic, który nie zmniejsza się
   (element flex z flex: 0 0 auto), nie rozepnie strony poza okno.
   Pasek ma zerową wysokość i visibility: hidden, więc nie widać go i nie czytają go czytniki ekranu. */
.mas {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
}

.mas::before {
	display: block;
	max-width: 100vw;
	height: 0;
	overflow: hidden;
	font: 40px/0 sans-serif;
	white-space: normal;
	pointer-events: none;
	visibility: hidden;
	content: "x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";
	content: "x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x " / "";
}

.mas-viewport {
	min-width: 0;
	max-width: 100%;
	contain: inline-size;
}

/* Pasek filtrów też ma ograniczony wkład w szerokość maksymalną modułu (nie więcej niż szerokość okna), żeby rodzic,
   który się nie zmniejsza, nie rozepnął strony. */
.mas-filter {
	max-width: 100vw;
}

/* Pasek tytułów to kontener flex (przyciski + obszar tytułów): pasek tekstu zająłby w nim miejsce i zwęził obszar tytułów do zera,
   więc tu jest wyłączony z układu. W rodzicu dopasowującym się do zawartości pasek tytułów ma zamiast tego dolny próg szerokości. */
.mas--ticker::before {
	position: absolute;
}

.mas--ticker {
	min-width: min(18rem, 100vw);
}

/* ==== Wersja 2.4.5 — czytelniejsza nazwa kategorii ====
   Większa i grubsza czcionka, mniejszy rozstrzelony druk, a kolor akcentu przyciemniony
   tak, aby na jasnej karcie dawał kontrast co najmniej 4,5:1. Na zdjęciach (nakładka, podpis)
   kategoria dostaje półprzezroczystą ciemną plakietkę i cień, więc czyta się ją na każdym zdjęciu.
   Własne kolory ustawione w module (kolor/tło kategorii) nadal mają pierwszeństwo. */
.mas-cat {
	font-size: .8rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: .03em;
}

.mas-cat:not(.mas-cat--bg) {
	color: var(--mas-cat, color-mix(in srgb, var(--mas-accent) 72%, #000));
}

.mas--material .mas-cat {
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .04em;
}

.mas--bootstrap .mas-cat {
	font-size: .8em;
}

.mas--layout-overlay .mas-card .mas-cat:not(.mas-cat--bg),
.mas--layout-caption .mas-caption .mas-cat:not(.mas-cat--bg) {
	padding: .2rem .6rem;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
	background: rgba(0, 0, 0, .6);
	border-radius: 999px;
}

.mas--square.mas--layout-overlay .mas-card .mas-cat:not(.mas-cat--bg),
.mas--square.mas--layout-caption .mas-caption .mas-cat:not(.mas-cat--bg) {
	border-radius: 0;
}

/* Etykiety paska filtrów („Kategoria”, „Sortuj”…) były drobne i wyszarzone — teraz większe, grubsze i w pełnym kolorze tekstu. */
.mas-filter-label {
	font-size: .9rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--mas-title, var(--mas-text, inherit));
	opacity: 1;
}

/* ==== Styl Bootstrap: wyraźne przyciski filtrów ====
   Przyciski kategorii wyglądają jak prawdziwe .btn-outline-primary: obrys i tekst w kolorze akcentu (przyciemnionym dla czytelności),
   po najechaniu wypełnienie, a aktywny jest pełnym przyciskiem .btn-primary z cieniem. Pola wyszukiwania i listy mają mocniejszy obrys. */
.mas--bootstrap .mas-chip {
	padding: .45rem 1rem;
	font-size: .95rem;
	font-weight: 600;
	color: color-mix(in srgb, var(--mas-accent) 80%, #000);
	background: var(--mas-bg);
	border: 2px solid var(--mas-accent);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

.mas--bootstrap .mas-chip:hover {
	color: var(--mas-accent-fg, #fff);
	background: var(--mas-accent);
	border-color: var(--mas-accent);
}

.mas--bootstrap .mas-chip.is-active,
.mas--bootstrap .mas-chip.is-active:hover {
	font-weight: 700;
	color: var(--mas-accent-fg, #fff);
	background: var(--mas-accent);
	border-color: var(--mas-accent);
	box-shadow: 0 .25rem .6rem color-mix(in srgb, var(--mas-accent) 45%, transparent);
}

.mas--bootstrap .mas-chip:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--mas-accent) 40%, transparent);
	outline-offset: 2px;
}

.mas--bootstrap .mas-search,
.mas--bootstrap .mas-sort,
.mas--bootstrap .mas-select {
	border: 2px solid color-mix(in srgb, var(--mas-accent) 55%, var(--mas-border));
}

/* Etykiety paska filtrów („Kategoria”, „Sortuj”) jako plakietka z tłem w kolorze akcentu i kontrastowym tekstem. */
.mas-filter .mas-filter-label {
	display: inline-flex;
	align-items: center;
	padding: .3rem .8rem;
	font-size: .9rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--mas-accent-fg, #fff);
	background: color-mix(in srgb, var(--mas-accent) 85%, #000);
	border-radius: 999px;
}

.mas--bootstrap .mas-filter .mas-filter-label {
	border-radius: var(--bs-border-radius, .375rem);
}

.mas--square .mas-filter .mas-filter-label {
	border-radius: 0;
}

/* Etykieta i lista rozwijana („Kategoria” + wybór, „Sortuj” + wybór) są scalone w jedną kontrolkę (jak input group):
   plakietka przylega do pola, wspólne zaokrąglenie z zewnętrznej strony, bez odstępu między nimi. */
.mas-filter .mas-filter-select,
.mas-filter .mas-filter-sort {
	gap: 0;
	align-items: stretch;
}

.mas-filter .mas-filter-select .mas-filter-label,
.mas-filter .mas-filter-sort .mas-filter-label {
	border-radius: .5rem 0 0 .5rem;
}

.mas-filter .mas-filter-select .mas-select,
.mas-filter .mas-filter-sort .mas-sort {
	margin-left: -2px;
	border-radius: 0 .5rem .5rem 0;
}

.mas--bootstrap .mas-filter .mas-filter-select .mas-filter-label,
.mas--bootstrap .mas-filter .mas-filter-sort .mas-filter-label {
	border-radius: var(--bs-border-radius, .375rem) 0 0 var(--bs-border-radius, .375rem);
}

.mas--bootstrap .mas-filter .mas-filter-select .mas-select,
.mas--bootstrap .mas-filter .mas-filter-sort .mas-sort {
	border-radius: 0 var(--bs-border-radius, .375rem) var(--bs-border-radius, .375rem) 0;
}

.mas--square .mas-filter .mas-filter-select .mas-filter-label,
.mas--square .mas-filter .mas-filter-sort .mas-filter-label,
.mas--square .mas-filter .mas-filter-select .mas-select,
.mas--square .mas-filter .mas-filter-sort .mas-sort {
	border-radius: 0;
}

/* Telefon: etykiety „Kategoria” i „Sortuj” mają tę samą szerokość, a pola obok nich zaczynają i kończą się w jednej linii,
   równo z polem wyszukiwania. */
@media (max-width: 575.98px) {
	.mas-filter .mas-filter-select,
	.mas-filter .mas-filter-sort {
		box-sizing: border-box;
		width: 100%;
	}

	.mas-filter .mas-filter-select .mas-filter-label,
	.mas-filter .mas-filter-sort .mas-filter-label {
		box-sizing: border-box;
		flex: 0 0 6.5rem;
		justify-content: center;
		width: 6.5rem;
		text-align: center;
	}

	.mas-filter .mas-filter-select .mas-select,
	.mas-filter .mas-filter-sort .mas-sort {
		box-sizing: border-box;
		flex: 1 1 0;
		width: auto;
		min-width: 0;
	}

	.mas-filter .mas-search {
		box-sizing: border-box;
	}
}