/* =============================================================================
   Quasar Glass Complete (quasar-glass-complete.html)
   -----------------------------------------------------------------------------
   The page is the Safiery product-page layout (store.css .pdp / .pdp-rail /
   .pdp-story) plus the shared Glass bundle configurator (quasar-bundle-page.css).
   This file only adds what that layout does not already have: the film's SVG
   type and line styles, the static system diagram, and the page's own sizing
   of the film player. Every class is .qgc-* so nothing leaks into the store.
   ========================================================================== */

.qgc-page {
  --qb-data: #22d3ee;
  --qb-power: #f5a142;
  --qb-power-hi: #ffe0b0;
}

/* ---- the film player ------------------------------------------------------ */
/* Same .pdp-journey player every Safiery film uses, a little wider: this one
   draws a whole electrical system, and its labels need the width. */
/* Desktop only: store.css stacks .pdp-journey to one column at 850px and below,
   and a two-column override here would outrank it. */
@media (min-width: 851px) {
  .pdp-journey.pdp-journey-complete { grid-template-columns: minmax(0, 1fr) minmax(0, 600px); }
  .pdp-journey-complete .pdp-journey-player { max-width: 600px; }
  .pdp-journey-complete .pdp-journey-stage { height: clamp(540px, calc(100svh - 260px), 780px); }
}
.pdp-journey-complete .pdp-journey-poster img { width: min(92%, 460px); height: auto; margin: 0; border-radius: 14px; }
.pdp-journey-complete .pdp-journey-stage.is-live .pdp-journey-poster { display: none; }
/* Phones and tablets: the player takes the column's width, and the stage the
   portrait proportion the film's phone composition is drawn for. */
@media (max-width: 850px) {
  .pdp-journey-complete .pdp-journey-player { max-width: 600px; width: 100%; justify-self: stretch; }
  .pdp-journey-complete .pdp-journey-stage { height: auto; aspect-ratio: 400 / 620; max-height: 86svh; }
}
.qgc-film-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }

/* SVG text: the store's own type stack, sized in scene units by the module */
.qgc-film-svg text { font-family: var(--body); }
.qgc-t-label { fill: var(--text-dim); font-weight: 500; }
.qgc-t-strong { fill: var(--text); font-weight: 600; }
.qgc-t-zone { fill: #f2a097; font-family: var(--mono) !important; letter-spacing: .03em; }
.qgc-t-read { fill: #7ee2a8; font-family: var(--mono) !important; font-weight: 500; }
.qgc-t-legend { fill: var(--text-dim); }
.qgc-t-lineup { fill: var(--text); font-weight: 600; }
.qgc-t-end { fill: var(--text); font-family: var(--display) !important; font-weight: 700; letter-spacing: -.02em; }
.qgc-t-cta { fill: var(--quasar, #38bdf8); font-weight: 600; }
/* inside the Glass screen (its 384-unit face) */
.qgc-t-value { fill: #f3f7fc; font-weight: 500; }
.qgc-t-tile { fill: #dfe8f5; }
.qgc-t-sub { fill: #9fb3cc; font-family: var(--mono) !important; }
.qgc-t-bar { fill: #c9d6ea; letter-spacing: .06em; }
.qgc-t-rest { fill: #e8f0fb; font-weight: 300; }

/* power: a glow under a solid cable under one travelling highlight. Complete
   in themselves (the film does not rely on another stylesheet's classes). */
.qgc-power-glow { fill: none; stroke: var(--qb-power); stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
.qgc-power-base { fill: none; stroke: var(--qb-power); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.qgc-power-hi { fill: none; stroke: var(--qb-power-hi); stroke-width: 4.5; stroke-linecap: round; }
.qgc-legend-power { fill: none; stroke: var(--qb-power); stroke-width: 4.5; stroke-linecap: round; }
/* the charger's own AC lead, drawn as a cable inside the 240V zone */
.qgc-ac-lead { fill: none; stroke: #6f7782; stroke-width: 4; stroke-linecap: round; }
.qgc-ac-lead.is-live { stroke: #c9a27a; }
/* data: dotted cyan, with a brighter packet travelling the path */
.qgc-data, .qgc-legend-data { fill: none; stroke: var(--qb-data); stroke-width: 3; stroke-linecap: round; stroke-dasharray: .1 9; }
.qgc-packet { fill: #b9f3ff; stroke: var(--qb-data); stroke-width: 2; }

/* ---- hero gallery -------------------------------------------------------- */
/* The bundle has no single studio photograph: its gallery image is the film's
   own lineup frame, drawn on the film's dark ground rather than the white
   photo stage product shots use. */
.qgc-page .qgc-hero img { background: #0c1524; filter: none; }

/* ---- what comes in the bundle ---------------------------------------------- */
/* The Victron parts have no product page of their own to link to, so their
   rows are plain rows: same look, no hover lift. */
.qgc-page .pdp-complete-row.qgc-row-static { cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .qgc-page .pdp-complete-row.qgc-row-static:hover { border-color: var(--line); background: var(--surface); transform: none; }
}

/* ---- how it fits together: a plain-language diagram ------------------------ */
.qgc-sys { display: grid; gap: 16px; }
.qgc-sys-lane { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 20px 22px 22px; }
.qgc-sys-title { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; margin: 0 0 16px; }
.qgc-key { display: inline-block; width: 38px; height: 0; border-top: 4px solid var(--qb-power); border-radius: 2px; }
.qgc-key-data { border-top: 3px dotted var(--qb-data); }
.qgc-sys-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 14px 30px; align-items: stretch; }
.qgc-sys-col { position: relative; display: grid; gap: 10px; align-content: start; }
/* the solid orange run from one stage to the next */
.qgc-sys-col + .qgc-sys-col::before { content: ""; position: absolute; left: -24px; top: 50%; width: 18px; border-top: 4px solid var(--qb-power); border-radius: 2px; }
.qgc-sys-step { font: 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-mut); }
.qgc-sys-col ul, .qgc-sys-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.qgc-sys-col li, .qgc-sys-node, .qgc-sys-links li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 11px 14px; border-radius: 10px; background: var(--bg-soft); border: 1px solid var(--line); font-size: 14px; }
.qgc-sys-node { display: grid; gap: 4px; align-content: center; min-height: 100%; }
.qgc-sys-node small { flex-basis: auto; }
.qgc-sys-col b, .qgc-sys-node b, .qgc-sys-links b { font-weight: 600; color: var(--text); }
.qgc-sys-col small, .qgc-sys-node small, .qgc-sys-links small { flex-basis: 100%; color: var(--text-dim); font-size: 12.5px; }
.qgc-sys-mains { border-color: rgba(239,106,95,.45) !important; background: rgba(239,106,95,.07) !important; }
.qgc-sys-mains small { color: #f2a097; }
.qgc-arrow { color: var(--qb-power); font-weight: 700; }
.qgc-arrow-data { color: var(--qb-data); }
@media (max-width: 760px) {
  .qgc-sys-flow { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .qgc-sys-col + .qgc-sys-col::before { left: 22px; top: -20px; width: 0; height: 14px; border-top: 0; border-left: 4px solid var(--qb-power); }
  .qgc-sys-lane { padding: 16px; }
}

/* ---- boundaries and details ---------------------------------------------------- */
.qgc-install { margin-top: 26px; }
.qgc-downloads { margin-top: 22px; }

/* ---- the sticky rail ------------------------------------------------------- */
/* With nine sections, the rail keeps its room for the section links: when the
   standard bundle has no online total, its price slot holds only words, and the
   Customise button beside it says the rest. A real total still shows. */
.qgc-page .pdp-rail-price:not(:has(.price-compact)) { display: none; }