/**
 * assets/css/hubs.css — the lesson pages (/lecon/…) and the teacher pages
 * (/professeur/…): taxonomy-document_lesson.php, taxonomy-document_teacher.php.
 * Same identity as the home page (tokens and .mh-* pieces in components.css):
 * the summary sits on a page of a school notebook, the documents are sheets.
 * Loaded on those two templates only (inc/lesson-hubs.php).
 */

.mhub { background: var(--mh-bg); color: var(--mh-ink); font-family: var(--mh-body); overflow-x: clip; }
.mhub :where(p) { margin: 0; }
/* The page head is the shared one: .mh-pagehead in components.css. */

/* The summary: a page of the notebook, the margin in red. */
.mhub-summary { padding-bottom: clamp(36px, 5vw, 64px); }
.mhub-summary-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
@media (min-width: 1000px) { .mhub-summary-grid { grid-template-columns: minmax(0, 1fr) 320px; } }
.mhub-sheet { --m: clamp(28px, 4vw, 56px); position: relative; padding-block: clamp(26px, 4vw, 44px); padding-inline: calc(var(--m) + clamp(16px, 2vw, 28px)) clamp(18px, 3vw, 40px); border-radius: 28px; background-color: #fff; background-image: repeating-linear-gradient(to bottom, transparent 0 31px, var(--mh-seyes) 31px 32px); border: 1px solid var(--mh-line); box-shadow: var(--mh-shadow-lg); }
.mhub-sheet::before { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: var(--m); width: 2px; background: var(--mh-margin-red); }
.mhub-draft { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 18px; padding: 12px 14px; border-radius: 14px; background: var(--mh-sun-soft); color: #7A4A00; font-size: .92rem; }
.mhub-essentiel-h { margin: 0 0 10px; font-size: 1.6rem; }
.mhub-essentiel-h .mh-hand { font-weight: 700; }
.mhub-essentiel { font: 600 clamp(1.08rem, 1rem + .4vw, 1.3rem)/1.6 var(--mh-body); color: var(--mh-ink); }
.mhub-essentiel p + p { margin-top: .7em; }
.mhub-prose { margin-top: 28px; padding-top: 22px; border-top: 1px dashed var(--mh-line-2); color: var(--mh-ink-2); line-height: 1.7; }
.mhub-prose h2, .mhub-prose h3 { margin: 26px 0 10px; font: 750 1.25rem/1.25 var(--mh-display); letter-spacing: -.02em; color: var(--mh-ink); }
.mhub-prose h2:first-child, .mhub-prose h3:first-child { margin-top: 0; }
.mhub-prose ul, .mhub-prose ol { margin: 0; padding-inline-start: 1.2em; display: grid; gap: 8px; }
.mhub-prose li::marker { color: var(--mh-coral-bright); }
.mhub-prose strong { color: var(--mh-ink); }
.mhub-prose p + p { margin-top: .8em; }
.mhub-prose .madrasti-math, .mhub-essentiel .madrasti-math { white-space: nowrap; }
.mhub-prose .katex-display, .mhub-essentiel .katex-display { overflow-x: auto; overflow-y: hidden; padding-block: 4px; }

.mhub-side, .mhub-links-row { display: grid; gap: 14px; }
@media (min-width: 1000px) { .mhub-side { position: sticky; top: 104px; } }
.mhub-links-row { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.mhub-card { display: grid; gap: 8px; padding: 20px; border-radius: 22px; background: #fff; border: 1px solid var(--mh-line); text-decoration: none; color: var(--mh-ink); transition: translate .4s var(--mh-ease), box-shadow .4s; }
.mhub-card:hover { translate: 0 -3px; box-shadow: 0 20px 36px -26px rgba(14, 26, 79, .55); color: var(--mh-ink); }
.mhub-card-int { background: var(--mh-navy); border-color: transparent; color: #fff; }
.mhub-card-int:hover { color: #fff; }
.mhub-card-k { display: inline-flex; align-items: center; gap: 8px; font: 700 .72rem/1 var(--mh-body); letter-spacing: .1em; text-transform: uppercase; color: var(--mh-coral-text); }
.mhub-card-int .mhub-card-k { color: #FFB4AC; }
.mhub-card-t { font: 750 1.15rem/1.25 var(--mh-display); }
.mhub-card-s { font-size: .88rem; color: var(--mh-ink-3); }
.mhub-card-int .mhub-card-s { color: var(--mh-on-dark-2); }
.mhub-card-go { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .92rem; color: var(--mh-coral-text); }
.mhub-card-int .mhub-card-go { color: #fff; }
.mhub-ad { padding-bottom: clamp(36px, 5vw, 64px); }

/* The documents, grouped. */
.mhub-docs { padding-bottom: clamp(70px, 9vw, 120px); }
.mhub-docs-h { margin-bottom: 26px; font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.8rem); }
.mhub-group + .mhub-group { margin-top: clamp(36px, 5vw, 56px); }
.mhub-group-h { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; font: 750 1.3rem/1.25 var(--mh-display); letter-spacing: -.02em; color: var(--mh-ink); }
.mhub-group-h a { color: inherit; text-decoration: none; }
.mhub-group-h a:hover { color: var(--mh-coral-text); text-decoration: underline; }
.mhub-group-h span { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; background: #fff; border: 1px solid var(--mh-line); font: 700 .82rem/1 var(--mh-body); color: var(--mh-ink-3); }
.mhub-grid { display: grid; gap: clamp(18px, 2.4vw, 28px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
@media (max-width: 520px) { .mhub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mhub-empty { display: grid; justify-items: start; gap: 16px; padding: 28px; border-radius: 22px; background: #fff; border: 1px dashed var(--mh-line-2); color: var(--mh-ink-2); }