/* ============================================================
 * AI4EBITDA - INTELLIGENCE PAGE STYLES
 * Used only on intelligence.php.
 * ============================================================ */

/* ===================== INTELLIGENCE PAGE COMPONENTS ===================== */
.gap-banner { padding: 2.5rem 0; background: var(--navy); border-bottom: 1px solid var(--g3); }
.gap-grid { display: grid; grid-template-columns: 1fr 40px 1fr; gap: 1.5rem; align-items: center; }
.gap-col h3 { font-size: 1rem; font-weight: 700; color: var(--white); margin-bottom: .4rem; }
.gap-col p { font-size: .92rem; }
.gap-arrow { text-align: center; font-size: 2rem; color: var(--teal); }
.gap-cta { border: 1px solid var(--teal); padding: 1.3rem 1.5rem; background: rgba(51,190,202,.05); }
.gap-cta h3 { color: var(--teal); }

/* Scatter */
.scatter-outer { background: var(--panel); border: 1px solid var(--g3); padding: 1.4rem; }
.scatter-label-top { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); font-weight: 700; margin-bottom: 1rem; }
.scatter-container { position: relative; padding-bottom: 72%; background: var(--void); border: 1px solid var(--g3); overflow: hidden; }
.target-zone {
  position: absolute; top: 7%; right: 6%; width: 26%; height: 27%;
  border: 1px dashed var(--teal); background: rgba(51,190,202,.07);
}
.tz-lbl { position: absolute; top: -1.3rem; left: 0; font-size: .54rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lime); white-space: nowrap; font-weight: 700; }
.sdot { position: absolute; border-radius: 50%; transform: translate(-50%, 50%); }
.sdot.gy { width:7px; height:7px; background:var(--g3); }
.sdot.tc { width:11px; height:11px; background:var(--teal); box-shadow:0 0 6px rgba(51,190,202,.5); }
.sdot.am { width:9px; height:9px; background:#e8a842; }
.sdot.rd { width:7px; height:7px; background:#e05555; }
.scatter-x-lbl { text-align:center; font-size:.72rem; letter-spacing:.12em; color:var(--g1); margin:.6rem 0 .8rem; text-transform:uppercase; font-weight:600; }
.scatter-legend { display:flex; flex-wrap:wrap; gap:.8rem; }
.leg-item { display:flex; align-items:center; gap:.4rem; font-size:.72rem; letter-spacing:.1em; color:var(--g1); text-transform:uppercase; font-weight:600; }
.leg-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }

/* Heatmap before/after */
.heatmap-outer { background: var(--panel); border: 1px solid var(--g3); padding: 1.4rem; }
.heatmap-title { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); font-weight: 700; margin-bottom: 1rem; }
.heatmap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.hmap-col { background: var(--void); border: 1px solid var(--g3); padding: 1rem; }
.hmap-lbl { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--g1); margin-bottom: .8rem; font-weight: 700; }
.hmap-dots { position: relative; height: 90px; }
.hmap-dot { position: absolute; border-radius: 50%; opacity: .7; }
.shift-note { margin-top: 1rem; font-size: .85rem; color: var(--g1); font-weight: 300; }
.shift-stat {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: .6rem;
  align-items: baseline;
  margin-top: .5rem;
}
.shift-num {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--lime);
}
.shift-lbl {
  min-width: 0;
  font-size: .85rem;
  color: var(--g1);
  font-weight: 300;
}

@media (max-width: 600px) {
  .shift-stat {
    display: grid;
    grid-template-columns: 1fr;
    gap: .1rem;
  }
}

/* Zone bars */
.zone-bars { margin-top: 2rem; }
.zb { margin-bottom: 1.2rem; }
.zb-header { display: flex; justify-content: space-between; margin-bottom: .35rem; }
.zb-name { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--g1); font-weight: 600; }
.zb-pct { font-size: .72rem; color: var(--teal); font-weight: 700; }
.zb-track { background: var(--bdr); height: 6px; border-radius: 3px; overflow: hidden; }
.zb-fill { height: 100%; border-radius: 3px; width: 0; transition: width 1.2s ease; }

/* Quote */
.quote-block { padding: 5rem 0; background: var(--panel); }
.big-quote {
  font-size: clamp(1.3rem, 2.2vw, 1.9rem); font-style: italic; font-weight: 300;
  color: var(--white); line-height: 1.55; text-align: center; max-width: 760px; margin: 0 auto;
  border-top: 2px solid var(--teal); border-bottom: 2px solid var(--teal); padding: 2.5rem 0;
}
.big-quote strong { font-weight: 700; font-style: normal; color: var(--teal); }

/* Triplet */
.triplet { display: flex; flex-direction: column; gap: 0; margin-top: 1.5rem; }
.triplet-item { padding: 1rem 0; border-top: 1px solid var(--g3); }
.triplet-item:last-child { border-bottom: 1px solid var(--g3); }
.triplet-lead { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--teal); margin-bottom: .35rem; font-weight: 700; }
.triplet-body { font-size: 1rem; color: var(--g1); font-weight: 300; line-height: 1.7; }

/* Keep light Intelligence sections visually aligned with the original single-file CSS order. */
.on-light .triplet-body { color: #2a3a4a !important; font-weight: 400; }
.on-light .triplet-item { border-color: #b8d4e0; }
.on-light .triplet-lead { color: var(--navy) !important; }
.on-light .scatter-outer,
.on-light .heatmap-outer { background: #fff; border-color: #b8d4e0; }
.on-light .scatter-label-top,
.on-light .heatmap-title { color: var(--navy) !important; }
.on-light .scatter-x-lbl,
.on-light .hmap-lbl { color: #4a6a7a !important; }
.on-light .scatter-container { background: #f5f9fb !important; border-color: #b8d4e0 !important; }
.on-light .leg-item { color: #4a6a7a !important; }
.on-light .zb-name { color: #2a3a4a !important; }
.on-light .zb-pct { color: var(--navy) !important; }
.on-light .zb-track { background: #c8dce8 !important; }