/*
 * Where and When a class runs: on product pages beside the price, under the
 * name in the shop, and as the member dashboard's timetable. Spacing only, plus bold "Where" and "When" headings;
 * the font, size and colour are the theme's.
 */

.sp-schedule-summary {
	margin: 0 0 1em;
}

.sp-schedule-summary p {
	margin: 0;
	padding: 0;
}

/* "Where" and "When". */
.sp-schedule-summary .sp-schedule-summary__label {
	margin: 0 0 0.35em;
	font-weight: bold;
}

.sp-schedule-summary .sp-schedule-summary__line strong::after {
	content: " \2013 ";
	font-weight: normal;
}

/* Where, then When, a field's gap apart. */
.sp-schedule-summary .sp-schedule-summary__where {
	margin-bottom: 1em;
}

/* Under the name in the shop. */
.sp-schedule-loop {
	margin: 0.25em 0;
}

/*
 * The member dashboard's Classes box: a column per day, as many across as
 * fit, one under another on a phone.
 */
.sp-classes .sp-classes__switch {
	margin-bottom: 1em;
}

.sp-classes__view[hidden] {
	display: none;
}

.sp-timetable {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) );
	gap: 1em;
}

.sp-timetable__day h4 {
	margin: 0 0 0.5em;
	font-weight: bold;
}

.sp-timetable__day ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-timetable__once {
	margin-top: 1.5em;
}

.sp-timetable__class + .sp-timetable__class {
	margin-top: 0.5em;
}

.sp-timetable__class a {
	display: block;
	padding: 0.5em 0.75em;
	border: 1px solid rgba( 0, 0, 0, 0.12 );
	border-radius: 4px;
	color: inherit;
	text-decoration: none;
}

.sp-timetable__class a:hover,
.sp-timetable__class a:focus {
	border-color: currentColor;
}

.sp-timetable__class span,
.sp-timetable__class strong {
	display: block;
}

.sp-timetable__detail {
	opacity: 0.75;
	font-size: 0.9em;
}