/**
 * Stillpoint Studio — shared block styles (handle `stillpoint-studio-blocks`, loaded with any plugin block,
 * front end and editor canvas).
 *
 * Golden rule (SPEC §1): every colour, font, size, radius, space and duration is a theme token or a
 * contextual role (--sp-*, DESIGN §5.1), each with a fallback so the blocks still work under other themes.
 * The aliases below resolve the roles once per block root; sections re-point the roles and every block
 * inverts with them.
 */

/* ------------------------------------------------------------------ tokens */

.sp-studio {
	--sp-studio-bg: var(--sp-bg, var(--wp--preset--color--base, Canvas));
	--sp-studio-fg: var(--sp-fg, var(--wp--preset--color--contrast, currentColor));
	--sp-studio-muted: var(--sp-muted, var(--wp--preset--color--muted, currentColor));
	--sp-studio-line: var(--sp-line, var(--wp--preset--color--border, color-mix(in srgb, currentColor 18%, transparent)));
	--sp-studio-soft: var(--sp-soft, var(--wp--preset--color--tint, color-mix(in srgb, currentColor 7%, transparent)));
	--sp-studio-card: var(--sp-card, var(--wp--preset--color--surface, color-mix(in srgb, currentColor 5%, transparent)));
	--sp-studio-accent: var(--sp-accent, var(--wp--preset--color--primary, currentColor));
	--sp-studio-on-accent: var(--sp-on-accent, var(--wp--preset--color--on-primary, Canvas));
	--sp-studio-accent-hover: var(--sp-accent-hover, var(--wp--custom--color--primary-hover, var(--sp-studio-accent)));
	--sp-studio-focus: var(--sp-focus, var(--wp--custom--focus--color, currentColor));
	--sp-studio-field: var(--sp-field, var(--sp-studio-muted));
	--sp-studio-hover-soft: color-mix(in srgb, var(--sp-studio-soft), var(--sp-studio-fg) 8%);

	--sp-studio-font-heading: var(--wp--preset--font-family--heading, inherit);
	--sp-studio-font-body: var(--wp--preset--font-family--body, inherit);
	--sp-studio-scale: var(--wp--custom--heading--scale, 1);
	--sp-studio-heading-weight: var(--wp--custom--heading--font-weight, 400);
	--sp-studio-heading-tracking: var(--wp--custom--heading--letter-spacing, normal);
	--sp-studio-heading-case: var(--wp--custom--heading--text-transform, none);
	--sp-studio-heading-leading: var(--wp--custom--heading--line-height, 1.1);

	--sp-studio-fs-xs: var(--wp--preset--font-size--x-small, 0.75rem);
	--sp-studio-fs-sm: var(--wp--preset--font-size--small, 0.875rem);
	--sp-studio-fs-md: var(--wp--preset--font-size--medium, 1rem);
	--sp-studio-fs-lead: var(--wp--custom--type--lead, 1.25rem);
	--sp-studio-fs-lg: var(--wp--preset--font-size--large, 1.6rem);
	--sp-studio-fs-xl: var(--wp--preset--font-size--x-large, 2.1rem);
	--sp-studio-fs-xxl: var(--wp--preset--font-size--xx-large, 2.8rem);

	--sp-studio-s10: var(--wp--preset--spacing--10, 0.4rem);
	--sp-studio-s20: var(--wp--preset--spacing--20, 0.75rem);
	--sp-studio-s30: var(--wp--preset--spacing--30, 1.15rem);
	--sp-studio-s40: var(--wp--preset--spacing--40, 1.6rem);
	--sp-studio-s50: var(--wp--preset--spacing--50, 2.5rem);
	--sp-studio-s60: var(--wp--preset--spacing--60, 3.5rem);
	--sp-studio-s70: var(--wp--preset--spacing--70, 5.5rem);

	--sp-studio-r-sm: var(--wp--custom--radius--sm, 0.25rem);
	--sp-studio-r-md: var(--wp--custom--radius--md, 0.375rem);
	--sp-studio-r-card: var(--wp--custom--radius--card, 0.375rem);
	--sp-studio-r-image: var(--wp--custom--radius--image, 0.5rem);
	--sp-studio-r-button: var(--wp--custom--radius--button, 0.25rem);
	--sp-studio-r-tag: var(--wp--custom--radius--tag, 0.25rem);
	--sp-studio-r-marker: var(--wp--custom--radius--marker, 50%);

	--sp-studio-fast: var(--wp--custom--motion--duration-fast, 160ms);
	--sp-studio-duration: var(--wp--custom--motion--duration, 320ms);
	--sp-studio-slow: var(--wp--custom--motion--duration-slow, 700ms);
	--sp-studio-ease: var(--wp--custom--motion--easing, cubic-bezier(0.22, 0.61, 0.36, 1));

	container: sp-studio / inline-size;
	color: var(--sp-studio-fg);
}

.sp-studio.alignfull {
	padding-inline: var(--wp--style--root--padding-left, var(--sp-studio-s40)) var(--wp--style--root--padding-right, var(--sp-studio-s40));
}

.sp-studio *,
.sp-studio *::before,
.sp-studio *::after {
	box-sizing: border-box;
}

.sp-studio [hidden] {
	display: none !important;
}

.sp-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.sp-studio :where(ul, ol) {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-studio :where(p, h2, h3, h4, h5, dl, dd, figure) {
	margin: 0;
}

/* ------------------------------------------------------------ voices */

/* Label voice (DESIGN §4.4): body font, small tracked capitals. */
.sp-studio-label,
.sp-schedule__filter-label,
.sp-schedule__tab-day,
.sp-schedule__group-title,
.sp-schedule__when,
.sp-schedule__end,
.sp-schedule__flag,
.sp-schedule__now-label,
.sp-class-card__meta,
.sp-teacher-card__role,
.sp-teacher-card__specialties,
.sp-event-list__date-month,
.sp-event-card__date,
.sp-studio-heading,
.sp-facts dt,
.sp-mini-teacher__role,
.sp-studio-placeholder__title {
	font-family: var(--sp-studio-font-body);
	font-size: var(--sp-studio-fs-xs);
	font-weight: 500;
	font-style: normal;
	letter-spacing: 0.12em;
	line-height: 1.35;
	text-transform: uppercase;
}

/* Heading voice: the heading font with the owner's weight, tracking and case. */
.sp-schedule__start,
.sp-schedule__title,
.sp-schedule__tab-date,
.sp-schedule__week,
.sp-schedule__day-name,
.sp-schedule__empty-title,
.sp-class-card__title,
.sp-teacher-card__name,
.sp-event-list__title,
.sp-event-list__date-day,
.sp-event-list__price,
.sp-event-list__month,
.sp-event-card__title,
.sp-studio-title,
.sp-facts__value--voice {
	font-family: var(--sp-studio-font-heading);
	font-weight: var(--sp-studio-heading-weight);
	letter-spacing: var(--sp-studio-heading-tracking);
	text-transform: var(--sp-studio-heading-case);
	line-height: var(--sp-studio-heading-leading);
	font-synthesis: none;
	text-wrap: balance;
}

.sp-schedule__start,
.sp-schedule__tab-date,
.sp-event-list__date-day,
.sp-event-list__price,
.sp-facts dd,
.sp-schedule__end {
	font-variant-numeric: lining-nums tabular-nums;
}

/* ------------------------------------------------------------ links */

.sp-studio a {
	color: var(--sp-studio-fg);
	text-decoration-color: var(--sp-studio-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
}

.sp-studio a:hover {
	text-decoration-thickness: 2px;
}

.sp-studio :focus-visible {
	outline: 2px solid var(--sp-studio-focus);
	outline-offset: 3px;
}

/* ------------------------------------------------------------ buttons (DESIGN §7.4) */

.sp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: 3rem;
	padding: var(--wp--custom--button--padding-block, 0.95em) var(--wp--custom--button--padding-inline, 1.9em);
	border: 1px solid transparent;
	border-radius: var(--sp-studio-r-button);
	background: transparent;
	color: var(--sp-studio-fg);
	font-family: var(--sp-studio-font-body);
	font-size: var(--sp-studio-fs-sm);
	font-weight: var(--wp--custom--button--font-weight, 500);
	letter-spacing: var(--wp--custom--button--letter-spacing, 0.1em);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: var(--wp--custom--button--text-transform, uppercase);
	cursor: pointer;
	transition: background-color var(--sp-studio-fast) var(--sp-studio-ease), border-color var(--sp-studio-fast) var(--sp-studio-ease), color var(--sp-studio-fast) var(--sp-studio-ease), text-decoration-thickness var(--sp-studio-fast) var(--sp-studio-ease);
}

.sp-studio a.sp-btn {
	text-decoration: none;
}

.sp-btn--sm {
	min-height: 2.75rem;
	padding: 0.7em 1.35em;
}

.sp-btn--block {
	width: 100%;
}

.sp-btn--fill,
.sp-studio a.sp-btn--fill {
	background: var(--sp-studio-accent);
	border-color: var(--sp-studio-accent);
	color: var(--sp-studio-on-accent);
}

.sp-btn--fill:hover,
.sp-studio a.sp-btn--fill:hover {
	background: var(--sp-studio-accent-hover);
	border-color: var(--sp-studio-accent-hover);
	color: var(--sp-studio-on-accent);
}

.sp-btn--fill:active {
	transform: translateY(1px);
}

.sp-btn--outline,
.sp-studio a.sp-btn--outline {
	border-color: var(--sp-studio-fg);
	color: var(--sp-studio-fg);
}

.sp-btn--outline:hover,
.sp-studio a.sp-btn--outline:hover {
	background: var(--sp-studio-fg);
	color: var(--sp-studio-bg);
}

/* Inline-block (not flex) so the underline stops before the arrow; the padding keeps a 44px target. */
.sp-btn--text,
.sp-studio a.sp-btn--text {
	display: inline-block;
	min-height: 2.75rem;
	padding-block: calc((2.75rem - 1.2em) / 2);
	padding-inline: 0;
	color: var(--sp-studio-fg);
	text-decoration: underline;
	text-decoration-color: var(--sp-studio-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.4em;
}

.sp-btn--text::after {
	content: "\2192";
	content: "\2192" / "";
	display: inline-block;
	margin-inline-start: 0.5em;
	transition: transform var(--sp-studio-fast) var(--sp-studio-ease);
}

.sp-btn--text:hover,
.sp-studio a.sp-btn--text:hover {
	background: transparent;
	text-decoration-thickness: 2px;
}

.sp-btn--text:hover::after {
	transform: translateX(0.25em);
}

[dir="rtl"] .sp-btn--text::after {
	transform: scaleX(-1);
}

[dir="rtl"] .sp-btn--text:hover::after {
	transform: scaleX(-1) translateX(0.25em);
}

/* ------------------------------------------------------------ tags, status, level (DESIGN §7.7) */

.sp-tag {
	display: inline-flex;
	align-items: center;
	min-height: 1.75rem;
	padding: 0.35em 0.85em;
	border: 1px solid transparent;
	border-radius: var(--sp-studio-r-tag);
	background: var(--sp-studio-soft);
	color: var(--sp-studio-fg);
	font-family: var(--sp-studio-font-body);
	font-size: var(--sp-studio-fs-xs);
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
}

.sp-studio a.sp-tag:hover {
	background: var(--sp-studio-hover-soft);
}

.sp-tag--waitlist,
.sp-tag--full {
	background: transparent;
	border-color: var(--sp-studio-fg);
}

.sp-tag--new,
.sp-tag--loved {
	background: var(--sp-studio-accent);
	border-color: var(--sp-studio-accent);
	color: var(--sp-studio-on-accent);
}

.sp-tag--cancelled,
.sp-tag--ended {
	background: transparent;
	border-color: var(--sp-studio-line);
	color: var(--sp-studio-muted);
}

.sp-level {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	color: var(--sp-studio-muted);
	font-family: var(--sp-studio-font-body);
	font-size: var(--sp-studio-fs-xs);
	line-height: 1.3;
}

.sp-level__dots {
	display: inline-flex;
	gap: 3px;
	flex: none;
}

.sp-level__dot {
	display: block;
	width: 0.375rem;
	height: 0.375rem;
	border: 1px solid var(--sp-studio-line);
	border-radius: var(--sp-studio-r-marker);
}

.sp-level__dot.is-on {
	border-color: var(--sp-studio-accent);
	background: var(--sp-studio-accent);
}

/* ------------------------------------------------------------ chips (DESIGN §7.7) */

.sp-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	min-height: 2.75rem;
	margin: 0;
	padding: 0.6em 1.1em;
	border: 1px solid var(--sp-studio-line);
	border-radius: var(--sp-studio-r-tag);
	background: transparent;
	color: var(--sp-studio-fg);
	font-family: var(--sp-studio-font-body);
	font-size: var(--sp-studio-fs-xs);
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1.2;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--sp-studio-fast) var(--sp-studio-ease), border-color var(--sp-studio-fast) var(--sp-studio-ease), color var(--sp-studio-fast) var(--sp-studio-ease);
}

.sp-chip:hover {
	border-color: var(--sp-studio-fg);
}

.sp-chip[aria-pressed="true"] {
	border-color: var(--sp-studio-fg);
	background: var(--sp-studio-fg);
	color: var(--sp-studio-bg);
}

.sp-chip[aria-pressed="true"]::before {
	content: "\2713";
	content: "\2713" / "";
}

/* ------------------------------------------------------------ avatars */

.sp-avatar {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	overflow: hidden;
	border-radius: 50%;
	background: var(--sp-studio-soft);
	color: var(--sp-studio-accent);
}

.sp-avatar--48 {
	width: 3rem;
	height: 3rem;
}

.sp-avatar img,
.sp-avatar svg {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sp-avatar__initial {
	font-family: var(--sp-studio-font-heading);
	font-style: italic;
	font-synthesis: none;
}

/* ------------------------------------------------------------ media frames (DESIGN §8.1) */

.sp-media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	border-radius: var(--sp-shape, var(--sp-studio-r-image));
	background: var(--sp-studio-soft);
}

.sp-media > :where(figure, div, span, a) {
	display: block;
	height: 100%;
	margin: 0;
}

.sp-media img,
.sp-media svg {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--sp-studio-slow) var(--sp-studio-ease);
}

/* Shapes share the theme's --sp-shape variable, so the frame and the image inside always agree.
   The arch's top corners are elliptical radii sized from the 3:4 frame (a true semicircle; a plain
   100vmax radius would make the browser shrink the bottom corners to nothing). */
.sp-media--arch {
	--sp-shape: 50% 50% var(--sp-studio-r-md) var(--sp-studio-r-md) / 37.5% 37.5% var(--sp-studio-r-md) var(--sp-studio-r-md);
	aspect-ratio: 3 / 4;
}

.sp-media--circle {
	--sp-shape: 50%;
	aspect-ratio: 1;
}

.sp-media--organic {
	--sp-shape: 62% 38% 54% 46% / 49% 60% 40% 51%;
	aspect-ratio: 4 / 5;
}

.sp-card:nth-child(3n + 2) .sp-media--organic {
	--sp-shape: 41% 59% 45% 55% / 58% 42% 58% 42%;
}

.sp-card:nth-child(3n) .sp-media--organic {
	--sp-shape: 55% 45% 62% 38% / 44% 56% 44% 56%;
}

.sp-media__initial {
	display: flex !important;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--sp-studio-accent);
	font-family: var(--sp-studio-font-heading);
	font-size: calc(var(--sp-studio-fs-xxl) * var(--sp-studio-scale));
	font-style: italic;
	font-synthesis: none;
}

/* ------------------------------------------------------------ story cards (DESIGN §7.6) */

.sp-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--sp-studio-s30);
	min-width: 0;
}

.sp-card__link {
	color: inherit;
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: background-size var(--sp-studio-duration) var(--sp-studio-ease);
}

.sp-studio a.sp-card__link {
	text-decoration: none;
}

.sp-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: var(--sp-studio-r-card);
}

.sp-card__link:focus-visible {
	outline: none;
}

.sp-card__link:focus-visible::after {
	outline: 2px solid var(--sp-studio-focus);
	outline-offset: 4px;
}

.sp-card:hover .sp-card__link,
.sp-card:focus-within .sp-card__link {
	background-size: 100% 1px;
}

.sp-card:hover .sp-media img,
.sp-card:hover .sp-media svg {
	transform: scale(1.04);
}

.sp-card__excerpt {
	display: -webkit-box;
	overflow: hidden;
	color: var(--sp-studio-muted);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.sp-card__more {
	margin-top: auto;
	align-self: flex-start;
	pointer-events: none;
}

/* ------------------------------------------------------------ headings inside blocks */

.sp-studio-title {
	margin-bottom: var(--sp-studio-s40);
	color: var(--sp-studio-fg);
	font-size: calc(var(--sp-studio-fs-lg) * var(--sp-studio-scale));
}

.sp-studio-heading {
	display: flex;
	align-items: center;
	gap: var(--sp-studio-s20);
	margin-bottom: var(--sp-studio-s30);
	color: var(--sp-studio-muted);
}

.sp-studio-heading::after {
	content: "";
	flex: 1;
	border-top: 1px solid var(--sp-studio-line);
}

/* ------------------------------------------------------------ timetable rows (DESIGN §7.8; shared) */

.sp-schedule {
	--sp-schedule-time: 5.5rem;
}

.sp-schedule--show-teacher {
	--sp-schedule-col-teacher: minmax(0, 13rem);
}

.sp-schedule--show-level {
	--sp-schedule-col-level: minmax(0, 9rem);
}

.sp-schedule--show-action {
	--sp-schedule-col-action: minmax(6.5rem, auto);
}

.sp-schedule__row {
	position: relative;
	display: grid;
	grid-template-columns: var(--sp-schedule-time) minmax(0, 1fr);
	align-items: start;
	column-gap: var(--sp-studio-s30);
	row-gap: var(--sp-studio-s20);
	padding: var(--sp-studio-s30) 0;
	border-bottom: 1px solid var(--sp-studio-line);
	border-radius: var(--sp-studio-r-sm);
	transition: background-color var(--sp-studio-fast) var(--sp-studio-ease);
}

.sp-schedule__row:hover {
	--sp-studio-muted: var(--sp-studio-fg); /* Muted text on a soft fill can drop under 4.5:1 (Wash, Brand). */
	background-color: var(--sp-studio-soft);
}

.sp-schedule__time {
	grid-column: 1;
	display: flex;
	flex-direction: column;
	gap: 0.2em;
}

.sp-schedule__class,
.sp-schedule__teacher,
.sp-schedule__level,
.sp-schedule__action {
	grid-column: 2;
	min-width: 0;
}

.sp-schedule__level {
	order: 1;
}

.sp-schedule__teacher {
	order: 2;
}

.sp-schedule__action {
	order: 3;
}

.sp-schedule__teacher:empty,
.sp-schedule__level:empty,
.sp-schedule__action:empty {
	display: none;
}

.sp-schedule__action .sp-btn--outline {
	width: 100%;
}

.sp-schedule__when {
	color: var(--sp-studio-accent);
	letter-spacing: 0.06em;
	overflow-wrap: normal;
	word-break: normal;
}

.sp-schedule__start {
	color: var(--sp-studio-fg);
	font-size: calc(var(--sp-studio-fs-lead) * var(--sp-studio-scale));
	line-height: 1.1;
	white-space: nowrap;
}

/* "am"/"pm" set small in the label voice, so 12-hour times fit the time column. */
.sp-schedule__meridiem {
	margin-inline-start: 0.15em;
	font-family: var(--sp-studio-font-body);
	font-size: 0.5em;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sp-schedule__end {
	color: var(--sp-studio-muted);
	letter-spacing: 0.08em;
}

.sp-schedule__row.is-past .sp-schedule__end-time,
.sp-schedule__row.is-current .sp-schedule__end-time {
	display: none;
}

.sp-schedule__row.is-current .sp-schedule__state {
	color: var(--sp-studio-accent);
}

.sp-schedule__flag {
	display: block;
	margin-bottom: 0.35em;
	color: var(--sp-studio-accent);
}

.sp-schedule__title {
	color: var(--sp-studio-fg);
	font-size: calc(var(--sp-studio-fs-lead) * var(--sp-studio-scale));
	line-height: 1.2;
}

.sp-schedule__title a {
	text-decoration: none;
}

.sp-schedule__title a:hover,
.sp-schedule__title a:focus-visible {
	text-decoration: underline;
	text-decoration-color: var(--sp-studio-accent);
}

.sp-schedule__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4em 0.75em;
	margin-top: 0.5em;
	color: var(--sp-studio-muted);
	font-size: var(--sp-studio-fs-sm);
	line-height: 1.4;
}

.sp-schedule__class > .sp-schedule__meta:first-child {
	margin-top: 0;
	color: var(--sp-studio-fg);
	font-size: var(--sp-studio-fs-md);
}

.sp-schedule__note {
	font-style: italic;
}

.sp-schedule__teacher {
	display: flex;
	align-items: center;
	gap: 0.6em;
	font-size: var(--sp-studio-fs-sm);
	line-height: 1.3;
}

.sp-schedule__teacher-name {
	color: var(--sp-studio-fg);
}

.sp-studio a.sp-schedule__teacher-name {
	text-decoration: none;
}

.sp-studio a.sp-schedule__teacher-name:hover {
	text-decoration: underline;
	text-decoration-color: var(--sp-studio-accent);
}

/* Cancelled: muted, struck-through title; the status tag states it in words. */
.sp-schedule__row.is-cancelled .sp-schedule__title,
.sp-schedule__row.is-cancelled .sp-schedule__title a {
	color: var(--sp-studio-muted);
	text-decoration: line-through;
}

/* Finished rows: text drops to the muted colour (still AA) and decoration fades. */
.sp-schedule__row.is-past :where(.sp-schedule__start, .sp-schedule__title, .sp-schedule__title a, .sp-schedule__teacher-name) {
	color: var(--sp-studio-muted);
}

.sp-schedule__row.is-past :where(.sp-avatar, .sp-level__dots) {
	opacity: 0.55;
}

/* Tags keep AA contrast: the fill drops away instead of the text fading. */
.sp-schedule__row.is-past .sp-tag {
	border-color: var(--sp-studio-line);
	background: transparent;
	color: var(--sp-studio-muted);
}

/* Not while hovered or focused: the hover state paints the button in the text colour (a muted label would vanish). */
.sp-studio .sp-schedule__row.is-past a.sp-btn--outline:not(:hover, :focus-visible) {
	border-color: var(--sp-studio-line);
	color: var(--sp-studio-muted);
}

/* Up next: a 3px accent bar on the inline-start edge. */
.sp-schedule__row.is-next::before {
	content: "";
	position: absolute;
	inset-block: var(--sp-studio-s20);
	inset-inline-start: 0;
	width: 3px;
	border-radius: 3px;
	background: var(--sp-studio-accent);
}

.sp-schedule__row.is-next {
	padding-inline-start: var(--sp-studio-s20);
}

.sp-schedule__now {
	display: flex;
	align-items: center;
	gap: var(--sp-studio-s20);
	margin-block: -1px 0;
	padding-block: var(--sp-studio-s10);
	color: var(--sp-studio-accent);
}

.sp-schedule__now::after {
	content: "";
	flex: 1;
	border-top: 1px solid var(--sp-studio-accent);
}

/* Medium rows: time | details | action, with teacher and level sharing a second line.
   (Container queries cannot style the container itself, so the time-column width is set on the rows.) */
@container sp-studio (min-width: 36rem) {
	.sp-schedule__row {
		--sp-schedule-time: 6rem;
		grid-template-columns: var(--sp-schedule-time) minmax(0, 1fr) auto;
		padding-inline: var(--sp-studio-s20);
		border-bottom: 0;
		background-image: linear-gradient(var(--sp-studio-line), var(--sp-studio-line));
		background-position: 50% 100%;
		background-repeat: no-repeat;
		background-size: calc(100% - 2 * var(--sp-studio-s20)) 1px;
	}

	.sp-studio:not(.alignfull) .sp-schedule__row,
	.sp-studio:not(.alignfull) .sp-schedule__now {
		margin-inline: calc(var(--sp-studio-s20) * -1);
	}

	.sp-schedule__now {
		padding-inline: var(--sp-studio-s20);
	}

	.sp-schedule__time {
		grid-row: 1;
	}

	.sp-schedule__class {
		grid-column: 2;
		grid-row: 1;
	}

	.sp-schedule__action {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
		order: 0;
	}

	.sp-schedule__teacher {
		grid-column: 2;
		grid-row: 2;
	}

	.sp-schedule__level {
		grid-column: 3;
		grid-row: 2;
		align-self: center;
		justify-self: end;
	}

	.sp-schedule__action .sp-btn--outline {
		width: auto;
	}
}

/* Wide rows: [time 7rem][class 1fr][teacher 13rem][level 9rem][action auto]. */
@container sp-studio (min-width: 54rem) {
	.sp-schedule__row {
		--sp-schedule-time: 7rem;
		grid-template-columns: var(--sp-schedule-time) minmax(0, 1fr) var(--sp-schedule-col-teacher,) var(--sp-schedule-col-level,) var(--sp-schedule-col-action,);
		align-items: center;
	}

	.sp-schedule__time,
	.sp-schedule__class,
	.sp-schedule__teacher,
	.sp-schedule__level,
	.sp-schedule__action {
		grid-column: auto;
		grid-row: auto;
		order: 0;
	}

	.sp-schedule__level {
		justify-self: start;
	}

	.sp-schedule__teacher:empty,
	.sp-schedule__level:empty,
	.sp-schedule__action:empty {
		display: block;
	}

	.sp-schedule__action {
		justify-self: end;
	}
}

@container sp-studio (max-width: 25rem) {
	.sp-schedule__teacher .sp-avatar {
		display: none;
	}
}

/* ------------------------------------------------------------ event rows (shared) */

.sp-event-list__item {
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr);
	align-items: start;
	column-gap: var(--sp-studio-s30);
	row-gap: var(--sp-studio-s20);
	padding-block: var(--sp-studio-s40);
	border-bottom: 1px solid var(--sp-studio-line);
}

.sp-event-list__date {
	grid-column: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.15em;
}

.sp-event-list__date-day {
	color: var(--sp-studio-fg);
	font-size: calc(var(--sp-studio-fs-xl) * var(--sp-studio-scale));
	line-height: 1;
}

.sp-event-list__date-month {
	color: var(--sp-studio-muted);
}

.sp-event-list__body,
.sp-event-list__price,
.sp-event-list__action {
	grid-column: 2;
	min-width: 0;
}

.sp-event-list__title {
	font-size: calc(var(--sp-studio-fs-lead) * var(--sp-studio-scale));
	line-height: 1.2;
}

.sp-event-list__title a {
	text-decoration: none;
}

.sp-event-list__title a:hover,
.sp-event-list__title a:focus-visible {
	text-decoration: underline;
	text-decoration-color: var(--sp-studio-accent);
}

.sp-event-list__meta,
.sp-event-list__excerpt {
	margin-top: 0.45em;
	color: var(--sp-studio-muted);
	font-size: var(--sp-studio-fs-sm);
	line-height: 1.45;
}

.sp-event-list__price {
	color: var(--sp-studio-fg);
	font-size: calc(var(--sp-studio-fs-lead) * var(--sp-studio-scale));
}

.sp-event-list__price:empty {
	display: none;
}

.sp-event-list__item.is-past :where(.sp-event-list__date-day, .sp-event-list__title, .sp-event-list__title a, .sp-event-list__price) {
	color: var(--sp-studio-muted);
}

@container sp-studio (min-width: 40rem) {
	.sp-event-list__item {
		grid-template-columns: 5rem minmax(0, 1fr) auto auto;
		align-items: center;
		column-gap: var(--sp-studio-s40);
	}

	.sp-event-list__body,
	.sp-event-list__price,
	.sp-event-list__action {
		grid-column: auto;
	}

	.sp-event-list__price:empty {
		display: block;
	}

	.sp-event-list__action {
		justify-self: end;
	}
}

/* ------------------------------------------------------------ mini teachers, social links, facts */

.sp-mini-teachers {
	display: grid;
	gap: var(--sp-studio-s30);
}

@container sp-studio (min-width: 36rem) {
	.sp-mini-teachers {
		grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	}
}

.sp-mini-teacher {
	display: flex;
	align-items: center;
	gap: var(--sp-studio-s20);
}

.sp-mini-teacher__text {
	display: flex;
	flex-direction: column;
	gap: 0.2em;
	min-width: 0;
}

.sp-mini-teacher__name {
	font-family: var(--sp-studio-font-heading);
	font-size: calc(var(--sp-studio-fs-lead) * var(--sp-studio-scale));
	font-weight: var(--sp-studio-heading-weight);
	letter-spacing: var(--sp-studio-heading-tracking);
	line-height: 1.2;
	text-transform: var(--sp-studio-heading-case);
	font-synthesis: none;
}

.sp-studio a.sp-mini-teacher__name {
	text-decoration: none;
}

.sp-studio a.sp-mini-teacher__name:hover {
	text-decoration: underline;
	text-decoration-color: var(--sp-studio-accent);
}

.sp-mini-teacher__role {
	color: var(--sp-studio-muted);
}

.sp-social {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--sp-studio-s30);
}

.sp-social__link {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	font-size: var(--sp-studio-fs-sm);
}

.sp-facts {
	display: grid;
}

.sp-facts > div {
	display: grid;
	grid-template-columns: minmax(6rem, 2fr) minmax(0, 3fr);
	align-items: baseline;
	gap: var(--sp-studio-s20);
	padding-block: var(--sp-studio-s20);
	border-bottom: 1px solid var(--sp-studio-line);
}

.sp-facts dt {
	color: var(--sp-studio-muted);
}

.sp-facts dd {
	color: var(--sp-studio-fg);
	font-size: var(--sp-studio-fs-sm);
	line-height: 1.45;
}

/* ------------------------------------------------------------ empty states and art */

.sp-studio-empty,
.sp-schedule__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-studio-s20);
	padding-block: var(--sp-studio-s50);
	text-align: center;
}

.sp-rest-art {
	display: block;
	width: 7.5rem;
	height: 7.5rem;
	margin-bottom: var(--sp-studio-s20);
}

.sp-rest-art__lines circle {
	fill: none;
	stroke: var(--sp-art-line, var(--sp-studio-muted));
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.sp-rest-art__sun {
	fill: var(--sp-art-sun, var(--wp--preset--color--secondary, var(--sp-studio-soft)));
}

.sp-schedule__empty-title {
	color: var(--sp-studio-fg);
	font-size: calc(var(--sp-studio-fs-lead) * var(--sp-studio-scale));
}

.sp-schedule__empty-text,
.sp-studio-empty__text {
	max-width: 34ch;
	color: var(--sp-studio-muted);
	text-wrap: pretty;
}

/* ------------------------------------------------------------ editor-only notes (REST previews) */

.sp-studio-placeholder {
	margin-bottom: var(--sp-studio-s30);
	padding: var(--sp-studio-s30);
	border: 1px dashed var(--sp-studio-line);
	border-radius: var(--sp-studio-r-card);
	color: var(--sp-studio-fg);
	font-family: var(--sp-studio-font-body);
}

.sp-studio-placeholder__title {
	margin-bottom: 0.35em;
}

.sp-studio-placeholder__text {
	color: var(--sp-studio-muted);
	font-size: var(--sp-studio-fs-sm);
}

.sp-studio-sample-note {
	margin-bottom: var(--sp-studio-s20);
	color: var(--sp-studio-muted);
	font-family: var(--sp-studio-font-body);
	font-size: var(--sp-studio-fs-xs);
	font-style: italic;
}

/* ------------------------------------------------------------ motion */

@media (prefers-reduced-motion: reduce) {
	.sp-studio *,
	.sp-studio *::before,
	.sp-studio *::after {
		transition-duration: 0ms !important;
		animation-duration: 0ms !important;
	}

	.sp-card:hover .sp-media img,
	.sp-card:hover .sp-media svg,
	.sp-btn--text:hover::after,
	.sp-btn--fill:active {
		transform: none;
	}
}

@media print {
	.sp-studio {
		color: CanvasText;
	}

	.sp-btn,
	.sp-chip {
		display: none !important;
	}
}