/* C Vision hub — tokens + page chrome. */
:root {
    --hub-bg: #0D0D0D;
    --hub-blue: #286DD9;
    --hub-navy: #0C182E;
    --hub-container: 1296px;
    --hub-gutter: 24px;
}
html { scroll-behavior: smooth; overflow-x: clip; }
body.bp-hub-landing {
    margin: 0;
    background: var(--hub-bg);
    color: #fff;
    font-family: 'Kanit', sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    overflow-x: clip;
}
/* html carries overflow-x:clip, so the scroll lock must sit on html too. */
html.bp-modal-open, body.bp-hub-landing.bp-modal-open { overflow: hidden; }
.bp-hub-landing .screen-reader-text {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.bp-hub { display: block; }
.bp-hub-container {
    max-width: var(--hub-container);
    margin: 0 auto;
    padding: 0 var(--hub-gutter);
    box-sizing: content-box;
}
.bp-hub img { max-width: 100%; }
.bp-hub-title {
    font-weight: 700;
    font-size: clamp(1.75rem, 2.2vw, 2.5rem);
    letter-spacing: -0.01em;
    margin: 0;
    text-transform: uppercase;
}
/* Spray glow helper: add .bp-hub-spray--left/right on a positioned section. */
.bp-hub-spray { position: relative; isolation: isolate; overflow-x: clip; }
.bp-hub-spray::before {
    content: ''; position: absolute; z-index: -1; pointer-events: none;
    top: 10%; width: 55vw; height: 80%;
    background:
        radial-gradient(closest-side, rgba(40, 109, 217, 0.85), rgba(40, 109, 217, 0) 100%),
        radial-gradient(closest-side, rgba(40, 109, 217, 0.35), rgba(40, 109, 217, 0) 100%);
    background-size: 70% 80%, 100% 100%;
    background-repeat: no-repeat;
    background-position: center, center;
    filter: blur(40px);
}
.bp-hub-spray--right::before { right: -25vw; }
.bp-hub-spray--left::before { left: -25vw; }
[id] { scroll-margin-top: 90px; }

/* YouTube modal (partials/video-modal.php) — hub + archive pages. */
.bp-hub-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; }
.bp-hub-modal[hidden] { display: none; }
.bp-hub-modal-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; }
.bp-hub-modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.85); }
.bp-hub-modal-frame { position: relative; width: min(1100px, 92vw); aspect-ratio: 16 / 9; }
.bp-hub-modal-video, .bp-hub-modal-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.bp-hub-modal-close { position: absolute; top: -44px; right: 0; background: none; border: 0; color: #fff; font-size: 36px; cursor: pointer; line-height: 1; }