/*
 * PHSD Events front end. Only loaded on pages with the Events block/shortcode, single events and
 * series pages. Layout, fonts, form controls, cards, pills and pagination come from the theme
 * (mht-* classes); this file only adds what is specific to events.
 */
.phsd-events {
	--phsd-primary: #00747a;
	--phsd-dark: #004953;
	--phsd-accent: #c90062;
	--phsd-muted: #595959;
	--phsd-line: #d9d9d9;
	--phsd-soft: #f3f3f3;
	margin-block: 2rem;
}

.phsd-events.is-loading .phsd-events__results {
	opacity: 0.55;
	transition: opacity 0.15s;
}

.phsd-events__filters .mht-form-search {
	flex-wrap: wrap;
}

.phsd-events__filters .phsd-events__past {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.5rem;
	color: #fff;
	font-weight: 600;
}

.phsd-events__filters .phsd-events__past input {
	width: 1.25rem;
	height: 1.25rem;
	margin: 0;
	accent-color: var(--phsd-dark);
}

.phsd-events__count {
	color: var(--phsd-muted);
	margin: 1rem 0 0;
	min-height: 1.5em;
}

.phsd-events__group {
	margin: 2rem 0 1rem;
	color: var(--phsd-dark);
}

.phsd-events__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}

/* Card ------------------------------------------------------------------------------------------ */
.phsd-event-card {
	display: grid;
	grid-template-columns: 4.5rem 1fr;
	gap: 1rem 1.25rem;
	padding: 1.25rem;
	align-items: start;
}

@media (min-width: 900px) {
	.phsd-event-card:has(.phsd-event-card__image) {
		grid-template-columns: 4.5rem 1fr 12rem;
	}
}

.phsd-event-card__date {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0.5rem 0.25rem;
	border-radius: 0.5rem;
	background: var(--phsd-primary);
	color: #fff;
	line-height: 1.1;
	text-align: center;
}

.phsd-event-card__month,
.phsd-event-card__weekday {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.phsd-event-card__day {
	font-size: 1.75rem;
	font-weight: 700;
}

.phsd-event-card__title {
	font-size: 1.25rem;
	margin: 0 0 0.35rem;
}

.phsd-event-card__title a {
	color: var(--phsd-dark);
}

.phsd-event-card__when,
.phsd-event-card__where,
.phsd-event-card__note,
.phsd-event-card__excerpt,
.phsd-event-card__meta {
	margin: 0 0 0.35rem;
}

.phsd-event-card__when {
	font-weight: 600;
}

.phsd-event-card__note {
	color: var(--phsd-accent);
	font-weight: 600;
}

.phsd-event-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.9rem;
	font-size: 0.9rem;
	color: var(--phsd-muted);
}

.phsd-event-card__calendar::before {
	content: "";
	display: inline-block;
	width: 0.7em;
	height: 0.7em;
	margin-right: 0.35em;
	border-radius: 50%;
	background: var(--phsd-cal, var(--phsd-primary));
	vertical-align: baseline;
}

.phsd-event-card__image img {
	width: 100%;
	height: auto;
	border-radius: 0.5rem;
	display: none;
}

@media (min-width: 900px) {
	.phsd-event-card__image img {
		display: block;
	}
}

.phsd-event-card.is-cancelled .phsd-event-card__title a,
.phsd-event-card.is-cancelled .phsd-event-card__when {
	text-decoration: line-through;
}

.phsd-event-card.is-cancelled .phsd-event-card__date {
	background: var(--phsd-muted);
}

.phsd-event-status {
	margin-bottom: 0.35rem;
}

.phsd-events .mht-pill.phsd-event-status {
	background: var(--phsd-dark);
	color: #fff;
}

.phsd-events .mht-pill.phsd-event-status--cancelled,
.phsd-events .mht-pill.phsd-event-status--postponed {
	background: var(--phsd-accent);
}

@media (max-width: 575px) {
	.phsd-event-card {
		grid-template-columns: 3.25rem 1fr;
		gap: 0.75rem;
		padding: 1rem 0.85rem;
	}

	.phsd-event-card__day {
		font-size: 1.4rem;
	}

	.phsd-event-card__title {
		font-size: 1.1rem;
	}
}

.phsd-events__list--compact .phsd-event-card {
	grid-template-columns: 4rem 1fr;
	padding: 1rem;
}

.phsd-events__empty {
	padding: 1.5rem;
	background: var(--phsd-soft);
	border-radius: 0.5rem;
}

.phsd-events__subscribe,
.phsd-events__all {
	margin-top: 1.5rem;
}

/* Month ------------------------------------------------------------------------------------------ */
.phsd-events__month-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1.5rem;
}

.phsd-events__month-title {
	margin: 0;
	text-align: center;
}

.phsd-events__month-today {
	text-align: center;
	margin: 0.25rem 0 1rem;
}

.phsd-events__calendar {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.phsd-events__calendar th {
	padding: 0.5rem;
	background: var(--phsd-dark);
	color: #fff;
	text-align: center;
}

.phsd-events__calendar th abbr {
	text-decoration: none;
}

.phsd-events__day {
	height: 7rem;
	padding: 0.35rem;
	border: 1px solid var(--phsd-line);
	vertical-align: top;
	font-size: 0.85rem;
}

.phsd-events__day.is-outside {
	background: var(--phsd-soft);
	color: var(--phsd-muted);
}

.phsd-events__day.is-today .phsd-events__daynum {
	display: inline-block;
	min-width: 1.8em;
	border-radius: 1em;
	background: var(--phsd-primary);
	color: #fff;
	text-align: center;
}

.phsd-events__day ul {
	list-style: none;
	margin: 0.25rem 0 0;
	padding: 0;
}

.phsd-events__day li {
	margin-bottom: 0.25rem;
	padding-left: 0.4rem;
	border-left: 4px solid var(--phsd-cal, var(--phsd-primary));
	line-height: 1.25;
}

.phsd-events__day li.is-cancelled a {
	text-decoration: line-through;
}

.phsd-events__time {
	display: block;
	font-weight: 600;
}

/* Phones: only days with events, as a list. */
@media (max-width: 767px) {
	.phsd-events__calendar,
	.phsd-events__calendar tbody,
	.phsd-events__calendar tr,
	.phsd-events__calendar td {
		display: block;
		width: 100%;
	}

	.phsd-events__calendar thead,
	.phsd-events__day:not(.has-events),
	.phsd-events__day.is-outside {
		display: none;
	}

	.phsd-events__day {
		height: auto;
		border-width: 0 0 1px;
		padding: 0.75rem 0;
	}

	.phsd-events__daynum [aria-hidden="true"] {
		display: none;
	}

	.phsd-events__daynum .sr-only {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		clip: auto;
		overflow: visible;
		font-weight: 700;
	}
}

/* Single event details --------------------------------------------------------------------------- */
.phsd-event-details {
	margin: 1.5rem 0 2rem;
	padding: 1.5rem;
	border-left: 6px solid var(--phsd-primary, #00747a);
	background: #f3f3f3;
	border-radius: 0 0.5rem 0.5rem 0;
}

.phsd-event-details__status {
	padding: 0.75rem 1rem;
	background: #c90062;
	color: #fff;
	border-radius: 0.35rem;
}

.phsd-event-details__past {
	font-weight: 600;
}

.phsd-event-details__list {
	display: grid;
	gap: 0.75rem;
	margin: 0;
}

.phsd-event-details__list > div {
	display: grid;
	grid-template-columns: 7rem 1fr;
	gap: 1rem;
}

@media (max-width: 575px) {
	.phsd-event-details__list > div {
		grid-template-columns: 1fr;
		gap: 0.15rem;
	}
}

.phsd-event-details__list dt {
	font-weight: 700;
	color: #004953;
}

.phsd-event-details__list dd {
	margin: 0;
}

.phsd-event-details__repeat {
	color: #595959;
}

.phsd-event-details__register {
	margin: 1.25rem 0 0;
}

.phsd-event-details__button {
	display: inline-block;
	padding: 0.65rem 1.5rem;
	background: #00747a;
	color: #fff;
	border-radius: 2rem;
	font-weight: 600;
	text-decoration: none;
}

.phsd-event-details__button:hover,
.phsd-event-details__button:focus-visible {
	background: #004953;
	color: #fff;
}

.phsd-event-details__add {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	margin-top: 1.25rem;
}

.phsd-event-details__add-label {
	font-weight: 700;
}

.phsd-event-details__dates {
	margin-top: 1.25rem;
}

.phsd-event-details__dates summary {
	cursor: pointer;
	font-weight: 700;
	color: #004953;
}

.phsd-event-details__dates [aria-current="date"] {
	font-weight: 700;
}

.phsd-event-details__back {
	margin: 1.25rem 0 0;
}

@media (prefers-reduced-motion: reduce) {
	.phsd-events.is-loading .phsd-events__results {
		transition: none;
	}
}