/* =====================================================================
   Industry pages with live maps (mining, environmental, retail & CRE).
   Builds on pro-page.css (pp- components); sol- is the industry layout.
   ===================================================================== */

/* Hero: a live map behind the title */
.sol-hero { position: relative; overflow: hidden; min-height: 520px; display: flex; align-items: flex-end; background: #1d1912; color: #fff; font-family: var(--pp-font); }
/* two classes: MapLibre's .maplibregl-map sets position: relative, which would collapse the map to 0 height */
.sol-hero .sol-hero__map { position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity 1.4s ease; }
.sol-hero.is-ready .sol-hero__map { opacity: 1; }
.sol-hero__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 8, 6, 0.15) 0%, rgba(10, 8, 6, 0.1) 40%, rgba(10, 8, 6, 0.78) 100%); }
.sol-hero__inner { position: relative; z-index: 2; width: 100%; max-width: 1200px; margin: 0 auto; padding: 120px 24px 56px; }
.sol-hero__eyebrow { margin: 0 0 12px; font: 700 12px/1 var(--pp-font); letter-spacing: 0.14em; text-transform: uppercase; color: #ffcf4d; }
.sol-hero h1 { margin: 0 0 14px; max-width: 760px; font: 800 clamp(34px, 5vw, 60px)/1.05 var(--pp-font); letter-spacing: -0.02em; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45); }
.sol-hero p.sol-hero__lead { margin: 0 0 26px; max-width: 640px; font-size: clamp(16px, 1.7vw, 19px); line-height: 1.55; color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }
.sol-hero__buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.sol-hero__credit { position: absolute; right: 12px; bottom: 8px; z-index: 2; margin: 0; font-size: 11px; color: rgba(255, 255, 255, 0.7); }

/* Intro: a lead paragraph and value chips */
.sol-intro { padding: 64px 0 40px; }
.sol-intro__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; align-items: start; }
.sol-values { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sol-values li { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: start; padding: 14px 16px; border-radius: 14px; background: var(--pp-off); border: 1px solid var(--pp-border); }
.sol-values svg { width: 38px; height: 38px; padding: 8px; border-radius: 10px; background: #fff; color: var(--pp-blue); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; box-shadow: 0 2px 8px rgba(7, 17, 46, 0.08); }
.sol-values b { display: block; color: var(--pp-text); font-size: 15px; margin-bottom: 2px; }
.sol-values span { color: var(--pp-sub); font-size: 14px; line-height: 1.5; }

/* The live operations block: map and a report-style panel */
.sol-ops { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: stretch; }
.pp .sol-ops .pp-mapframe { height: auto; min-height: 600px; border-radius: 16px; box-shadow: var(--pp-shadow-dark); }
.sol-panel { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 16px; background: #fff; color: var(--pp-text); box-shadow: var(--pp-shadow-dark); }
.sol-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sol-panel__title { margin: 0; font-size: 14px; font-weight: 700; }
.sol-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #c0392b; }
.sol-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #e74c3c; box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.6); animation: sol-pulse 1.6s infinite; }
@keyframes sol-pulse { 0% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.6); } 70% { box-shadow: 0 0 0 8px rgba(231, 76, 60, 0); } 100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); } }
@media (prefers-reduced-motion: reduce) { .sol-live::before { animation: none; } }
.sol-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sol-kpi { padding: 10px 12px; border-radius: 10px; background: var(--pp-off); border: 1px solid var(--pp-border); }
.sol-kpi--wide { grid-column: 1 / -1; }
.sol-kpi__label { display: block; font-size: 11px; color: var(--pp-sub); text-transform: uppercase; letter-spacing: 0.05em; }
.sol-kpi__value { display: block; margin-top: 3px; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--pp-text); }
.sol-states { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sol-states li { display: flex; justify-content: space-between; align-items: center; font-size: 13px; padding: 5px 8px; border-radius: 8px; background: var(--pp-off); }
.sol-states b { font-variant-numeric: tabular-nums; }
.sol-states i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; }
.sol-panel h4 { margin: 4px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--pp-sub); }
.sol-alerts { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; max-height: 150px; overflow: auto; }
.sol-alerts button { width: 100%; text-align: left; padding: 7px 9px; border: 1px solid #f5c6c0; border-radius: 8px; background: #fff4f2; color: #7c1d12; font: 12px/1.35 var(--pp-font); cursor: pointer; }
.sol-alerts button:hover { border-color: #e74c3c; }
.sol-alerts b { margin-right: 4px; }
.sol-alerts .is-empty { font-size: 12px; color: var(--pp-sub); padding: 4px 2px; }
.sol-action { margin-top: auto; padding: 10px 12px; border: 0; border-radius: 10px; background: #c0392b; color: #fff; font: 700 13px/1.2 var(--pp-font); cursor: pointer; }
.sol-action[aria-pressed="true"] { background: #2d3436; }
.sol-held { margin: 0; font-size: 12px; font-weight: 600; color: #c0392b; }
.sol-caption { margin: 16px 0 0; font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, 0.72); }
.pp-band:not(.pp-band--dark) .sol-caption { color: var(--pp-sub); }

/* How it works: three steps */
.sol-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: sol; }
.sol-flow li { position: relative; padding: 22px 20px 20px; border-radius: 16px; background: #fff; border: 1px solid var(--pp-border); box-shadow: 0 6px 20px rgba(7, 17, 46, 0.06); }
.sol-flow li::before { counter-increment: sol; content: counter(sol); position: absolute; top: -14px; left: 20px; width: 28px; height: 28px; border-radius: 50%; background: var(--pp-blue); color: #fff; font: 800 14px/28px var(--pp-font); text-align: center; }
.sol-flow h3 { margin: 4px 0 6px; font-size: 17px; color: var(--pp-text); }
.sol-flow p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--pp-sub); }
.sol-flow small { display: block; margin-top: 10px; font-size: 12px; color: var(--pp-blue); font-weight: 600; }

@media (max-width: 1000px) {
  .sol-intro__grid, .sol-ops { grid-template-columns: 1fr; }
  .sol-flow { grid-template-columns: 1fr; gap: 24px; }
  .pp .sol-ops .pp-mapframe { height: 460px; min-height: 0; }
}
@media (max-width: 640px) {
  .sol-hero { min-height: 460px; }
  .sol-hero__inner { padding: 90px 16px 36px; }
  .pp .sol-ops .pp-mapframe { height: 380px; min-height: 0; }
}

/* Environmental: warnings list, gauge detail and its hydrograph */
.sol-warnings { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; max-height: 170px; overflow: auto; }
.sol-warnings button { width: 100%; display: flex; gap: 8px; align-items: baseline; text-align: left; padding: 7px 9px; border: 1px solid var(--pp-border); border-radius: 8px; background: #fff; color: var(--pp-text); font: 12px/1.35 var(--pp-font); cursor: pointer; }
.sol-warnings button:hover { border-color: var(--pp-blue); }
.sol-warnings b { flex: none; white-space: nowrap; }
.sol-warnings i { flex: none; width: 9px; height: 9px; border-radius: 2px; transform: translateY(1px); }
.sol-warnings .is-empty { font-size: 12px; color: var(--pp-sub); padding: 4px 2px; }
.sol-layers { display: grid; gap: 6px; }
.sol-layers label { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.sol-layers input { accent-color: var(--pp-blue); width: 15px; height: 15px; }
.sol-layers input:disabled + span { opacity: 0.45; }
.sol-gauge { padding: 10px 12px; border-radius: 10px; background: var(--pp-off); border: 1px solid var(--pp-border); }
.sol-gauge h4 { margin: 0; font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--pp-text); }
.sol-gauge__river { margin: 1px 0 6px; font-size: 12px; color: var(--pp-sub); }
.sol-gauge__now { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.sol-gauge__now b { font-size: 20px; font-variant-numeric: tabular-nums; }
.sol-gauge__now span { font-size: 11px; color: var(--pp-sub); }
.sol-hydro { display: block; width: 100%; height: auto; }
.sol-hydro__band { fill: rgba(46, 196, 182, 0.18); }
.sol-hydro__line { fill: none; stroke: #0c62a6; stroke-width: 2; stroke-linejoin: round; }
.sol-hydro__dot { fill: #ff9f1c; stroke: #fff; stroke-width: 1.5; }
.sol-hydro__axis { display: flex; justify-content: space-between; font-size: 10px; color: var(--pp-sub); }
.sol-note { margin: 4px 0 0; font-size: 11px; color: var(--pp-sub); }
.sol-hero__chip { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 6px 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(6px); font-size: 13px; font-weight: 600; }

/* Glass cards without an image (environmental warnings and gauges) */
.pp-lcard--noimg .pp-lcard__box { width: 236px; }
.pp-lcard--noimg .pp-lcard__body { display: block; -webkit-line-clamp: unset; }

/* Retail: the site scorecard */
.sol-site { margin: 0; font-size: 15px; font-weight: 700; color: var(--pp-text); }
.sol-status { margin: -4px 0 0; font-size: 12px; color: var(--pp-sub); min-height: 16px; }
.sol-score { padding: 10px 12px; border-radius: 10px; background: #f5f3ff; border: 1px solid #ddd6fe; }
.sol-score__row { display: flex; align-items: baseline; justify-content: space-between; }
.sol-score__row b { font-size: 26px; font-weight: 800; color: #5b21b6; font-variant-numeric: tabular-nums; }
.sol-score__track { height: 6px; margin-top: 6px; border-radius: 3px; background: #ede9fe; overflow: hidden; }
.sol-score__track span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #8b5cf6, #5b21b6); transition: width 0.6s ease; }
.sol-bands { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sol-bands div { padding: 7px 8px; border-radius: 8px; background: var(--pp-off); border: 1px solid var(--pp-border); }
.sol-bands span { display: block; font-size: 10px; color: var(--pp-sub); text-transform: uppercase; letter-spacing: 0.04em; }
.sol-bands b { font-size: 14px; font-variant-numeric: tabular-nums; }
.sol-bands i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; }
.sol-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.sol-presets button { padding: 6px 10px; border-radius: 999px; border: 1px solid #ddd6fe; background: #fff; color: #5b21b6; font: 600 12px/1.2 var(--pp-font); cursor: pointer; }
.sol-presets button:hover { background: #f5f3ff; }
.sol-legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--pp-sub); }
.sol-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }

/* Retail: fictional logos, competitors by brand, the catchment profile and the demographic switch */
.sol-logo { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 18px; height: 18px; margin-right: 6px; border-radius: 5px; border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(15, 26, 56, 0.18); font: 800 10px/1 "Segoe UI", Arial, sans-serif; color: #fff; vertical-align: -4px; }
.sol-brands { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.sol-brands:empty { display: none; }
.sol-brands li { display: flex; align-items: center; font-size: 12px; }
.sol-brands li > span:not(.sol-logo) { flex: 1; }
.sol-brands b { font-variant-numeric: tabular-nums; }
.sol-h4note { text-transform: none; letter-spacing: 0; font-weight: 400; }
.sol-profile { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.sol-profile li { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; font-size: 12px; align-items: center; }
.sol-profile b { font-variant-numeric: tabular-nums; }
.sol-profile__hh b { font-size: 13px; }
.sol-profile__bar { grid-column: 1 / -1; position: relative; height: 5px; border-radius: 3px; background: #ede9fe; }
.sol-profile__bar > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: #7c3aed; }
.sol-profile__bar > em { position: absolute; top: -3px; width: 2px; height: 11px; margin-left: -1px; background: #0f1a38; }
.sol-demo-switch { display: flex; flex-wrap: wrap; gap: 6px; }
.sol-demo-switch button { padding: 6px 10px; border-radius: 999px; border: 1px solid var(--pp-border); background: #fff; color: var(--pp-text); font: 600 12px/1.2 var(--pp-font); cursor: pointer; }
.sol-demo-switch button[aria-checked="true"] { background: #5b21b6; border-color: #5b21b6; color: #fff; }