.oktoberfest-dates {
	width: 100%;
	padding-block: 6rem;
	background:
		var(
			--color-page-mesh,
			radial-gradient(ellipse 60% 50% at 12% 8%, rgba(108, 178, 219, 0.55) 0%, rgba(108, 178, 219, 0) 60%),
			radial-gradient(ellipse 55% 45% at 88% 14%, rgba(35, 88, 124, 0.65) 0%, rgba(35, 88, 124, 0) 58%)
		),
		var(--color-page, #2f6c91);
	background-attachment: fixed;
	color: #fffaf0;
}

.oktoberfest-dates__inner {
	width: min(100% - (var(--container-gutter, 1rem) * 2), var(--content-width, 1440px));
	margin-inline: auto;
}

.oktoberfest-dates__header {
	display: grid;
	gap: 1rem;
	max-width: 48rem;
	margin-bottom: 3rem;
}

.oktoberfest-dates__overline {
	margin: 0;
	color: #f5dd7a;
	font-family: var(--font-family-secondary);
	font-size: var(--text-s);
	font-weight: var(--font-weight-700);
	line-height: 1.25;
	text-transform: uppercase;
}

.oktoberfest-dates__heading {
	margin: 0;
	color: #fffaf0;
	font-size: var(--text-4xl);
	line-height: 1;
	text-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.26);
}

.oktoberfest-dates__text {
	margin: 0;
	color: rgba(255, 250, 240, 0.88);
	font-size: var(--text-l);
	line-height: 1.55;
}

.oktoberfest-dates__text > * {
	margin-top: 0;
}

.oktoberfest-dates__text > *:last-child {
	margin-bottom: 0;
}

.oktoberfest-dates__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
}

.oktoberfest-dates__card {
	display: grid;
	align-content: space-between;
	min-height: 20rem;
	padding: 1.5rem;
	border: 0.125rem solid rgba(255, 250, 240, 0.34);
	border-radius: 0.75rem;
	background:
		linear-gradient(180deg, rgba(255, 253, 248, 0.98) 0%, rgba(255, 250, 240, 0.92) 100%);
	color: var(--color-accent-dark, #063d62);
	box-shadow: 0 1.25rem 2.75rem rgba(6, 61, 98, 0.24);
}

.oktoberfest-dates__date {
	display: grid;
	gap: 0.25rem;
	align-self: end;
}

.oktoberfest-dates__day {
	color: var(--color-accent-dark, #063d62);
	font-family: var(--font-family-base);
	font-size: clamp(5rem, 11vw, 9rem);
	font-weight: var(--font-weight-400);
	line-height: 0.82;
}

.oktoberfest-dates__meta {
	color: var(--color-muted, #6f6252);
	font-family: var(--font-family-secondary);
	font-size: var(--text-l);
	font-weight: var(--font-weight-700);
	line-height: 1.15;
	text-transform: uppercase;
}

.oktoberfest-dates__content {
	display: grid;
	gap: 0.75rem;
	margin-bottom: 2rem;
}

.oktoberfest-dates__title {
	margin: 0;
	color: var(--color-accent-dark, #063d62);
	font-family: var(--font-family-secondary);
	font-size: var(--text-xl);
	font-weight: var(--font-weight-700);
	line-height: 1.15;
}

.oktoberfest-dates__description {
	margin: 0;
	color: var(--color-text, #22180f);
	font-size: var(--text-m);
	line-height: 1.45;
}

.oktoberfest-dates__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	justify-self: start;
	min-height: 3rem;
	margin-top: 0.25rem;
	padding: 0.75rem 1.25rem;
	border: 0.125rem solid #f5dd7a;
	border-radius: 0.25rem;
	background: #f5dd7a;
	color: #22180f;
	font-family: var(--font-family-secondary);
	font-size: var(--text-s);
	font-weight: var(--font-weight-700);
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 180ms ease-in-out, color 180ms ease-in-out, transform 180ms ease-in-out;
}

.oktoberfest-dates__button:hover,
.oktoberfest-dates__button:focus-visible {
	background: transparent;
	color: var(--color-accent-dark, #063d62);
	transform: translateY(-0.125rem);
}

.oktoberfest-dates__button:focus-visible {
	outline: 0.1875rem solid transparent;
	box-shadow: 0 0 0 0.1875rem rgba(11, 95, 143, 0.28);
}

.oktoberfest-dates__empty {
	margin: 0;
	padding: 1rem;
	border: 0.125rem solid rgba(245, 221, 122, 0.72);
	border-radius: 0.5rem;
	background: rgba(255, 250, 240, 0.94);
	color: var(--color-text, #22180f);
}

.oktoberfest-dates__add {
	display: flex;
	justify-content: center;
	margin-top: 1.5rem;
}

.oktoberfest-dates__card--editor {
	cursor: pointer;
}

.oktoberfest-dates__card--editor.is-selected {
	border-color: #f5dd7a;
	box-shadow: 0 0 0 0.1875rem rgba(245, 221, 122, 0.38), 0 1.25rem 2.75rem rgba(6, 61, 98, 0.24);
}

.oktoberfest-dates__card--editor:focus-visible {
	outline: 0.1875rem solid rgba(245, 221, 122, 0.62);
	outline-offset: 0.125rem;
}

.oktoberfest-dates__editor-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.oktoberfest-dates__url-field {
	display: grid;
	gap: 0.5rem;
}

.oktoberfest-dates__editor-label {
	font-size: 0.6875rem;
	font-weight: 500;
	line-height: 1.4;
	text-transform: uppercase;
}

.oktoberfest-dates__inspector-empty {
	margin-top: 0;
}

.oktoberfest-dates__inspector-add {
	margin-top: 1rem;
}

@media (max-width: 1100px) {
	.oktoberfest-dates__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.oktoberfest-dates {
		padding-block: 4rem;
	}

	.oktoberfest-dates__heading {
		font-size: var(--text-3xl);
	}

	.oktoberfest-dates__text {
		font-size: var(--text-m);
	}

	.oktoberfest-dates__card {
		min-height: 17rem;
	}
}

@media (max-width: 520px) {
	.oktoberfest-dates {
		padding-block: 3rem;
		background-attachment: scroll;
	}

	.oktoberfest-dates__header {
		margin-bottom: 2rem;
	}

	.oktoberfest-dates__grid {
		grid-template-columns: 1fr;
	}

	.oktoberfest-dates__day {
		font-size: 5rem;
	}
}