/**
 * Stillpoint — class templates (single class, classes archive, style archive).
 *
 * Loaded only on class views. Schedule and card styles live with their blocks
 * (blocks/schedule/style.css, blocks/class-list/style.css). Design tokens only.
 */

/* Back link fallback (core's stillpoint_breadcrumb_back() is used when available). */
.sp-class-back {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
}

.sp-class-back__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	min-block-size: 2.75rem;
	color: var(--wp--custom--color--link);
	text-decoration: none;
}

.sp-class-back__link:hover,
.sp-class-back__link:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Single class: hero ------------------------------------------------------- */

.sp-class-hero__inner {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	align-items: center;
}

.sp-class-hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
	min-inline-size: 0;
	max-inline-size: 42rem;
}

.sp-class-hero__content > * {
	margin: 0;
}

.sp-class-hero__eyebrow a {
	color: inherit;
	text-decoration: none;
}

.sp-class-hero__eyebrow a:hover,
.sp-class-hero__eyebrow a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.sp-class-hero__title {
	font-size: var(--wp--preset--font-size--display);
	overflow-wrap: anywhere;
	hyphens: auto;
	text-wrap: balance;
}

.sp-class-hero__lede {
	font-size: var(--wp--preset--font-size--large);
	line-height: var(--wp--custom--body--line-height);
	color: var(--wp--preset--color--muted);
	max-inline-size: 38ch;
}

.sp-class-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--40);
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.sp-class-hero__meta .sp-meta__item {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	overflow-wrap: anywhere;
}

.sp-class-hero__meta .sp-icon,
.sp-class-next .sp-icon {
	flex: none;
	width: 1.1em;
	height: 1.1em;
	color: var(--wp--custom--color--link);
}

.sp-class-next {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35em 0.6em;
	margin: 0;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 55%, var(--wp--preset--color--hairline));
	border-radius: var(--wp--custom--radius--pill);
	background: color-mix(in srgb, var(--wp--preset--color--accent) 14%, transparent);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
}

.sp-class-next__label {
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: var(--wp--custom--eyebrow--letter-spacing);
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.sp-class-next__time {
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.sp-class-paused {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--muted);
}

.sp-class-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	margin-block-start: var(--wp--preset--spacing--10);
}

.sp-class-hero__cta .sp-icon,
.sp-class-cta .sp-button .sp-icon {
	width: 1em;
	height: 1em;
	margin-inline-start: 0.35em;
}

.sp-class-hero__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	max-block-size: 80vh;
	inline-size: 100%;
	justify-self: center;
	max-inline-size: 34rem;
}

.sp-class-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 900px) {
	.sp-class-hero__inner.has-media {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	}

	.sp-class-hero__inner.has-media .sp-class-hero__media {
		justify-self: end;
	}
}

/* Single class: weekly times + at a glance ---------------------------------- */

.sp-class-glance__inner {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--large);
	background: var(--wp--preset--color--surface);
}

@media (min-width: 800px) {
	.sp-class-glance__inner {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		gap: var(--wp--preset--spacing--60);
	}

	.sp-class-glance__facts {
		padding-inline-start: var(--wp--preset--spacing--60);
		border-inline-start: 1px solid var(--wp--preset--color--hairline);
	}
}

.sp-class-glance__title {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: var(--wp--custom--eyebrow--letter-spacing);
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--wp--custom--color--link);
}

.sp-class-glance__empty {
	margin: 0;
	color: var(--wp--preset--color--muted);
}

.sp-class-times {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-class-times__item {
	display: grid;
	grid-template-columns: minmax(6.5rem, 9rem) minmax(0, 1fr);
	gap: 0.15em var(--wp--preset--spacing--30);
	padding-block: var(--wp--preset--spacing--20);
	border-block-end: 1px solid var(--wp--preset--color--hairline);
}

.sp-class-times__item:first-child {
	padding-block-start: 0;
}

.sp-class-times__item:last-child {
	padding-block-end: 0;
	border-block-end: 0;
}

.sp-class-times__day {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: var(--wp--custom--heading--weight);
	letter-spacing: var(--wp--custom--heading--letter-spacing);
	text-transform: var(--wp--custom--heading--text-transform);
	line-height: 1.2;
}

.sp-class-times__time {
	align-self: center;
	font-variant-numeric: tabular-nums;
}

.sp-class-times__extra {
	grid-column: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	overflow-wrap: anywhere;
}

.sp-class-times__note {
	font-style: italic;
}

@media (max-width: 480px) {
	.sp-class-times__item {
		grid-template-columns: minmax(0, 1fr);
	}

	.sp-class-times__extra {
		grid-column: 1;
	}
}

.sp-class-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.5rem), 1fr));
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	margin: 0;
}

.sp-class-facts__item {
	min-inline-size: 0;
}

.sp-class-facts__label {
	margin: 0 0 0.2em;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: var(--wp--custom--eyebrow--letter-spacing);
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.sp-class-facts__value {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: var(--wp--custom--heading--weight);
	letter-spacing: var(--wp--custom--heading--letter-spacing);
	line-height: 1.25;
	overflow-wrap: anywhere;
}

/* Single class: content and closing call to action ------------------------- */

.sp-class-content {
	padding-block: var(--wp--custom--section--padding);
}

.sp-class-cta {
	padding-block: 0 var(--wp--custom--section--padding);
}

.sp-class-glance + .sp-class-cta {
	padding-block-start: var(--wp--custom--section--padding);
}

.sp-class-cta__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
	border-block: 1px solid var(--wp--preset--color--hairline);
	text-align: center;
}

.sp-class-cta__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--xx-large);
	overflow-wrap: anywhere;
	text-wrap: balance;
}

.sp-class-cta__title em {
	font-style: italic;
	color: var(--wp--custom--color--link);
}

/* More classes -------------------------------------------------------------- */

.sp-class-more__header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	margin-block-end: var(--wp--preset--spacing--50);
}

.sp-class-more__header .sp-section-header {
	margin: 0;
}

.sp-class-more__header .sp-section-header__title,
.sp-class-more__header .sp-section-header__eyebrow {
	margin-block: 0;
}

.sp-class-more__header .sp-section-header__eyebrow {
	margin-block-end: var(--wp--preset--spacing--10);
}

/* Archives ------------------------------------------------------------------ */

/* The schedule follows the page header directly, so halve the gap between them. */
.sp-classes-archive__schedule {
	padding-block-start: calc(var(--wp--custom--section--padding) / 2);
}

.sp-classes-archive__header {
	margin-block-end: var(--wp--preset--spacing--50);
}

.sp-classes-archive__header .sp-section-header__title {
	margin: 0;
}

.sp-classes-archive__schedule .sp-class-back {
	margin-block-end: var(--wp--preset--spacing--40);
}

/* Fallback page header (only when core's stillpoint_page_header() is unavailable). */
.sp-class-page-header .sp-section-header__title {
	margin: 0;
}

.sp-class-page-header .sp-section-header__text {
	max-inline-size: 60ch;
	color: var(--wp--preset--color--muted);
}