/*
 * Improv School sections. [up_beginner_classes]: the "I'm New to Improv" class cards.
 * Spec: docs/design/improv-school-2027/spec.md, "4. Class schedule".
 */

.up-beginner-classes {
	max-width: var(--up-content);
	margin: 0 auto;
	padding: 40px 0;
	display: flex;
	flex-direction: column;
	gap: 22px;
	scroll-margin-top: 120px; /* clear Salient's sticky header when jumped to */
}

.up-beginner-classes__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.up-beginner-classes__head a {
	font-size: 17px;
}

/* Seattle about two-thirds, Issaquah one-third; stacked on narrow screens. */
.up-beginner-classes__cards {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	align-items: stretch;
}

.up-ds .up-class-card {
	flex: 1 1 300px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 28px;
	background: var(--up-white);
	border: 2px solid var(--up-black);
	border-radius: var(--up-radius-card);
}

.up-ds .up-class-card--seattle {
	flex: 2 1 540px;
}

.up-class-card__intro {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.up-ds .up-class-card__text {
	margin: 0;
	padding: 0;
	font-size: 18px;
	line-height: 1.45;
	color: var(--up-gray);
}

/* ---- Day picker ---------------------------------------------------------- */

.up-ds .up-day-picker {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 10px;
}

.up-ds .up-day-picker__day {
	appearance: none;
	margin: 0;
	min-height: 72px;
	padding: 8px 6px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	background: var(--up-white);
	color: var(--up-black);
	border: 2px solid var(--up-black);
	border-radius: var(--up-radius-tile);
	font-family: var(--up-font-body);
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	text-align: center;
	cursor: pointer;
	box-shadow: none;
	transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.up-ds .up-day-picker__day:hover {
	background: var(--up-butter);
}

.up-ds .up-day-picker__day[aria-pressed="true"] {
	background: var(--up-red);
	border-color: var(--up-red);
	color: var(--up-white);
}

.up-ds .up-day-picker__name {
	font-weight: 700;
	font-size: 17px;
}

.up-ds .up-day-picker__name abbr {
	text-decoration: none;
	border: 0;
	cursor: inherit;
}

.up-ds .up-day-picker__time {
	font-size: 15px;
	font-weight: 500;
}

/* ---- Options (one per day) ----------------------------------------------- */

.up-class-card__options {
	display: flex;
	flex-direction: column;
	gap: 18px;
	flex: 1;
}

.up-ds .up-class-option {
	display: flex;
	flex-direction: column;
	gap: 18px;
	flex: 1;
}

.up-ds .up-class-option__summary,
.up-ds .up-class-option--empty {
	background: var(--up-butter);
	border-radius: var(--up-radius-tile);
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.up-ds .up-class-option--empty {
	flex: 0 0 auto;
}

.up-ds .up-class-option__when {
	margin: 0;
	padding: 0;
	font-weight: 700;
	font-size: 19px;
	line-height: 1.35;
	color: var(--up-black);
}

.up-ds .up-class-option__line {
	margin: 0;
	padding: 0;
	font-size: 17px;
	line-height: 1.45;
	color: var(--up-gray);
}

.up-ds .up-class-option__line a {
	color: var(--up-gray);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.up-ds .up-class-option__line a:hover {
	color: var(--up-black);
}

/* The button sits at the bottom of the card, so the two cards' buttons line up. */
.up-ds .up-class-card__cta {
	align-self: flex-start;
	margin-top: auto;
}

.up-beginner-classes__assist {
	margin: 0;
}

/* ---- Phones -------------------------------------------------------------- */

@media (max-width: 600px) {
	.up-ds .up-class-card {
		padding: 22px 18px;
	}

	/* Day buttons in rows of three. */
	.up-ds .up-day-picker {
		grid-template-columns: repeat(3, 1fr);
	}

	.up-ds .up-class-card__cta {
		align-self: stretch;
	}
}