/* =========================================================================
   Single learning material  —  /english/<type>/<slug>/
   Built on tokens.css. The page chrome is RTL (Hebrew audience) while the
   material itself is LTR English, so spacing uses logical properties and the
   English blocks carry dir="ltr" in the markup.
   ========================================================================= */

.mat { background: var(--c-bg); }

/* ---------- hero ---------- */

.mat__hero {
	background: radial-gradient(1200px 420px at 50% -120px, var(--c-bg-hero-2) 0%, var(--c-bg-hero-1) 55%, var(--c-bg) 100%);
	padding-block: 150px var(--sp-5);
	border-bottom: 1px solid var(--c-border);
}

.mat__hero-inner {
	max-width: 820px;
	margin-inline: auto;
	padding-inline: var(--sp-3);
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}

.mat__crumbs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sp-1);
	font-size: var(--fs-small);
	color: var(--c-muted);
}

.mat__crumbs a { color: var(--c-body); text-decoration: none; }
.mat__crumbs a:hover { color: var(--c-primary); text-decoration: underline; }
.mat__crumb-sep { color: var(--c-muted); }

.mat__tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); }

.mat__level,
.mat__unit {
	display: inline-flex;
	align-items: center;
	border-radius: var(--radius-pill);
	padding: 6px 14px;
	font-size: 0.875rem;
	font-weight: var(--fw-semibold);
	line-height: 1.2;
}

/* Level is the one place this page uses colour to carry meaning, so the three
   levels must be distinguishable at a glance and readable on the tinted hero. */
.mat__level.is-beginner     { background: #E6F6EC; color: #1C6B3A; }
.mat__level.is-intermediate { background: var(--c-blue-4); color: #10508F; }
.mat__level.is-advanced     { background: #FDEDD9; color: #8A4B06; }

.mat__unit { background: #FFFFFF; color: var(--c-body); border: 1px solid var(--c-border); }

.mat__title {
	margin: 0;
	font-size: var(--fs-hero);
	line-height: var(--lh-tight);
	font-weight: var(--fw-bold);
	color: var(--c-ink);
	text-wrap: balance;
	/* The heading is English (dir="ltr" in the markup) sitting on a Hebrew page.
	   Keeping the TEXT ltr but the BLOCK on the page's own axis avoids the
	   zigzag of a left-aligned title above right-aligned Hebrew. */
	text-align: left;
}

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

.mat__kicker {
	margin: 0;
	font-size: 1.0625rem;
	line-height: var(--lh-normal);
	color: var(--c-body);
	max-width: 60ch;
}

/* ---------- layout ---------- */

.mat__wrap {
	max-width: 820px;
	margin-inline: auto;
	padding: var(--sp-5) var(--sp-3) var(--sp-7);
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
}

/* ---------- the material itself ---------- */

.mat__body {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: #2A3255;
	text-align: left;
}

.mat__body > :first-child { margin-top: 0; }
.mat__body > :last-child  { margin-bottom: 0; }
.mat__body p { margin: 0 0 0.9em; }

/* Their source marks every heading as a bold run inside a paragraph rather than
   as a heading element, so a bold-only paragraph is the de-facto subheading.
   Give it room above so the document has visible structure. */
.mat__body p > strong:only-child {
	display: inline-block;
	margin-top: 0.4em;
	color: var(--c-ink);
	font-size: 1.125rem;
}

.mat__body strong { color: var(--c-ink-strong); font-weight: var(--fw-bold); }

.mat__body h2,
.mat__body h3,
.mat__body h4 { margin: 1.6em 0 0.5em; color: var(--c-ink); line-height: 1.25; }

.mat__body h2 {
	font-size: 1.375rem;
	margin-top: 2em;
	padding-top: 1em;
	border-top: 1px solid var(--c-border);
}

.mat__body > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.mat__body h3 { font-size: 1.25rem; }
.mat__body h4 { font-size: 1.0625rem; }

.mat__body ul,
.mat__body ol { margin: 0 0 1em; padding-inline-start: 1.4em; }
.mat__body li { margin-bottom: 0.4em; }

.mat__body blockquote {
	margin: 1.2em 0;
	padding-inline-start: var(--sp-2);
	border-inline-start: 3px solid var(--c-primary);
	color: var(--c-body);
}

.mat__body a { color: var(--c-primary); }

/* Tables in the source can be wide; they scroll in their own box so the page
   body never scrolls sideways. */
.mat__body table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.2em 0;
	font-size: var(--fs-small);
	display: block;
	overflow-x: auto;
}

.mat__body th,
.mat__body td {
	border: 1px solid var(--c-border);
	padding: 10px 12px;
	text-align: left;
	vertical-align: top;
}

.mat__body th { background: var(--c-bg-soft); color: var(--c-ink); font-weight: var(--fw-semibold); }

/* ---------- quiz ---------- */

.mat__quiz {
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	background: var(--c-bg-soft);
	padding: var(--sp-3);
}

.mat__quiz-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-3); }
.mat__quiz-title { margin: 0; font-size: var(--fs-h3); color: var(--c-ink); font-weight: var(--fw-bold); }
.mat__quiz-sub { margin: 0; font-size: var(--fs-small); color: var(--c-body); }

.mat__score {
	margin: 0;
	min-height: 1.4em;
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
	color: var(--c-primary);
	font-variant-numeric: tabular-nums;
}

.mat__qlist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	counter-reset: matq;
}

.mat__q {
	counter-increment: matq;
	background: #FFFFFF;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-sm);
	padding: var(--sp-2);
}

.mat__q-text {
	margin: 0 0 var(--sp-2);
	font-weight: var(--fw-semibold);
	color: var(--c-ink);
	line-height: 1.5;
	text-align: left;
}

.mat__q-text::before { content: counter(matq) ". "; color: var(--c-muted); font-weight: var(--fw-bold); }

/* Two columns, not auto-fit: these questions have four options, and auto-fit
   put three on one row and orphaned the fourth on its own. */
.mat__opts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-1);
	/* The options are labelled A-D and must read in that order. On the Hebrew
	   (RTL) page the grid otherwise places A on the right and B on its left,
	   so the lettering runs backwards. The buttons keep their own dir="ltr". */
	direction: ltr;
}

.mat__opt {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
	text-align: left;
	background: #FFFFFF;
	border: 1.5px solid var(--c-border);
	border-radius: var(--radius-sm);
	padding: 11px 13px;
	font: inherit;
	font-size: var(--fs-small);
	color: #2A3255;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}

.mat__opt:hover:not([disabled]) { border-color: var(--c-primary); background: var(--c-primary-050); }
.mat__opt:focus-visible { outline: 3px solid rgba(21, 130, 255, .35); outline-offset: 2px; }
.mat__opt[disabled] { cursor: default; }

.mat__opt-key {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--c-bg-soft);
	color: var(--c-body);
	font-size: 0.75rem;
	font-weight: var(--fw-bold);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.mat__opt-label { flex: 1 1 auto; }

.mat__opt.is-correct { border-color: #3FA96A; background: #EEF9F2; color: #1C6B3A; }
.mat__opt.is-correct .mat__opt-key { background: #3FA96A; color: #FFFFFF; }
.mat__opt.is-wrong { border-color: #E0656A; background: #FDF0F0; color: #8E2B2F; }
.mat__opt.is-wrong .mat__opt-key { background: #E0656A; color: #FFFFFF; }
.mat__opt.is-dim { opacity: .55; }

.mat__verdict { margin: var(--sp-1) 0 0; font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.mat__verdict.is-ok { color: #1C6B3A; }
.mat__verdict.is-no { color: #8E2B2F; }

/* ---------- CTA ---------- */

.mat__cta {
	background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-600) 100%);
	border-radius: var(--radius);
	padding: var(--sp-4) var(--sp-3);
	color: #FFFFFF;
	text-align: center;
	box-shadow: var(--shadow-card);
}

.mat__cta-title {
	margin: 0 0 var(--sp-1);
	font-size: var(--fs-h3);
	font-weight: var(--fw-bold);
	color: #FFFFFF;
	text-wrap: balance;
}

.mat__cta-text {
	margin: 0 auto var(--sp-3);
	max-width: 52ch;
	line-height: var(--lh-normal);
	color: rgba(255, 255, 255, .92);
}

.mat__cta-btn {
	display: inline-block;
	background: #FFFFFF;
	color: var(--c-primary);
	font-weight: var(--fw-bold);
	text-decoration: none;
	padding: 14px 30px;
	border-radius: var(--radius-pill);
	box-shadow: 0 6px 18px rgba(10, 40, 105, .18);
	transition: transform .15s ease;
}

.mat__cta-btn:hover { transform: translateY(-1px); }
.mat__cta-btn:focus-visible { outline: 3px solid rgba(255, 255, 255, .7); outline-offset: 3px; }

/* ---------- related ---------- */

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

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

.mat__rel-item a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-1);
	padding: 14px 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);
	font-weight: var(--fw-medium);
	line-height: 1.4;
	transition: border-color .15s ease, background-color .15s ease;
}

.mat__rel-item a:hover { border-color: var(--c-primary); background: var(--c-primary-050); }
.mat__rel-name { flex: 1 1 auto; }
.mat__rel-go { flex: 0 0 auto; color: var(--c-primary); font-size: 1.1rem; }

/* in RTL the chevron should point the other way */
[dir="rtl"] .mat__rel-go { transform: scaleX(-1); }

/* ---------- small screens ---------- */

@media (max-width: 700px) {
	.mat__hero { padding-block: 120px var(--sp-4); }
	.mat__wrap { padding-block: var(--sp-4) var(--sp-6); gap: var(--sp-4); }
	.mat__quiz { padding: var(--sp-2); }
	.mat__opts { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.mat__opt,
	.mat__cta-btn,
	.mat__rel-item a { transition: none; }
	.mat__cta-btn:hover { transform: none; }
}

/* ---------- vocabulary + discussion (articles, business articles) ---------- */

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

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

.mat__v {
	border: 1px solid var(--c-border);
	border-radius: var(--radius-sm);
	background: #FFFFFF;
	padding: var(--sp-2);
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* The row reads right-to-left (Hebrew page) but holds mostly English tokens,
   so each token is isolated in the markup and the row itself is laid out
   left-to-right: the English word must come first, the way a dictionary
   entry reads. */
.mat__v-head {
	direction: ltr;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
}

.mat__v-word {
	font-weight: var(--fw-bold);
	font-size: 1.0625rem;
	color: var(--c-ink);
}

.mat__v-ipa {
	font-size: 0.8125rem;
	color: var(--c-muted);
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

.mat__v-type {
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-weight: var(--fw-semibold);
	color: var(--c-body);
	background: var(--c-bg-soft);
	border-radius: var(--radius-pill);
	padding: 2px 9px;
}

/* the Hebrew gloss is the one thing a Hebrew reader scans for - give it the
   accent and push it to the far end of the row */
.mat__v-he {
	margin-inline-start: auto;
	direction: rtl;
	font-weight: var(--fw-semibold);
	color: var(--c-primary);
	font-size: 1rem;
}

.mat__v-meaning {
	margin: 0;
	font-size: var(--fs-small);
	line-height: 1.55;
	color: #2A3255;
	text-align: left;
}

.mat__v-ex {
	margin: 0;
	padding-inline-start: 10px;
	border-inline-start: 2px solid var(--c-border);
	font-size: var(--fs-small);
	line-height: 1.5;
	color: var(--c-body);
	font-style: italic;
	text-align: left;
}

.mat__disc-sub {
	margin: -4px 0 var(--sp-2);
	font-size: var(--fs-small);
	color: var(--c-body);
}

.mat__dlist {
	margin: 0;
	padding-inline-start: 1.3em;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mat__dlist li {
	font-size: 1rem;
	line-height: 1.55;
	color: #2A3255;
	text-align: left;
}

@media (max-width: 700px) {
	.mat__vlist { grid-template-columns: 1fr; }
}