/* VC4 blue version: the Partners page hero, set up like the reference site's partners.html (Dave's, block
   "net-hero"): the calm light hero with navy copy on the left and a network of partner nodes joining the VC4 hub
   on the right (drawn by blue/hero-partners.js).
   The network box and labels are the reference's own styles (.netv, .nlab), renamed b-part-net / b-part-lab, with its
   color tokens written out from assets/theme.css + assets/themes/s2c.css. Lato, the site font, stands in for the
   reference's Sora and JetBrains Mono. The box's top offset loses the reference's 76px header, which sits outside the
   hero here. The reference's no-canvas still (media/partners/net-still.svg) is not in its mirror, so without a canvas
   the box simply stays empty. */

/* ---------- Hero copy on the light background: navy text, buttons keep their colors ---------- */
html[data-blue] .b-part-hero .blog-eyebrow { color: #138E96 !important; }
html[data-blue] .b-part-hero .blog-hero-desc { color: rgba(2, 38, 63, .8) !important; }
html[data-blue] .b-part-hero .blog-hero-desc strong { color: #02263F; }
/* the copy keeps to the left so the network has room beside it (reference: .pt-hero .copy{max-width:520px}) */
html[data-blue] .b-part-hero .b-part-copy { max-width: 520px; position: relative; z-index: 2; }

/* ---------- Partner network ---------- */
.b-part-net { position: absolute; top: 0; bottom: 0; right: max(-1%, calc((100vw - 1500px) / 2)); width: min(58%, 820px); z-index: 1; pointer-events: none; }
.b-part-net canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s ease .1s; }
.b-part-net.ready canvas { opacity: 1; }
.b-part-lab { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .6s ease; will-change: transform; }
.b-part-lab.vis { opacity: 1; }
.b-part-lab > span { position: absolute; left: 12px; top: -14px; white-space: nowrap; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(2, 38, 63, .07); border-radius: 11px; padding: 6px 10px 7px; box-shadow: 0 14px 30px -14px rgba(2, 38, 63, .35);
    font: 700 12.5px/1.2 'Lato', sans-serif; color: #02263F; }
.b-part-lab small { display: block; font: 900 9px/1 'Lato', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #138E96; margin-bottom: 4px; }
.b-part-lab.hub small { color: #EB552C; }
.b-part-lab.l > span { left: auto; right: 12px; }
@media (max-width: 1100px) { .b-part-net { width: 56%; right: -6%; } }
@media (max-width: 900px) {
    .b-part-net { position: relative; top: auto; right: auto; width: auto; height: min(80vw, 440px); margin: 24px auto 0; max-width: 600px; }
    /* the hero is a flex column here, so the box takes the full width itself (a block in the reference) */
    html[data-blue] .b-part-net { width: 100%; box-sizing: border-box; }
}
@media (max-width: 560px) {
    .b-part-net { height: min(96vw, 380px); margin-top: 14px; }
    .b-part-lab.opt { display: none; }
    .b-part-lab > span { font-size: 11.5px; }
    .b-part-lab.nl > span { left: auto; right: 12px; }
}

/* ---------- The sections below the hero in the Home rhythm: 56px, 48px on laptops, 40px on phones ---------- */
html[data-blue] body.b-page-part main > :is(.blog-content-area, .blog-light-zone) { padding-top: 56px !important; padding-bottom: 56px !important; }
@media (min-width: 901px) and (max-width: 1600px), (min-width: 901px) and (max-height: 860px) {
    html[data-blue] body.b-page-part main > :is(.blog-content-area, .blog-light-zone) { padding-top: 48px !important; padding-bottom: 48px !important; } }
@media (max-width: 900px) { html[data-blue] body.b-page-part main > :is(.blog-content-area, .blog-light-zone) { padding-top: 40px !important; padding-bottom: 40px !important; } }