/* =========================================================================
   Learning-materials hub  —  /english/<type>/
   Loads after single-material.css and reuses its hero, CTA and level badges.
   ========================================================================= */

.mathub__wrap { gap: var(--sp-4); }

.mathub__title { text-align: start; }
[dir="rtl"] .mathub__title { text-align: right; }

.mathub__count {
	margin: 0;
	font-size: var(--fs-small);
	color: var(--c-muted);
	font-variant-numeric: tabular-nums;
}

.mathub__empty {
	margin: 0;
	padding: var(--sp-4);
	text-align: center;
	color: var(--c-body);
	background: var(--c-bg-soft);
	border-radius: var(--radius);
}

.mathub__group + .mathub__group { margin-top: var(--sp-4); }

.mathub__group-title {
	display: flex;
	align-items: center;
	gap: var(--sp-1);
	margin: 0 0 var(--sp-2);
	font-size: var(--fs-h3);
	font-weight: var(--fw-bold);
	color: var(--c-ink);
}

/* the level badge carries the label, so it is sized up a little here */
.mathub__group-title .mat__level { font-size: 1rem; padding: 7px 16px; }

.mathub__group-n {
	font-size: var(--fs-small);
	font-weight: var(--fw-medium);
	color: var(--c-muted);
	font-variant-numeric: tabular-nums;
}

.mathub__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: var(--sp-1);
}

.mathub__item a {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 100%;
	padding: 13px var(--sp-2);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-sm);
	background: #FFFFFF;
	color: var(--c-ink);
	text-decoration: none;
	font-size: var(--fs-small);
	line-height: 1.4;
	transition: border-color .15s ease, background-color .15s ease;
}

.mathub__item a:hover { border-color: var(--c-primary); background: var(--c-primary-050); }

.mathub__item a:focus-visible {
	outline: 3px solid rgba(21, 130, 255, .35);
	outline-offset: 2px;
}

/* The unit number is ordering information, so it reads as a label rather than
   as part of the title. Fixed width keeps the titles on one axis. */
.mathub__unit {
	flex: 0 0 auto;
	min-width: 28px;
	height: 28px;
	padding: 0 6px;
	border-radius: var(--radius-sm);
	background: var(--c-bg-soft);
	color: var(--c-body);
	font-size: 0.8125rem;
	font-weight: var(--fw-bold);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-variant-numeric: tabular-nums;
}

.mathub__name {
	flex: 1 1 auto;
	font-weight: var(--fw-medium);
	/* English titles on a Hebrew page: isolate so trailing punctuation and
	   parentheses stay where they belong. */
	unicode-bidi: isolate;
}

.mathub__quiz {
	flex: 0 0 auto;
	font-size: 0.75rem;
	color: var(--c-muted);
	white-space: nowrap;
}

.mat__rel-all {
	margin: var(--sp-2) 0 0;
	font-size: var(--fs-small);
}

.mat__rel-all a {
	color: var(--c-primary);
	font-weight: var(--fw-semibold);
	text-decoration: none;
}

.mat__rel-all a:hover { text-decoration: underline; }

@media (max-width: 700px) {
	.mathub__list { grid-template-columns: 1fr; }
	.mathub__quiz { display: none; }   /* the title matters more on a phone */
}

@media (prefers-reduced-motion: reduce) {
	.mathub__item a { transition: none; }
}

/* ---------- cross-links to the other hubs ---------- */

.mathub__others-title {
	margin: 0 0 var(--sp-2);
	font-size: var(--fs-h3);
	font-weight: var(--fw-bold);
	color: var(--c-ink);
}

.mathub__others-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--sp-1);
}

.mathub__others-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-1);
	padding: 15px var(--sp-2);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-sm);
	background: var(--c-bg-soft);
	color: var(--c-ink);
	font-weight: var(--fw-semibold);
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease;
}

.mathub__others-list a:hover { border-color: var(--c-primary); background: var(--c-primary-050); }

.mathub__others-n {
	font-size: var(--fs-small);
	font-weight: var(--fw-medium);
	color: var(--c-muted);
	font-variant-numeric: tabular-nums;
}

/* ---------- level / topic entry points ---------- */

.mathub__facets {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	padding: var(--sp-3);
	background: var(--c-bg-soft);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
}

.mathub__facet-title {
	margin: 0 0 10px;
	font-size: var(--fs-small);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--c-muted);
}

.mathub__chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mathub__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border-radius: var(--radius-pill);
	background: #FFFFFF;
	border: 1px solid var(--c-border);
	color: var(--c-ink);
	text-decoration: none;
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
	line-height: 1.3;
	transition: border-color .15s ease, background-color .15s ease;
}

.mathub__chip:hover { border-color: var(--c-primary); background: var(--c-primary-050); }

.mathub__chip:focus-visible {
	outline: 3px solid rgba(21, 130, 255, .35);
	outline-offset: 2px;
}

/* the three level chips keep the same colour coding used on the cards */
.mathub__chip.is-beginner     { background: #E6F6EC; border-color: #BFE4CD; color: #1C6B3A; }
.mathub__chip.is-intermediate { background: var(--c-blue-4); border-color: #B6D8FA; color: #10508F; }
.mathub__chip.is-advanced     { background: #FDEDD9; border-color: #F3D5AE; color: #8A4B06; }

.mathub__chip-n {
	font-size: 0.75rem;
	font-weight: var(--fw-bold);
	opacity: .65;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 700px) {
	.mathub__facets { padding: var(--sp-2); gap: var(--sp-2); }
}