/* ============================================================
   Product Diagram Section
   Desktop, tablet, and mobile (first test — same image, scaled).
   ============================================================

   COORDINATE MAP — tune these values to align highlights.
   All values are % of the rendered image size (width × height).
   Source image: 1200 × 585 px.

   Box                       left    top    width   height
   ─────────────────────────────────────────────────────────
   OBC  inner white card      13.3%   38.5%  6.2%    13.0%  (anchor)
   LDC  inner white card      48%     10%    6.2%    12.5%
   Inverter Traction         45.47%  33%    6.3%    15.5%  (anchor)
   Inverter Auxiliary        45.47%  54.5%  6.3%    15.5%  (anchor)
   ─────────────────────────────────────────────────────────
   To tune: enable .product-diagram--debug on the wrap div
   (see debug section at the bottom of this file).
   ============================================================ */

/* --------------- Container --------------------------------- */
.product-diagram {
  padding: 48px 120px 0;
  max-width: 1440px;
  width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
}

/* --------------- Image wrap -------------------------------- */
.product-diagram__wrap {
  position: relative;
  display: block;
  width: 100%;
  line-height: 0;
}

.product-diagram__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  user-select: none;
  pointer-events: none;
}

/* --------------- Highlight base --------------------------- */
.diagram-highlight {
  position: absolute;
  display: block;
  border: none;
  background: rgba(207, 0, 6, 0.04);
  opacity: 0;
  pointer-events: auto;
  cursor: pointer;
  text-decoration: none;
  animation: none;
}

.diagram-highlight:focus-visible {
  opacity: 1;
  outline: 2px solid #cf0006;
  outline-offset: 2px;
}

/* --------------- Blink animation — soft glow overlay -------- */
@keyframes pdgram-blink {
  0%, 100% {
    background: rgba(207, 0, 6, 0.03);
    box-shadow: inset 0 0 6px 1px rgba(207, 0, 6, 0.06),
                0 0 0 0 rgba(207, 0, 6, 0);
    opacity: 0.55;
  }
  50% {
    background: rgba(207, 0, 6, 0.11);
    box-shadow: inset 0 0 10px 3px rgba(207, 0, 6, 0.14),
                0 0 16px 6px rgba(207, 0, 6, 0.22);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-active-product="obc"] .diagram-highlight--obc,
  [data-active-product="ldc"] .diagram-highlight--ldc,
  [data-active-product="inverter"] .diagram-highlight--inverter-traction,
  [data-active-product="inverter"] .diagram-highlight--inverter-aux,
  [data-active-product="idc"] .diagram-highlight--obc,
  [data-active-product="idc"] .diagram-highlight--ldc {
    animation: none;
    opacity: 1;
    background: rgba(207, 0, 6, 0.08);
    box-shadow: inset 0 0 8px 2px rgba(207, 0, 6, 0.10),
                0 0 10px 4px rgba(207, 0, 6, 0.16);
  }
}

/* ============================================================
   COORDINATES — edit the four blocks below to reposition.
   ============================================================ */

/* OBC anchor — card-sized positioning reference on the diagram */
.diagram-highlight-anchor {
  position: absolute;
  box-sizing: border-box;
  pointer-events: none;
}

/* OBC target — inner white card (GnT / OBC / Charge & Convert) */
.diagram-highlight-anchor--obc {
  left:   19%;
  top:    42%;
  width:   11.75%;
  height: 19.38%;
}

/* OBC border overlay — fills anchor exactly (inset overlay, not a floating box) */
.diagram-highlight--obc {
  inset: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 12%;
}

/* LDC target — inner white card (DC/DC Converter HV→LV) */
.diagram-highlight-anchor--ldc {
  left:   59%;
  top:    13.1%;
  width:   11.25%;
  height: 17.9%;
}

/* LDC border overlay — fills anchor exactly */
.diagram-highlight--ldc {
  inset: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 12%;
}

/* Inverter traction target — inner white card (Traction Inverter DC→AC) */
.diagram-highlight-anchor--inverter-traction {
  left:   59.4%;
  top:    42.5%;
  width:   10.75%;
  height: 17.9%;
}

/* Inverter auxiliary target — inner white card (Auxiliary Inverter DC→AC) */
.diagram-highlight-anchor--inverter-aux {
  left:   59.4%;
  top:    73%;
  width:   10.75%;
  height: 17.9%;
}

/* Inverter border overlays — fill anchors exactly */
.diagram-highlight--inverter-traction,
.diagram-highlight--inverter-aux {
  inset: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 12%;
}

/* ============================================================
   VISIBILITY — which highlights appear per page
   ============================================================ */

/* OBC page: OBC box only */
[data-active-product="obc"] .diagram-highlight--obc {
  animation: pdgram-blink 1.1s ease-in-out infinite;
}

/* LDC page: DC/DC Converter box only */
[data-active-product="ldc"] .diagram-highlight--ldc {
  animation: pdgram-blink 1.1s ease-in-out infinite;
}

/* Inverter page: Traction + Auxiliary boxes */
[data-active-product="inverter"] .diagram-highlight--inverter-traction,
[data-active-product="inverter"] .diagram-highlight--inverter-aux {
  animation: pdgram-blink 1.1s ease-in-out infinite;
}

/* IDC page: OBC box + DC/DC Converter box */
[data-active-product="idc"] .diagram-highlight--obc,
[data-active-product="idc"] .diagram-highlight--ldc {
  animation: pdgram-blink 1.1s ease-in-out infinite;
}

/* ============================================================
   DEBUG MODE — add class .product-diagram--debug to the wrap
   to show all highlights with solid borders and labels.
   Remove it when coordinates are finalized.
   ============================================================ */
.product-diagram--debug .diagram-highlight {
  opacity: 1 !important;
  border: 2px solid #cf0006;
  background: rgba(207, 0, 6, 0.12);
  animation: none !important;
  box-shadow: none;
}

/* Label pulled from data-label attribute */
.product-diagram--debug .diagram-highlight::before {
  content: attr(data-label);
  position: absolute;
  top: 2px;
  left: 4px;
  font-size: 10px;
  font-weight: 700;
  font-family: monospace;
  color: #cf0006;
  line-height: 1;
  pointer-events: none;
}

/* --------------- Tablet responsive adjustment -------------- */
@media (max-width: 1024px) and (min-width: 768px) {
  .product-diagram {
    padding: 40px 40px 0;
  }
}

/* --------------- Mobile — scaled diagram test ---------------- */
@media (max-width: 767px) {
  .product-diagram {
    padding: 20px 16px 0;
    max-width: 100%;
    overflow-x: clip;
  }

  .product-diagram__wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  .product-diagram__img {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 6px;
  }

  /* Smaller glow so highlights stay tight on small screens */
  [data-active-product="obc"] .diagram-highlight--obc,
  [data-active-product="ldc"] .diagram-highlight--ldc,
  [data-active-product="inverter"] .diagram-highlight--inverter-traction,
  [data-active-product="inverter"] .diagram-highlight--inverter-aux,
  [data-active-product="idc"] .diagram-highlight--obc,
  [data-active-product="idc"] .diagram-highlight--ldc {
    animation: pdgram-blink-mobile 1.1s ease-in-out infinite;
  }
}

@keyframes pdgram-blink-mobile {
  0%, 100% {
    background: rgba(207, 0, 6, 0.03);
    box-shadow: inset 0 0 4px 1px rgba(207, 0, 6, 0.05),
                0 0 0 0 rgba(207, 0, 6, 0);
    opacity: 0.55;
  }
  50% {
    background: rgba(207, 0, 6, 0.09);
    box-shadow: inset 0 0 5px 2px rgba(207, 0, 6, 0.10),
                0 0 8px 3px rgba(207, 0, 6, 0.15);
    opacity: 1;
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  [data-active-product="obc"] .diagram-highlight--obc,
  [data-active-product="ldc"] .diagram-highlight--ldc,
  [data-active-product="inverter"] .diagram-highlight--inverter-traction,
  [data-active-product="inverter"] .diagram-highlight--inverter-aux,
  [data-active-product="idc"] .diagram-highlight--obc,
  [data-active-product="idc"] .diagram-highlight--ldc {
    box-shadow: inset 0 0 5px 1px rgba(207, 0, 6, 0.08),
                0 0 6px 2px rgba(207, 0, 6, 0.12);
  }
}