/* Transcend Momence — Schedule Shortcode
   Three layouts: row (default), grid, week.
   Brand-neutral. Override in theme. */

/* Force-hide cards that have the [hidden] attribute. Layout rules below
   set display:grid/flex on .tmom-card, which beats the UA default
   [hidden]{display:none} due to higher specificity. Without this rule,
   pagination's "hidden" cards (pages 2+) still render on initial load,
   and the filter UI's hide/show stops working in the same way. */
.tmom-schedule .tmom-card[hidden],
.tmom-schedule-wrap .tmom-card[hidden] {
	display: none !important;
}

/* ---------- Shared bits ---------- */

.tmom-schedule .tmom-card-title {
	margin: 0 0 4px;
	font-size: 17px;
	font-weight: 600;
}

.tmom-schedule .tmom-card-teacher,
.tmom-schedule .tmom-card-location {
	margin: 0;
	font-size: 14px;
	opacity: 0.75;
}

.tmom-schedule .tmom-day {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	opacity: 0.7;
	display: block;
}

.tmom-schedule .tmom-hour {
	font-size: 22px;
	font-weight: 700;
	display: block;
}

.tmom-schedule .tmom-card.is-cancelled {
	opacity: 0.55;
}

.tmom-schedule .tmom-badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
}

.tmom-schedule .tmom-badge-open { background: color-mix(in srgb, var(--nv-primary-accent) 30%, transparent); color: var(--nv-text-color); }
.tmom-schedule .tmom-badge-low { background: color-mix(in srgb, var(--nv-c-1) 40%, transparent); color: var(--nv-text-color); }
.tmom-schedule .tmom-badge-full { background: color-mix(in srgb, var(--nv-c-2) 30%, transparent); color: var(--nv-text-color); }
.tmom-schedule .tmom-badge-cancelled { background: color-mix(in srgb, var(--nv-text-color) 8%, transparent); color: color-mix(in srgb, var(--nv-text-color) 55%, transparent); }

/* Book button: rendered as .wp-block-button > .wp-block-button__link
   so Neve's Customiser → Buttons settings style it. No overrides here. */

.tmom-error,
.tmom-empty {
	padding: 16px 20px;
	border-radius: 8px;
	background: color-mix(in srgb, var(--nv-text-color) 4%, transparent);
	font-size: 14px;
}

/* ---------- Layout: row (default) ---------- */

.tmom-layout-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.tmom-layout-row .tmom-card {
	display: grid;
	grid-template-columns: 90px 1fr auto;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	border: 1px solid color-mix(in srgb, var(--nv-text-color) 8%, transparent);
	border-radius: 12px;
	background: var(--nv-site-bg);
	transition: border-color 0.15s ease;
}

.tmom-layout-row .tmom-card:hover {
	border-color: color-mix(in srgb, var(--nv-text-color) 18%, transparent);
}

.tmom-layout-row .tmom-card-meta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
}

/* ---------- Layout: grid ---------- */

.tmom-layout-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
}

.tmom-layout-grid .tmom-card {
	display: flex;
	flex-direction: column;
	padding: 24px;
	border: 1px solid color-mix(in srgb, var(--nv-text-color) 8%, transparent);
	border-radius: 16px;
	background: var(--nv-site-bg);
	min-height: 220px;
}

.tmom-layout-grid .tmom-card-time {
	margin-bottom: 12px;
}

.tmom-layout-grid .tmom-card-body {
	flex: 1;
}

.tmom-layout-grid .tmom-card-meta {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid color-mix(in srgb, var(--nv-text-color) 6%, transparent);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

/* ---------- Layout: week ---------- */

.tmom-layout-week .tmom-day-group {
	margin-bottom: 24px;
}

.tmom-layout-week .tmom-day-heading {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 2px solid currentColor;
	margin-bottom: 12px;
}

.tmom-layout-week .tmom-day-heading strong {
	font-size: 18px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.tmom-layout-week .tmom-day-heading span {
	opacity: 0.7;
	font-size: 14px;
}

.tmom-layout-week .tmom-card {
	display: grid;
	grid-template-columns: 80px 1fr auto;
	gap: 16px;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid color-mix(in srgb, var(--nv-text-color) 8%, transparent);
}

.tmom-layout-week .tmom-card:last-child {
	border-bottom: none;
}

.tmom-layout-week .tmom-hour {
	font-size: 16px;
}

.tmom-layout-week .tmom-card-meta {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* ---------- Mobile ---------- */

@media (max-width: 600px) {
	.tmom-layout-row .tmom-card,
	.tmom-layout-week .tmom-card {
		grid-template-columns: 1fr;
		gap: 8px;
	}
	.tmom-layout-row .tmom-card-meta,
	.tmom-layout-week .tmom-card-meta {
		flex-direction: row;
		justify-content: space-between;
	}
}

/* Class description toggle */
.tmom-schedule .tmom-desc-toggle {
	margin-top: 6px;
	background: transparent;
	border: 0;
	padding: 0;
	color: var(--nv-primary-accent);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: underline;
	font-family: inherit;
	letter-spacing: 0.02em;
}

.tmom-schedule .tmom-desc-toggle:hover,
.tmom-schedule .tmom-desc-toggle:focus-visible {
	opacity: 0.8;
	outline: none;
}

.tmom-schedule .tmom-card-description {
	margin-top: 10px;
	font-size: 13px;
	line-height: 1.55;
	/* No colour set — inherits from the card so it matches the rest of the
	   card text exactly (which is whatever the parent section sets). */
}

.tmom-schedule .tmom-card-description p:last-child {
	margin-bottom: 0;
}

.tmom-schedule .tmom-card-description[hidden] {
	display: none;
}

/* Pagination — Load more button + status line below the cards. */
.tmom-schedule-wrap .tmom-pagination {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	margin: 1.5rem 0 0;
}

.tmom-schedule-wrap .tmom-pagination-status {
	margin: 0;
	font-size: 0.85rem;
	opacity: 0.75;
}