/* ========================================================================================
 * ribbon.css - .ribbon, the small "Earn 28 CE credits" tag that opens a course hero
 * (course template, owner direction 2026-09-25; live Mini Residency Toronto's rotated
 * "ribbon-1" row). Desktop: a compact dark tag above the eyebrow. Below 768px it turns
 * into the full-width band the live page shows on phones.
 *
 * Its text normally comes from the course's Anchor Events `credits` label through
 * [tmj_event_label ... tag="p" class="ribbon"], so an empty label renders nothing at all
 * (no empty tag left behind).
 * ======================================================================================== */

.ribbon{
	display:inline-flex;align-items:center;gap:var(--cd-2);align-self:flex-start;
	margin:0;padding:6px var(--cd-3);border-radius:var(--cd-r-sm);
	background:var(--cd-ground-deep);color:var(--cd-white);
	font-size:var(--cd-small);font-weight:600;letter-spacing:.02em;line-height:1.3;
}
.ribbon__prefix{font-weight:400}
.ribbon__value{text-transform:uppercase}

@media (max-width:767px){
	.ribbon{
		align-self:stretch;justify-content:center;margin-inline:calc(var(--cd-5) * -1);
		padding:var(--cd-3) var(--cd-5);border-radius:0;
		background:var(--cd-ink-highlight);box-shadow:var(--cd-shadow-2);
		font-size:var(--cd-h3);font-weight:800;letter-spacing:-.01em;
	}
	.ribbon__prefix{display:none}
}

/* --corner: the diagonal band across a course hero's top-right corner (live Toronto's
 * rotated "28 CE CREDITS" row). Placed as a direct child of .hero (which clips it); desktop
 * only, the live page drops it on phones where the band form above takes over. */
.ribbon--corner{
	position:absolute;z-index:2;top:56px;right:-86px;width:360px;transform:rotate(45deg);
	justify-content:center;padding:var(--cd-3) 0;border-radius:0;
	background:var(--cd-ink-highlight);box-shadow:var(--cd-shadow-2);
	font-size:var(--cd-h4);font-weight:800;letter-spacing:.02em;
}
.ribbon--corner .ribbon__prefix{display:none}
@media (max-width:1099px){.ribbon--corner{display:none}}