/* VC4 blue version: the module page heroes (the ten S2C module pages). The calm Team 3 hero of the main pages, with the
   copy on the left in the Home hero style and the module's 3D scene (blue/hero-modules.js) on the right. The scene box
   and its labels use the shared .b-scene styles in blue/blue.css; this file places them and styles the copy and
   buttons. Everything is scoped to .b-mod-hero. */

html[data-blue] .b-mod-hero { position: relative; overflow: hidden; padding: 56px 0 64px; min-height: 560px; box-sizing: border-box; }
@media (max-width: 900px) { html[data-blue] .b-mod-hero { padding: 40px 0 24px; min-height: 0; } }
html[data-blue] .b-mod-hero .b-scene-copy { max-width: 560px; position: relative; z-index: 2; }
html[data-blue] .b-mod-hero .oversize-label { display: block; color: #138E96 !important; }
html[data-blue] .b-mod-hero .section-sub { color: rgba(2, 38, 63, .8) !important; font-size: 16px !important; line-height: 1.7; margin: 0; max-width: 560px; }
html[data-blue] .b-mod-hero .section-sub strong { color: #02263F; }

/* Buttons as on the Home hero: orange first, the teal-to-navy heading gradient second */
html[data-blue] .b-mod-btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
html[data-blue] .b-mbtn { display: inline-flex; align-items: center; gap: 9px; padding: 14px 30px; border-radius: 34px; font: 700 .95rem 'Lato', sans-serif;
    letter-spacing: .03em; color: #fff !important; text-decoration: none; border: 0; transition: background-position .5s ease, transform .25s ease, box-shadow .25s ease; }
html[data-blue] .b-mbtn.primary { background: linear-gradient(120deg, #EF6A3C 0%, #E6532B 50%, #C9441F 100%); background-size: 160% 100%; box-shadow: 0 6px 20px rgba(230, 83, 43, .3); }
html[data-blue] .b-mbtn.ghost { background: linear-gradient(100deg, #138E96 10%, #02263F 95%); background-size: 140% 100%; background-position: 0 50%; box-shadow: 0 12px 28px -12px rgba(2, 38, 63, .45); }
html[data-blue] .b-mbtn:hover { background-position: 100% 50%; transform: translateY(-2px); }
html[data-blue] .b-mbtn .ti { color: #fff; font-size: 1rem; }

/* Scene position: beside the copy on desktop, under it on tablets and phones */
@media (min-width: 901px) { .b-mod-hero .b-mod-scene { top: 0; } }
@media (min-width: 901px) and (max-width: 1100px) { .b-mod-hero .b-mod-scene { right: 0; width: 55%; } }
@media (max-width: 900px) { .b-mod-hero .b-mod-scene { margin-top: 8px; height: min(90vw, 480px); } }
@media (max-width: 560px) { .b-mod-hero .b-mod-scene { height: min(105vw, 430px); } }

/* Labels: the script shifts the active card (--sh) so it stays inside the scene and clear of the copy; the module
   pages' own small .tag pill is cleared here */
.b-mod-hero .b-scene .tag { display: block; background: none; padding: 0; margin: 0; border-radius: 0; font-size: 16px; font-weight: 400; letter-spacing: normal; color: #02263F; }
.b-mod-hero .b-scene .tag .card { translate: var(--sh, 0px) 0; }
.b-mod-hero .b-scene .tag:not(.on) .pin::after { width: 7px; height: 7px; margin-left: -2.75px; }
html[data-blue] body:has(.b-mod-hero) .hero-breadcrumb, html[data-blue] body:has(.b-mod-hero) .hero-breadcrumb * { color: rgba(2, 38, 63, .7) !important; }

/* The rest of the page: sections spaced like Home (56px, 48px on laptops, 40px on phones) */
html[data-blue] body:has(.b-mod-hero) main > section:not(.b-mod-hero) { 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:has(.b-mod-hero) main > section:not(.b-mod-hero) { padding-top: 48px !important; padding-bottom: 48px !important; }
}
@media (max-width: 900px) { html[data-blue] body:has(.b-mod-hero) main > section:not(.b-mod-hero) { padding-top: 40px !important; padding-bottom: 40px !important; } }
html[data-blue] body:has(.b-mod-hero) main h2.b-h2 { margin-bottom: 22px !important; }
/* GIS "what it supports" numbers 01-06 in Lato like the Home step numbers, not the serif */
html[data-blue] body:has(.b-mod-hero) .spec-num { font-family: 'Lato', sans-serif !important; font-style: normal !important; font-weight: 900 !important; letter-spacing: -.02em; }
/* Ericsson page benefit numbers 01-06 in Lato, like the Home step numbers */
html[data-blue] body:has(.b-mod-hero) .benefit-num { font-family: 'Lato', sans-serif !important; font-style: normal !important; font-weight: 900 !important; letter-spacing: -.02em; }
/* GIS: "Why choose the S2C GIS Module" on a real S2C GIS screen (the Los Angeles routing view) under a navy wash, in
   place of the old map picture */
html[data-blue] .b-gis-why { background: linear-gradient(100deg, rgba(2, 38, 63, .94) 0%, rgba(2, 38, 63, .86) 45%, rgba(2, 38, 63, .7) 100%),
    url('images/screen-gis-la-odu4-routing.jpg') center / cover no-repeat, #02263F !important; }
/* "Explore S2C Designer" on the dark section: the site button, in a teal gradient that reads on navy */
html[data-blue] .b-mbtn.b-grad-teal { background: linear-gradient(110deg, #3FC1C9 0%, #138E96 45%, #0B5E66 100%); background-size: 160% 100%; background-position: 0 50%;
    box-shadow: 0 12px 28px -12px rgba(63, 193, 201, .55); }
html[data-blue] .b-mbtn.b-grad-teal:hover { background-position: 100% 50%; }
/* AI + MCP hero: the chat panel pinned in the scene replaces the info cards; it types a question, the dots, then the answer */
.b-mod-scene[data-mod="ai"] .tags { display: none; }
.b-ai-chatbub { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; will-change: transform; }
.b-ai-chatbub .cb { position: absolute; left: 0; bottom: 0; width: 290px; transform: translate(-30%, 0) scale(.9); transform-origin: 30% 100%; opacity: 0;
    background: rgba(255, 255, 255, .96); border: 1px solid rgba(95, 153, 187, .28); border-radius: 18px; padding: 12px 14px 14px;
    box-shadow: 0 22px 44px -18px rgba(2, 38, 63, .45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: opacity .5s ease, transform .6s cubic-bezier(.16, 1, .3, 1); font-family: 'Lato', sans-serif; }
.b-ai-chatbub.in .cb { opacity: 1; transform: translate(-30%, 0) scale(1); }
.b-ai-chatbub .cb::after { content: ""; position: absolute; left: 30%; bottom: -8px; width: 16px; height: 16px; background: #fff; border-right: 1px solid rgba(95, 153, 187, .28); border-bottom: 1px solid rgba(95, 153, 187, .28); transform: translateX(-50%) rotate(45deg); }
.b-ai-chatbub .hd { display: flex; align-items: center; gap: 9px; padding-bottom: 9px; margin-bottom: 10px; border-bottom: 1px solid rgba(95, 153, 187, .2); }
.b-ai-chatbub .hd i { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, #138E96, #02263F); color: #fff; font: 900 11px/26px 'Lato', sans-serif; font-style: normal; text-align: center; }
.b-ai-chatbub .hd b { display: block; font: 900 12.5px/1.2 'Lato', sans-serif; color: #02263F; }
.b-ai-chatbub .hd span { display: block; font: 700 9.5px/1.3 'Lato', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #138E96; }
.b-ai-chatbub .q { margin-left: auto; width: fit-content; max-width: 88%; background: #02263F; color: #fff; border-radius: 13px 13px 4px 13px; padding: 8px 11px; font: 700 12.5px/1.4 'Lato', sans-serif; min-height: 1.4em; }
.b-ai-chatbub .a { margin-top: 8px; width: fit-content; max-width: 92%; min-height: 34px; background: #EAF4F6; color: #02263F; border-radius: 13px 13px 13px 4px; padding: 8px 11px; font: 400 12.5px/1.45 'Lato', sans-serif; }
.b-ai-chatbub .a:empty { visibility: hidden; }
.b-ai-chatbub .a b { font-weight: 900; color: #0B5258; }
.b-ai-chatbub .a.typing { display: flex; gap: 5px; align-items: center; }
.b-ai-chatbub .a.typing i { width: 7px; height: 7px; border-radius: 50%; background: rgba(19, 142, 150, .35); transition: background .15s; }
.b-ai-chatbub .a.typing i.on { background: #138E96; }
@media (max-width: 560px) { .b-ai-chatbub .cb { width: 230px; } }