/* Events layout. Colours and type come from theme.json tokens. */

.bi-events {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: grid;
	gap: 0.75rem;
}

.bi-events--cards {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
	gap: 1rem;
}

.bi-event-card {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--wp--preset--color--line, #d5dcd6);
	border-radius: 6px;
	overflow: hidden;
	background: var(--wp--preset--color--surface, #fff);
}

.bi-event-card__badge {
	flex: 0 0 4.75rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0.875rem 0;
	background: var(--wp--preset--color--primary, #1d5e86);
	color: #fff;
	font-family: var(--wp--preset--font-family--heading, inherit);
	line-height: 1;
}

.bi-event-card--major .bi-event-card__badge {
	background: var(--wp--preset--color--accent, #9a4127);
}

.bi-event-card__day {
	font-size: 2.125rem;
	font-weight: 700;
}

.bi-event-card__month {
	font-size: 1rem;
	font-weight: 600;
	margin-top: 0.25rem;
}

.bi-event-card__body {
	min-width: 0;
	padding: 1rem 1.125rem;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.bi-event-card__title {
	font-family: var(--wp--preset--font-family--body, inherit);
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 1.25;
	margin: 0;
}

.bi-event-card__title a {
	color: var(--wp--preset--color--contrast, #1c2a2e);
	text-decoration: none;
}

.bi-event-card__title a:hover,
.bi-event-card__title a:focus {
	text-decoration: underline;
}

.bi-event-card p:not(.bi-event-card__badge) {
	margin: 0;
	font-size: 0.9375rem;
}

.bi-event-card__where {
	color: var(--wp--preset--color--muted, #55656a);
}

/* Film events: a small film strip across the card's top right corner. */
.bi-event-card {
	position: relative;
}

.bi-event-card__filmstrip {
	position: absolute;
	top: 1.375rem;
	right: -1.5rem;
	width: 7rem;
	height: 1.25rem;
	transform: rotate(45deg);
	background:
		repeating-linear-gradient(90deg, transparent 0 0.1875rem, #f4f1e8 0.1875rem 0.4375rem, transparent 0.4375rem 0.625rem) 0 0.1875rem / 100% 0.1875rem no-repeat,
		repeating-linear-gradient(90deg, transparent 0 0.1875rem, #f4f1e8 0.1875rem 0.4375rem, transparent 0.4375rem 0.625rem) 0 calc(100% - 0.1875rem) / 100% 0.1875rem no-repeat,
		var(--wp--preset--color--contrast, #1c2a2e);
	box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
	pointer-events: none;
}

.bi-event-card--type-film .bi-event-card__body {
	padding-right: 2.75rem;
}

/* Film events: the same strip, larger, across the featured image's top right corner. */
.bi-filmstrip-frame {
	position: relative;
	overflow: hidden;
	border-radius: 6px;
}

.bi-filmstrip {
	position: absolute;
	top: 2.25rem;
	right: -2.75rem;
	width: 12rem;
	height: 2rem;
	transform: rotate(45deg);
	background:
		repeating-linear-gradient(90deg, transparent 0 0.3125rem, #f4f1e8 0.3125rem 0.6875rem, transparent 0.6875rem 1rem) 0 0.3125rem / 100% 0.3125rem no-repeat,
		repeating-linear-gradient(90deg, transparent 0 0.3125rem, #f4f1e8 0.3125rem 0.6875rem, transparent 0.6875rem 1rem) 0 calc(100% - 0.3125rem) / 100% 0.3125rem no-repeat,
		var(--wp--preset--color--contrast, #1c2a2e);
	box-shadow: 0 2px 4px rgb(0 0 0 / 0.3);
	pointer-events: none;
}

.bi-events__month {
	font-size: var(--wp--preset--font-size--large, 1.25rem);
	margin: 2rem 0 0.75rem;
}

.bi-events__empty {
	color: var(--wp--preset--color--muted, #55656a);
}

.bi-event__past {
	background: var(--wp--preset--color--surface, #fff);
	border-left: 4px solid var(--wp--preset--color--accent, #c9a227);
	padding: 0.625rem 1rem;
	font-weight: 600;
}

.bi-event__check {
	font-size: 0.875rem;
	color: var(--wp--preset--color--muted, #55656a);
}

/* Suggestion form */
.bi-suggest {
	max-width: 40rem;
}

.bi-suggest fieldset {
	border: 0;
	margin: 0 0 1.5rem;
	padding: 0;
}

.bi-suggest legend {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: var(--wp--preset--font-size--large, 1.25rem);
	font-weight: 600;
	margin: 0 0 0.75rem;
	padding: 0;
}

.bi-suggest__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	gap: 0 1rem;
}

.bi-suggest__field {
	margin: 0 0 1.125rem;
}

.bi-suggest__field label {
	display: block;
	font-weight: 600;
	margin: 0 0 0.25rem;
}

.bi-suggest__optional {
	font-weight: 400;
	color: var(--wp--preset--color--muted, #55656a);
}

.bi-suggest__hint {
	font-size: 0.875rem;
	color: var(--wp--preset--color--muted, #55656a);
	margin: 0 0 0.375rem;
}

.bi-suggest input,
.bi-suggest select,
.bi-suggest textarea {
	box-sizing: border-box;
	width: 100%;
	font: inherit;
	padding: 0.5rem 0.625rem;
	border: 1.5px solid #8fa4a8;
	border-radius: 6px;
	background: var(--wp--preset--color--surface, #fff);
	color: inherit;
	min-height: 2.75rem;
}

.bi-suggest__field--error input,
.bi-suggest__field--error select,
.bi-suggest__field--error textarea {
	border: 2px solid #b3261e;
}

.bi-suggest__error {
	color: #b3261e;
	font-weight: 600;
	margin: 0 0 0.375rem;
}

.bi-suggest__errors {
	border: 2px solid #b3261e;
	border-radius: 6px;
	padding: 1rem 1.25rem;
	margin: 0 0 1.5rem;
}

.bi-suggest__errors h2 {
	font-size: var(--wp--preset--font-size--large, 1.25rem);
	margin: 0 0 0.5rem;
}

.bi-suggest__errors ul {
	margin: 0;
}

.bi-suggest__errors a {
	color: #b3261e;
}

.bi-suggest__extra {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.bi-suggest--sent {
	background: var(--wp--preset--color--surface, #fff);
	border: 1px solid var(--wp--preset--color--line, #d5dcd6);
	border-radius: 6px;
	padding: 1.25rem 1.5rem;
}

.bi-suggest--sent h2 {
	margin-top: 0;
}