/* ============================================================
   schedule.css — Freedom Con Schedule
   Only what Bootstrap utility classes can't do on their own.
   ============================================================ */

/* ── Brand red ── */
:root {
	--fc-red: #bc2a27;
}

.text-fc-red   { color: var(--fc-red) !important; }
.bg-fc-red     { background-color: var(--fc-red) !important; }
.border-fc-red { border-color: var(--fc-red) !important; }

/* ── 2-col day grid: [10rem date-box] [1fr content] ── */
.sched-day-grid {
	display: grid;
	grid-template-columns: 10rem 1fr;
}

/* ── Large date number ── */
.sched-date-num {
	font-size: clamp(3rem, 8vw, 5.5rem);
	line-height: 1;
}

/* ── Letter spacing helper ── */
.ls-wide { letter-spacing: 0.08em; }

/* ── Event row separator (all but last child) ── */
.sched-event:not(:last-child) {
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── Mobile: date box stacks on top ── */
@media (max-width: 640px) {
	.sched-day-grid {
		grid-template-columns: 1fr;
	}

	/* swap right border → bottom border on the date box */
	.sched-day-grid > :first-child {
		border-right: none !important;
		border-bottom: 1px solid var(--fc-red) !important;
		flex-direction: row;
		gap: 0.75rem;
		justify-content: center;
		padding: 0.75rem 1rem;
	}
}