/*
 * Course landing pages (face-to-face) – fixes shared by all their templates (2026-10-26).
 * Spec: docs/superpowers/specs/2026-10-26-lp-sidebar-badges-arabic-design.md
 */

/* Share: LinkedIn, Facebook, Twitter centered under the sidebar box (.sticky-content is 85% of the column) */
.social-icons.tki-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	max-width: 85%;
}
.social-icons.tki-share .sharee {
	top: 0;
	padding: 0 6px 0 0;
}
.social-icons.tki-share a {
	display: inline-block;
	line-height: 0;
}

/* "Course available on demand, for groups of 10+": the date list (47px in) ends where the sidebar box ends */
@media (min-width: 968px) {
	.course-date {
		max-width: calc(85% - 47px);
	}
}

/* Hero without a years image of its own (desktop only – on phones custom-styles.css centres every hero .yearslogo
   under the title, as on the other course pages): */
@media (min-width: 1036px) {
	/* face-to-face: where PM London has it – starting at the middle of the hero, 80px above the title */
	.tki-hero-title {
		display: flex;
		align-items: flex-start;
	}
	.tki-hero-title > h1 {
		flex: 0 0 50%;
		max-width: 50%;
	}
	.tki-hero-title .tki-years {
		flex: 0 0 auto;
		width: 210px;
		height: auto;
		margin-top: -80px;
	}
	/* live: their hero text areas have different widths, so sizes are fixed, not %: the title wraps within 600px (half
	   of the standard 1170px container, as on live-certified-kpi-professional-emea) and the image follows it 30px after –
	   never over the title, mirrored by itself on Arabic (RTL) pages */
	.tki-hero-title.tki-hero-live > h1 {
		flex: 0 0 600px;
		max-width: 600px;
	}
	.tki-hero-title.tki-hero-live .tki-years {
		margin-inline-start: 30px;
	}
}

@media (max-width: 1035px) {
	.tki-hero-title .tki-years {
		display: none !important;
	}
}