/* ============================================================================
   Knowledge Base — editorial category layout (com_content category blog)
   Self-contained + scoped to .kb-page so it renders identically for guests
   (public.css) and logged-in students (app.css). Matches the homepage look:
   Bricolage Grotesque + Hanken Grotesk, cream/ink palette, blue accent.
   ========================================================================== */

.kb-page {
    --kb-cream:   #fbfaf7;
    --kb-paper:   #ffffff;
    --kb-ink:     #0e1320;
    --kb-muted:   #5b6472;
    --kb-line:    #e7e3da;
    --kb-dark:    #0d1424;
    --kb-blue:    #2563eb;
    --kb-blue-d:  #1d4ed8;
    --kb-radius:  18px;
    --kb-shadow:  0 1px 2px rgba(14, 19, 32, .04);
    --kb-shadow-h:0 24px 48px -24px rgba(14, 19, 32, .28);
    --kb-display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
    --kb-body:    "Hanken Grotesk", system-ui, -apple-system, sans-serif;

    background: var(--kb-cream);
    color: var(--kb-ink);
    font-family: var(--kb-body);
    -webkit-font-smoothing: antialiased;
}

/* Kill the default Joomla wrappers' centering/margins so the page bleeds full */
.kb-page * { box-sizing: border-box; }
.kb-page a { text-decoration: none; color: inherit; }

.kb-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 48px);
}

/* ----- Hero header ------------------------------------------------------- */
.kb-hero {
    padding: clamp(48px, 8vw, 104px) 0 clamp(32px, 4vw, 52px);
    border-bottom: 1px solid var(--kb-line);
}
.kb-back {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--kb-muted);
    margin-bottom: clamp(22px, 4vw, 38px);
    transition: color .2s ease, gap .2s ease;
}
.kb-back:hover { color: var(--kb-blue); gap: .75rem; }
.kb-back i { font-size: .72em; }

.kb-kicker {
    display: inline-block;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--kb-blue);
    margin-bottom: 1.1rem;
}
.kb-title {
    font-family: var(--kb-display);
    font-weight: 600;
    font-size: clamp(2.3rem, 5.5vw, 4rem);
    line-height: 1.02;
    letter-spacing: -.022em;
    margin: 0;
    max-width: 18ch;
}
.kb-lead {
    margin: 1.4rem 0 0;
    max-width: 56ch;
    font-size: clamp(1.02rem, 1.6vw, 1.22rem);
    line-height: 1.6;
    color: var(--kb-muted);
}
.kb-meta {
    margin-top: 1.8rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
    font-size: .86rem;
    color: var(--kb-muted);
}
.kb-meta strong { color: var(--kb-ink); font-weight: 700; }

/* ----- Section ----------------------------------------------------------- */
.kb-section { padding: clamp(40px, 6vw, 72px) 0; }
.kb-section + .kb-section { padding-top: 0; }
.kb-eyebrow {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--kb-muted);
}
.kb-section-title {
    font-family: var(--kb-display);
    font-weight: 600;
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    letter-spacing: -.015em;
    margin: .5rem 0 0;
}
.kb-section-head { margin-bottom: clamp(26px, 3.5vw, 40px); }

/* ----- Card grid --------------------------------------------------------- */
.kb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: clamp(16px, 1.6vw, 22px);
}

.kb-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 188px;
    padding: clamp(22px, 2.4vw, 30px);
    background: var(--kb-paper);
    border: 1px solid var(--kb-line);
    border-radius: var(--kb-radius);
    box-shadow: var(--kb-shadow);
    overflow: hidden;
    transition: transform .32s cubic-bezier(.2,.7,.2,1),
                box-shadow .32s ease, border-color .32s ease;
}
.kb-card::after {            /* hairline accent that grows on hover */
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--kb-blue);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .34s cubic-bezier(.2,.7,.2,1);
}
.kb-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--kb-shadow-h);
    border-color: transparent;
}
.kb-card:hover::after { transform: scaleY(1); }

.kb-card-eyebrow {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--kb-blue);
    margin-bottom: .9rem;
}
.kb-card-title {
    font-family: var(--kb-display);
    font-weight: 600;
    font-size: 1.24rem;
    line-height: 1.18;
    letter-spacing: -.012em;
    margin: 0;
}
.kb-card-text {
    margin: .7rem 0 0;
    font-size: .94rem;
    line-height: 1.55;
    color: var(--kb-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.kb-card-foot {
    margin-top: auto;
    padding-top: 1.3rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .84rem;
    font-weight: 600;
    color: var(--kb-ink);
    transition: gap .24s ease, color .24s ease;
}
.kb-card:hover .kb-card-foot { color: var(--kb-blue); gap: .8rem; }
.kb-card-foot i { font-size: .76em; }

/* Subcategory cards: a touch heavier, dark eyebrow chip */
.kb-card--cat .kb-card-eyebrow {
    color: var(--kb-muted);
}
.kb-card--cat {
    background:
        radial-gradient(120% 120% at 100% 0%, rgba(37,99,235,.05) 0%, transparent 42%),
        var(--kb-paper);
}

/* Empty state */
.kb-empty {
    border: 1px dashed var(--kb-line);
    border-radius: var(--kb-radius);
    padding: clamp(30px, 5vw, 56px);
    text-align: center;
    color: var(--kb-muted);
    font-size: 1rem;
}

/* ----- Pagination -------------------------------------------------------- */
.kb-page .com-content-category-blog__navigation { padding: 2rem 0 3rem; }
.kb-page .pagination { display: flex; gap: .4rem; list-style: none; padding: 0; flex-wrap: wrap; }
.kb-page .pagination a, .kb-page .pagination span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; padding: 0 .6rem;
    border: 1px solid var(--kb-line); border-radius: 11px;
    color: var(--kb-ink); font-weight: 600; font-size: .9rem; background: var(--kb-paper);
}
.kb-page .pagination .active span { background: var(--kb-ink); color: #fff; border-color: var(--kb-ink); }

/* ----- Load reveal (staggered) ------------------------------------------ */
@keyframes kb-reveal {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.kb-reveal { opacity: 0; animation: kb-reveal .7s cubic-bezier(.2,.7,.2,1) forwards; }
.kb-grid .kb-reveal:nth-child(1) { animation-delay: .04s; }
.kb-grid .kb-reveal:nth-child(2) { animation-delay: .10s; }
.kb-grid .kb-reveal:nth-child(3) { animation-delay: .16s; }
.kb-grid .kb-reveal:nth-child(4) { animation-delay: .22s; }
.kb-grid .kb-reveal:nth-child(5) { animation-delay: .28s; }
.kb-grid .kb-reveal:nth-child(6) { animation-delay: .34s; }
.kb-grid .kb-reveal:nth-child(n+7) { animation-delay: .40s; }
@media (prefers-reduced-motion: reduce) {
    .kb-reveal { opacity: 1; animation: none; }
    .kb-card, .kb-card::after, .kb-back, .kb-card-foot { transition: none; }
}

/* ----- Logged-in (inside fixed sidebar app shell) ------------------------ */
body.has-sidebar-fixed .kb-page { background: transparent; }
body.has-sidebar-fixed .kb-hero { padding-top: clamp(28px, 4vw, 48px); }