/* =============================================================
   MK WYDARZENIA — Style frontendu
   Inspirowane układem i klimatem moje-klimaty.pl
   ============================================================= */

/* ---- Zmienne ---- */
:root {
	--mk-kolor-akcentu:    #c9a96e;     /* złoto / ciepły beż nawiązujący do palety strony */
	--mk-kolor-tekstu:     #1a1a1a;
	--mk-kolor-subtext:    #555555;
	--mk-kolor-placeholder:#d1ccc5;     /* jasnoszary dla braku zdjęcia */
	--mk-kolor-linia:      #e8e0d5;     /* delikatna linia oddzielająca */
	--mk-border-radius:    6px;
	--mk-font-heading:     inherit;     /* dziedziczy z motywu */
	--mk-img-width:        280px;
	--mk-img-height:       210px;
	--mk-gap:              28px;
}

/* ---- Lista wydarzeń — siatka 2 kolumn ---- */
.mk-wydarzenia-lista {
	display:               grid;
	grid-template-columns: repeat(2, 1fr);
	gap:                   32px;
	margin:                0;
	padding:               0;
	list-style:            none;
}

/* ---- Pojedyncza karta ---- */
.mk-wydarzenie {
	border:        1px solid var(--mk-kolor-linia);
	border-radius: 10px;
	overflow:      hidden;
	margin:        0;
	background:    #fff;
	transition:    box-shadow 0.35s ease, transform 0.35s ease;
}

.mk-wydarzenie:hover {
	box-shadow: 0 12px 44px rgba(0, 0, 0, 0.13);
	transform:  translateY(-5px);
}

/* --- Wyszarzone/wyprzedane całe wydarzenie --- */
.mk-wydarzenie--wyprzedane {
	opacity: 0.56;
	filter:  grayscale(0.45);
}

.mk-wydarzenie--wyprzedane:hover {
	transform:  none;
	box-shadow: none;
}

/* ---- Układ pionowy karty ---- */
.mk-wydarzenie__inner {
	display:        flex;
	flex-direction: column;
}

/* ---- Zoom zdjęcia na hover ---- */
.mk-wydarzenie:hover .mk-wydarzenie__img {
	transform: scale(1.07);
}

/* ---- Overlay z gradientem ---- */
.mk-wydarzenie__overlay {
	position:        absolute;
	inset:           0;
	z-index:         1;
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	padding:         28px 32px;
	text-align:      center;
	background:      linear-gradient(
		to top,
		rgba(0, 0, 0, 0.80) 0%,
		rgba(0, 0, 0, 0.35) 50%,
		rgba(0, 0, 0, 0.08) 100%
	);
	pointer-events:  none;
}

/* Przywróć klikalność linkom w overlayu */
.mk-wydarzenie__overlay a {
	pointer-events: auto;
}

.mk-wydarzenie__overlay-meta {
	display:         flex;
	align-items:     center;
	justify-content: center;
	flex-wrap:       wrap;
	gap:             8px 16px;
	margin-top:      8px;
}

.mk-wydarzenie__overlay-date {
	display:     flex;
	align-items: center;
	gap:         6px;
	color:       rgba(255, 255, 255, 0.93);
	font-size:   0.9rem;
	font-weight: 500;
	text-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
}

.mk-overlay-ikona {
	width:       15px;
	height:      15px;
	flex-shrink: 0;
}

.mk-overlay-badge {
	display:        inline-block;
	font-size:      0.68rem;
	font-weight:    700;
	padding:        2px 8px;
	border-radius:  20px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	white-space:    nowrap;
}

.mk-overlay-badge--wyprzedane {
	background: rgba(255, 255, 255, 0.18);
	color:      #fff;
	border:     1px solid rgba(255, 255, 255, 0.4);
}

.mk-wydarzenie__inne-terminy {
	color:           rgba(255, 255, 255, 0.84);
	font-size:       0.8rem;
	font-weight:     600;
	text-decoration: underline;
	text-shadow:     0 1px 5px rgba(0, 0, 0, 0.6);
	transition:      color 0.2s ease;
	white-space:     nowrap;
}

.mk-wydarzenie__inne-terminy:hover {
	color:           #fff;
	text-decoration: none;
}

/* ---- Zdjęcie + overlay ---- */
.mk-wydarzenie__img-wrap {
	position:         relative;
	width:            100%;
	height:           360px;
	overflow:         hidden;
	background-color: var(--mk-kolor-placeholder);
}

.mk-wydarzenie__img {
	position:        absolute !important;
	top:             0 !important;
	left:            0 !important;
	width:           100% !important;
	height:          100% !important;
	max-width:       none !important;
	max-height:      none !important;
	object-fit:      cover !important;
	object-position: center !important;
	display:         block;
	z-index:         0;
	transform-origin: center;
	transition:      transform 0.5s ease;
}

/* ---- Placeholder gdy brak zdjęcia ---- */
.mk-wydarzenie__placeholder {
	position:        absolute;
	inset:           0;
	z-index:         0;
	width:           100%;
	height:          100%;
	display:         flex;
	align-items:     center;
	justify-content: center;
	color:           #a09d98;
	background:      var(--mk-kolor-placeholder);
}

.mk-wydarzenie__placeholder svg {
	width:  64px;
	height: 64px;
}

/* ---- Treść pod zdjęciem ---- */
.mk-wydarzenie__content {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	text-align:     center;
	gap:            16px;
	padding:        22px 28px 28px;
}

/* ---- Tytuł na overlayu ---- */
.mk-wydarzenie__tytul {
	margin:      0;
	font-family: var(--mk-font-heading);
	font-size:   1.6rem;
	font-weight: 700;
	line-height: 1.2;
	color:       #fff;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65),
	             0 0   30px rgba(0, 0, 0, 0.25);
}

.mk-wydarzenie__tytul a {
	color:           #fff;
	text-decoration: none;
	transition:      opacity 0.2s ease;
}

.mk-wydarzenie__tytul a:hover {
	opacity:         0.88;
	text-decoration: none;
}

/* ---- Data / cena (wyświetlane przez overlay) ---- */
.mk-wydarzenie__data,
.mk-wydarzenie__cena {
	display: none;
}

.mk-meta-ikona {
	display:     flex;
	align-items: center;
	flex-shrink: 0;
}

.mk-meta-ikona svg {
	width:       16px;
	height:      16px;
	flex-shrink: 0;
}

/* ---- Krótki opis ---- */
.mk-wydarzenie__opis {
	margin:      0;
	font-size:   0.92rem;
	color:       var(--mk-kolor-subtext);
	line-height: 1.6;
}

/* ---- Link "Dowiedz się więcej" pod opisem ---- */
.mk-wydarzenie__link-wiecej {
	display:         inline-block;
	font-size:       0.85rem;
	font-weight:     600;
	color:           var(--mk-kolor-akcentu);
	text-decoration: underline;
	text-underline-offset: 3px;
	letter-spacing:  0.02em;
	transition:      color 0.2s ease, opacity 0.2s ease;
}

.mk-wydarzenie__link-wiecej:hover,
.mk-wydarzenie__link-wiecej:focus-visible {
	color:           var(--mk-kolor-tekstu);
	text-decoration: underline;
}

/* ---- Link "Dowiedz się więcej" (zachowany dla kompatybilności) ---- */
.mk-wydarzenie__wiecej {
	display: none;
}

/* ---- Przyciski akcji ---- */
.mk-wydarzenie__akcje {
	display:     flex;
	flex-wrap:   nowrap;
	gap:         10px;
	align-items: center;
	width:       100%;
}

.mk-wydarzenie__akcje .mk-btn--dark {
	flex-shrink: 0;
	margin-left: auto;
}

/* ---- Cena w wierszu akcji ---- */
.mk-wydarzenie__cena-akcja {
	flex:        1 1 0;
	min-width:   0;
	font-size:   1rem;
	font-weight: 700;
	color:       var(--mk-kolor-tekstu);
	text-align:  left;
	white-space: normal;
	word-break:  break-word;
}

/* ---- Shortcode [cena-wydarzenia] ---- */
.mk-cena-wydarzenia {
	font-weight: 700;
	color:       var(--mk-kolor-tekstu);
}

.mk-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	padding:         9px 20px;
	font-size:       0.82rem;
	font-weight:     600;
	letter-spacing:  0.04em;
	text-transform:  uppercase;
	text-decoration: none;
	border-radius:   var(--mk-border-radius);
	transition:      background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
	white-space:     nowrap;
	cursor:          pointer;
}

.mk-btn--outline {
	background-color: transparent;
	color:            var(--mk-kolor-tekstu);
	border:           1.5px solid var(--mk-kolor-tekstu);
}

.mk-btn--outline:hover,
.mk-btn--outline:focus-visible {
	background-color: var(--mk-kolor-tekstu);
	color:            #fff;
	transform:        translateY(-1px);
	text-decoration:  none;
}

.mk-btn--dark {
	background-color: var(--mk-kolor-tekstu);
	color:            #fff;
	border:           1.5px solid var(--mk-kolor-tekstu);
}

.mk-btn--dark:hover,
.mk-btn--dark:focus-visible {
	background-color: #3a3a3a;
	border-color:     #3a3a3a;
	color:            #fff;
	transform:        translateY(-1px);
	text-decoration:  none;
}

/* ---- Komunikat braku wydarzeń ---- */
.mk-brak-wydarzen {
	color:       var(--mk-kolor-subtext);
	font-style:  italic;
	padding:     20px 0;
}

/* ---- Paginacja ---- */
.mk-paginacja {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             16px;
	margin-top:      36px;
	padding-top:     20px;
	border-top:      1px solid var(--mk-kolor-linia);
	flex-wrap:       wrap;
}

.mk-paginacja__btn {
	display:          inline-block;
	padding:          10px 22px;
	background-color: var(--mk-kolor-akcentu);
	color:            #fff;
	text-decoration:  none;
	font-size:        0.85rem;
	font-weight:      600;
	letter-spacing:   0.04em;
	text-transform:   uppercase;
	border-radius:    var(--mk-border-radius);
	transition:       background-color 0.2s ease, transform 0.15s ease;
}

.mk-paginacja__btn:hover,
.mk-paginacja__btn:focus-visible {
	background-color: #b8923d;
	color:            #fff;
	text-decoration:  none;
	transform:        translateY(-2px);
}

.mk-paginacja__info {
	flex:        1 0 auto;
	text-align:  center;
	font-size:   0.85rem;
	color:       var(--mk-kolor-subtext);
}

/* ---- Liczba zapisanych (ukryte) ---- */
.mk-wydarzenie__zapisani {
	display: none;
}

/* =============================================================
   Responsywność
   ============================================================= */

@media ( max-width: 768px ) {

	.mk-wydarzenia-lista {
		grid-template-columns: 1fr;
	}

	.mk-wydarzenie__img-wrap {
		height: 280px;
	}

	.mk-wydarzenie__tytul {
		font-size: 1.3rem;
	}

	.mk-wydarzenie__content {
		padding: 18px 20px 22px;
	}

	.mk-wydarzenie__overlay {
		padding: 20px;
	}

	.mk-paginacja {
		flex-direction: column;
		align-items:    stretch;
		text-align:     center;
	}

	.mk-paginacja__btn {
		text-align: center;
	}
}

@media ( max-width: 480px ) {

	.mk-wydarzenie__img-wrap {
		height: 230px;
	}

	.mk-wydarzenie__tytul {
		font-size: 1.15rem;
	}

	.mk-paginacja__btn {
		padding: 10px 14px;
		font-size: 0.78rem;
	}
}

/* =============================================================
   Shortcode [nadchodzace-wydarzenia]
   ============================================================= */

.mk-nadchodzace {
	margin: 0 0 24px;
}

.mk-nadchodzace__brak {
	color:      var(--mk-kolor-subtext);
	font-style: italic;
}

/* ---- Lista terminów ---- */
.mk-nadchodzace__lista {
	list-style:     none;
	margin:         0 0 28px;
	padding:        0;
	display:        flex;
	flex-direction: column;
	gap:            0;
	max-height:     400px;
	overflow-y:     auto;
	scrollbar-width: thin;
	scrollbar-color: var(--mk-kolor-linia) transparent;
}

.mk-nadchodzace__item {
	display:       flex;
	align-items:   center;
	gap:           10px;
	font-size:     0.97rem;
	font-weight:   500;
	color:         var(--mk-kolor-tekstu);
	padding:       14px 16px;
	border-bottom: 1px solid var(--mk-kolor-linia);
	border-radius: 0;
	transition:    background 0.15s;
}

.mk-nadchodzace__item:first-child {
	border-top: none;
}

.mk-nadchodzace__item:last-child {
	border-bottom: none;
}

.mk-nadchodzace__item:hover {
	background: #faf9f7;
}

.mk-nadchodzace__ikona {
	display:    flex;
	align-items: center;
	flex-shrink: 0;
	color:       #1a1a1a;
}

.mk-nadchodzace__ikona svg {
	width:  18px;
	height: 18px;
}

.mk-nadchodzace__info {
	display:        flex;
	flex-direction: column;
	flex:           1 1 auto;
	gap:            3px;
}

.mk-nadchodzace__date {
	display:        inline-block;
	align-self:     flex-start;
	font-size:      1rem;
	font-weight:    600;
	color:          var(--mk-kolor-tekstu);
	line-height:    1.2;
	padding:        2px 8px;
}

.mk-nadchodzace__btn-zapisz {
	flex-shrink:    0;
	margin-left:    auto;
	background:     #1a1a1a;
	color:          #fff;
	border:         none;
	border-radius:  20px;
	padding:        7px 18px;
	font-size:      0.82rem;
	font-weight:    600;
	cursor:         pointer;
	white-space:    nowrap;
	transition:     background 0.2s;
	letter-spacing: 0.02em;
}

.mk-nadchodzace__btn-zapisz:hover,
.mk-nadchodzace__btn-zapisz:focus-visible {
	background: #3a3a3a;
	outline:    none;
}

.mk-nadchodzace__status {
	display:        inline-block;
	flex-shrink:    0;
	align-self:     flex-start;
	font-size:      0.72rem;
	font-weight:    600;
	padding:        2px 8px;
	border-radius:  20px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	white-space:    nowrap;
}

.mk-nadchodzace__status--otwarte {
	background: #edf7ed;
	color:      #1a7f37;
}

.mk-nadchodzace__status--wyprzedane {
	background: #ebebeb;
	color:      #999;
	text-decoration: line-through;
}

/* ---- Mini-kalendarze ---- */
.mk-nadchodzace__kalendarze {
	margin-top: 20px;
}

/* Nawigacja prev/next w nagłówku kalendarza */
.mk-fp-nav {
	background:    transparent;
	border:        none;
	cursor:        pointer;
	font-size:     22px;
	line-height:   1;
	color:         #555;
	padding:       4px 10px;
	border-radius: 4px;
	transition:    background 0.15s, color 0.15s;
	flex-shrink:   0;
	display:       flex;
	align-items:   center;
	justify-content: center;
}

.mk-fp-nav:hover {
	background: #f0ece6;
	color:      #1a1a1a;
}

/* Nadpisanie stylu flatpickr — wersja statyczna */
.flatpickr-calendar.mk-fp-static {
	position:      static !important;
	display:       block !important;
	visibility:    visible !important;
	opacity:       1 !important;
	box-shadow:    0 2px 12px rgba(0,0,0,.12);
	border-radius: 6px;
	background:    #fff;
	border:        1px solid #e2e2e2;
	width:         100%;
	box-sizing:    border-box;
	padding:       0;
	font-family:   inherit;
	font-size:     14px;
	line-height:   1.4;
	overflow:      hidden;
}

.mk-fp-static .flatpickr-months {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	background:      #fff;
	padding:         8px 6px;
	border-bottom:   1px solid #eee;
}

.mk-fp-static .flatpickr-month {
	flex: 1;
	text-align: center;
}

.mk-fp-static .flatpickr-current-month {
	display:     flex;
	align-items: center;
	justify-content: center;
	gap:         6px;
	font-size:   14px;
	font-weight: 600;
	color:       #1a1a1a;
}

.mk-fp-static .flatpickr-month-name {
	font-weight: 700;
}

.mk-fp-static .flatpickr-year-name {
	color: #666;
	font-weight: 400;
}

.mk-fp-static .flatpickr-innerContainer {
	padding: 8px 10px 10px;
}

.mk-fp-static .flatpickr-weekdays {
	margin-bottom: 2px;
}

.mk-fp-static .flatpickr-weekdaycontainer {
	display:               grid;
	grid-template-columns: repeat(7, 1fr);
}

.mk-fp-static .flatpickr-weekday {
	text-align:  center;
	font-size:   11px;
	font-weight: 600;
	color:       #9a9a9a;
	padding:     4px 0;
}

.mk-fp-static .flatpickr-days {
	/* żadnego scrollowania */
}

.mk-fp-static .dayContainer {
	display:               grid;
	grid-template-columns: repeat(7, 1fr);
	gap:                   2px;
}

.mk-fp-static .flatpickr-day {
	display:         flex;
	align-items:     center;
	justify-content: center;
	height:          32px;
	border-radius:   4px;
	font-size:       13px;
	color:           #1a1a1a;
	cursor:          default;
}

.mk-fp-static .flatpickr-day.prevMonthDay,
.mk-fp-static .flatpickr-day.nextMonthDay {
	color:      #ccc;
	background: transparent;
}

.mk-fp-static .flatpickr-day.flatpickr-disabled {
	color:      #ccc;
	background: transparent;
}

.mk-fp-static .flatpickr-day.today {
	border:     1px solid var(--mk-kolor-akcentu);
	color:      var(--mk-kolor-akcentu);
	font-weight: 700;
}

/* Zaznaczone terminy wydarzenia */
.mk-fp-static .flatpickr-day.mk-fp-highlight {
	background:  #1a7f37;
	color:       #fff !important;
	font-weight: 700;
	border:      none;
}

.mk-fp-static .flatpickr-day.mk-fp-highlight.today {
	background:  #1a7f37;
	border:      2px solid #1a1a1a;
}

/* Wyprzedane terminy — wyszarzone */
.mk-fp-static .flatpickr-day.mk-fp-soldout {
	background:  #ebebeb;
	color:       #999 !important;
	font-weight: 500;
	border:      none;
	text-decoration: line-through;
}

/* =============================================================
   Pasek kontrolny: kategorie (lewo) + sortowanie (prawo)
   ============================================================= */

.mk-controls-bar {
	display:         flex;
	align-items:     flex-start;
	justify-content: space-between;
	gap:             16px;
	margin-bottom:   28px;
	flex-wrap:       wrap;
}

/* =============================================================
   Pasek sortowania [wydarzenia]
   ============================================================= */

.mk-sortowanie {
	display:     flex;
	align-items: center;
	flex-wrap:   wrap;
	gap:         8px;
	flex-shrink: 0;
}

.mk-sortowanie__label {
	font-size:      0.78rem;
	font-weight:    600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color:          var(--mk-kolor-subtext);
	margin-right:   4px;
}

.mk-sort-btn {
	display:         inline-flex;
	align-items:     center;
	gap:             6px;
	padding:         6px 14px;
	font-size:       0.78rem;
	font-weight:     600;
	letter-spacing:  0.04em;
	text-transform:  uppercase;
	background:      transparent;
	color:           var(--mk-kolor-subtext);
	border:          1.5px solid var(--mk-kolor-linia);
	border-radius:   20px;
	cursor:          pointer;
	transition:      border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
	white-space:     nowrap;
}

.mk-sort-btn:hover {
	border-color: var(--mk-kolor-tekstu);
	color:        var(--mk-kolor-tekstu);
}

.mk-sort-btn--active {
	background:   var(--mk-kolor-tekstu);
	color:        #fff;
	border-color: var(--mk-kolor-tekstu);
}

.mk-sort-btn--active:hover {
	background:   #3a3a3a;
	border-color: #3a3a3a;
	color:        #fff;
}

.mk-sort-icon {
	width:       14px;
	height:      14px;
	flex-shrink: 0;
}

.mk-sort-arrow {
	font-size:   0.9em;
	line-height: 1;
}

/* =============================================================
   Odznaki statusu daty (Wyprzedane / Zakończone)
   ============================================================= */

.mk-status {
	display:        inline-block;
	font-size:      0.68rem;
	font-weight:    700;
	padding:        2px 8px;
	border-radius:  20px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	vertical-align: middle;
	white-space:    nowrap;
}

.mk-status--wyprzedane {
	background: #fef3e2;
	color:      #b45309;
}

.mk-status--zakonczone {
	background: #f3f4f6;
	color:      #6b7280;
}

/* =============================================================
   Wrapper listy wydarzeń
   ============================================================= */

.mk-wydarzenia-wrapper {
	position: relative;
}

/* Responsywność sortowania i filtrów */
@media ( max-width: 600px ) {
	.mk-controls-bar {
		flex-direction: column;
		gap:            12px;
		margin-bottom:  20px;
	}

	.mk-sortowanie {
		width:          100%;
		justify-content: flex-start;
		gap:            6px;
	}

	.mk-sort-btn {
		padding:   5px 10px;
		font-size: 0.72rem;
	}

	.mk-sort-icon {
		display: none;
	}

	.mk-kategorie-filtry {
		width: 100%;
	}

	.mk-kat-btn {
		padding:   5px 12px;
		font-size: 0.72rem;
	}

	.mk-btn {
		text-align: center;
		justify-content: center;
	}
}

/* =============================================================
   Filtrowanie kategorii
   ============================================================= */

.mk-kategorie-filtry {
	display:    flex;
	flex-wrap:  wrap;
	gap:        8px;
	flex:       1 1 0;
	min-width:  0;
}

.mk-kat-btn {
	display:        inline-flex;
	align-items:    center;
	padding:        6px 16px;
	font-size:      0.78rem;
	font-weight:    600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background:     transparent;
	color:          var(--mk-kolor-subtext);
	border:         1.5px solid var(--mk-kolor-linia);
	border-radius:  20px;
	cursor:         pointer;
	transition:     border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
	white-space:    nowrap;
}

.mk-kat-btn:hover {
	border-color: var(--mk-kolor-tekstu);
	color:        var(--mk-kolor-tekstu);
}

.mk-kat-btn--active {
	background:   var(--mk-kolor-akcentu);
	color:        #fff;
	border-color: var(--mk-kolor-akcentu);
}

.mk-kat-btn--active:hover {
	background:   #b8923d;
	border-color: #b8923d;
	color:        #fff;
}

/* ---- Ukryte kategorie (poźniej załadowane przez JS) ---- */
.mk-kat-btn--hidden {
	display: none;
}

/* ---- Przycisk „więcej kategorii” ---- */
.mk-kat-btn--wiecej {
	border-style:  dashed;
	color:         var(--mk-kolor-akcentu);
	border-color:  var(--mk-kolor-akcentu);
}

.mk-kat-btn--wiecej:hover {
	background:   var(--mk-kolor-akcentu);
	border-color: var(--mk-kolor-akcentu);
	color:        #fff;
	border-style: solid;
}

/* ---- Ukryty element (filtr kategorii) ---- */
.mk-wydarzenie--ukryte {
	display: none;
}
.mk-wydarzenie__kat-overlay {
	position:       absolute;
	bottom:         12px;
	left:           12px;
	z-index:        2;
	display:        flex;
	flex-wrap:      wrap;
	gap:            5px;
	max-width:      calc(100% - 24px);
	pointer-events: none;
}

.mk-kat-chip {
	display:         inline-block;
	font-size:       0.67rem;
	font-weight:     700;
	padding:         3px 10px;
	border-radius:   20px;
	background:      rgba(255, 255, 255, 0.18);
	color:           #fff;
	border:          1px solid rgba(255, 255, 255, 0.45);
	text-shadow:     0 1px 3px rgba(0, 0, 0, 0.5);
	letter-spacing:  0.05em;
	text-transform:  uppercase;
	white-space:     nowrap;
	backdrop-filter: blur(4px);
}

/* =============================================================
   Shortcode [wydarzenia-kategorie]
   ============================================================= */

.mk-wyd-kategorie-lista {
	display:   flex;
	flex-wrap: wrap;
	gap:       8px;
	margin:    0;
	padding:   0;
}

.mk-kat-tag {
	display:        inline-flex;
	align-items:    center;
	padding:        6px 16px;
	font-size:      0.82rem;
	font-weight:    600;
	letter-spacing: 0.03em;
	color:          var(--mk-kolor-tekstu);
	background:     #f5f2ee;
	border-radius:  20px;
	border:         1.5px solid var(--mk-kolor-tekstu);
}