/**
 * Flexibla onlineutbildningar — course category cards.
 * Default state shows only the category title on a softly dimmed image.
 * On hover (pointer) or focus-within (keyboard), the dim deepens and the
 * course list + CTA reveal. On touch devices (hover: none) the body is
 * always visible, since hover is unreliable there.
 */
.course-card {
	overflow: hidden;
	transition: transform 0.3s ease;
	cursor: pointer;
}
.course-card:hover {
	transform: translateY(-4px);
}

.course-card .wp-block-cover__background {
	transition: opacity 0.3s ease, background-color 0.3s ease;
}

.course-card .course-card__title {
	font-family: var(--wp--preset--font-family--ivymode, serif) !important;
	font-weight: 300 !important;
	font-size: clamp(1.25rem, 1.7vw, 1.75rem) !important;
	line-height: 1.15 !important;
	margin: 0 !important;
	padding: 0 !important;
	transition: transform 0.35s ease;
}

.course-card .course-card__reveal {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	width: 100%;
	margin-top: 18px !important;
	padding: 0 !important;
}

.course-card .course-card__list {
	margin: 0 !important;
	line-height: 1.5;
}

.course-card .wp-block-buttons {
	margin: 0 !important;
}

.course-card .wp-block-button__link {
	background-color: var(--wp--preset--color--persimmon) !important;
	color: var(--wp--preset--color--contrast) !important;
	padding: 10px 26px !important;
}

/* Pointer devices: hide the body until the card is hovered/focused */
@media (hover: hover) {
	.course-card .course-card__reveal {
		opacity: 0;
		visibility: hidden;
		transform: translateY(8px);
		transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
	}
	.course-card:hover .course-card__reveal,
	.course-card:focus-within .course-card__reveal {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
	.course-card:hover .wp-block-cover__background,
	.course-card:focus-within .wp-block-cover__background {
		opacity: 0.65;
	}
	.course-card:hover .course-card__title,
	.course-card:focus-within .course-card__title {
		transform: translateY(-4px);
	}
}

/* Touch devices: show everything always (no hover) */
@media (hover: none) {
	.course-card .course-card__reveal {
		opacity: 1;
		visibility: visible;
	}
}