/**
 * Schedule page styling. Uses the theme's design-system CSS variables (with
 * fallbacks so it degrades gracefully if the theme changes).
 */
.sbgc-schedule__inner { max-width: 1160px; margin: 0 auto; }
.sbgc-schedule { padding: 8px 0 28px; }

.sbgc-sched-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	align-items: start;
}

.sbgc-meet-card {
	background: var(--surface-card, #fff);
	border: 1px solid var(--border-subtle, #E7DAC6);
	border-radius: var(--radius-lg, 18px);
	box-shadow: var(--shadow-card, 0 14px 34px -18px rgba(33,28,23,0.32));
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.sbgc-meet-card.is-next { border-top: 3px solid var(--clay-500, #C75A37); }

.sbgc-meet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sbgc-meet-date { font: 700 21px/1.15 var(--font-display, sans-serif); color: var(--text-strong, #211C17); letter-spacing: -0.01em; }
.sbgc-meet-time { font: 500 13px/1.4 var(--font-text, sans-serif); color: var(--text-muted, #8C7E6C); margin-top: 3px; }

.sbgc-badge {
	flex: none;
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 12px;
	border-radius: var(--radius-pill, 999px);
	background: var(--clay-100, #F6E1D6);
	color: var(--clay-700, #9C4226);
	font: 700 12px/1 var(--font-mono, monospace);
	letter-spacing: 0.04em;
}

.sbgc-meet-venue { display: flex; align-items: center; gap: 8px; }
.sbgc-meet-venue i { width: 16px; height: 16px; color: var(--clay-500, #C75A37); }
.sbgc-meet-venue span { font: 600 14px/1.2 var(--font-text, sans-serif); color: var(--text-body, #3F372D); }
.sbgc-meet-addr { font: 500 13px/1.4 var(--font-text, sans-serif); color: var(--text-muted, #8C7E6C); margin-top: -8px; padding-left: 24px; }

.sbgc-divider { height: 1px; background: var(--border-subtle, #E7DAC6); }
.sbgc-overline { font: 600 11px/1 var(--font-mono, monospace); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted, #8C7E6C); }

.sbgc-games { display: flex; flex-direction: column; gap: 14px; }
.sbgc-game { display: flex; flex-direction: column; gap: 5px; }
.sbgc-game-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sbgc-game-title { font: 600 15px/1.25 var(--font-text, sans-serif); color: var(--text-strong, #211C17); }
.sbgc-game-desc { font: 500 13px/1.4 var(--font-text, sans-serif); color: var(--text-secondary, #6E6253); }

.sbgc-pill {
	flex: none;
	font: 600 10px/1 var(--font-mono, monospace);
	padding: 4px 8px;
	border-radius: var(--radius-pill, 999px);
	white-space: nowrap;
}
.sbgc-pill--open    { background: var(--forest-100, #E3EDE6); color: var(--forest-600, #3C6F52); }
.sbgc-pill--limited { background: var(--clay-100, #F6E1D6); color: var(--clay-700, #9C4226); }
.sbgc-pill--full    { background: var(--surface-sunken, #EADDC9); color: var(--text-muted, #8C7E6C); }

.sbgc-game-empty {
	display: flex;
	flex-direction: column;
	gap: 7px;
	border: 1px dashed var(--border-default, #D8C6AB);
	border-radius: var(--radius-md, 10px);
	padding: 14px;
	align-items: flex-start;
}

.sbgc-prompt {
	background: var(--surface-raised, #F4ECDF);
	border: 1px solid var(--border-subtle, #E7DAC6);
	border-radius: var(--radius-lg, 18px);
	padding: 24px 28px;
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 24px;
}
.sbgc-prompt__left { display: flex; align-items: center; gap: 14px; }
.sbgc-prompt__chip {
	display: inline-flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; border-radius: var(--radius-md, 10px);
	background: var(--clay-100, #F6E1D6); color: var(--clay-600, #B24A2A);
}
.sbgc-prompt__chip i { width: 20px; height: 20px; }
.sbgc-prompt__title { font: 600 15px/1.2 var(--font-text, sans-serif); color: var(--text-strong, #211C17); }
.sbgc-prompt__sub { font: 500 13px/1.4 var(--font-text, sans-serif); color: var(--text-muted, #8C7E6C); }
.sbgc-accent { font-family: var(--font-mono, monospace); color: var(--clay-600, #B24A2A); }
.sbgc-sched-empty { font: var(--type-body, 400 17px/1.6 sans-serif); color: var(--text-muted, #8C7E6C); }

@media (max-width: 880px) {
	.sbgc-sched-grid { grid-template-columns: 1fr; }
}