/**
 * SCHEDULE
 *
 * Measured: day pills 48 tall, 9 apart. Card 808 wide with 26 side padding.
 * Rows 94 apart — time column at 26, detail at 119 — separated by hairlines.
 * Time is Kaneda Bold 36/1.2 in the accent.
 */

@layer components {

	.schedule__heading {
		margin-block: var(--space-2xs) 0;
		font-size: var(--fs-heading-lg);
		line-height: var(--lh-heading-lg);
		letter-spacing: var(--track-heading-lg);
		font-weight: var(--weight-bold);
		text-transform: uppercase;
	}

	/* ---- Day pills -------------------------------------------------------- */

	.schedule__days {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5625rem;                        /* 9px, measured */
		margin-block-start: var(--space-xl);
	}

	.day-pill {
		min-block-size: 3rem;                  /* 48px */
		padding-inline: 1.25rem;
		background-color: transparent;
		border: 1px solid var(--clr-border);
		border-radius: var(--radius-pill);
		color: var(--clr-text);
		font-family: var(--font-display);
		font-size: 1.125rem;                   /* 18px */
		line-height: 1.2;
		letter-spacing: 0.08em;
		font-weight: var(--weight-bold);
		text-transform: uppercase;
		white-space: nowrap;
		cursor: pointer;
		transition:
			background-color var(--transition-fast),
			border-color var(--transition-fast);
	}

	.day-pill:hover { border-color: var(--clr-accent); }

	.day-pill.is-selected {
		background-color: var(--clr-accent);
		border-color: var(--clr-accent);
	}

	.day-pill:focus-visible {
		outline: 2px solid var(--clr-accent);
		outline-offset: 3px;
	}

	/* ---- Card ------------------------------------------------------------- */

	.schedule__card {
		margin-block-start: var(--space-xl);
		background-color: #0d0d0d;
		border: 1px solid var(--clr-border);
		border-radius: var(--radius-card);
		overflow: hidden;                      /* keeps the hairlines inside the corners */
	}

	.schedule__list {
		margin: 0;
		padding: 0;
		list-style: none;                      /* ordered for meaning, not for numbers */
	}

	.schedule__row {
		display: grid;
		grid-template-columns: 5.8125rem 1fr;  /* 93px to the detail column */
		gap: var(--space-s);
		align-items: start;
		padding: 1.875rem 1.625rem;            /* 30 / 26, measured */
	}

	.schedule__row + .schedule__row {
		border-block-start: 1px solid var(--clr-border);
	}

	.schedule__time {
		margin: 0;
		font-family: var(--font-display);
		font-size: 2.25rem;                    /* 36px */
		line-height: 1.2;
		font-weight: var(--weight-bold);
		color: var(--clr-accent);
		font-variant-numeric: tabular-nums;    /* times should line up down the column */
	}

	.schedule__detail > * { margin: 0; }

	.schedule__title {
		font-size: 1.1875rem;                  /* 19px */
		font-weight: var(--weight-semibold);
		line-height: 1.2;
	}

	.schedule__text {
		margin-block-start: 0.25rem;
		font-size: 0.9375rem;                  /* 15px */
		line-height: 1.4;
		color: var(--clr-text-inverse-subtle);
	}

	/* Sits below every panel, so it is written once rather than per day. */
	.schedule__note {
		margin: 0;
		padding: 1.25rem 1.625rem 1.75rem;
		border-block-start: 1px solid var(--clr-border);
		font-size: 0.875rem;                   /* 14px */
		line-height: 1.4;
		color: var(--clr-text-inverse-subtle);
	}

	@media (max-width: 35.999rem) {
		/* The time sits above its entry rather than squeezing the detail column. */
		.schedule__row {
			grid-template-columns: 1fr;
			gap: var(--space-2xs);
			padding-inline: var(--space-m);
		}
		.schedule__time { font-size: 1.75rem; }
	}
}