/**
 * Class type tile grid, used by [ql_class_types] and the Classes & Events page
 * template. Built on design-system.css (tokens, .ql-card, .ql-button).
 */

.ql-ds.ql-class-types {
	margin: 0;
}

.ql-class-types .ql-class-types__intro {
	margin: 0 0 var(--ql-space-6);
	color: var(--ql-color-text);
	font-size: max(1.25rem, 20px);
}

/* Section heading above the grid, in the overline style. */
.ql-class-types .ql-class-types__heading {
	margin: 0 0 var(--ql-space-6);
	text-align: center;
}

/* Grid items stretch by default, so every tile in a row is the same height. */
.ql-class-types .ql-class-types__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ql-space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.ql-class-types .ql-class-types__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.ql-class-types .ql-class-types__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Coming soon: muted surface and icon, no shadow or hover, badge where the link would be. */
.ql-class-types .ql-class-types__tile--coming-soon {
	background-color: var(--ql-color-accent-bg);
	border-style: dashed;
	box-shadow: none;
}

.ql-class-types .ql-class-types__tile--coming-soon .ql-card__icon {
	color: var(--ql-color-light);
}

.ql-class-types .ql-class-types__tile--coming-soon .ql-card__icon img {
	filter: grayscale(1);
	opacity: 0.6;
}

.ql-class-types .ql-class-types__badge {
	margin-top: auto;
}

/* "Or" overline and the "View full calendar" button, centered below the grid. */
.ql-class-types .ql-class-types__footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ql-space-5);
	margin: var(--ql-space-7) 0 0;
}