/* =====================================================================
   SectorLens free page (/sectorlens/) — page-scoped styles.
   Enqueued only on that page (nd_skies_sectorlens_enqueue in functions.php).
   Builds on the shared .gl-page / .gl-hero / .tier-matrix / .gl-obj components
   in styles.css; only what those don't cover lives here.
   ===================================================================== */

/* ---- Hero: the app screenshot is wide, so give it more of the row ---- */
@media (min-width: 901px) {
  .sl-page .gl-hero.has-media .gl-hero-inner { grid-template-columns: 0.82fr 1.18fr; gap: 40px; }
}
@media (max-width: 900px) {
  .sl-page .gl-hero-media { max-width: none; }
}

/* ---- Map band (cream, full-bleed) holding the embedded free map ---- */
.sl-map-band {
  background: var(--surface);
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 80px;
}
.sl-map-band-inner { max-width: 1100px; margin: 0 auto; padding: 56px 28px; }
.sl-map-band .t-h2 { margin-bottom: 24px; }

/* The free map mounts into #sectorlens-free-map. Until it ships, the slot shows
   a holding message; the map script replaces the slot's contents. */
.sl-map-slot {
  min-height: 520px;
  background: var(--blue-primary);
  border: 1px solid var(--blue-secondary);
  border-radius: 12px;
  overflow: hidden;
}
.sl-map-slot.is-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 40px 24px; text-align: center;
}
.sl-map-slot-title {
  font-family: var(--font-display); font-size: 17px; font-weight: 600; color: #fff;
}
.sl-map-slot-sub {
  font-family: var(--font-body); font-size: 14px; font-weight: 300; color: var(--fg-on-dark-2);
}
.sl-map-notes { margin-top: 14px; }
.sl-map-notes p {
  font-family: var(--font-body); font-size: 12px; font-weight: 300;
  line-height: 1.7; color: var(--ink-muted);
}

/* ---- Three ways to read the map ---- */
.sl-modes {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; margin-top: 28px;
}
.sl-mode {
  background: #fff; border: 1px solid var(--border);
  border-top: 3px solid var(--gold-primary);
  border-radius: 0 0 8px 8px; padding: 22px 22px 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.sl-mode-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sl-mode-head h3 { margin: 0; }
.sl-tag {
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; white-space: nowrap;
}
.sl-tag-free { color: var(--green); background: var(--green-bg); border: 1px solid var(--green-border); }
.sl-tag-terminal { color: var(--gold-primary); background: rgba(166,138,79,0.1); border: 1px solid rgba(166,138,79,0.35); }
.sl-mode p {
  font-family: var(--font-body); font-size: 14px; font-weight: 300;
  line-height: 1.75; color: var(--ink-muted); margin: 0;
}
.sl-mode-meta {
  margin-top: auto;
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  letter-spacing: 0.02em; color: var(--blue-secondary);
}

/* Colour scale key — stepped solid blocks (no gradients in the brand system) */
.sl-scale { display: flex; height: 8px; border-radius: 2px; overflow: hidden; }
.sl-scale span { flex: 1; }
.sl-scale .s1 { background: rgb(226,48,56); }
.sl-scale .s2 { background: rgb(140,41,54); }
.sl-scale .s3 { background: rgb(24,32,52); }
.sl-scale .s4 { background: rgb(30,98,68); }
.sl-scale .s5 { background: rgb(34,136,78); }

/* ---- Sector performance: copy, then the app screenshot full width ---- */
.sl-perf .t-body strong { font-weight: 600; color: var(--blue-primary); }
.sl-checks { list-style: none; margin: 22px 0 0; padding: 0; }
.sl-checks li {
  display: flex; align-items: flex-start; gap: 10px; padding: 7px 0;
  font-family: var(--font-body); font-size: 15px; font-weight: 300;
  line-height: 1.6; color: var(--ink);
}
.sl-perf-shot { margin: 32px 0 0; }
.sl-perf-shot img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--blue-secondary); border-radius: 12px;
}

/* ---- Free vs Terminal ---- */
.sl-compare .tier-matrix-wrap { margin-top: 28px; }
.sl-compare table.tier-matrix { min-width: 520px; }
.sl-compare table.tier-matrix .sl-cell-text {
  font-family: var(--font-display); font-size: 12px; font-weight: 600; color: var(--blue-secondary);
}
.sl-compare-cta { text-align: center; margin-top: 32px; }
.sl-compare-note {
  font-family: var(--font-body); font-size: 14px; font-weight: 300;
  color: var(--ink-muted); margin-top: 14px;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .sl-modes { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .sl-map-band-inner { padding: 40px 16px; }
  .sl-map-slot { min-height: 360px; }
  /* three columns fit a phone, so no sideways scroll */
  .sl-compare table.tier-matrix { min-width: 0; }
  .sl-compare table.tier-matrix th, .sl-compare table.tier-matrix td { padding: 12px 10px; font-size: 13px; }
  .sl-compare table.tier-matrix thead th { font-size: 10px; }
}