/* =====================================================================
   Academy course-card CC rail (archive hover indicator)
   Port of Claude Design "CC Hover v2" — warm paper-tinted glass pill
   that slides into the gap between course cards on hover.
   ===================================================================== */

.academy-course { position: relative; }

/* The card wrapper sits in the grid column; the rails need to spill
   outside it. The grid column wrapper (.academy-col-*) must not clip. */
.academy-course,
.academy-course * { /* no overflow:hidden on the card itself */ }

.academy-cc-rail {
	position: absolute;
	top: 18px;
	bottom: 18px;
	width: 44px;
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: center;
	/* High z so the rail floats above adjacent card headers/footers
	   (academy-overhaul puts those at z:8 within their card context). */
	z-index: 50;
	opacity: 0;
	transition: opacity .26s ease, transform .55s cubic-bezier(.25, 1.3, .35, 1);
}

/* Lift the hovered card's stacking context well above neighbours so the
   rail — which spills into the inter-card gap — paints over them. */
.academy-courses .academy-course:hover { z-index: 60 !important; }
/* -37px places the 44px rail centered in the ~30px Academy column gap
   (15px col-padding × 2), with ~7px of overlap onto each adjacent card,
   matching the visual proportions of the v2 prototype's gap rail. */
.academy-cc-rail--left  { left:  -37px; transform-origin: right center;  transform: translateX( 6px) scale(.92) rotate( 2deg); }
.academy-cc-rail--right { right: -37px; transform-origin: left center;   transform: translateX(-6px) scale(.92) rotate(-2deg); }

.academy-cc-rail__pill {
	position: relative;
	width: 44px;
	/* Solid enough not to ghost neighbour-card colours through the glass,
	   still has a faint top-to-bottom warm fade. */
	background: linear-gradient(180deg, #fffaf4 0%, #fcf4f0 100%);
	border-radius: 26px;
	box-shadow:
		0 1px 0 rgba(255,255,255,.95) inset,
		0 0 0 1px rgba(180, 140, 120, .14),
		0 24px 50px -18px rgba(120, 60, 80, .22),
		0 6px 18px -10px rgba(120, 60, 80, .14);
	padding: 12px 0 14px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	max-height: 100%;
}

/* Hand-set "cc" label */
.academy-cc-rail__label {
	font-family: 'Caveat', 'Manrope', cursive;
	font-weight: 600;
	font-size: 18px;
	line-height: 1;
	color: #a8623c;
	letter-spacing: .5px;
	margin-top: -2px;
}

.academy-cc-rail__sep {
	width: 16px;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(180, 140, 120, .4), transparent);
	margin: 2px 0;
}

.academy-cc-rail__langs { display: flex; flex-direction: column; gap: 7px; align-items: center; }

.academy-cc-rail__lang {
	width: 32px;
	height: 32px;
	border-radius: 11px;
	background: #fff;
	color: #1f2440;
	font-family: 'Manrope', system-ui, sans-serif;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0;
	display: grid;
	place-items: center;
	box-shadow: 0 0 0 1px rgba(20, 20, 50, .04), 0 4px 10px -4px rgba(40, 30, 90, .18);
	position: relative;
	opacity: 0;
	transform: translateY(8px) scale(.6) rotate(-8deg);
	transition: opacity .35s ease, transform .55s cubic-bezier(.25, 1.4, .35, 1);
}

/* Per-language pastel chips (matches v2 palette) */
.academy-cc-rail__lang[data-l="en"] { background: linear-gradient(150deg, #c7e0ff, #aacaff); color: #1f3a8a; }
.academy-cc-rail__lang[data-l="es"] { background: linear-gradient(150deg, #ffd2c2, #ffb19a); color: #8a2a14; }
.academy-cc-rail__lang[data-l="fr"] { background: linear-gradient(150deg, #e4d4ff, #c7afff); color: #4a2e8a; }
.academy-cc-rail__lang[data-l="de"] { background: linear-gradient(150deg, #c6efd6, #9ee0b5); color: #185a32; }
.academy-cc-rail__lang[data-l="pt"] { background: linear-gradient(150deg, #ffe1b2, #ffc880); color: #8a4d0e; }
.academy-cc-rail__lang[data-l="it"] { background: linear-gradient(150deg, #ffd0e0, #ffa8c5); color: #8a1f48; }
.academy-cc-rail__lang[data-l="ja"] { background: linear-gradient(150deg, #fff2a8, #ffe066); color: #7a5a0a; }
.academy-cc-rail__lang[data-l="ko"] { background: linear-gradient(150deg, #e0d0ff, #c0a5ff); color: #44248a; }
.academy-cc-rail__lang[data-l="zh"] { background: linear-gradient(150deg, #ffc4c4, #ff9a9a); color: #8a1717; }
.academy-cc-rail__lang[data-l="nl"] { background: linear-gradient(150deg, #ffe4b8, #ffc78a); color: #8a4509; }
.academy-cc-rail__lang--more {
	background: transparent;
	color: #a8623c;
	font-family: 'Caveat', cursive;
	font-size: 16px;
	font-weight: 600;
	box-shadow: 0 0 0 1.5px rgba(168, 98, 60, .28);
}

/* Reveal — driven by hover on the parent card.
   The JS adds .academy-cc-rail--edge-suppressed to whichever rail should
   remain hidden after choosing the preferred visible side. */
.academy-course:hover .academy-cc-rail:not(.academy-cc-rail--edge-suppressed) {
	opacity: 1;
	transform: translateX(0) scale(1) rotate(0deg);
}
.academy-course:hover .academy-cc-rail:not(.academy-cc-rail--edge-suppressed) .academy-cc-rail__lang {
	opacity: 1;
	transform: translateY(0) scale(1) rotate(0deg);
}

/* Hand-set jitter — alternating ±2° rotation on chips when revealed */
.academy-course:hover .academy-cc-rail:not(.academy-cc-rail--edge-suppressed) .academy-cc-rail__lang:nth-child(2n)   { transform: translateY(0) scale(1) rotate( 2deg); }
.academy-course:hover .academy-cc-rail:not(.academy-cc-rail--edge-suppressed) .academy-cc-rail__lang:nth-child(2n+1) { transform: translateY(0) scale(1) rotate(-2deg); }

/* Stagger */
.academy-cc-rail__lang:nth-child(1) { transition-delay: .06s; }
.academy-cc-rail__lang:nth-child(2) { transition-delay: .12s; }
.academy-cc-rail__lang:nth-child(3) { transition-delay: .18s; }
.academy-cc-rail__lang:nth-child(4) { transition-delay: .24s; }
.academy-cc-rail__lang:nth-child(5) { transition-delay: .30s; }
.academy-cc-rail__lang:nth-child(6) { transition-delay: .36s; }

/* Don't render on touch — hover is meaningless there */
@media (hover: none) {
	.academy-cc-rail { display: none; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	.academy-cc-rail,
	.academy-cc-rail__lang { transition: opacity .15s linear; }
	.academy-course:hover .academy-cc-rail:not(.academy-cc-rail--edge-suppressed),
	.academy-course:hover .academy-cc-rail:not(.academy-cc-rail--edge-suppressed) .academy-cc-rail__lang { transform: none; }
}