/* HJ page visual coverage — content-specific explanatory diagrams for legacy support/legal pages. */

:where(.hj-page-visual) {
  --hj-pv-accent: #35e4ff;
  --hj-pv-accent-soft: rgba(53, 228, 255, .18);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: clamp(28px, 4vw, 48px) 0 8px;
  padding: clamp(22px, 3.5vw, 38px);
  border: 1px solid color-mix(in srgb, var(--hj-pv-accent) 34%, rgba(255,255,255,.12));
  border-radius: 24px;
  background:
    radial-gradient(circle at 82% 14%, var(--hj-pv-accent-soft), transparent 32%),
    linear-gradient(145deg, rgba(13, 31, 47, .96), rgba(5, 16, 29, .92));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 24px 70px rgba(0,0,0,.2);
  color: #eaf8ff;
}

body[data-hj-legal-document="privacy"] .hj-page-visual { --hj-pv-accent: #50e7c2; --hj-pv-accent-soft: rgba(80, 231, 194, .16); }
body[data-hj-legal-document="terms"] .hj-page-visual { --hj-pv-accent: #89a9ff; --hj-pv-accent-soft: rgba(137, 169, 255, .17); }
.hj-page-visual--warranty-support { --hj-pv-accent: #45dbff; --hj-pv-accent-soft: rgba(69, 219, 255, .16); }
.hj-page-visual--installation-delivery { --hj-pv-accent: #63e58a; --hj-pv-accent-soft: rgba(99, 229, 138, .16); }

body[data-hj-archetype="installation"]:not([data-hj-installation-page="detail"]) .page-intro > .container {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(400px, .94fr);
  grid-template-rows: repeat(5, auto);
  column-gap: clamp(34px, 5vw, 72px);
  align-items: start;
}

body[data-hj-archetype="installation"]:not([data-hj-installation-page="detail"]) .page-intro > .container > :not(.hj-page-visual) {
  grid-column: 1;
}

body[data-hj-archetype="installation"]:not([data-hj-installation-page="detail"]) .page-intro .hj-page-visual--installation-delivery {
  grid-column: 2;
  grid-row: 1 / 6;
  align-self: center;
  margin: 0;
  padding: clamp(20px, 2.4vw, 28px);
}

body[data-hj-archetype="installation"]:not([data-hj-installation-page="detail"]) .page-intro .hj-page-visual-diagram {
  margin-top: 8px;
}

body[data-hj-archetype="installation"]:not([data-hj-installation-page="detail"]) .page-intro .hj-page-visual-diagram svg {
  height: clamp(108px, 10vw, 138px);
}

.hj-page-visual-copy { display: grid; gap: 7px; max-width: 720px; }
.hj-page-visual-copy > span {
  color: var(--hj-pv-accent);
  font: 700 .7rem/1.2 "JetBrains Mono", monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.hj-page-visual-copy > strong {
  color: #f4fbff;
  font-size: clamp(1.2rem, 2.1vw, 1.8rem);
  line-height: 1.18;
  text-wrap: balance;
}

.hj-page-visual-diagram { margin-top: 18px; }
.hj-page-visual-diagram svg { display: block; width: 100%; height: auto; overflow: visible; }
.hj-page-visual-route {
  fill: none;
  stroke: var(--hj-pv-accent);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: .06 .035;
  filter: drop-shadow(0 0 7px var(--hj-pv-accent-soft));
}
.hj-page-visual-route--echo { opacity: .22; stroke-width: 1; }
.hj-page-visual-diagram g > circle:first-child { fill: #091d2d; stroke: var(--hj-pv-accent); stroke-width: 2; }
.hj-page-visual-diagram .hj-page-visual-core { fill: var(--hj-pv-accent); opacity: .2; }
.hj-page-visual-diagram text { fill: #f8fdff; font: 700 12px/1 "JetBrains Mono", monospace; }

.hj-page-visual-legend {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
.hj-page-visual-legend li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 8px;
  min-width: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.12);
  color: #d8eaf3;
  font-size: .78rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.hj-page-visual-legend li > span { color: var(--hj-pv-accent); font: 700 .67rem/1.45 "JetBrains Mono", monospace; }
.hj-page-visual figcaption {
  margin-top: 17px;
  padding-top: 15px;
  border-top: 1px solid rgba(255,255,255,.1);
  color: #9db2bf;
  font-size: .75rem;
  line-height: 1.55;
}

@media (max-width: 640px) {
  :where(.hj-page-visual) { margin-top: 24px; padding: 20px; border-radius: 19px; }
  .hj-page-visual-diagram { margin-inline: -10px; }
  .hj-page-visual-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  body[data-hj-archetype="installation"]:not([data-hj-installation-page="detail"]) .page-intro > .container {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }

  body[data-hj-archetype="installation"]:not([data-hj-installation-page="detail"]) .page-intro > .container > :not(.hj-page-visual),
  body[data-hj-archetype="installation"]:not([data-hj-installation-page="detail"]) .page-intro .hj-page-visual--installation-delivery {
    grid-column: 1;
  }

  body[data-hj-archetype="installation"]:not([data-hj-installation-page="detail"]) .page-intro .eyebrow { grid-row: 1; }
  body[data-hj-archetype="installation"]:not([data-hj-installation-page="detail"]) .page-intro h1 { grid-row: 2; }
  body[data-hj-archetype="installation"]:not([data-hj-installation-page="detail"]) .page-intro .lead { grid-row: 3; }
  body[data-hj-archetype="installation"]:not([data-hj-installation-page="detail"]) .page-intro .cta-row { grid-row: 4; }
  body[data-hj-archetype="installation"]:not([data-hj-installation-page="detail"]) .page-intro .cta-row + p { grid-row: 5; }
  body[data-hj-archetype="installation"]:not([data-hj-installation-page="detail"]) .page-intro .hj-page-visual--installation-delivery {
    grid-row: 6;
    margin-top: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hj-page-visual * { animation: none !important; transition: none !important; }
}

@media (forced-colors: active) {
  .hj-page-visual { border: 2px solid CanvasText; background: Canvas; color: CanvasText; }
  .hj-page-visual-route, .hj-page-visual-diagram g > circle:first-child { stroke: CanvasText; }
}

@media print {
  .hj-page-visual { break-inside: avoid; border: 1px solid #777; background: #fff; color: #111; box-shadow: none; }
  .hj-page-visual-copy > strong, .hj-page-visual-legend li, .hj-page-visual figcaption { color: #111; }
}