.zok-event-calendar {
	--zok-color-text: #424851;
	--zok-color-dark: #2F3242;
	--zok-color-gold: #EDCE94;
	--zok-color-orange: #EDCE94;
	--zok-color-light: #F7F7F7;
	--zok-color-white: #FFFFFF;
	--zok-color-border: #E1E1E1;
	--zok-color-muted: #8C9098;
	font-family: "Jost", sans-serif;
	color: var(--zok-color-text);
}

.zok-event-calendar *,
.zok-event-calendar *::before,
.zok-event-calendar *::after {
	box-sizing: border-box;
}

.zok-event-calendar__title {
	margin: 0;
	color: var(--zok-color-dark);
	text-align: center;
	font-size: 42px;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: 0;
}

.zok-event-calendar__nav {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 20px;
	align-items: center;
	margin: 0 0 34px;
}

.zok-event-calendar__nav-side {
	display: flex;
	gap: 8px;
	align-items: center;
}

.zok-event-calendar__nav-side:last-child {
	justify-content: flex-end;
}

.zok-event-calendar__nav-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	background: var(--zok-color-text);
	color: #000;
	text-decoration: none;
	font-size: 34px;
	font-weight: 300;
	line-height: 1;
	transition: background-color 180ms ease, color 180ms ease;
}

.zok-event-calendar__nav-button:hover,
.zok-event-calendar__nav-button:focus {
	color: var(--zok-color-gold);
	background: var(--zok-color-gold);
	outline: 2px solid var(--zok-color-gold);
	outline-offset: 2px;
}

.zok-event-calendar__grid {
	margin-bottom: 60px;
	border: 1px solid var(--zok-color-border);
	background: var(--zok-color-light);
}

.zok-event-calendar__weekdays,
.zok-event-calendar__days {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
}

.zok-event-calendar__grid--week .zok-event-calendar__days {
	grid-template-rows: 1fr;
}

.zok-event-calendar__grid--week .zok-event-calendar__day {
	min-height: 210px;
}

.zok-event-calendar__weekday {
	min-height: 44px;
	padding: 11px 10px;
	border-right: 1px solid var(--zok-color-border);
	border-bottom: 1px solid var(--zok-color-border);
	background: var(--zok-color-white);
	color: var(--zok-color-dark);
	text-align: center;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.2;
}

.zok-event-calendar__weekday:last-child {
	border-right: 0;
}

.zok-event-calendar__day {
	position: relative;
	min-height: 156px;
	padding: 38px 6px 12px;
	border-right: 1px solid var(--zok-color-border);
	border-bottom: 1px solid var(--zok-color-border);
	background: var(--zok-color-light);
	cursor: pointer;
	transition: background-color 180ms ease, box-shadow 180ms ease;
}

.zok-event-calendar__day:nth-child(7n) {
	border-right: 0;
}

.zok-event-calendar__day:hover {
	background: var(--zok-color-white);
	box-shadow: inset 0 0 0 2px rgba(237, 206, 148, 0.75);
}

.zok-event-calendar__day:focus {
	outline: 2px solid var(--zok-color-gold);
	outline-offset: -2px;
}

.zok-event-calendar__day--selected {
	box-shadow: inset 0 0 0 2px var(--zok-color-orange);
}

.zok-event-calendar__day--muted {
	color: #B6B9BE;
	background: #EFEFEF;
}

.zok-event-calendar__day--has-events {
	background: var(--zok-color-white);
}

.zok-event-calendar__day--has-events::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: var(--zok-color-text);
}

.zok-event-calendar__day--today {
	background: #FCF8E3;
}

.zok-event-calendar__day-number {
	position: absolute;
	top: 12px;
	right: 14px;
	color: var(--zok-color-dark);
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
}

.zok-event-calendar__day--muted .zok-event-calendar__day-number {
	color: #A7AAB0;
}

.zok-event-calendar__event-marker {
	position: relative;
	display: block;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
}

.zok-event-calendar__event-pill {
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 4px 0 0;
	padding: 6px 8px;
	border: 0;
	overflow: hidden;
	background: var(--zok-color-orange);
	color: var(--zok-color-white);
	font-family: inherit;
	text-align: left;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.25;
	transition: background-color 180ms ease, transform 180ms ease;
}

.zok-event-calendar__event-pill:nth-of-type(2n) {
	background: #78A9D8;
}

.zok-event-calendar__event-pill:nth-of-type(3n) {
	background: #F18D73;
}

.zok-event-calendar__event-pill:hover,
.zok-event-calendar__event-pill:focus {
	color: var(--zok-color-white);
	background: var(--zok-color-dark);
	transform: translateY(-1px);
	outline: 2px solid var(--zok-color-gold);
	outline-offset: 2px;
}

.zok-event-calendar__tooltip {
	position: fixed;
	z-index: 9999;
	width: min(250px, calc(100vw - 24px));
	border-left: 8px solid var(--zok-color-orange);
	background: var(--zok-color-white);
	box-shadow: 0 18px 40px rgba(47, 50, 66, 0.22);
	color: var(--zok-color-text);
}

.zok-event-calendar__tooltips {
	position: static;
}

.zok-event-calendar__tooltip[hidden] {
	display: none;
}

.zok-event-calendar__tooltip-close {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 1;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: var(--zok-color-text);
	color: #fff;
	font-family: inherit;
	font-size: 26px;
	line-height: 30px;
	cursor: pointer;
}

.zok-event-calendar__tooltip-close:hover,
.zok-event-calendar__tooltip-close:focus {
	color: var(--zok-color-white);
	background: var(--zok-color-gold);
	outline: 2px solid var(--zok-color-gold);
	outline-offset: 2px;
}

.zok-event-calendar__tooltip-image {
	display: block;
	width: 100%;
	object-fit: cover;
	background: var(--zok-color-light);
}

.zok-event-calendar__tooltip-image-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.zok-event-calendar__tooltip-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 15px;
	padding: 20px;
}

.zok-event-calendar__tooltip-title {
	margin-top: 10px;
	margin-bottom: 10px;
	color: var(--zok-color-dark);
	font-size: 20px !important;
	font-weight: 500;
	line-height: 1.18;
	letter-spacing: 0;
}

.zok-event-calendar__tooltip-title a {
	color: inherit;
	text-decoration: none;
}

.zok-event-calendar__tooltip-title a:hover,
.zok-event-calendar__tooltip-title a:focus {
	color: var(--zok-color-orange);
}

.zok-event-calendar__tooltip-date,
.zok-event-calendar__tooltip-time {
	margin-bottom: 10px;
	font-size: 15px;
	line-height: 1.35;
}

.zok-event-calendar__tooltip-date {
	display: inline-flex;
	align-items: center;
	padding: 7px 10px;
	background: var(--zok-color-gold);
	color: #fff;
	font-size: 16px;
	font-weight: 600;
}

.zok-event-calendar__tooltip-time {
	color: var(--zok-color-orange);
}

.zok-event-calendar__tooltip-more {
	display: inline-block;
	margin-top: 0;
	padding: 9px 14px;
	background: var(--zok-color-text);
	color: #000;
	text-decoration: none;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.25;
}

.zok-event-calendar__tooltip-more:hover,
.zok-event-calendar__tooltip-more:focus {
	color: var(--zok-color-gold);
	background: var(--zok-color-gold);
	outline: 2px solid var(--zok-color-gold);
	outline-offset: 2px;
}

.zok-event-calendar__view-switcher {
	display: inline-flex;
	gap: 4px;
	align-items: center;
	padding: 4px;
	background: var(--zok-color-light);
}

.zok-event-calendar__view-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 8px 14px;
	background: transparent;
	color: var(--zok-color-dark);
	text-decoration: none;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	transition: background-color 180ms ease, color 180ms ease;
}

.zok-event-calendar__view-button:hover,
.zok-event-calendar__view-button:focus,
.zok-event-calendar__view-button--active {
	background: var(--zok-color-dark);
	color: #000;
	outline: none;
}

.zok-event-calendar__view-button:hover,
.zok-event-calendar__view-button:focus {
	background: var(--zok-color-gold);
	color: var(--zok-color-gold);
}

.zok-event-calendar--loading {
	opacity: 0.68;
	pointer-events: none;
}

.zok-event-calendar__mobile-day-name {
	display: none;
}

.zok-event-calendar__day-panels {
	margin: -24px 0 44px;
}

.zok-event-calendar__day-panel {
	padding: 24px;
	border: 1px solid var(--zok-color-border);
	background: var(--zok-color-light);
}

.zok-event-calendar__day-panel-title {
	margin: 0 0 22px;
	color: var(--zok-color-dark);
	font-size: 25px;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: 0;
}

.zokcal-list {
	display: grid;
	gap: 34px;
}

.zokcal-event {
	display: grid;
	grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
	gap: 26px;
	align-items: stretch;
	padding: 26px;
	border: 1px solid var(--zok-color-border);
	background: var(--zok-color-white);
}

.zokcal-event--no-image {
	grid-template-columns: 1fr;
}

.zokcal-event__image-wrap {
	align-self: center;
	min-height: 190px;
	background: var(--zok-color-light);
}

.zokcal-event__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.zokcal-event__image-link {
	display: block;
	width: 100%;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.zokcal-event__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	min-width: 0;
	padding: 8px 0;
}

.zokcal-event__date,
.zokcal-event__time {
	margin: 0;
	color: var(--zok-color-text);
	font-size: 19px;
	font-weight: 500;
	line-height: 1.3;
}

.zokcal-event__date {
	display: inline-block;
	padding: 7px 11px;
	background: var(--zok-color-gold);
	color: var(--zok-color-white);
}

.zokcal-event__time {
	margin-top: 10px;
	color: var(--zok-color-text);
	font-size: 21px;
}

.zokcal-event__date span,
.zokcal-event__time span {
	font-weight: 600;
}

.zokcal-event__title {
	margin: 12px 0 14px;
	color: var(--zok-color-dark);
	font-size: 31px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0;
}

.zokcal-event__title a {
	color: inherit;
	text-decoration: none;
	transition: color 180ms ease;
}

.zokcal-event__title a:hover,
.zokcal-event__title a:focus {
	color: var(--zok-color-orange);
}

.zokcal-event__excerpt {
	margin: 0 0 24px;
	color: var(--zok-color-text);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.65;
}

.zokcal-event__more {
	display: inline-block;
	margin-top: auto;
	padding: 10px 18px;
	background: var(--zok-color-text);
	color: #000;
	text-decoration: none;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.25;
	transition: background-color 180ms ease, color 180ms ease;
}

.zokcal-event__more:hover,
.zokcal-event__more:focus {
	color: var(--zok-color-gold);
	background: var(--zok-color-gold);
}

.zokcal-list--day .zokcal-event {
	grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
	padding: 20px;
}

.zokcal-list--day .zokcal-event__image-wrap {
	min-height: 150px;
}

.zokcal-empty {
	margin: 0;
	padding: 28px;
	border: 1px solid var(--zok-color-border);
	background: var(--zok-color-light);
	color: var(--zok-color-text);
	font-size: 17px;
}

@media (max-width: 1024px) {
	.zok-event-calendar__title {
		font-size: 36px;
	}

	.zok-event-calendar__nav {
		grid-template-columns: auto 1fr auto;
	}

	.zok-event-calendar__weekday {
		font-size: 15px;
	}

	.zok-event-calendar__day {
		min-height: 132px;
		padding: 34px 4px 10px;
	}

	.zok-event-calendar__event-pill {
		padding: 5px 6px;
		font-size: 12px;
	}

	.zok-event-calendar__tooltip-title {
		font-size: 20px;
	}

	.zokcal-event {
		grid-template-columns: minmax(170px, 230px) minmax(0, 1fr);
		gap: 24px;
		padding: 22px;
	}

	.zokcal-event__title {
		font-size: 26px;
	}
}

@media (max-width: 767px) {
	.zok-event-calendar__title {
		font-size: 30px;
	}

	.zok-event-calendar__nav {
		grid-template-columns: auto auto;
		justify-content: center;
		gap: 14px;
		margin-bottom: 24px;
		text-align: center;
	}

	.zok-event-calendar__nav-side {
		justify-content: center;
		order: 2;
	}

	.zok-event-calendar__nav .zok-event-calendar__title {
		grid-column: 1 / -1;
		order: 1;
	}

	.zok-event-calendar__nav-side:last-child {
		display: flex;
		order: 3;
	}

	.zok-event-calendar__grid {
		margin-bottom: 38px;
		border: 0;
		background: transparent;
	}

	.zok-event-calendar__weekdays {
		display: none;
	}

	.zok-event-calendar__days {
		display: grid;
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.zok-event-calendar__weekday {
		min-height: 38px;
		padding: 9px 6px;
		font-size: 13px;
	}

	.zok-event-calendar__day {
		min-height: 0;
		padding: 16px 14px 14px 76px;
		border: 1px solid var(--zok-color-border);
	}

	.zok-event-calendar__day:nth-child(7n) {
		border-right: 1px solid var(--zok-color-border);
	}

	.zok-event-calendar__mobile-day-name {
		position: absolute;
		top: 18px;
		left: 14px;
		display: block;
		color: var(--zok-color-muted);
		font-size: 13px;
		font-weight: 500;
	}

	.zok-event-calendar__day-number {
		top: 38px;
		left: 14px;
		right: auto;
		font-size: 25px;
		font-weight: 500;
	}

	.zok-event-calendar__event-pill {
		font-size: 13px;
	}

	.zokcal-event,
	.zokcal-event--no-image {
		grid-template-columns: 1fr;
		gap: 18px;
		padding: 18px;
	}

	.zokcal-event__image-wrap {
		min-height: 180px;
	}

	.zokcal-event__content {
		padding: 0;
	}

	.zokcal-event__title {
		font-size: 24px;
	}

	.zokcal-event__excerpt {
		font-size: 17px;
	}

	.zokcal-event__date {
		font-size: 19px;
	}

	.zokcal-event__time {
		font-size: 21px;
	}

	.zok-event-calendar__tooltip {
		width: calc(100vw - 24px);
		max-height: calc(100vh - 24px);
		overflow: auto;
		border-left-width: 6px;
	}

	.zok-event-calendar__tooltip-image {
		width: 75%;
		max-width: 75%;
		max-height: none;
		height: auto;
		margin: 15px auto 0;
		object-fit: contain;
	}

	.zok-event-calendar__tooltip-body {
		gap: 15px;
		padding: 18px;
	}

	.zok-event-calendar__tooltip-title {
		font-size: 25px;
	}
}

/* Strong layout pass for ZOK/Elementor pages. */
.zok-event-calendar[data-zok-calendar-root] {
	width: 100%;
	max-width: 100%;
	font-family: "Jost", sans-serif;
	color: var(--zok-color-text);
}

.zok-event-calendar[data-zok-calendar-root] a,
.zok-event-calendar[data-zok-calendar-root] button,
.zok-event-calendar[data-zok-calendar-root] [role="button"] {
	font-family: inherit;
	letter-spacing: 0;
}

.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__nav {
	display: grid;
	grid-template-columns: auto minmax(220px, 1fr) auto;
	align-items: center;
	column-gap: 24px;
	row-gap: 16px;
	margin: 0 0 28px;
}

.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__title {
	color: var(--zok-color-dark);
	text-align: center;
	font-size: 42px;
	font-weight: 600;
	line-height: 1.15;
	text-transform: none;
}

.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__nav-button {
	width: 54px;
	height: 54px;
	border: 0;
	background: var(--zok-color-text);
	color: #fff;
	text-decoration: none;
	font-size: 34px;
	line-height: 1;
	box-shadow: none;
}

.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__nav-button:hover,
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__nav-button:focus {
	background: var(--zok-color-gold);
	color: var(--zok-color-dark);
	outline: 0;
}

.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__view-switcher {
	display: inline-flex;
	align-items: stretch;
	gap: 0;
	padding: 6px;
	background: var(--zok-color-light);
}

.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__view-button {
	min-width: 104px;
	min-height: 58px;
	padding: 11px 18px;
	background: transparent;
	color: var(--zok-color-dark);
	text-decoration: none;
	font-size: 16px;
	font-weight: 500;
	box-shadow: none;
}

.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__view-button--active {
	background: var(--zok-color-dark);
	color: #fff;
}

.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__view-button:hover,
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__view-button:focus {
	background: var(--zok-color-gold);
	color: var(--zok-color-dark);
	outline: 0;
}

.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__grid {
	margin: 0 0 34px;
	border: 1px solid var(--zok-color-border);
	background: #fff;
}

.zok-event-calendar[data-zok-calendar-root].zok-event-calendar--day-list-open .zok-event-calendar__grid {
	display: none;
}

.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__weekday {
	min-height: 56px;
	padding: 16px 10px;
	background: #fff;
	color: var(--zok-color-dark);
	font-size: 18px;
	font-weight: 500;
}

.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__day {
	min-height: 176px;
	padding: 44px 10px 14px;
	background: var(--zok-color-light);
}

.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__day--has-events {
	background: #fff;
}

.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__day--today {
	background: #FCF8E3;
}

.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__day-number {
	top: 16px;
	right: 16px;
	color: #111a2e;
	font-size: 19px;
	font-weight: 400;
}

.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__event-pill {
	margin-top: 6px;
	padding: 7px 9px;
	background: var(--zok-color-orange);
	color: #000;
	font-size: 14px;
	line-height: 1.25;
}

.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__event-pill:nth-of-type(2n),
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__event-pill:nth-of-type(3n) {
	background: var(--zok-color-orange);
	color: #000;
}

.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__event-pill:hover,
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__event-pill:focus {
	background: var(--zok-color-dark);
	color: #fff;
}

.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__day-panels {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__day-panels:empty {
	display: none;
}

.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__day-panel[hidden] {
	display: none !important;
	visibility: hidden !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__day-panel:not([hidden]) {
	display: block;
	margin: 0 0 42px;
	padding: 24px;
	border: 1px solid var(--zok-color-border);
	background: var(--zok-color-light);
}

.zok-event-calendar[data-zok-calendar-root] .zokcal-list {
	gap: 35px;
}

.zok-event-calendar[data-zok-calendar-root] .zokcal-event {
	grid-template-columns: 25% 75%;
	gap: 0;
	align-items: start;
	padding: 32px;
	border: 1px solid var(--zok-color-border);
	background: #fff;
	overflow: hidden;
}

.zok-event-calendar[data-zok-calendar-root] .zokcal-event--no-image {
	grid-template-columns: 1fr;
}

.zok-event-calendar[data-zok-calendar-root] .zokcal-event--no-image .zokcal-event__media {
	display: none;
}

.zok-event-calendar[data-zok-calendar-root] .zokcal-event__media {
	width: 100%;
	min-width: 0;
	padding-right: 40px;
}

.zok-event-calendar[data-zok-calendar-root] .zokcal-event__image-wrap {
	padding: 10px;
	width: 100%;
	max-width: none;
	min-height: 0;
	height: 410px;
	background: var(--zok-color-light);
	overflow: hidden;
}

.zok-event-calendar[data-zok-calendar-root] .zokcal-event__image {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	object-position: center top;
}

.zok-event-calendar[data-zok-calendar-root] .zokcal-event__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 25px;
	justify-content: space-evenly;
	min-height: 410px;
	padding: 0;
}

.zok-event-calendar[data-zok-calendar-root] .zokcal-event__date {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 7px 12px;
	background: var(--zok-color-gold);
	color: #fff;
	font-size: 19px;
	font-weight: 600;
}

.zok-event-calendar[data-zok-calendar-root] .zokcal-event__title {
	margin: 0;
	color: var(--zok-color-dark);
	font-size: 30px;
	font-weight: 600;
	line-height: 1.18;
}

.zok-event-calendar[data-zok-calendar-root] .zokcal-event__excerpt {
	margin: 0;
	color: var(--zok-color-text);
	font-size: 18px;
	line-height: 1.55;
}

.zok-event-calendar[data-zok-calendar-root] .zokcal-event__more,
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__tooltip-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 0;
	padding: 11px 18px;
	background: var(--zok-color-text);
	color: #fff;
	text-decoration: none;
	font-size: 16px;
	font-weight: 500;
}

.zok-event-calendar[data-zok-calendar-root] .zokcal-event__more:hover,
.zok-event-calendar[data-zok-calendar-root] .zokcal-event__more:focus,
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__tooltip-more:hover,
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__tooltip-more:focus {
	background: var(--zok-color-gold);
	color: var(--zok-color-dark);
	outline: 0;
}

.zokcal-home {
	width: 100%;
	max-width: 100%;
	padding: 0;
	font-family: "Jost", sans-serif;
	color: var(--zok-color-text);
}

.zokcal-home__header {
	margin: 0 0 24px;
}

.zokcal-home__title {
	margin: 0 0 8px;
	color: var(--zok-color-dark);
	font-size: 34px;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: 0;
}

.zokcal-home__range {
	margin: 0;
	color: var(--zok-color-text);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.35;
}

.zokcal-home-week {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 10px;
	margin: 0 0 24px;
}

.zokcal-home-day {
	min-height: 154px;
	padding: 14px;
	border: 1px solid var(--zok-color-border);
	background: var(--zok-color-light);
}

.zokcal-home-day--has-events {
	background: #fff;
}

.zokcal-home-day__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 14px;
}

.zokcal-home-day__name {
	color: var(--zok-color-muted);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
}

.zokcal-home-day__number {
	color: var(--zok-color-dark);
	font-size: 26px;
	font-weight: 500;
	line-height: 1;
}

.zokcal-home-day__events {
	display: grid;
	gap: 8px;
}

.zokcal-home-event-pill,
.zokcal-home-more {
	display: block;
	width: 100%;
	padding: 8px 10px;
	background: var(--zok-color-text);
	color: #fff;
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.25;
}

.zokcal-home-more {
	background: transparent;
	color: var(--zok-color-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.zokcal-home-event-pill:hover,
.zokcal-home-event-pill:focus,
.zokcal-home-more:hover,
.zokcal-home-more:focus,
.zokcal-home__cta:hover,
.zokcal-home__cta:focus {
	background: var(--zok-color-gold);
	color: var(--zok-color-dark);
	outline: 0;
}

.zokcal-home__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 18px;
	background: var(--zok-color-text);
	color: #fff;
	text-decoration: none;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.25;
}

.zokcal-home__empty {
	margin: 0 0 20px;
	padding: 24px;
	border: 1px solid var(--zok-color-border);
	background: var(--zok-color-light);
	color: var(--zok-color-text);
	font-size: 18px;
	line-height: 1.45;
}

.zokcal-home .zok-event-calendar__grid.zokcal-home-week {
	display: block;
	margin: 0;
	border: 1px solid var(--zok-color-border);
	background: #fff;
}

.zokcal-home .zok-event-calendar__weekdays,
.zokcal-home .zok-event-calendar__days {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
}

.zokcal-home .zok-event-calendar__weekday {
	min-height: 56px;
	padding: 16px 10px;
	background: #fff;
	color: var(--zok-color-dark);
	font-size: 18px;
	font-weight: 500;
}

.zokcal-home .zok-event-calendar__day {
	min-height: 176px;
	padding: 44px 10px 14px;
	background: var(--zok-color-light);
}

.zokcal-home .zok-event-calendar__day--has-events {
	background: #fff;
}

.zokcal-home .zok-event-calendar__day-number {
	top: 16px;
	right: 16px;
	color: #111a2e;
	font-size: 19px;
	font-weight: 400;
}

.zokcal-home .zok-event-calendar__event-pill {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-top: 6px;
	padding: 7px 9px;
	background: var(--zok-color-orange);
	color: #000;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.25;
}

.zokcal-home .zok-event-calendar__event-pill:nth-of-type(2n),
.zokcal-home .zok-event-calendar__event-pill:nth-of-type(3n),
.zokcal-home .zokcal-home-more {
	background: var(--zok-color-orange);
	color: #000;
	text-decoration: none;
}

.zokcal-home .zok-event-calendar__event-pill:hover,
.zokcal-home .zok-event-calendar__event-pill:focus {
	background: var(--zok-color-dark);
	color: #fff;
}

.zok-event-calendar[data-zok-calendar-root].zokcal-home .zok-event-calendar__nav {
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	margin-bottom: 34px;
}

.zok-event-calendar[data-zok-calendar-root].zokcal-home .zok-event-calendar__nav-side:first-child {
	justify-content: flex-start;
}

.zok-event-calendar[data-zok-calendar-root].zokcal-home .zok-event-calendar__nav-side:last-child {
	justify-content: flex-end;
}

.zok-event-calendar[data-zok-calendar-root].zokcal-home .zok-event-calendar__title {
	color: var(--zok-color-dark);
	text-align: center;
	font-size: 30px;
	font-weight: 600;
	line-height: 1.15;
	text-transform: none;
}

@media (max-width: 767px) {
	.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__nav {
		display: grid;
		grid-template-columns: 1fr;
		justify-items: center;
		row-gap: 36px !important;
		margin-bottom: 42px;
	}

	.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__nav-side {
		width: 100%;
		justify-content: center;
		margin-top: 0;
		margin-bottom: 0;
	}

	.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__title {
		order: 1;
		font-size: 35px;
		line-height: 1.1;
	}

	.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__nav-side:first-child {
		order: 2;
	}

	.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__nav-side:last-child {
		order: 3;
	}

	.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__nav-button {
		margin-top: 10px;
		width: 54px;
		height: 54px;
		font-size: 16px;
	}

	.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__view-button {
		margin-top: 10px;
		min-width: 134px;
		min-height: 58px;
		font-size: 16px;
	}

	.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__view-switcher {
		width: 100%;
		justify-content: space-around;
	}

	.zok-event-calendar[data-zok-calendar-root].zokcal-home .zok-event-calendar__nav {
		grid-template-columns: repeat(2, 54px);
		justify-content: center;
		row-gap: 36px !important;
		column-gap: 24px;
		margin-bottom: 42px;
	}

	.zok-event-calendar[data-zok-calendar-root].zokcal-home .zok-event-calendar__title {
		order: 1;
		grid-column: 1 / -1;
		font-size: 35px;
		line-height: 1.1;
	}

	.zok-event-calendar[data-zok-calendar-root].zokcal-home .zok-event-calendar__nav-side:first-child {
		order: 2;
		width: auto;
		justify-content: center;
	}

	.zok-event-calendar[data-zok-calendar-root].zokcal-home .zok-event-calendar__nav-side:last-child {
		order: 3;
		width: auto;
		justify-content: center;
	}

	.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__grid {
		border: 0;
		background: transparent;
	}

	.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__weekdays {
		display: none;
	}

	.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__days {
		display: grid;
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__day {
		min-height: 86px;
		padding: 18px 18px 16px 22px;
		border: 1px solid var(--zok-color-border);
		background: var(--zok-color-light);
	}

	.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__day--has-events {
		background: #fff;
	}

	.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__day--today {
		background: #FCF8E3;
	}

	.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__mobile-day-name {
		position: static;
		display: block;
		margin: 0 0 4px;
		color: var(--zok-color-muted);
		font-size: 16px;
		font-weight: 600;
	}

	.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__day-number {
		position: static;
		display: block;
		color: var(--zok-color-dark);
		font-size: 25px;
		font-weight: 500;
		line-height: 1;
	}

	.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__event-pill {
		margin-top: 12px;
		padding: 8px 10px;
		font-size: 16px;
		white-space: normal;
	}

	.zok-event-calendar[data-zok-calendar-root] .zokcal-event,
	.zok-event-calendar[data-zok-calendar-root] .zokcal-event--no-image {
		grid-template-columns: 1fr;
		gap: 25px;
		padding: 25px;
		overflow: visible;
	}

	.zok-event-calendar[data-zok-calendar-root] .zokcal-event__media {
		width: 100%;
		padding-right: 0;
	}

	.zok-event-calendar[data-zok-calendar-root] .zokcal-event__image-wrap {
		width: 100%;
		max-width: 100%;
		height: auto;
		margin: 0 auto;
		aspect-ratio: auto;
		overflow: visible;
		background: transparent;
	}

	.zok-event-calendar[data-zok-calendar-root] .zokcal-event__image {
		width: 100% !important;
		height: auto !important;
		max-width: 100% !important;
		object-fit: contain;
	}

	.zok-event-calendar[data-zok-calendar-root] .zokcal-event__content {
		gap: 25px;
		width: 100%;
		min-height: 0;
		justify-content: flex-start;
	}

	.zok-event-calendar[data-zok-calendar-root] .zokcal-event__content > * {
		margin-top: 0;
		margin-bottom: 0;
	}

	.zok-event-calendar[data-zok-calendar-root] .zokcal-event__date {
		font-size: 18px;
		line-height: 1.35;
	}

	.zok-event-calendar[data-zok-calendar-root] .zokcal-event__title {
		font-size: 24px;
	}

	.zok-event-calendar[data-zok-calendar-root] .zokcal-event__excerpt {
		font-size: 17px;
	}

	.zokcal-home__title {
		font-size: 30px;
	}

	.zokcal-home__range {
		font-size: 16px;
	}

	.zokcal-home-week {
		display: block;
		margin: 0;
	}

	.zokcal-home .zok-event-calendar__weekdays {
		display: none;
	}

	.zokcal-home .zok-event-calendar__days {
		display: block;
	}

	.zokcal-home .zok-event-calendar__day {
		display: block;
		min-height: 0;
		padding: 20px 18px;
		border-right: 0;
	}

	.zokcal-home .zok-event-calendar__mobile-day-name {
		position: static;
		display: block;
		margin-bottom: 10px;
		color: var(--zok-color-dark);
		font-size: 18px;
		font-weight: 500;
	}

	.zokcal-home .zok-event-calendar__day-number {
		position: static;
		display: block;
		font-size: 25px;
		font-weight: 500;
		line-height: 1;
	}

	.zokcal-home .zok-event-calendar__event-pill {
		margin-top: 12px;
		padding: 8px 10px;
		min-height: 44px;
		font-size: 16px;
		white-space: normal;
	}
}

/* ==========================================================================
   Kolory kategorii (E3)
   Kolor przychodzi z bazy jako zmienne CSS na elemencie wydarzenia:
   --zokcal-cat (tło) i --zokcal-cat-text (tekst dobrany wg kontrastu WCAG).
   Reguły są bardziej szczegółowe niż domyślne kolorowanie pigułek po
   nth-of-type, żeby kategoria zawsze wygrywała.
   ========================================================================== */

.zok-event-calendar .zok-event-calendar__event-marker .zok-event-calendar__event-pill,
.zok-event-calendar .zok-event-calendar__event-marker .zok-event-calendar__event-pill:hover,
.zok-event-calendar .zok-event-calendar__event-marker .zok-event-calendar__event-pill:focus {
	background: var(--zokcal-cat, #7DA7D9);
	color: var(--zokcal-cat-text, #1A1A1A);
}

.zok-event-calendar .zok-event-calendar__event-marker .zok-event-calendar__event-pill:hover,
.zok-event-calendar .zok-event-calendar__event-marker .zok-event-calendar__event-pill:focus {
	filter: brightness(0.94);
}

.zok-event-calendar__tooltip {
	border-left: 5px solid var(--zokcal-cat, #7DA7D9);
}

.zokcal-badge {
	display: inline-block;
	margin: 0 0 8px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--zokcal-cat, #7DA7D9);
	color: var(--zokcal-cat-text, #1A1A1A);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.4;
}

.zokcal-place {
	margin: 4px 0 0;
	font-size: 14px;
	line-height: 1.5;
}

.zokcal-place__label {
	font-weight: 600;
}

.zokcal-event {
	border-left: 5px solid var(--zokcal-cat, #7DA7D9);
	padding-left: 16px;
}

@media (max-width: 767px) {
	.zokcal-event {
		padding-left: 12px;
	}
}
/* ==========================================================================
   Uklad naglowka i filtry (E4) — zgodnie z referencja zok.com.pl:
   tytul miesiaca nad paskiem, „Filtry" po lewej, nawigacja i przelacznik
   widoku po prawej.
   ========================================================================== */

.zok-event-calendar__header {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0 0 20px;
}

.zok-event-calendar .zok-event-calendar__header .zok-event-calendar__title {
	margin: 0;
	text-align: center;
}

.zok-event-calendar .zok-event-calendar__header .zok-event-calendar__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
}

.zok-event-calendar__nav-side--start {
	justify-content: flex-start;
}

.zok-event-calendar__nav-side--end {
	display: flex;
	align-items: center;
	gap: 8px;
	justify-content: flex-end;
}

.zok-event-calendar__filters-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	border: 0;
	border-radius: 2px;
	background: #595959;
	color: #fff;
	font: inherit;
	line-height: 1.2;
	cursor: pointer;
}

.zok-event-calendar__filters-toggle:hover,
.zok-event-calendar__filters-toggle:focus {
	background: #3d3d3d;
	color: #fff;
}

.zok-event-calendar__filters-count {
	display: inline-block;
	min-width: 20px;
	padding: 1px 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.28);
	font-size: 12px;
	text-align: center;
}

.zok-event-calendar__filters {
	padding: 16px;
	border: 1px solid #e1e1e1;
	background: #fafafa;
}

.zok-event-calendar__filters[hidden] {
	display: none;
}

.zok-event-calendar__filters-label {
	margin: 0 0 10px;
	font-weight: 600;
}

.zok-event-calendar__filters-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.zokcal-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border: 2px solid var(--zokcal-cat, #7DA7D9);
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font-size: 14px;
	line-height: 1.4;
	text-decoration: none;
}

.zokcal-chip:hover,
.zokcal-chip:focus {
	background: var(--zokcal-cat, #7DA7D9);
	color: var(--zokcal-cat-text, #1A1A1A);
}

.zokcal-chip--active {
	background: var(--zokcal-cat, #7DA7D9);
	color: var(--zokcal-cat-text, #1A1A1A);
	font-weight: 600;
}

.zokcal-chip__count {
	font-size: 12px;
	opacity: 0.75;
}

.zok-event-calendar__filters-clear {
	display: inline-block;
	margin: 12px 0 0;
	font-size: 14px;
}

/* Pasek wydarzenia: pelny tytul w kilku liniach, godzina wyrozniona. */
.zok-event-calendar .zok-event-calendar__event-marker .zok-event-calendar__event-pill {
	display: block;
	overflow: visible;
	white-space: normal;
	text-overflow: clip;
	line-height: 1.35;
}

.zok-event-calendar__event-time {
	font-weight: 700;
}

/* Lista: separator dnia, tytul nad karta, karta w trzech kolumnach. */
.zokcal-list__day {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 32px 0 16px;
	font-size: 17px;
	font-weight: 600;
	text-align: center;
}

.zokcal-list__day::before,
.zokcal-list__day::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #dcdcdc;
}

.zokcal-list--day .zokcal-list__day {
	display: none;
}

.zokcal-event__card {
	display: grid;
	grid-template-columns: minmax(180px, 1fr) 2fr minmax(160px, 240px);
	gap: 24px;
	padding: 20px;
	border: 1px solid #e6e6e6;
	background: #fff;
}

.zokcal-event--no-image .zokcal-event__card {
	grid-template-columns: minmax(180px, 1fr) 3fr;
}

.zokcal-event__fact-label {
	margin: 0 0 2px;
	font-weight: 600;
}

.zokcal-event__fact-value {
	margin: 0 0 14px;
}

.zokcal-event__media {
	align-self: start;
}

.zokcal-event__image {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 767px) {
	.zokcal-event__card {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.zok-event-calendar .zok-event-calendar__header .zok-event-calendar__nav {
		flex-wrap: wrap;
	}
}

/* Tooltip: etykiety nad wartosciami, plakat pod trescia. */
.zok-event-calendar__tooltip-label {
	margin: 12px 0 0;
	font-weight: 600;
}

.zok-event-calendar__tooltip-value {
	margin: 2px 0 0;
}

.zok-event-calendar__tooltip-image {
	display: block;
	width: 100%;
	height: auto;
	margin: 16px 0 0;
}
/* --------------------------------------------------------------------------
   Reset ukladu pozycji listy (E4).
   Odziedziczony po sk-event-calendar `.zokcal-event` jest siatka dwukolumnowa
   (obrazek | tresc). Nowa pozycja ma inna budowe — tytul NAD karta — wiec
   siatke trzeba zdjac. Selektor jest celowo bardziej szczegolowy niz
   `[data-zok-calendar-root] .zokcal-event`, ktory ja narzuca.
   -------------------------------------------------------------------------- */

.zok-event-calendar[data-zok-calendar-root] .zokcal-list .zokcal-event {
	display: block;
	grid-template-columns: none;
	margin: 0 0 32px;
	padding: 0 0 0 16px;
	border: 0;
	border-left: 5px solid var(--zokcal-cat, #7DA7D9);
}

.zok-event-calendar[data-zok-calendar-root] .zokcal-list .zokcal-event__title {
	margin: 0 0 12px;
	font-size: 24px;
	line-height: 1.25;
}

@media (max-width: 767px) {
	.zok-event-calendar[data-zok-calendar-root] .zokcal-list .zokcal-event__title {
		font-size: 20px;
	}
}
/* ==========================================================================
   Dostepnosc (E5 / QA).
   Pastelowa paleta ZOK nie wyrabia kontrastu 3:1 wymaganego dla komponentow
   UI (WCAG SC 1.4.11) — zmierzone obramowania chipow dawaly 1,42-3,41 na tle
   panelu. Dlatego afordancje niesie neutralne obramowanie, a kolor kategorii
   przeniesiony jest na kropke, ktora niczego nie musi rozgraniczac.
   ========================================================================== */

.zokcal-chip {
	min-height: 44px;
	border-color: #6f6f6f;
}

.zokcal-chip__dot {
	display: inline-block;
	width: 12px;
	height: 12px;
	flex: 0 0 12px;
	border-radius: 50%;
	background: var(--zokcal-cat, #7DA7D9);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.zokcal-chip--active {
	border-color: var(--zokcal-cat, #7DA7D9);
}

.zokcal-chip--active .zokcal-chip__dot {
	background: var(--zokcal-cat-text, #1A1A1A);
	box-shadow: none;
}

/* Cele dotykowe >= 44 px (SC 2.5.5). */
.zok-event-calendar__filters-toggle,
.zokcal-event__more {
	min-height: 44px;
}

.zokcal-event__more {
	display: inline-flex;
	align-items: center;
}

/* Kontrast przycisku "Filtry" (SC 1.4.3).
   Wartosc bazowa wyzej to #595959 (kontrast 7,0 dla bialego napisu), ale na
   zok.com.pl przycisk mierzyl sie jako rgb(121,118,118) — cos w motywie
   przemalowuje tlo mimo reguly klasowej. Ta reguly jest zakotwiczona na korzeniu
   kalendarza i oznaczona !important, bo wynik ma byc niezalezny od motywu:
   ponizej progu AA przycisk przestaje byc czytelny, a nie tylko brzydki. */
[data-zok-calendar-root] .zok-event-calendar__filters-toggle {
	background: #595959 !important;
	color: #fff !important;
}

[data-zok-calendar-root] .zok-event-calendar__filters-toggle:hover,
[data-zok-calendar-root] .zok-event-calendar__filters-toggle:focus {
	background: #3d3d3d !important;
	color: #fff !important;
}

/* Widoczny fokus klawiaturowy — motyw zdejmuje outline, wiec dajemy wlasny. */
.zok-event-calendar a:focus-visible,
.zok-event-calendar button:focus-visible,
.zok-event-calendar [tabindex]:focus-visible,
.zok-event-calendar .zok-event-calendar__event-pill:focus-visible,
.zok-event-calendar .zokcal-chip:focus-visible {
	outline: 3px solid #1A1A1A;
	outline-offset: 2px;
}

/* ==========================================================================
   0.7.0 — typografia ZOK i kolor jako akcent

   Trzy rzeczy naraz, bo wynikaja jedna z drugiej:

   1. TYPOGRAFIA. Kit Elementora zok.com.pl trzyma marke w ZonaPro:
      naglowki ZonaPro-Bold, tekst ZonaPro-Regular 17 px, kolory #2D2D2D
      i #595959. Kalendarz jechal na odziedziczonym po SK "Jost", wiec
      odstawal od reszty strony. UWAGA: kazda waga jest osobna RODZINA
      (ZonaPro-Bold to nie waga 700 rodziny ZonaPro), dlatego pogrubienie
      robi sie podmiana font-family, a font-weight zostaje normalny —
      inaczej przegladarka dorabia sztuczny bold na i tak grubym kroju.
      Rodziny siedza w zmiennych, wiec przy innym wdrozeniu podmienia sie
      je w jednym miejscu; stos ma fallback, gdyby Elementor nie wyemitowal
      @font-face na danej stronie.

   2. KOLOR JAKO AKCENT, NIE WYPELNIENIE. Kolor kategorii wypelnial cale
      tlo paska wydarzenia, a tekst byl dobierany kontrastem — na pastelach
      ZOK wychodzil ciemny napis na kolorowym tle. Teraz kolor niesie
      kreska 3 px NAD tytulem, tlo jest neutralne, tekst zawsze ciemny.
      Czytelnosc przestaje zalezec od tego, jaka barwe ma kategoria.

   3. CHIPY FILTROW. Hover zalewal chip kolorem kategorii — te same pastele,
      ten sam problem. Stan aktywny jest teraz ciemny (biel na #2D2D2D),
      hover tylko podnosi kontur. Kolor kategorii zostaje na kropce.
   ========================================================================== */

.zok-event-calendar[data-zok-calendar-root] {
	--zokcal-font-display: 'ZonaPro-Bold', 'ZonaPro-Regular', 'Jost', sans-serif;
	--zokcal-font-text: 'ZonaPro-Regular', 'Jost', sans-serif;
	--zokcal-font-light: 'ZonaPro-ExtraLight', 'ZonaPro-Regular', 'Jost', sans-serif;
	--zokcal-font-thin: 'ZonaPro-Thin', 'ZonaPro-ExtraLight', 'Jost', sans-serif;
	--zokcal-ink: #2D2D2D;
	--zokcal-ink-soft: #595959;
	--zokcal-line: #E1E1E1;
	--zokcal-surface: #FFFFFF;
	--zokcal-surface-soft: #F5F5F5;

	font-family: var(--zokcal-font-text);
	color: var(--zokcal-ink);
}

/* Naglowki i wszystko, co ma ciezar naglowkowy. */
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__title,
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__day-panel-title,
.zok-event-calendar[data-zok-calendar-root] .zokcal-list__day,
.zok-event-calendar[data-zok-calendar-root] .zokcal-event__title,
.zok-event-calendar[data-zok-calendar-root] .zokcal-event__title a,
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__tooltip-title,
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__tooltip-title a,
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__event-name,
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__filters-label {
	font-family: var(--zokcal-font-display);
	font-weight: normal;
	color: var(--zokcal-ink);
}

/* Tekst ciagly, wartosci, przyciski. */
.zok-event-calendar[data-zok-calendar-root] .zokcal-event__excerpt,
.zok-event-calendar[data-zok-calendar-root] .zokcal-event__description,
.zok-event-calendar[data-zok-calendar-root] .zokcal-event__fact-value,
.zok-event-calendar[data-zok-calendar-root] .zokcal-place,
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__tooltip-value,
.zok-event-calendar[data-zok-calendar-root] .zokcal-empty,
.zok-event-calendar[data-zok-calendar-root] .zokcal-chip,
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__view-button,
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__filters-toggle,
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__filters-clear {
	font-family: var(--zokcal-font-text);
	font-weight: normal;
}

/* Drobne etykiety — cienkie wersaliki z rozstrzeleniem, jak w reszcie ZOK. */
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__weekday,
.zok-event-calendar[data-zok-calendar-root] .zokcal-event__fact-label,
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__tooltip-label,
.zok-event-calendar[data-zok-calendar-root] .zokcal-badge,
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__event-time {
	font-family: var(--zokcal-font-text);
	font-weight: normal;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--zokcal-ink-soft);
}

/* Liczby dni — lekki kroj, bo to element rytmu, nie tresci. */
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__day-number {
	font-family: var(--zokcal-font-light);
	font-weight: normal;
	font-size: 26px;
	color: var(--zokcal-ink);
}

/* Dzisiaj: krazek zamiast zoltego tla calej komorki. */
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__day--today {
	background: var(--zokcal-surface);
}

.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__day--today .zok-event-calendar__day-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	top: 8px;
	right: 8px;
	min-width: 34px;
	height: 34px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--zokcal-ink);
	color: var(--zokcal-surface);
}

/* Kreska nad komorka z wydarzeniami byla powtorzeniem kreski nad paskiem. */
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__day--has-events::before {
	display: none;
}

/* --- Pasek wydarzenia: akcent nad tytulem zamiast wypelnienia --- */
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__event-marker .zok-event-calendar__event-pill,
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__event-marker .zok-event-calendar__event-pill:hover,
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__event-marker .zok-event-calendar__event-pill:focus {
	padding: 8px 10px;
	border-top: 3px solid var(--zokcal-cat, #7DA7D9);
	background: var(--zokcal-surface-soft);
	color: var(--zokcal-ink);
	font-family: var(--zokcal-font-display);
	font-weight: normal;
	font-size: 13px;
	filter: none;
	transform: none;
}

.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__event-marker .zok-event-calendar__event-pill:hover,
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__event-marker .zok-event-calendar__event-pill:focus {
	background: var(--zokcal-surface);
	box-shadow: 0 2px 10px rgba(45, 45, 45, 0.14);
}

.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__event-time {
	display: block;
	margin: 0 0 2px;
}

/* --- Chipy filtrow --- */
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__filters {
	padding: 16px;
	border: 1px solid var(--zokcal-line);
	border-radius: 2px;
	background: var(--zokcal-surface);
}

.zok-event-calendar[data-zok-calendar-root] .zokcal-chip {
	padding: 8px 16px;
	/* Kontur neutralny (6,4:1 wobec tla panelu) — afordancji nie moze niesc
	   pastel kategorii, bo osiem z dziewieciu barw ZOK nie dobija do 3:1. */
	border: 1px solid var(--zokcal-ink-soft);
	background: var(--zokcal-surface);
	color: var(--zokcal-ink);
	font-size: 14px;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.zok-event-calendar[data-zok-calendar-root] .zokcal-chip:hover,
.zok-event-calendar[data-zok-calendar-root] .zokcal-chip:focus {
	border-color: var(--zokcal-ink);
	background: var(--zokcal-surface-soft);
	color: var(--zokcal-ink);
}

.zok-event-calendar[data-zok-calendar-root] .zokcal-chip--active,
.zok-event-calendar[data-zok-calendar-root] .zokcal-chip--active:hover,
.zok-event-calendar[data-zok-calendar-root] .zokcal-chip--active:focus {
	border-color: var(--zokcal-ink);
	background: var(--zokcal-ink);
	color: var(--zokcal-surface);
	font-family: var(--zokcal-font-display);
	font-weight: normal;
}

.zok-event-calendar[data-zok-calendar-root] .zokcal-chip--active .zokcal-chip__dot {
	background: var(--zokcal-cat, #7DA7D9);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}

.zok-event-calendar[data-zok-calendar-root] .zokcal-chip__count {
	color: inherit;
	font-size: 12px;
	opacity: 1;
}

/* --- Widok listy: kolor nad tytulem, fakty jako drobne etykiety --- */
.zok-event-calendar[data-zok-calendar-root] .zokcal-event {
	padding-left: 0;
	border-left: 0;
}

.zok-event-calendar[data-zok-calendar-root] .zokcal-event__card {
	padding-top: 16px;
	border-top: 3px solid var(--zokcal-cat, #7DA7D9);
}

.zok-event-calendar[data-zok-calendar-root] .zokcal-list__day {
	margin: 32px 0 12px;
	padding: 0 0 8px;
	border-bottom: 1px solid var(--zokcal-line);
	font-size: 20px;
}

/* Kategoria jako tag: kolor w konturze, tresc zawsze ciemna. */
.zok-event-calendar[data-zok-calendar-root] .zokcal-badge {
	padding: 4px 10px;
	border: 2px solid var(--zokcal-cat, #7DA7D9);
	border-radius: 2px;
	background: var(--zokcal-surface);
	color: var(--zokcal-ink);
}

.zok-event-calendar[data-zok-calendar-root] .zokcal-event__fact-value,
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__tooltip-value {
	color: var(--zokcal-ink);
	font-size: 15px;
}

.zok-event-calendar[data-zok-calendar-root] .zokcal-event__more {
	padding: 10px 18px;
	border: 1px solid var(--zokcal-ink);
	border-radius: 2px;
	background: var(--zokcal-surface);
	color: var(--zokcal-ink);
	text-decoration: none;
	transition: background-color 160ms ease, color 160ms ease;
}

.zok-event-calendar[data-zok-calendar-root] .zokcal-event__more:hover,
.zok-event-calendar[data-zok-calendar-root] .zokcal-event__more:focus {
	background: var(--zokcal-ink);
	color: var(--zokcal-surface);
}

/* Tooltip dostaje ten sam akcent co karta listy. */
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__tooltip {
	border-top: 3px solid var(--zokcal-cat, #7DA7D9);
	border-left: 0;
}

/* ==========================================================================
   0.8.0 — siatka miesiaca: powietrze, mocniejszy akcent, tint zamiast szarosci

   Uwagi po obejrzeniu 0.7.0: kafelki sciśniete i nijakie, akcent za maly,
   szare tlo paska kiepskie. Trzy odpowiedzi:

   1. POWIETRZE. Komorka dnia i pasek wydarzenia dostaly wieksze odstepy
      i wiekszy stopien pisma. Geometria siedzi w `min-width: 768px`, bo
      ponizej tego progu siatka zamienia sie w liste dni i ma wlasny uklad —
      wspolna regula rozjechalaby telefon.

   2. TINT ZAMIAST SZAROSCI. Neutralny #F5F5F5 byl bezpieczny, ale martwy.
      Tlo paska to teraz **rozjasniony kolor kategorii** (14% barwy na bieli),
      wiec kategoria jest widoczna na calej plaszczyznie, a nie tylko na
      kresce. Rozjasnienie liczy `color-mix`, wiec dziala dla dowolnej barwy
      wpisanej przez redakcje — i z definicji zostaje jasne, bo 86% to biel.
      Tekst #2D2D2D trzyma wtedy kontrast powyzej 8:1 nawet dla ciemnych
      wartosci. Przed regula stoi zwykly `background: #FFFFFF` jako zapas dla
      przegladarek bez `color-mix`.

   3. JEDEN AKCENT, NIE DWA. W widoku listy regula `.zokcal-list .zokcal-event`
      (wyzsza szczegolowosc) trzymala lewa kreske 5 px, a 0.7.0 dolozyl kreske
      nad karta — wychodzily dwa akcenty naraz. Zostaje lewa, pogrubiona.
   ========================================================================== */

/* --- 1. Powietrze (desktop; telefon ma wlasny uklad listy dni) --- */
@media (min-width: 768px) {
	.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__day {
		min-height: 178px;
		padding: 50px 12px 16px;
	}

	.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__day-number {
		top: 14px;
		right: 16px;
		font-size: 28px;
	}

	.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__event-marker .zok-event-calendar__event-pill {
		margin: 8px 0 0;
		padding: 12px 14px;
		font-size: 14px;
		line-height: 1.4;
	}
}

/* --- 2. Kolor kategorii na calej plaszczyznie paska --- */
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__event-marker .zok-event-calendar__event-pill,
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__event-marker .zok-event-calendar__event-pill:hover,
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__event-marker .zok-event-calendar__event-pill:focus {
	border-top: 5px solid var(--zokcal-cat, #7DA7D9);
	background: #FFFFFF;
	background: color-mix(in srgb, var(--zokcal-cat, #7DA7D9) 14%, #FFFFFF);
	color: var(--zokcal-ink);
}

.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__event-marker .zok-event-calendar__event-pill:hover,
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__event-marker .zok-event-calendar__event-pill:focus {
	background: #F0F0F0;
	background: color-mix(in srgb, var(--zokcal-cat, #7DA7D9) 28%, #FFFFFF);
	box-shadow: 0 3px 14px rgba(45, 45, 45, 0.16);
}

/* Godzina jako drobna etykieta nad tytulem, tytul dostaje pelna szerokosc. */
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__event-time {
	display: block;
	margin: 0 0 4px;
	font-size: 11px;
	letter-spacing: 0.1em;
	color: var(--zokcal-ink);
}

.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__event-name {
	display: block;
	line-height: 1.35;
}

/* --- 3. Spokojniejsze tla komorek: strukture niesie siatka, nie szarosci --- */
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__day,
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__day--has-events {
	background: var(--zokcal-surface);
}

.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__day--muted {
	background: #F4F4F4;
}

.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__day:hover {
	background: var(--zokcal-surface-soft);
	box-shadow: inset 0 0 0 2px var(--zokcal-line);
}

/* --- 4. Lista: jeden akcent zamiast dwoch --- */
.zok-event-calendar[data-zok-calendar-root] .zokcal-list .zokcal-event {
	padding-left: 20px;
	border-left: 6px solid var(--zokcal-cat, #7DA7D9);
}

.zok-event-calendar[data-zok-calendar-root] .zokcal-event__card {
	padding-top: 0;
	border-top: 0;
}

/* ==========================================================================
   0.8.1 — TELEFON: dwie regulacje, ktore 0.8.0 zadeklarowal, ale ktore
   nie doszly do skutku na wyrenderowanej stronie (zmierzone w viewportcie
   390 px, nie wyliczone).

   1. STOPIEN PISMA PASKA. Regula mobilna `@media (max-width: 767px)`
      celowala w `[data-zok-calendar-root] .event-pill` (0,2,0) i dawala
      16 px, ale pasek w siatce lapie sie tez na regule bazowa
      `[data-zok-calendar-root] .event-marker .event-pill` (0,3,0) z 13 px.
      Wyzsza szczegolowosc wygrywa NIEZALEZNIE od kolejnosci i od media
      query — na telefonie zostawalo 13 px. Powtorka pulapki z 0.7.0
      (dwa akcenty na karcie listy): licz szczegolowosc, zanim uznasz,
      ze regula w media query „nadpisuje" regule bazowa.

   2. SZEROKOSC STRZALEK NAWIGACJI. Regula mobilna nadaje 54x54, ale
      `.nav-side` jest kontenerem flex, wiec przyciski kurczyly sie do
      27 px w poziomie — polowa deklarowanego celu dotykowego. `width`
      nie broni sie przed `flex-shrink`; potrzebny jest `flex: 0 0 auto`.
   ========================================================================== */

@media (max-width: 767px) {
	.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__event-marker .zok-event-calendar__event-pill {
		padding: 10px 12px;
		font-size: 16px;
		line-height: 1.4;
	}

	.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__nav-button {
		flex: 0 0 auto;
		min-width: 54px;
		min-height: 54px;
	}
}

/* ==========================================================================
   0.9.0 — uwagi Patryka po QA 0.8.1.

   1. HOVER NIE RUSZA GEOMETRII. Najechanie na pasek w kafelku dnia
      sciagalo go o 31 px w pionie (104 -> 73). Nie bylo tam zadnego
      `scale` — regula bazowa paska wymienia w jednej liscie selektory
      `:hover` i `:focus`, a pseudoklasa liczy sie do szczegolowosci jak
      klasa. Wariant `:hover` (0,5,0) bil wiec regule desktopowa (0,4,0)
      i PRZYWRACAL mniejszy `padding` oraz `font-size` — pudelko kurczylo
      sie dokladnie w momencie najechania. Trzecia odslona tej samej
      pulapki (0.7.0: dwa akcenty, 0.8.1: 13 px na telefonie).
      Geometria jest teraz powtorzona dla stanow interaktywnych, a hover
      niesie wylacznie kolor: tint kategorii gestnieje z 14 % do 28 %.
      Cien znika — mial sugerowac uniesienie, a to znowu ruch.

   2. LICZBY DNI mniejsze o 3 px (28 -> 25).

   3. PALETA ELEMENTOW KLIKALNYCH jak na zok.com.pl: spoczynek
      #797676 na bieli tekstu, hover i stan aktywny odwrotnie — biel
      z tekstem #2D2D2D. Bialy przycisk na bialej sekcji zniknalby bez
      obrysu, wiec obrys jest w OBU stanach (takze w spoczynku, w kolorze
      tla) — dzieki temu przelaczenie nie zmienia rozmiaru przycisku.

   4. WIDOK LISTY dostaje powietrze: karta ma padding 22 px z kazdej
      strony (dotad tylko 20 px z lewej), a elementy w srodku 18 px
      odstepu. Telefon ma wlasne, mniejsze wartosci.
   ========================================================================== */

.zok-event-calendar[data-zok-calendar-root] {
	--zokcal-btn-bg: #797676;
	--zokcal-btn-fg: #FFFFFF;
	--zokcal-btn-bg-on: #FFFFFF;
	--zokcal-btn-fg-on: #2D2D2D;
}

/* --- 1. Hover bez zmiany geometrii --- */
@media (min-width: 768px) {
	.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__event-marker .zok-event-calendar__event-pill:hover,
	.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__event-marker .zok-event-calendar__event-pill:focus {
		margin: 8px 0 0;
		padding: 12px 14px;
		font-size: 14px;
		line-height: 1.4;
	}
}

@media (max-width: 767px) {
	.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__event-marker .zok-event-calendar__event-pill:hover,
	.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__event-marker .zok-event-calendar__event-pill:focus {
		padding: 10px 12px;
		font-size: 16px;
		line-height: 1.4;
	}
}

.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__event-marker .zok-event-calendar__event-pill:hover,
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__event-marker .zok-event-calendar__event-pill:focus {
	box-shadow: none;
	transform: none;
}

.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__day:hover {
	box-shadow: none;
}

/* --- 2. Liczba dnia --- */
@media (min-width: 768px) {
	.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__day-number {
		font-size: 25px;
	}
}

/* --- 3. Paleta elementow klikalnych --- */
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__view-button,
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__nav-button,
.zok-event-calendar[data-zok-calendar-root] .zokcal-event__more,
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__tooltip-more {
	border: 1px solid var(--zokcal-btn-bg);
	background: var(--zokcal-btn-bg);
	color: var(--zokcal-btn-fg);
}

.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__view-button:hover,
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__view-button:focus,
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__view-button--active,
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__nav-button:hover,
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__nav-button:focus,
.zok-event-calendar[data-zok-calendar-root] .zokcal-event__more:hover,
.zok-event-calendar[data-zok-calendar-root] .zokcal-event__more:focus,
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__tooltip-more:hover,
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__tooltip-more:focus {
	border-color: var(--zokcal-btn-fg-on);
	background: var(--zokcal-btn-bg-on);
	color: var(--zokcal-btn-fg-on);
	outline: 0;
}

/* Przycisk „Filtry" dostal w 0.5.3 twarde `!important` (kontrast ponizej AA),
   wiec bez `!important` ta regula by go nie ruszyla. */
[data-zok-calendar-root] .zok-event-calendar__filters-toggle {
	border: 1px solid var(--zokcal-btn-bg) !important;
	background: var(--zokcal-btn-bg) !important;
	color: var(--zokcal-btn-fg) !important;
}

[data-zok-calendar-root] .zok-event-calendar__filters-toggle:hover,
[data-zok-calendar-root] .zok-event-calendar__filters-toggle:focus,
[data-zok-calendar-root] .zok-event-calendar__filters-toggle[aria-expanded="true"] {
	border-color: var(--zokcal-btn-fg-on) !important;
	background: var(--zokcal-btn-bg-on) !important;
	color: var(--zokcal-btn-fg-on) !important;
}

/* --- 4. Powietrze w widoku listy --- */
.zok-event-calendar[data-zok-calendar-root] .zokcal-list .zokcal-event {
	padding: 22px 22px 22px 28px;
	background: var(--zokcal-surface);
}

.zok-event-calendar[data-zok-calendar-root] .zokcal-list .zokcal-event__title {
	margin: 0 0 18px;
}

.zok-event-calendar[data-zok-calendar-root] .zokcal-event__card {
	gap: 18px;
	padding: 0;
	border: 0;
	background: transparent;
}

.zok-event-calendar[data-zok-calendar-root] .zokcal-event__facts,
.zok-event-calendar[data-zok-calendar-root] .zokcal-event__description {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.zok-event-calendar[data-zok-calendar-root] .zokcal-event__fact-value {
	margin: 0 0 12px;
}

.zok-event-calendar[data-zok-calendar-root] .zokcal-event__fact-label,
.zok-event-calendar[data-zok-calendar-root] .zokcal-event__excerpt {
	margin: 0;
}

.zok-event-calendar[data-zok-calendar-root] .zokcal-event__more {
	margin-top: 18px;
	align-self: flex-start;
}

@media (max-width: 767px) {
	.zok-event-calendar[data-zok-calendar-root] .zokcal-list .zokcal-event {
		padding: 18px 18px 18px 22px;
	}

	.zok-event-calendar[data-zok-calendar-root] .zokcal-event__card {
		gap: 16px;
	}

	.zok-event-calendar[data-zok-calendar-root] .zokcal-list .zokcal-event__title {
		margin: 0 0 16px;
	}
}

/* ==========================================================================
   0.9.1 — regresja po 0.8.1, wyłapana na telefonie.

   Strzalka „poprzedni miesiac" wychodzila 17 px POZA lewa krawedz ekranu.
   `.nav-side` ma `flex-wrap: nowrap` i `justify-content: center`, a jego
   zawartosc urosla do 388 px przy 351 px dostepnych — nadmiar w
   wysrodkowanym flexie wychodzi symetrycznie po obu stronach, wiec pierwszy
   element lezy na minusie.

   Zawartosc urosla przez poprawke z 0.8.1: dopoki strzalki kurczyly sie do
   27 px, wszystko sie miescilo (27+27+280 = 334). `flex: 0 0 auto` naprawilo
   cel dotykowy i tym samym odslonilo przepelnienie (54+54+280 = 388).
   Naprawa celu dotykowego byla sluszna — brakowalo zgody na zawijanie.
   ========================================================================== */

@media (max-width: 767px) {
	.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__nav-side {
		flex-wrap: wrap;
	}
}

/* ==========================================================================
   0.10.0 — dymek i nowy uklad karty w widoku listy.

   KARTA LISTY. Dotad byla siatka trzech waskich kolumn (fakty | opis |
   plakat) z tytulem WYRZUCONYM ponad karte — tytul wisial osobno, plakat
   trafial na koniec rzedu jako najmniej wazny element, a tresc rozpadala
   sie na trzy strumienie czytane rownolegle. Teraz sa dwie kolumny:

     [ plakat 240 px ]  [ kategoria / tytul / fakty / opis / CTA ]

   Plakat otwiera karte, bo to on niesie informacje o wydarzeniu i jest
   pionowy — w waskiej trzeciej kolumnie marnowal sie. Tresc czyta sie
   jednym ciagiem z gory na dol. Fakty (data, godzina, miejsce) stoja
   w jednym rzedzie i zawijaja sie same, wiec nie robia trzech pustych
   kolumn, gdy wydarzenie nie ma miejsca. Kategoria jest kickerem nad
   tytulem zamiast doklejki pod faktami.

   Odstep miedzy kolumnami to 40 px (bylo 18 px).
   ========================================================================== */

/* --- Dymek --- */
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__tooltip {
	width: min(300px, calc(100vw - 24px));
}

.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__tooltip-more {
	margin-top: 5px;
	padding: 10px 16px;
	font-size: 14px;
}

/* --- Karta listy: dwie kolumny --- */
.zok-event-calendar[data-zok-calendar-root] .zokcal-event__card {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

.zok-event-calendar[data-zok-calendar-root] .zokcal-event--no-image .zokcal-event__card,
.zok-event-calendar[data-zok-calendar-root] .zokcal-event__card:has(> .zokcal-event__body:only-child) {
	grid-template-columns: minmax(0, 1fr);
}

.zok-event-calendar[data-zok-calendar-root] .zokcal-event__media {
	margin: 0;
}

.zok-event-calendar[data-zok-calendar-root] .zokcal-event__image {
	display: block;
	width: 100%;
	height: auto;
}

.zok-event-calendar[data-zok-calendar-root] .zokcal-event__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
}

.zok-event-calendar[data-zok-calendar-root] .zokcal-list .zokcal-event__title {
	margin: 0;
}

/* Fakty w jednym rzedzie; zawijaja sie same, wiec brak miejsca nie zostawia dziury. */
.zok-event-calendar[data-zok-calendar-root] .zokcal-event__facts {
	display: flex;
	flex-flow: row wrap;
	gap: 14px 40px;
}

.zok-event-calendar[data-zok-calendar-root] .zokcal-event__fact {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.zok-event-calendar[data-zok-calendar-root] .zokcal-event__fact-label,
.zok-event-calendar[data-zok-calendar-root] .zokcal-event__fact-value,
.zok-event-calendar[data-zok-calendar-root] .zokcal-event__excerpt {
	margin: 0;
}

.zok-event-calendar[data-zok-calendar-root] .zokcal-event__description {
	max-width: 68ch;
}

.zok-event-calendar[data-zok-calendar-root] .zokcal-event__more {
	margin-top: 0;
}

@media (max-width: 767px) {
	.zok-event-calendar[data-zok-calendar-root] .zokcal-event__card {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	.zok-event-calendar[data-zok-calendar-root] .zokcal-event__media {
		max-width: 200px;
	}

	.zok-event-calendar[data-zok-calendar-root] .zokcal-event__facts {
		gap: 12px 28px;
	}
}

/* ==========================================================================
   0.11.0 — zolty artefakt, pasek narzedzi na telefonie, powietrze w liscie.

   1. ZOLTY. `--zok-color-gold` (#EDCE94) to kolor Starego Kisielina; ZOK go
      nie uzywa. Zostal na stanach `:hover` i `:focus` odziedziczonych z
      warstwy bazowej — na pasku wydarzenia rysowal sie jako zolta obwodka
      tuz nad kafelkiem. Stany wskazujace nie potrzebuja wlasnego znacznika:
      najechanie zmienia juz tlo kafelka dnia i tlo paska. Fokus KLAWIATUROWY
      zostaje — ma wlasna, ciemna regule `:focus-visible` (3 px #1A1A1A),
      wiec zdjecie `outline` z `:hover`/`:focus` nie zabiera dostepnosci.

   2. PASEK NARZEDZI NA TELEFONIE mial trzy rzedy (Filtry / strzalki /
      przelacznik). „Filtry" i strzalki stoja teraz w jednym rzedzie —
      przelacznik widoku dostaje `flex-basis: 100%` wewnatrz swojego
      kontenera, wiec schodzi nizej sam, bez zmian w HTML.
   ========================================================================== */

/* --- 1. Zoltego nie ma --- */
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__event-pill:hover,
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__event-pill:focus,
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__day:hover,
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__day:focus,
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__event-marker:hover,
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__event-marker:focus {
	outline: 0;
}

.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__day--has-events::before,
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__day--has-events:hover::before {
	display: none;
}

/* Krzyzyk w dymku jechal na zoltym tle; bierze paletę przyciskow kalendarza. */
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__tooltip-close {
	width: 44px;
	height: 44px;
	border: 1px solid var(--zokcal-btn-bg);
	background: var(--zokcal-btn-bg);
	color: var(--zokcal-btn-fg);
	font-size: 20px;
	line-height: 1;
}

.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__tooltip-close:hover,
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__tooltip-close:focus {
	border-color: var(--zokcal-btn-fg-on);
	background: var(--zokcal-btn-bg-on);
	color: var(--zokcal-btn-fg-on);
	outline: 0;
}

/* --- 2. Telefon: „Filtry" i strzalki w jednym rzedzie ---

   `.nav-side` sa rozpuszczone przez `display: contents`, wiec „Filtry",
   strzalki i przelacznik staja sie rodzenstwem w jednym flexie i mozna im
   nadac kolejnosc. Bez tego przelacznik z `flex-basis: 100%` rozdymal swoj
   kontener i spychal caly blok do osobnego rzedu — stad trzy rzedy. */
@media (max-width: 767px) {
	.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__nav {
		align-items: center;
		justify-content: center;
		row-gap: 14px;
		column-gap: 10px;
	}

	.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__nav-side {
		display: contents;
	}

	.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__filters-toggle {
		order: 2;
		margin-top: 0;
	}

	.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__nav-button {
		order: 3;
		margin-top: 0;
	}

	/* Przelacznik widoku schodzi do wlasnego rzedu, wiec strzalki zostaja przy „Filtrach". */
	.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__view-switcher {
		order: 4;
		flex: 1 0 100%;
		margin-top: 0;
	}

	.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__view-button {
		margin-top: 0;
	}

	/* --- 3. Wiecej powietrza w liscie na telefonie --- */
	.zok-event-calendar[data-zok-calendar-root] .zokcal-list .zokcal-event {
		padding: 26px 26px 26px 30px;
	}

	.zok-event-calendar[data-zok-calendar-root] .zokcal-event__card {
		gap: 26px;
	}

	.zok-event-calendar[data-zok-calendar-root] .zokcal-event__body {
		gap: 26px;
	}

	.zok-event-calendar[data-zok-calendar-root] .zokcal-list .zokcal-event__title {
		margin: 0;
	}

	.zok-event-calendar[data-zok-calendar-root] .zokcal-event__facts {
		gap: 20px 36px;
	}

	.zok-event-calendar[data-zok-calendar-root] .zokcal-list .zokcal-event + .zokcal-event {
		margin-top: 8px;
	}
}


/* ==========================================================================
   0.12.0 — wydarzenie wielodniowe w siatce miesiaca: ciagly pas zamiast
   powtorzonego kafelka.

   Zgloszenie ZOK (Pawel, 2026-08-11): wydarzenie na caly miesiac powtarzalo
   pelny kafelek z tytulem w kazdym z 31 dni. Siatka zamieniala sie w sciane
   tego samego napisu i gubila to, co w niej najwazniejsze — czym rozni sie
   jeden dzien od drugiego.

   Rozwiazanie: kolejne dni zlewaja sie w jedna linie w kolorze kategorii,
   a tytul pojawia sie RAZ NA RZAD TYGODNIA, wysrodkowany na calej dlugosci
   odcinka. Dwie rzeczy warte zapamietania:

   1. PAS ISTNIEJE TYLKO NA SIATCE (>=768 px). Ponizej tego progu siatka
      rozpada sie na jednokolumnowa liste dni z 10 px odstepu — poziomej
      ciaglosci nie ma czego udawac, a dzien bez tytulu bylby pustym paskiem.
      Dlatego tytul jest w markupie KAZDEGO dnia, a chowa go arkusz wewnatrz
      media query. Telefon i czytnik ekranu dostaja to samo co przed zmiana.

   2. PODPIS WYCHODZI POZA SWOJA KOMORKE. Rozciaga sie na `--zokcal-run`
      komorek, wiec komorka, ktora go niesie, musi wyjsc nad sasiadow
      (`--run-label` + z-index). Bez tego kolejne komorki — takze pozycjonowane
      i pozniejsze w DOM — zamalowalyby tytul.
   ========================================================================== */

@media (min-width: 768px) {

	/* --- Pas: pelny bleed komorki, staly wzrost, brak wlasnego paddingu --- */
	.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__event-marker--run {
		overflow: visible;
	}

	.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__event-marker--run .zok-event-calendar__event-pill--run {
		position: relative;
		box-sizing: border-box;
		width: auto;
		/* ⚠ Bez `max-width: none` ujemne marginesy sa martwe: regula bazowa
		   `.event-pill` trzyma `max-width: 100%`, wiec pas przesuwa sie w lewo,
		   ale nie rosnie — miedzy dniami zostaje dokladnie tyle pustego, ile
		   komorka ma paddingu. Zmierzone: 170,4 px przy komorce 195,4 px. */
		max-width: none;
		/* Komorka ma 12 px paddingu (0.8.0) i 1 px kreski po prawej — pas musi
		   zjesc jedno i drugie, inaczej miedzy dniami zostaja przerwy. */
		margin: 8px -13px 0 -12px;
		padding: 0;
		height: 36px;
		overflow: visible;
	}

	.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__day:nth-child(7n) .zok-event-calendar__event-pill--run {
		margin-right: -12px;
	}

	/* Stany wskazujace nie moga rozbijac linii: bez cienia i bez przesuniecia,
	   zostaje samo pojasnienie tla z reguly bazowej. */
	.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__event-marker--run .zok-event-calendar__event-pill--run:hover,
	.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__event-marker--run .zok-event-calendar__event-pill--run:focus {
		transform: none;
		box-shadow: none;
	}

	/* --- Tytul: raz na rzad tygodnia, przez srodek odcinka --- */
	.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__event-pill--run .zok-event-calendar__run-label {
		display: none;
	}

	.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__event-pill--run-lead .zok-event-calendar__run-label {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		display: block;
		box-sizing: border-box;
		width: calc(var(--zokcal-run, 1) * 100%);
		padding: 0 14px;
		overflow: hidden;
		line-height: 31px;
		text-align: center;
		text-overflow: ellipsis;
		white-space: nowrap;
		/* Zdarzenia przepuszczamy na spod: dymek ma sie zaczepiac o realnie
		   wskazany dzien, a nie o komorke, w ktorej zaczyna sie napis. */
		pointer-events: none;
	}

	.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__event-pill--run-lead .zok-event-calendar__event-time,
	.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__event-pill--run-lead .zok-event-calendar__event-name {
		display: inline;
		margin: 0;
		line-height: inherit;
	}

	.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__event-pill--run-lead .zok-event-calendar__event-time {
		margin-right: 8px;
	}

	/* 0.12.2 — USUNIETO `z-index: 2` na `.day--run-label`.
	   Ta regula byla przyczyna ucinania podpisu, nie jego naprawa.

	   `.day` ma `position: relative` BEZ `z-index`, wiec sam z siebie nie
	   tworzy kontekstu ukladania. Podnoszenie komorki do `z-index: 2`
	   kontekst tworzylo — i zamykalo w nim podpis, ktory z zalozenia ma
	   wylewac sie na cala szerokosc rzedu. Gdy w jednym rzedzie zaczynaly
	   sie DWA pasy, obie komorki miały `z-index: 2`, wiec o kolejnosci
	   malowania decydowala pozycja w DOM: pozniejsza zakrywala wylewke
	   wczesniejszej swoim nieprzezroczystym tlem. Objaw: „Lato Mu … ROGRAM".

	   Bez tej reguly podpis (`position: absolute; z-index: 2`) nalezy juz do
	   kontekstu siatki i maluje sie nad KAZDA komorka dnia — bo komorki sa
	   pozycjonowane z `z-index: auto`, czyli w warstwie ponizej dodatnich.
	   Kolizja znika bez zmiany markupu.

	   ⚠️ Nie przywracaj `z-index` na `.day--run-label`. Jesli kiedys podpis
	   znowu bedzie chowany, szukaj kontekstu ukladania na przodkach
	   (`transform`, `filter`, `opacity < 1`, `will-change`, `contain`),
	   a nie brakujacego `z-index` na komorce. */
}

/* ==========================================================================
   0.12.2 — fokus klawiaturowy wraca, cel dotykowy w dymku

   1. FOKUS. QA na produkcji (2026-08-27) wykazalo, ze wskaznik fokusu nie
      pojawial sie na czterech z szesciu typow sterowan: strzalkach nawigacji,
      przelaczniku widoku, komorkach dnia i paskach wydarzen. Na przycisku
      „Filtry" obwodka byla BIALA, czyli niewidoczna na bialym tle.

      Przyczyna byla podwojna i obie czesci trzeba znac, zeby tego nie
      powtorzyc:

      (a) Blok 0.11.0 („zolty artefakt") zdejmuje `outline` selektorami
          `…__nav-button:focus`, `…__day:focus`, `…__event-pill:focus` itd.
          Jego komentarz zaklada, ze „fokus klawiaturowy zostaje, bo ma
          wlasna regule `:focus-visible`". TO ZALOZENIE BYLO BLEDNE:
          `:focus-visible` jest PODZBIOREM `:focus`, wiec regula zerujaca
          `:focus` trafia rowniez w fokus klawiaturowy.

      (b) Regula `:focus-visible` z warstwy bazowej ma szczegolowosc (0,2,1)
          (`.zok-event-calendar button:focus-visible`), a reguly zerujace
          (0,4,0) (`.zok-event-calendar[data-zok-calendar-root] .…:focus`).
          Przegrywala wiec i szczegolowoscia, i kolejnoscia w pliku.

      Dlatego ten blok stoi na KONCU arkusza, dorownuje szczegolowosci i
      uzywa `!important`. `!important` jest tu swiadome, nie z lenistwa:
      przycisk „Filtry" ma wlasne `!important` od 0.5.3 (kontrast ponizej AA),
      wiec bez tego nie dalby sie ruszyc. Dostepnosc nie moze zalezec od tego,
      czy ktos w przyszlosci wstawi swoj blok nizej.

      WCAG 2.1 AA, 2.4.7 Focus Visible — dla instytucji publicznej wymog
      ustawowy, nie preferencja.

   2. CEL DOTYKOWY. „Czytaj wiecej" w dymku mial 128×39 px. Ten sam przycisk
      w widoku listy i na telefonie ma poprawne 145×44. Rozjazd wzial sie
      stad, ze 0.10.0 ustawilo dymkowi `padding: 10px 16px` i `font-size: 14px`
      bez `min-height`. SC 2.5.5 wymaga 44 px.
   ========================================================================== */

/* --- 1. Fokus klawiaturowy --- */

.zok-event-calendar[data-zok-calendar-root] a:focus-visible,
.zok-event-calendar[data-zok-calendar-root] button:focus-visible,
.zok-event-calendar[data-zok-calendar-root] [tabindex]:focus-visible,
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__nav-button:focus-visible,
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__view-button:focus-visible,
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__day:focus-visible,
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__event-pill:focus-visible,
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__event-marker:focus-visible,
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__tooltip-close:focus-visible,
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__tooltip-more:focus-visible,
.zok-event-calendar[data-zok-calendar-root] .zokcal-chip:focus-visible,
.zok-event-calendar[data-zok-calendar-root] .zokcal-event__more:focus-visible,
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__filters-clear:focus-visible {
	outline: 3px solid #1A1A1A !important;
	outline-offset: 2px !important;
}

/* Przycisk „Filtry" — wlasny wiersz, bo od 0.5.3 ma `!important` na tle
   i kolorze, a odziedziczony `currentColor` dawal biala obwodke na bialym tle.
   Kolor obwodki podajemy jawnie, nie przez `currentColor`. */
[data-zok-calendar-root] .zok-event-calendar__filters-toggle:focus-visible {
	outline: 3px solid #1A1A1A !important;
	outline-offset: 2px !important;
}

/* Komorka dnia ma `outline-offset: -2px` z warstwy bazowej — obwodka
   rysowalaby sie WEWNATRZ, przy samej krawedzi sasiada. Na zewnatrz jest
   czytelniejsza, a siatka ma margines, wiec sie miesci. */
.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__day:focus-visible {
	outline-offset: -3px !important;
}

/* --- 2. Cel dotykowy „Czytaj wiecej" w dymku (SC 2.5.5) --- */

.zok-event-calendar[data-zok-calendar-root] .zok-event-calendar__tooltip-more {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
}