/*
 * [up_show_calendar] (inc/calendar.php, templates/shows/calendar.php): a month of shows.
 *
 * From 768px: a 7-column grid, Sunday first. Each day is a tile; each show is a small square
 * thumbnail beside its time (a red ticket chip that opens the checkout) and its name (two lines
 * at most). Thumbnails drop out below 1024px, where the columns get narrow.
 * Below 768px: a list of the days with shows (today onward), like "What's on".
 *
 * Colors go through the role tokens (design-system.css), so the "UP Dark" page template's
 * dark.css turns it dark with the rest of the page.
 */

.up-ds.up-cal {
	max-width: 1240px;
	margin: 0 auto;
	padding: 40px 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	color: var(--up-ink);
	scroll-margin-top: 120px; /* clear Salient's sticky header when a month link jumps here */
}

/* ---- Month bar ----------------------------------------------------------- */

.up-ds .up-cal__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
}

html body .up-ds .up-cal__month {
	margin: 0;
	padding: 0;
}

.up-ds .up-cal__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.up-ds .up-cal__nav-btn {
	min-height: 44px;
	padding: 8px 20px;
	font-size: 16px;
}

.up-ds .up-cal__nav-now {
	min-height: 44px;
}

.up-ds .up-cal__text {
	margin: 0;
	color: var(--up-muted);
}

.up-ds .up-cal__empty {
	margin: 0;
	padding: 16px 18px;
	background: var(--up-surface-soft);
	border-radius: var(--up-radius-tile);
	font-size: 17px;
	color: var(--up-ink);
}

/* ---- Grid ---------------------------------------------------------------- */

.up-ds .up-cal__weekdays,
.up-ds ol.up-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 8px;
}

.up-ds .up-cal__weekdays {
	padding: 0 2px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--up-muted);
}

.up-ds ol.up-cal__grid,
.up-ds ul.up-cal__shows {
	list-style: none;
	margin: 0;
	padding: 0;
}

.up-ds .up-cal__grid > li,
.up-ds .up-cal__shows > li {
	list-style: none;
	margin: 0;
}

/* The 1st sits in its weekday's column (--up-cal-start: 1 Sunday ... 7 Saturday). */
.up-ds .up-cal__day:first-child {
	grid-column-start: var(--up-cal-start, 1);
}

.up-ds .up-cal__day {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	min-height: 112px;
	padding: 8px 8px 10px;
	background: var(--up-surface-soft);
	border: 2px solid transparent;
	border-radius: 12px;
}

.up-ds .up-cal__day.no-shows {
	background: transparent;
	border-color: var(--up-line);
	border-style: dashed;
	border-width: 1px;
}

.up-ds .up-cal__day.is-past {
	opacity: 0.45;
}

.up-ds .up-cal__day.is-today {
	border: 2px solid var(--up-accent-text);
}

html body .up-ds .up-cal__date {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	margin: 0;
	padding: 0;
	font-family: var(--up-font-display);
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	color: var(--up-ink);
}

/* The full date is for screen readers on the grid, and the day's heading in the list. */
.up-ds .up-cal__long {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.up-ds .up-cal__today {
	padding: 3px 8px;
	font-size: 11px;
}

/* ---- One show ------------------------------------------------------------ */

.up-ds .up-cal__shows {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.up-ds .up-cal__show {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr);
	align-items: start;
	gap: 7px;
}

.up-ds .up-cal__thumb {
	display: block;
	width: 36px;
	height: 36px;
	border-radius: 7px;
	overflow: hidden;
	background: var(--up-surface);
}

.up-ds .up-cal__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.up-ds .up-cal__thumb .up-poster {
	padding: 0;
	font-size: 17px;
}

.up-ds .up-cal__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	min-width: 0;
}

.up-ds a.up-cal__ticket {
	display: inline-flex;
	align-items: center;
	min-height: 26px;
	padding: 2px 10px;
	background: var(--up-red);
	border-radius: var(--up-radius-pill);
	color: var(--up-white);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color 0.15s;
}

.up-ds a.up-cal__ticket:hover {
	background: var(--up-link-hover);
	color: var(--up-white);
}

body.up-dark .up-ds a.up-cal__ticket:hover {
	background: #e0001a;
}

/* The time as text: on the grid only for a date that isn't on sale. */
.up-ds .up-cal__clock {
	display: inline-flex;
	align-items: center;
	min-height: 26px;
	padding: 1px 9px;
	border: 1px dashed var(--up-muted);
	border-radius: var(--up-radius-pill);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	color: var(--up-muted);
}

.up-ds .up-cal__show.has-ticket .up-cal__clock {
	display: none;
}

/* A cached page whose day has passed (calendar.js): no ticket chip. */
.up-ds .is-past .up-cal__show.has-ticket .up-cal__clock {
	display: inline-flex;
}

.up-ds .is-past a.up-cal__ticket {
	display: none;
}

.up-ds a.up-cal__name,
.up-ds span.up-cal__name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--up-ink);
	text-decoration: none;
}

.up-ds a.up-cal__name:hover {
	color: var(--up-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.up-ds .up-cal__sub {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 12px;
	line-height: 1.3;
	color: var(--up-muted);
}

.up-ds .up-cal__action {
	display: none;
}

/* Narrow columns: the names need the room more than the thumbnails do. */
@media (max-width: 1023px) {
	.up-ds .up-cal__show {
		grid-template-columns: minmax(0, 1fr);
	}

	.up-ds .up-cal__thumb {
		display: none;
	}
}

@media (min-width: 768px) {
	.up-ds .up-cal__empty--rest {
		display: none;
	}
}

/* ---- Phones: a list of the days with shows -------------------------------- */

@media (max-width: 767px) {
	.up-ds.up-cal {
		gap: 14px;
	}

	.up-ds .up-cal__weekdays {
		display: none;
	}

	.up-ds ol.up-cal__grid {
		display: flex;
		flex-direction: column;
		gap: 14px;
	}

	.up-ds .up-cal__day.no-shows,
	.up-ds .up-cal__day.is-past {
		display: none;
	}

	.up-ds .up-cal__day {
		gap: 12px;
		min-height: 0;
		padding: 16px;
		border-radius: var(--up-radius-panel);
	}

	html body .up-ds .up-cal__date {
		justify-content: flex-start;
		font-family: var(--up-font-body);
		font-size: 19px;
		font-weight: 700;
		line-height: 1.3;
	}

	.up-ds .up-cal__num {
		display: none;
	}

	.up-ds .up-cal__long {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
		white-space: normal;
	}

	.up-ds .up-cal__show {
		grid-template-columns: 64px minmax(0, 1fr);
		grid-template-areas:
			"thumb body"
			"thumb action";
		gap: 8px 14px;
	}

	.up-ds .up-cal__thumb {
		grid-area: thumb;
		display: block;
		width: 64px;
		height: 64px;
		border-radius: 10px;
	}

	.up-ds .up-cal__thumb .up-poster {
		font-size: 26px;
	}

	.up-ds .up-cal__body {
		grid-area: body;
	}

	.up-ds a.up-cal__ticket {
		display: none;
	}

	.up-ds .up-cal__clock,
	.up-ds .up-cal__show.has-ticket .up-cal__clock {
		display: block;
		min-height: 0;
		padding: 0;
		border: 0;
		font-size: 16px;
		color: var(--up-accent-text);
	}

	.up-ds a.up-cal__name,
	.up-ds span.up-cal__name {
		-webkit-line-clamp: 3;
		font-size: 17px;
		font-weight: 700;
	}

	.up-ds .up-cal__sub {
		font-size: 15px;
	}

	.up-ds .up-cal__action {
		grid-area: action;
		display: block;
	}

	.up-ds .up-cal__action .up-btn,
	.up-ds .up-cal__action .up-ticket-closed {
		min-height: 44px;
		padding: 8px 20px;
		font-size: 16px;
	}
}