/**
 * Homepage Neural Intelligence section — distillation of the Intelligence Hub,
 * rendered at build time from api/intelligence.json into
 * components/intelligence-section.html. np-hpi- prefix.
 *
 * Sticky-stack contract: this section sits at z-index 15 over the homepage's
 * sticky wrappers — background must stay opaque and spacing must be padding,
 * never margin (margins open gaps the sticky sections bleed through).
 */

.np-hpi {
    position: relative;
    z-index: 15;
    width: 100%;
    background: #F9FAFB;
    border-top: 1px solid #E5E7EB;
    padding: clamp(80px, 9vw, 120px) 0;
    color: #111827;
    font-family: 'Plus Jakarta Sans', 'Open Sans', system-ui, sans-serif;
}

.np-hpi-inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 48px;
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.np-hpi a:focus-visible {
    outline: 2px solid #3C1361;
    outline-offset: 2px;
}

/* ---------- type accent system (mirrors the hub) ---------- */

.np-hpi [data-type="article"] { --np-hpi-c: #D97706; --np-hpi-t: rgba(217, 119, 6, 0.07); --np-hpi-g: '✶'; }
.np-hpi [data-type="lab"] { --np-hpi-c: #6E56CF; --np-hpi-t: rgba(110, 86, 207, 0.07); --np-hpi-g: '⌖'; }
.np-hpi [data-type="release"] { --np-hpi-c: #2BA89E; --np-hpi-t: rgba(43, 168, 158, 0.08); --np-hpi-g: '⇡'; }
.np-hpi [data-type="casestudy"] { --np-hpi-c: #3C1361; --np-hpi-t: rgba(60, 19, 97, 0.06); --np-hpi-g: '▣'; }
.np-hpi [data-type="press"] { --np-hpi-c: #111827; --np-hpi-t: rgba(17, 24, 39, 0.05); --np-hpi-g: '✦'; }
.np-hpi [data-type="testimonial"] { --np-hpi-c: #EA580C; --np-hpi-t: rgba(234, 88, 12, 0.06); --np-hpi-g: '❝'; }

/* ---------- header ---------- */

.np-hpi-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
}

.np-hpi-head-text {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.np-hpi-kicker {
    margin: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: 3px;
    color: #D97706;
}

.np-hpi-h2 {
    margin: 0;
    font-size: clamp(34px, 4.2vw, 56px);
    line-height: 1.04;
    font-weight: 200;
    letter-spacing: -1.8px;
    color: #111827;
}

.np-hpi-h2 span { font-weight: 500; }

.np-hpi-open {
    flex-shrink: 0;
    font-size: 15px;
    font-weight: 500;
    color: #D97706;
    text-decoration: none;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(217, 119, 6, 0.4);
    transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.np-hpi-open:hover { border-color: #D97706; }

/* ---------- query line ---------- */

.np-hpi-query {
    margin: 0;
    display: flex;
    gap: 10px;
    align-items: baseline;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12.5px;
    min-width: 0;
}

.np-hpi-query-prompt { color: #D97706; }

.np-hpi-query-text {
    color: #9CA3AF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

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

.np-hpi-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 24px;
    align-items: stretch;
}

/* ---------- featured card ---------- */

.np-hpi-featured {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: #111827;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.np-hpi-featured:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(17, 24, 39, 0.10), 0 10px 10px -5px rgba(17, 24, 39, 0.04);
    border-color: #6B7280;
}

.np-hpi-featured-media {
    aspect-ratio: 21 / 9;
    border-bottom: 1px solid #F3F4F6;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.np-hpi-featured-media img,
.np-hpi-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.np-hpi-tint { background: var(--np-hpi-t); }

.np-hpi-glyph::before {
    content: var(--np-hpi-g);
    color: var(--np-hpi-c);
}

.np-hpi-glyph--lg::before { font-size: 44px; opacity: 0.28; }
.np-hpi-glyph--sm::before { font-size: 20px; opacity: 0.32; }

.np-hpi-featured-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 28px 32px 30px;
    flex: 1;
}

.np-hpi-featured-type {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 1.8px;
    color: var(--np-hpi-c);
}

.np-hpi-featured-title {
    font-size: 25px;
    line-height: 1.22;
    font-weight: 300;
    letter-spacing: -0.5px;
    text-wrap: balance;
}

.np-hpi-featured-excerpt {
    font-size: 14.5px;
    line-height: 1.65;
    font-weight: 300;
    color: #6B7280;
    text-wrap: pretty;
}

.np-hpi-featured-meta {
    margin-top: auto;
    padding-top: 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    color: #9CA3AF;
}

/* ---------- recent rows + index strip ---------- */

.np-hpi-side {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 8px 28px;
}

.np-hpi-row {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 18px;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid #F3F4F6;
    text-decoration: none;
}

.np-hpi-thumb {
    width: 84px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.np-hpi-row-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.np-hpi-row-type {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    letter-spacing: 1.6px;
    color: var(--np-hpi-c);
}

.np-hpi-row-title {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: #111827;
    letter-spacing: -0.2px;
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.np-hpi-row:hover .np-hpi-row-title { color: #D97706; }

.np-hpi-row-meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: #9CA3AF;
}

.np-hpi-index {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    padding: 18px 0 16px;
    align-items: baseline;
}

.np-hpi-index-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    letter-spacing: 1.8px;
    color: #9CA3AF;
}

.np-hpi-index-link {
    display: flex;
    gap: 7px;
    align-items: baseline;
    text-decoration: none;
}

.np-hpi-index-count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    color: var(--np-hpi-c);
}

.np-hpi-index-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    color: #6B7280;
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.np-hpi-index-link:hover .np-hpi-index-name { color: #111827; }

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
    .np-hpi-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .np-hpi-inner {
        padding: 0 20px;
        gap: 28px;
    }

    .np-hpi-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .np-hpi-h2 { letter-spacing: -1px; }

    .np-hpi-featured-body { padding: 22px 24px 24px; }

    .np-hpi-side { padding: 4px 20px; }

    .np-hpi-row {
        grid-template-columns: 64px 1fr;
        gap: 14px;
    }

    .np-hpi-thumb {
        width: 64px;
        height: 46px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .np-hpi *,
    .np-hpi *::before,
    .np-hpi *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }

    .np-hpi-featured:hover { transform: none; }
}