.wp-block-hes-event-calendar.hes-event-calendar,
.hes-event-calendar {
	--font-heading: "Space Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-body: "Darker Grotesque", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--hes-event-calendar-panel-resolved: var(--hes-event-calendar-panel, var(--surface-raised, #ffffff));
	--hes-event-calendar-cell-inactive-resolved: var(--hes-event-calendar-cell-inactive, var(--surface-canvas, #f2f1ed));
	--hes-event-calendar-cell-event-resolved: var(--hes-event-calendar-cell-event, var(--surface-raised, #ffffff));
	--hes-event-calendar-cell-selected-resolved: var(--hes-event-calendar-cell-selected, var(--action-primary-default, #ef536a));
	--hes-event-calendar-text-primary-resolved: var(--hes-event-calendar-text-primary, var(--text-primary, #1c1b1b));
	--hes-event-calendar-text-secondary-resolved: var(--hes-event-calendar-text-secondary, var(--text-secondary, #5a5854));
	--hes-event-calendar-text-on-brand-resolved: var(--hes-event-calendar-text-on-brand, var(--text-on-brand, #ffffff));
	--hes-event-calendar-border-strong-resolved: var(--hes-event-calendar-border-strong, var(--border-strong, #3e3c3a));
	--hes-event-calendar-border-subtle-resolved: var(--hes-event-calendar-border-subtle, var(--border-subtle, #ccc9c2));
	--hes-event-calendar-focus-resolved: var(--hes-event-calendar-focus, var(--border-focus, #1c7ee3));
	--hes-event-calendar-dot-resolved: var(--hes-event-calendar-dot, var(--action-primary-default, #ef536a));
	--hes-event-calendar-date-badge-resolved: var(--hes-event-calendar-date-badge, var(--action-accent-default, #1c7ee3));
	--hes-event-calendar-date-badge-hover-resolved: var(--hes-event-calendar-date-badge-hover, var(--hes-event-calendar-date-badge-resolved));
	--hes-event-calendar-row-resolved: var(--hes-event-calendar-row, var(--surface-raised, #ffffff));
	--hes-event-calendar-row-hover-resolved: var(--hes-event-calendar-row-hover, var(--surface-brand, #ef536a));
	--hes-event-calendar-row-border-resolved: var(--hes-event-calendar-row-border, var(--border-strong, #3e3c3a));
	--hes-event-calendar-row-border-hover-resolved: var(--hes-event-calendar-row-border-hover, var(--border-strong, #3e3c3a));
	--hes-event-calendar-row-text-resolved: var(--hes-event-calendar-row-text, var(--text-primary, #1c1b1b));
	--hes-event-calendar-row-text-hover-resolved: var(--hes-event-calendar-row-text-hover, var(--text-on-brand, #ffffff));
	--hes-event-calendar-row-meta-resolved: var(--hes-event-calendar-row-meta, var(--text-secondary, #5a5854));
	--hes-event-calendar-row-meta-hover-resolved: var(--hes-event-calendar-row-meta-hover, var(--text-on-brand, #ffffff));
	--hes-event-calendar-icon-resolved: var(--hes-event-calendar-icon, var(--text-primary, #1c1b1b));
	--hes-event-calendar-icon-hover-resolved: var(--hes-event-calendar-icon-hover, var(--text-primary, #1c1b1b));
	--hes-event-calendar-arrow-highlight-resolved: var(--highlight-default, #fbe122);
	box-sizing: border-box;
	color: var(--hes-event-calendar-text-primary-resolved);
	font-family: var(--font-body);
	max-width: none;
	width: 100%;
}

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

.hes-event-calendar__inner {
	width: 100%;
}

.hes-event-calendar__content {
	align-items: start;
	display: flex;
	gap: var(--hes-event-calendar-content-gap, 16px);
	min-width: 0;
	width: 100%;
}

.hes-event-calendar__panel,
.hes-event-calendar__stream {
	flex: 1 1 50%;
}

.hes-event-calendar__panel {
	background: var(--hes-event-calendar-panel-resolved);
	border: var(--hes-event-calendar-panel-stroke-width, 4px) solid var(--hes-event-calendar-border-strong-resolved);
	border-radius: var(--hes-event-calendar-panel-radius, 13px);
	display: flex;
	flex-direction: column;
	gap: var(--hes-event-calendar-panel-gap, 8px);
	min-width: 0;
	overflow: clip;
	padding: var(--hes-event-calendar-panel-padding-y, 16px) var(--hes-event-calendar-panel-padding-x, 16px);
}

.hes-event-calendar__month-nav {
	align-items: center;
	display: flex;
	justify-content: space-between;
	min-height: max(44px, var(--hes-event-calendar-nav-size, 44px));
	width: 100%;
}

.hes-event-calendar__month-label {
	color: var(--hes-event-calendar-text-primary-resolved);
	font-family: var(--font-heading);
	font-size: var(--hes-event-calendar-month-title-size, 12px);
	font-weight: 500;
	line-height: 1;
	margin: 0;
	text-align: center;
}

.hes-event-calendar__nav-button {
	align-items: center;
	background: var(--hes-event-calendar-panel-resolved);
	border: 1px solid var(--hes-event-calendar-border-strong-resolved);
	border-radius: 50%;
	color: var(--hes-event-calendar-text-primary-resolved);
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 max(44px, var(--hes-event-calendar-nav-size, 44px));
	height: max(44px, var(--hes-event-calendar-nav-size, 44px));
	justify-content: center;
	padding: 0;
	width: max(44px, var(--hes-event-calendar-nav-size, 44px));
}

.hes-event-calendar__nav-button:hover:not(:disabled) {
	background: var(--hes-event-calendar-cell-inactive-resolved);
}

.hes-event-calendar__nav-button:focus-visible,
.hes-event-calendar__row:focus-visible {
	outline: 3px solid var(--hes-event-calendar-focus-resolved);
	outline-offset: 3px;
}

.hes-event-calendar__cell--event:focus-visible {
	box-shadow: inset 0 0 0 3px var(--hes-event-calendar-focus-resolved);
	outline: none;
}

.hes-event-calendar__nav-button:disabled {
	cursor: not-allowed;
	opacity: .35;
}

.hes-event-calendar__arrow-icon {
	background: currentColor;
	display: block;
	height: 18px;
	-webkit-mask: url("icon-chevron-right.svg") center / contain no-repeat;
	mask: url("icon-chevron-right.svg") center / contain no-repeat;
	width: 11px;
}

.hes-event-calendar__nav-button--previous .hes-event-calendar__arrow-icon {
	transform: rotate(180deg);
}

.hes-event-calendar__calendar-scroll {
	display: flex;
	flex-direction: column;
	gap: var(--hes-event-calendar-panel-gap, 8px);
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-color: var(--hes-event-calendar-border-subtle-resolved) transparent;
	scrollbar-width: thin;
	width: 100%;
}

.hes-event-calendar__weekdays,
.hes-event-calendar__grid {
	display: grid;
	gap: var(--hes-event-calendar-grid-gap, 4px);
	grid-template-columns: repeat(7, minmax(0, 1fr));
	min-width: var(--hes-event-calendar-calendar-min-width, 0);
	width: 100%;
}

.hes-event-calendar__weekdays {
	color: var(--hes-event-calendar-text-secondary-resolved);
	font-size: var(--hes-event-calendar-weekday-size, 8px);
	font-weight: 500;
	line-height: 1;
	min-height: 10px;
	text-align: center;
}

.hes-event-calendar__weekday {
	align-self: center;
}

.hes-event-calendar__cell {
	align-items: center;
	background: var(--hes-event-calendar-cell-inactive-resolved);
	border: 0;
	border-radius: var(--hes-event-calendar-cell-radius, 4px);
	color: var(--hes-event-calendar-text-primary-resolved);
	display: flex;
	font-family: var(--font-heading);
	font-size: var(--hes-event-calendar-cell-text-size, 10.18px);
	font-weight: 500;
	height: var(--hes-event-calendar-cell-height, 48px);
	justify-content: center;
	line-height: 1;
	min-width: 0;
	padding: 4px;
	position: relative;
	text-align: center;
}

.hes-event-calendar__cell--adjacent:not(.hes-event-calendar__cell--event) {
	color: var(--hes-event-calendar-text-secondary-resolved);
}

.hes-event-calendar__cell--event {
	background: var(--hes-event-calendar-cell-event-resolved);
	border: var(--hes-event-calendar-cell-stroke-width, 1px) solid var(--hes-event-calendar-border-strong-resolved);
	cursor: pointer;
}

.hes-event-calendar__cell--event:hover {
	background: var(--hes-event-calendar-cell-inactive-resolved);
}

.hes-event-calendar__cell--selected,
.hes-event-calendar__cell--selected:hover {
	background: var(--hes-event-calendar-cell-selected-resolved);
	color: var(--hes-event-calendar-text-on-brand-resolved);
}

.hes-event-calendar__dot {
	background: var(--hes-event-calendar-dot-resolved);
	border-radius: 50%;
	bottom: 5px;
	height: var(--hes-event-calendar-dot-size, 4px);
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	width: var(--hes-event-calendar-dot-size, 4px);
}

.hes-event-calendar__cell--selected .hes-event-calendar__dot {
	background: var(--hes-event-calendar-text-on-brand-resolved);
}

.hes-event-calendar__stream {
	display: flex;
	flex-direction: column;
	gap: var(--hes-event-calendar-list-gap, 12px);
	min-width: 0;
}

.hes-event-calendar__event {
	margin: 0;
	scroll-margin-block: 24px;
}

.hes-event-calendar__row {
	align-items: center;
	background: var(--hes-event-calendar-row-resolved);
	border: var(--hes-event-calendar-row-stroke-width, 2px) solid var(--hes-event-calendar-row-border-resolved);
	border-radius: var(--hes-event-calendar-row-radius, 16px);
	color: var(--hes-event-calendar-row-text-resolved);
	display: grid;
	gap: var(--hes-event-calendar-row-inner-gap, 16px);
	grid-template-columns: var(--hes-event-calendar-date-size, 56px) minmax(0, 1fr) var(--hes-event-calendar-icon-size, 44px);
	min-height: max(44px, var(--hes-event-calendar-row-min-height, 88px));
	padding: var(--hes-event-calendar-row-padding-y, 14px) var(--hes-event-calendar-row-padding-x, 16px);
	text-decoration: none;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
	width: 100%;
}

.hes-event-calendar__row:hover,
.hes-event-calendar__row:focus-visible {
	background: var(--hes-event-calendar-row-hover-resolved);
	border-color: var(--hes-event-calendar-row-border-hover-resolved);
	color: var(--hes-event-calendar-row-text-hover-resolved);
}

.hes-event-calendar__date-badge {
	align-items: center;
	background: var(--hes-event-calendar-date-badge-resolved);
	border-radius: 50%;
	color: var(--hes-event-calendar-text-on-brand-resolved);
	display: flex;
	flex-direction: column;
	height: var(--hes-event-calendar-date-size, 56px);
	justify-content: center;
	line-height: 1;
	transition: background-color 160ms ease;
	width: var(--hes-event-calendar-date-size, 56px);
}

.hes-event-calendar__row:hover .hes-event-calendar__date-badge,
.hes-event-calendar__row:focus-visible .hes-event-calendar__date-badge {
	background: var(--hes-event-calendar-date-badge-hover-resolved);
}

.hes-event-calendar__date-month {
	font-size: 10.18px;
	font-weight: 700;
	text-transform: uppercase;
}

.hes-event-calendar__date-day {
	font-size: 23.94px;
	font-weight: 500;
	letter-spacing: .5px;
}

.hes-event-calendar__row-copy {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.hes-event-calendar__row-title {
	color: currentColor;
	font-family: var(--font-heading);
	font-size: var(--hes-event-calendar-row-title-size, 20px);
	font-weight: 500;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.hes-event-calendar__row-meta {
	color: var(--hes-event-calendar-row-meta-resolved);
	font-size: var(--hes-event-calendar-row-meta-size, 13.53px);
	font-weight: 500;
	line-height: 1.2;
	overflow-wrap: anywhere;
	transition: color 160ms ease;
}

.hes-event-calendar__row:hover .hes-event-calendar__row-meta,
.hes-event-calendar__row:focus-visible .hes-event-calendar__row-meta {
	color: var(--hes-event-calendar-row-meta-hover-resolved);
}

.hes-event-calendar__row-arrow {
	align-items: center;
	border: 2px solid transparent;
	border-radius: 50%;
	color: var(--hes-event-calendar-icon-resolved);
	display: flex;
	height: var(--hes-event-calendar-icon-size, 44px);
	justify-content: center;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
	width: var(--hes-event-calendar-icon-size, 44px);
}

.hes-event-calendar__row:hover .hes-event-calendar__row-arrow,
.hes-event-calendar__row:focus-visible .hes-event-calendar__row-arrow {
	background: var(--hes-event-calendar-arrow-highlight-resolved);
	border-color: var(--hes-event-calendar-icon-hover-resolved);
	color: var(--hes-event-calendar-icon-hover-resolved);
}

.hes-event-calendar__empty,
.hes-event-calendar--notice {
	background: var(--hes-event-calendar-panel-resolved);
	border: var(--hes-event-calendar-row-stroke-width, 2px) solid var(--hes-event-calendar-row-border-resolved);
	border-radius: var(--hes-event-calendar-row-radius, 16px);
	color: var(--hes-event-calendar-text-primary-resolved);
	font-size: 18px;
	margin: 0;
	padding: var(--hes-event-calendar-row-padding-y, 14px) var(--hes-event-calendar-row-padding-x, 16px);
}

@media (max-width: 900px) {
	.wp-block-hes-event-calendar.hes-event-calendar,
	.hes-event-calendar {
		--hes-event-calendar-content-gap: var(--hes-event-calendar-content-gap-tablet, var(--hes-event-calendar-content-gap));
		--hes-event-calendar-panel-gap: var(--hes-event-calendar-panel-gap-tablet, var(--hes-event-calendar-panel-gap));
		--hes-event-calendar-grid-gap: var(--hes-event-calendar-grid-gap-tablet, var(--hes-event-calendar-grid-gap));
		--hes-event-calendar-cell-height: var(--hes-event-calendar-cell-height-tablet, var(--hes-event-calendar-cell-height));
		--hes-event-calendar-calendar-min-width: var(--hes-event-calendar-calendar-min-width-tablet, var(--hes-event-calendar-calendar-min-width));
		--hes-event-calendar-list-gap: var(--hes-event-calendar-list-gap-tablet, var(--hes-event-calendar-list-gap));
		--hes-event-calendar-row-inner-gap: var(--hes-event-calendar-row-inner-gap-tablet, var(--hes-event-calendar-row-inner-gap));
		--hes-event-calendar-row-min-height: var(--hes-event-calendar-row-min-height-tablet, var(--hes-event-calendar-row-min-height));
		--hes-event-calendar-date-size: var(--hes-event-calendar-date-size-tablet, var(--hes-event-calendar-date-size));
		--hes-event-calendar-nav-size: var(--hes-event-calendar-nav-size-tablet, var(--hes-event-calendar-nav-size));
		--hes-event-calendar-icon-size: var(--hes-event-calendar-icon-size-tablet, var(--hes-event-calendar-icon-size));
		--hes-event-calendar-month-title-size: var(--hes-event-calendar-month-title-size-tablet, var(--hes-event-calendar-month-title-size));
		--hes-event-calendar-weekday-size: var(--hes-event-calendar-weekday-size-tablet, var(--hes-event-calendar-weekday-size));
		--hes-event-calendar-cell-text-size: var(--hes-event-calendar-cell-text-size-tablet, var(--hes-event-calendar-cell-text-size));
		--hes-event-calendar-row-title-size: var(--hes-event-calendar-row-title-size-tablet, var(--hes-event-calendar-row-title-size));
		--hes-event-calendar-row-meta-size: var(--hes-event-calendar-row-meta-size-tablet, var(--hes-event-calendar-row-meta-size));
	}

	.hes-event-calendar__content {
		flex-direction: column;
	}

	.hes-event-calendar__panel,
	.hes-event-calendar__stream {
		flex-basis: auto;
		width: 100%;
	}

	.hes-event-calendar__panel {
		padding: var(--hes-event-calendar-panel-padding-tablet-y, var(--hes-event-calendar-panel-padding-y)) var(--hes-event-calendar-panel-padding-tablet-x, var(--hes-event-calendar-panel-padding-x));
	}

	.hes-event-calendar__row {
		padding: var(--hes-event-calendar-row-padding-tablet-y, var(--hes-event-calendar-row-padding-y)) var(--hes-event-calendar-row-padding-tablet-x, var(--hes-event-calendar-row-padding-x));
	}
}

@media (max-width: 600px) {
	.wp-block-hes-event-calendar.hes-event-calendar,
	.hes-event-calendar {
		--hes-event-calendar-content-gap: var(--hes-event-calendar-content-gap-mobile, var(--hes-event-calendar-content-gap-tablet, var(--hes-event-calendar-content-gap)));
		--hes-event-calendar-panel-gap: var(--hes-event-calendar-panel-gap-mobile, var(--hes-event-calendar-panel-gap-tablet, var(--hes-event-calendar-panel-gap)));
		--hes-event-calendar-grid-gap: var(--hes-event-calendar-grid-gap-mobile, var(--hes-event-calendar-grid-gap-tablet, var(--hes-event-calendar-grid-gap)));
		--hes-event-calendar-cell-height: var(--hes-event-calendar-cell-height-mobile, var(--hes-event-calendar-cell-height-tablet, var(--hes-event-calendar-cell-height)));
		--hes-event-calendar-calendar-min-width: var(--hes-event-calendar-calendar-min-width-mobile, var(--hes-event-calendar-calendar-min-width-tablet, var(--hes-event-calendar-calendar-min-width)));
		--hes-event-calendar-list-gap: var(--hes-event-calendar-list-gap-mobile, var(--hes-event-calendar-list-gap-tablet, var(--hes-event-calendar-list-gap)));
		--hes-event-calendar-row-inner-gap: var(--hes-event-calendar-row-inner-gap-mobile, var(--hes-event-calendar-row-inner-gap-tablet, var(--hes-event-calendar-row-inner-gap)));
		--hes-event-calendar-row-min-height: var(--hes-event-calendar-row-min-height-mobile, var(--hes-event-calendar-row-min-height-tablet, var(--hes-event-calendar-row-min-height)));
		--hes-event-calendar-date-size: var(--hes-event-calendar-date-size-mobile, var(--hes-event-calendar-date-size-tablet, var(--hes-event-calendar-date-size)));
		--hes-event-calendar-nav-size: var(--hes-event-calendar-nav-size-mobile, var(--hes-event-calendar-nav-size-tablet, var(--hes-event-calendar-nav-size)));
		--hes-event-calendar-icon-size: var(--hes-event-calendar-icon-size-mobile, var(--hes-event-calendar-icon-size-tablet, var(--hes-event-calendar-icon-size)));
		--hes-event-calendar-month-title-size: var(--hes-event-calendar-month-title-size-mobile, var(--hes-event-calendar-month-title-size-tablet, var(--hes-event-calendar-month-title-size)));
		--hes-event-calendar-weekday-size: var(--hes-event-calendar-weekday-size-mobile, var(--hes-event-calendar-weekday-size-tablet, var(--hes-event-calendar-weekday-size)));
		--hes-event-calendar-cell-text-size: var(--hes-event-calendar-cell-text-size-mobile, var(--hes-event-calendar-cell-text-size-tablet, var(--hes-event-calendar-cell-text-size)));
		--hes-event-calendar-row-title-size: var(--hes-event-calendar-row-title-size-mobile, var(--hes-event-calendar-row-title-size-tablet, var(--hes-event-calendar-row-title-size)));
		--hes-event-calendar-row-meta-size: var(--hes-event-calendar-row-meta-size-mobile, var(--hes-event-calendar-row-meta-size-tablet, var(--hes-event-calendar-row-meta-size)));
	}

	.hes-event-calendar__panel {
		padding: var(--hes-event-calendar-panel-padding-mobile-y, var(--hes-event-calendar-panel-padding-tablet-y, var(--hes-event-calendar-panel-padding-y))) var(--hes-event-calendar-panel-padding-mobile-x, var(--hes-event-calendar-panel-padding-tablet-x, var(--hes-event-calendar-panel-padding-x)));
	}

	.hes-event-calendar__row {
		grid-template-columns: var(--hes-event-calendar-date-size, 48px) minmax(0, 1fr) var(--hes-event-calendar-icon-size, 32px);
		padding: var(--hes-event-calendar-row-padding-mobile-y, var(--hes-event-calendar-row-padding-tablet-y, var(--hes-event-calendar-row-padding-y))) var(--hes-event-calendar-row-padding-mobile-x, var(--hes-event-calendar-row-padding-tablet-x, var(--hes-event-calendar-row-padding-x)));
	}

	.hes-event-calendar__date-month {
		font-size: 9px;
	}

	.hes-event-calendar__date-day {
		font-size: 20px;
	}

	.hes-event-calendar__row-arrow .hes-event-calendar__arrow-icon {
		height: 15px;
		width: 9px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hes-event-calendar__row,
	.hes-event-calendar__date-badge,
	.hes-event-calendar__row-meta,
	.hes-event-calendar__row-arrow {
		transition: none;
	}
}
