/**
 * Gheen Academy — public course page.
 *
 * Loads only on single course pages, alongside the active theme. Everything is
 * scoped under .gha-app so the theme's own styling is untouched.
 *
 * @package GheenAcademy
 */

.gha-facts {
	margin-block: var(--gha-8);
	padding: var(--gha-5);
	background: var(--gha-surface);
	border: 1px solid var(--gha-border);
	border-radius: var(--gha-r);
	box-shadow: var(--gha-shadow-sm);
	font-family: var(--gha-font-sans);
	color: var(--gha-text);
}

.gha-facts__list {
	display: grid;
	gap: var(--gha-4);
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	margin: 0;
}

.gha-facts__item {
	display: flex;
	flex-direction: column;
	gap: var(--gha-1);
	min-inline-size: 0;
}

.gha-facts__label {
	display: flex;
	align-items: center;
	gap: var(--gha-2);
	margin: 0;
	font-size: var(--gha-text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--gha-text-3);
}

.gha-facts__icon {
	display: flex;
	color: var(--gha-text-3);
}

.gha-facts__value {
	margin: 0;
	font-size: var(--gha-text-base);
	font-weight: 550;
	overflow-wrap: break-word;
}

.gha-facts__value a {
	color: var(--gha-primary);
}

.gha-facts__value a:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Trainer block on the public course page --------------------------------- */

.gha-trainers {
	margin-block: var(--gha-8);
	font-family: var(--gha-font-sans);
	color: var(--gha-text);
}

.gha-trainers__heading {
	font-size: var(--gha-text-lg);
	font-weight: 650;
	letter-spacing: -0.01em;
	margin-block-end: var(--gha-4);
}

.gha-trainer {
	display: flex;
	gap: var(--gha-5);
	flex-wrap: wrap;
	padding: var(--gha-5);
	background: var(--gha-surface);
	border: 1px solid var(--gha-border);
	border-radius: var(--gha-r);
	box-shadow: var(--gha-shadow-sm);
}

.gha-trainer + .gha-trainer {
	margin-block-start: var(--gha-4);
}

.gha-trainer__photo img {
	inline-size: 96px;
	block-size: 96px;
	border-radius: var(--gha-r-full);
	object-fit: cover;
}

.gha-trainer__body {
	flex: 1 1 24ch;
	min-inline-size: 0;
}

.gha-trainer__name {
	font-size: var(--gha-text-lg);
	font-weight: 650;
}

.gha-trainer__title {
	font-size: var(--gha-text-sm);
	font-weight: 600;
	color: var(--gha-primary);
	margin-block-end: var(--gha-3);
}

.gha-trainer__bio {
	font-size: var(--gha-text-base);
	color: var(--gha-text-2);
	line-height: 1.65;
}

.gha-trainer__bio p + p {
	margin-block-start: var(--gha-3);
}

.gha-trainer__credentials {
	margin-block-start: var(--gha-3);
	font-size: var(--gha-text-sm);
	color: var(--gha-text-3);
}

/* --- Public course catalogue ---------------------------------------------
   Scoped under .gha-app, and deliberately width-limited rather than
   full-bleed: it sits inside whatever wrapper the theme provides, and a
   catalogue that fights the theme's layout looks worse than one that fits. */

.gha-catalogue {
	max-inline-size: 1200px;
	margin-inline: auto;
	padding: var(--gha-8) var(--gha-5);
	font-family: var(--gha-font-sans);
	color: var(--gha-text);
}

.gha-catalogue__head {
	margin-block-end: var(--gha-6);
}

.gha-catalogue__title {
	margin: 0 0 var(--gha-2);
	font-size: var(--gha-text-2xl);
	font-weight: 650;
	letter-spacing: -0.02em;
}

.gha-catalogue__intro {
	max-inline-size: 60ch;
	color: var(--gha-text-2);
}

.gha-catalogue__count {
	margin: var(--gha-2) 0 0;
	font-size: var(--gha-text-sm);
	color: var(--gha-text-3);
}

.gha-catalogue__filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gha-5);
	padding-block-end: var(--gha-5);
	margin-block-end: var(--gha-6);
	border-block-end: 1px solid var(--gha-border);
}

.gha-filter__label {
	display: block;
	margin-block-end: var(--gha-2);
	font-size: var(--gha-text-sm);
	font-weight: 550;
	color: var(--gha-text-2);
}

.gha-filter__terms {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gha-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.gha-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--gha-1, 4px);
	padding: 6px 12px;
	border: 1px solid var(--gha-border);
	border-radius: 999px;
	background: var(--gha-surface);
	color: var(--gha-text-2);
	font-size: var(--gha-text-sm);
	text-decoration: none;
	transition: border-color 120ms ease, color 120ms ease;
}

.gha-chip:hover,
.gha-chip:focus-visible {
	border-color: var(--gha-primary);
	color: var(--gha-primary);
}

.gha-chip.is-active {
	background: var(--gha-primary);
	border-color: var(--gha-primary);
	color: #fff;
}

.gha-cards {
	display: grid;
	gap: var(--gha-5);
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.gha-card {
	background: var(--gha-surface);
	border: 1px solid var(--gha-border);
	border-radius: var(--gha-r);
	box-shadow: var(--gha-shadow-sm);
	overflow: hidden;
	transition: box-shadow 150ms ease, transform 150ms ease;
}

.gha-card:hover {
	box-shadow: var(--gha-shadow-md, 0 8px 24px rgba(16, 24, 40, 0.1));
	transform: translateY(-2px);
}

.gha-card__link {
	display: flex;
	flex-direction: column;
	block-size: 100%;
	color: inherit;
	text-decoration: none;
}

.gha-card__media {
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--gha-surface-2, #f3f4f7);
	overflow: hidden;
}

.gha-card__image {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

.gha-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	block-size: 100%;
	color: var(--gha-text-3);
}

.gha-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--gha-2);
	flex: 1;
	padding: var(--gha-4);
}

.gha-card__title {
	margin: 0;
	font-size: var(--gha-text-lg, 1.0625rem);
	font-weight: 600;
	line-height: 1.35;
}

.gha-card__excerpt {
	font-size: var(--gha-text-sm);
	color: var(--gha-text-2);
	line-height: 1.55;
}

.gha-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gha-2);
	margin-block-start: auto;
	padding-block-start: var(--gha-2);
}

.gha-card__fact {
	font-size: var(--gha-text-sm);
	color: var(--gha-text-3);
}

.gha-card__fact + .gha-card__fact::before {
	content: "·";
	margin-inline-end: var(--gha-2);
}

.gha-card__foot {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--gha-3);
	padding-block-start: var(--gha-3);
	border-block-start: 1px solid var(--gha-border);
}

.gha-card__price {
	font-weight: 650;
	color: var(--gha-text);
}

.gha-card__more {
	font-size: var(--gha-text-sm);
	color: var(--gha-primary);
	font-weight: 550;
}

.gha-catalogue__empty {
	padding: var(--gha-8);
	text-align: center;
	color: var(--gha-text-3);
	border: 1px dashed var(--gha-border);
	border-radius: var(--gha-r);
}

.gha-catalogue .gha-catalogue__pager {
	margin-block-start: var(--gha-8);
}

.gha-catalogue .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gha-2);
	justify-content: center;
}

.gha-catalogue .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 40px;
	padding: 8px 12px;
	border: 1px solid var(--gha-border);
	border-radius: var(--gha-r-sm);
	background: var(--gha-surface);
	color: var(--gha-text-2);
	text-decoration: none;
}

.gha-catalogue .page-numbers.current {
	background: var(--gha-primary);
	border-color: var(--gha-primary);
	color: #fff;
}

/* Curriculum outline on the public course page ---------------------------- */

.gha-outline {
	margin-block: var(--gha-8);
}

.gha-outline__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--gha-3);
	margin-block-end: var(--gha-4);
}

.gha-outline__heading {
	margin: 0;
	font-size: var(--gha-text-lg);
	font-weight: 700;
}

.gha-outline__summary {
	margin: 0;
	font-size: var(--gha-text-sm);
	color: var(--gha-text-2);
}

.gha-outline__section + .gha-outline__section {
	margin-block-start: var(--gha-5);
}

.gha-outline__section-title {
	margin: 0 0 var(--gha-2);
	font-size: var(--gha-text-sm);
	font-weight: 700;
	color: var(--gha-text-2);
}

.gha-outline__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--gha-border);
	border-radius: var(--gha-r);
	overflow: hidden;
}

.gha-outline__item {
	display: flex;
	align-items: center;
	gap: var(--gha-3);
	padding: var(--gha-3) var(--gha-4);
	background: var(--gha-surface);
}

.gha-outline__item + .gha-outline__item {
	border-block-start: 1px solid var(--gha-border);
}

/* A locked lesson is quieter than an open one: the eye should land on what
   can actually be opened. */
.gha-outline__icon {
	display: inline-flex;
	color: var(--gha-text-3);
}

.gha-outline__item.is-preview .gha-outline__icon {
	color: var(--gha-primary);
}

.gha-outline__title {
	flex: 1 1 auto;
	min-inline-size: 0;
}

.gha-outline__badge {
	display: inline-block;
	margin-inline-start: var(--gha-2);
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--gha-primary);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
}

.gha-outline__meta {
	flex: 0 0 auto;
	font-size: var(--gha-text-sm);
	color: var(--gha-text-3);
	font-variant-numeric: tabular-nums;
}

.gha-outline__note {
	margin-block-start: var(--gha-3);
	font-size: var(--gha-text-sm);
}