/* ── Card shape — NO transform/transition on cover blocks (Sensei owns those) ── */
.wp-block-cover.clss-flip-card,
.clss-cover-flip-all .wp-block-cover {
	border-radius: var(--clss-cover-flip-radius, 14px) !important;
	overflow: hidden !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
	cursor: pointer !important;
}

@media (prefers-reduced-motion: no-preference) {
	/* Animate the flip — Sensei applies matrix3d() to these elements, transition makes it smooth */
	/* No hover transform here — that lives on .sensei-lms-flip wrapper to avoid conflict */
	.wp-block-cover.clss-flip-card,
	.clss-cover-flip-all .wp-block-cover {
		transition: transform 0.65s cubic-bezier(0.4, 0.2, 0.2, 1), box-shadow 0.22s ease !important;
	}
}

/* Hover lift on the Sensei wrapper, not the cover block — avoids conflicting with flip transform */
@media (prefers-reduced-motion: no-preference) {
	.sensei-lms-flip:not(.sensei-lms-flip--flipped-back) {
		transition: transform 0.22s ease !important;
	}

	.sensei-lms-flip:not(.sensei-lms-flip--flipped-back):hover {
		transform: translateY(-3px) !important;
	}
}

.sensei-lms-flip:not(.sensei-lms-flip--flipped-back):hover .wp-block-cover {
	box-shadow: 0 8px 24px rgba(0, 125, 163, 0.2) !important;
}

/* ── "Tap to reveal" hint pill — all teal front faces ── */
.clss-cover-flip-all .sensei-lms-flip:not(.sensei-lms-flip--flipped-back) .wp-block-cover:not(.is-light) .wp-block-cover__inner-container::after,
.wp-block-cover.clss-flip-card:not(.is-light) .wp-block-cover__inner-container::after {
	content: var(--clss-cover-flip-hint, "Tap to reveal \2193") !important;
	display: block !important;
	font-size: 0.72rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	color: var(--clss-cover-flip-hint-color, rgba(255, 255, 255, 0.7)) !important;
	margin-top: 1.25rem !important;
	border: 1px solid rgba(255, 255, 255, 0.35) !important;
	padding: 0.2rem 0.75rem !important;
	border-radius: 999px !important;
}

/* Hide hint on back face */
.clss-cover-flip-all .sensei-lms-flip--flipped-back .wp-block-cover__inner-container::after {
	display: none !important;
}

/* ── Back face styling ── */
.sensei-lms-flip--flipped-back .wp-block-cover.is-light {
	border-top: 4px solid var(--clss-cover-flip-back-accent, #007da3) !important;
}

.sensei-lms-flip--flipped-back .wp-block-cover.is-light .wp-block-cover__inner-container {
	text-align: left !important;
	padding: 20px 22px !important;
}

.sensei-lms-flip--flipped-back .wp-block-cover.is-light p {
	text-align: left !important;
	font-size: 1.125rem !important;
	line-height: 1.75 !important;
	color: var(--clss-cover-flip-back-text, #2d4a52) !important;
}

/* ── Sensei flip button — replace bare "Flip Card" link ── */
.sensei-lms-flip__button {
	display: inline-flex !important;
	align-items: center !important;
	gap: 5px !important;
	margin-top: 8px !important;
	font-size: 0.72rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em !important;
	color: var(--clss-cover-flip-btn-color, #007da3) !important;
	background: transparent !important;
	border: 1px solid var(--clss-cover-flip-btn-border, rgba(0, 125, 163, 0.3)) !important;
	border-radius: 999px !important;
	padding: 3px 12px !important;
	cursor: pointer !important;
	text-decoration: none !important;
	transition: background 0.15s ease, border-color 0.15s ease !important;
}

.sensei-lms-flip__button:hover {
	background: rgba(0, 125, 163, 0.06) !important;
	border-color: #007da3 !important;
}

.sensei-lms-flip__button a {
	color: inherit !important;
	text-decoration: none !important;
}

/* Change label based on state */
.sensei-lms-flip:not(.sensei-lms-flip--flipped-back) .sensei-lms-flip__button a::before {
	content: "\21BA\00A0" !important;
}

.sensei-lms-flip--flipped-back .sensei-lms-flip__button a::before {
	content: "\21BA\00A0" !important;
}

/* ── Reduced motion fallback ── */
@media (prefers-reduced-motion: reduce) {
	.wp-block-cover.clss-flip-card,
	.clss-cover-flip-all .wp-block-cover,
	.sensei-lms-flip__button {
		transition: none !important;
		animation: none !important;
	}
}