/* ====== /knowledge-hub ======
   Redesigned 2026-09-17 on the site's system (no Figma frame). Loads after
   home.css for the .hero pattern. Books 2-up at 768, 4-up at 1024; papers
   2-up at 1024. One shared detail dialog. */

/* ── Hero: the shared pattern + the Ken Burns image beneath ────────── */
.kh-hero {
    isolation: isolate;
    min-height: 0;
    padding-block: 168px var(--space-15);   /* top strip like contact: the image is the "band" */
    background-color: var(--c-primary-dark);
}
.kh-hero::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(180deg, rgba(21, 0, 27, .55) 0%, rgba(21, 0, 27, .8) 60%, rgba(21, 0, 27, 1) 100%),
        url('../../images/knowledge-hub/hero-bg.webp') center / cover no-repeat;
    animation: kh-drift 40s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes kh-drift {
    from { transform: scale(1)    translate(0, 0); }
    to   { transform: scale(1.08) translate(-2%, 1.5%); }
}
.kh-hero__intro { margin-top: var(--space-4); max-width: 700px; font-size: var(--t-h4); line-height: var(--lh-heading); font-weight: var(--fw-regular); color: var(--c-text-muted); }   /* H4, kept after trial 2026-09-17 (KH / Contact / Demo / Minus Hype) */

/* ── Intro ─────────────────────────────────────────────────────────── */
.kh-intro { background: linear-gradient(180deg, var(--primary-900) 0%, var(--primary-800) 100%); }
.kh-intro__grid { display: grid; gap: var(--space-8); }
.kh-intro h2 { font-size: var(--t-h3); }
.kh-intro__body { display: flex; flex-direction: column; gap: var(--space-4); max-width: var(--measure); }
.kh-intro__sign {
    font-family: var(--font-secondary);
    letter-spacing: var(--ls-cta);
    text-transform: uppercase;
    color: var(--c-accent-cyan);
}

/* ── Tabs ──────────────────────────────────────────────────────────── */
.kh-content { background: linear-gradient(180deg, var(--primary-800) 0%, var(--primary-900) 100%); }
.kh-tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-8); border-bottom: 1px solid rgba(0, 0, 0, .35); box-shadow: 0 1px 0 rgba(171, 235, 240, .16); }
.kh-tab {
    padding: var(--space-3) var(--space-4);
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    font-family: var(--font-secondary);
    font-size: var(--t-cta);
    letter-spacing: var(--ls-cta);
    text-transform: uppercase;
    color: var(--c-text-muted);
    transition: color .15s ease, border-color .15s ease;
}
.kh-tab:hover     { color: var(--c-text); }
.kh-tab.is-active { color: var(--c-accent-cyan); border-bottom-color: var(--c-accent-cyan); }

/* Panels cross-fade instead of hard-swapping. */
.kh-panel { opacity: 0; transition: opacity .35s ease; }
.kh-panel.is-shown { opacity: 1; }

/* ── Books ─────────────────────────────────────────────────────────── */
.kh-books-head { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); margin-bottom: var(--space-8); text-align: center; }
/* The image at its real size (v1 showed it up to 420px wide) as a glossy
   image card beside the heading; it was a 64px icon here and unreadable. */
.kh-books-head__img { width: 100%; max-width: 420px; height: auto; border-radius: var(--radius-card); box-shadow: var(--gloss-edge), 0 16px 40px rgba(0, 0, 0, .4); }
@media (min-width: 768px) {
    .kh-books-head { flex-direction: row; gap: var(--space-8); text-align: left; }
    .kh-books-head__img { width: 50%; }
}
.kh-books { display: grid; gap: var(--space-6); align-items: start; }
.kh-card {
    min-width: 0;   /* lets the title's ellipsis engage inside the grid cell */
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    border: 1px solid rgba(171, 235, 240, .16);
    border-radius: var(--radius-card);
    background: var(--gloss-sheen), var(--c-bg-raised);
    box-shadow: var(--gloss-edge), 0 16px 40px rgba(0, 0, 0, .35);
    transition: transform .2s ease, box-shadow .25s ease;
}
.kh-card:hover { transform: translateY(-3px); box-shadow: var(--gloss-edge), 0 24px 48px rgba(0, 0, 0, .4), var(--gloss-glow); }
.kh-card__cover { width: 100%; aspect-ratio: 2 / 3; object-fit: contain; border-radius: 8px; background-color: rgba(0, 0, 0, .18); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35), inset 0 -1px 0 rgba(255, 255, 255, .06); }
.kh-card__title { font-size: var(--t-h5); line-height: var(--lh-heading); font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* "Read more" — text button with a chevron, shared by books and papers */
.kh-more {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: auto; align-self: flex-start;
    font-family: var(--font-secondary);
    font-size: var(--t-p3);
    letter-spacing: var(--ls-cta);
    text-transform: uppercase;
    color: var(--c-accent-cyan);
    transition: color .15s ease, gap .15s ease;
}
.kh-more:hover { color: #fff; gap: 10px; }
.kh-note { margin-top: var(--space-6); font-size: var(--t-p3); }

/* ── Papers: cards ─────────────────────────────────────────────────── */
.kh-papers { display: grid; gap: var(--space-6); align-items: start; }
.kh-paper {
    position: relative;
    display: flex; flex-direction: column; gap: var(--space-3);
    padding: var(--space-6) var(--space-6) var(--space-6) calc(var(--space-6) + 56px);
    border: 1px solid rgba(171, 235, 240, .16);
    border-radius: var(--radius-card);
    background: var(--gloss-sheen), var(--c-bg-raised);
    box-shadow: var(--gloss-edge), 0 16px 40px rgba(0, 0, 0, .35);
    transition: transform .2s ease, box-shadow .25s ease;
}
.kh-paper:hover { transform: translateY(-3px); box-shadow: var(--gloss-edge), 0 24px 48px rgba(0, 0, 0, .4), var(--gloss-glow); }
.kh-paper__num {
    position: absolute; left: var(--space-6); top: var(--space-6);
    font-family: var(--font-secondary);
    font-size: var(--t-h3);
    line-height: 1;
    color: var(--c-accent-cyan);
    opacity: .7;
}
.kh-paper__title { font-size: var(--t-h5); line-height: var(--lh-heading); font-weight: var(--fw-medium); }
.kh-paper__meta {
    font-family: var(--font-secondary);
    font-size: var(--t-p3);
    letter-spacing: .02em;
    color: var(--c-accent-pink);
}
.kh-paper__meta span { margin: 0 6px; opacity: .5; }
.kh-paper__teaser {
    font-size: var(--t-p3);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── Detail dialog ─────────────────────────────────────────────────── */
.kh-dialog {
    width: min(920px, calc(100vw - 2 * var(--page-gutter)));
    max-height: min(85vh, 760px);
    padding: 0; border: 0; border-radius: var(--radius-card);
    background: transparent; color: var(--c-text);
    overflow: visible;
}
.kh-dialog::backdrop { background: rgba(6, 0, 10, .7); backdrop-filter: none; }
/* showModal() makes the page inert but not scroll-locked. Lock it while the
   dialog is open; scrollbar-gutter keeps the space so nothing shifts on
   scrollbar-bearing platforms. overscroll-behavior stops a wheel at the end
   of the dialog's own scroll from chaining to the page.                    */
html:has(.kh-dialog[open]) { overflow: hidden; scrollbar-gutter: stable; }
.kh-dialog[open] { animation: kh-dialog-in .25s ease; }
@keyframes kh-dialog-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.kh-dialog__inner {
    position: relative;
    display: grid; gap: var(--space-6);
    max-height: min(85vh, 760px); overflow: auto; overscroll-behavior: contain;
}
.kh-dialog__close {
    position: absolute; top: var(--space-4); right: var(--space-4); z-index: 1;
    width: 36px; height: 36px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .06); color: var(--c-text);
    box-shadow: var(--gloss-edge);
}
.kh-dialog__close:hover { background: var(--c-accent-cyan); color: var(--c-primary-dark); }
.kh-dialog__cover { width: 160px; max-width: 40%; border-radius: 8px; box-shadow: 0 16px 40px rgba(0, 0, 0, .5); justify-self: start; }
.kh-dialog__text { display: flex; flex-direction: column; gap: var(--space-3); }
.kh-dialog__kind { font-family: var(--font-secondary); font-size: var(--t-p3); letter-spacing: var(--ls-cta); text-transform: uppercase; color: var(--c-accent-cyan); }
.kh-dialog__title { font-size: var(--t-h3); }
.kh-dialog__meta { font-family: var(--font-secondary); font-size: var(--t-p3); color: var(--c-accent-pink); }
.kh-dialog__body { color: var(--c-text-muted); max-width: var(--measure); }

/* ── Tiers ─────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
    .kh-intro__grid { grid-template-columns: 1fr 1fr; }
    .kh-books { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* minmax(0,…): a nowrap title must not widen its column */
    .kh-dialog--has-cover .kh-dialog__inner { grid-template-columns: 220px 1fr; align-items: start; }
    .kh-dialog__cover { width: 100%; max-width: none; }
}
@media (min-width: 1024px) {
    .kh-hero { min-height: 420px; padding-block: var(--space-15); }
    .kh-books  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .kh-papers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Section 2: pull-quote (2026-09-17) ───────────────────────────── */
.kh-intro h2 {
    position: relative;
    padding-left: var(--space-6);
}
.kh-intro h2::before {                       /* the quote's rule, lit */
    content: ''; position: absolute; left: 0; top: .2em; bottom: .2em; width: 3px; border-radius: 2px;
    background: linear-gradient(180deg, var(--c-accent-cyan) 0%, rgba(171, 235, 240, .15) 100%);
    box-shadow: 0 0 12px rgba(171, 235, 240, .45);
}