/* ============================================================
   Geographic Footprint — page-specific styles
   Builds on the shared Tata Power design system (css/style.css):
   reuses its tokens (var(--*)), nav, footer, theme + buttons.
   ============================================================ */

:root{
  --f-thermal:#b9bcc4;     /* Thermal       */
  --f-solar:var(--gold);   /* Solar         */
  --f-wind:var(--green);   /* Wind          */
  --f-hydro:var(--blue);   /* Hydro         */
  --f-whr:var(--lime);     /* WHR / BFG     */
  --geo-card:var(--surface);
  --geo-soft:rgba(0,0,0,.04);
}
html[data-theme="dark"]{
  --f-thermal:#737c92;
  --geo-soft:rgba(255,255,255,.05);
}

/* ---------- page shell ---------- */
.geo-page{ padding-top:34px; padding-bottom:80px; background:#e8f6fe; }
.geo-crumb{
  display:flex; align-items:center; gap:10px;
  font-size:13px; font-weight:500; letter-spacing:.01em;
  color:var(--muted); margin-bottom:30px;
}
.geo-crumb .sep{ opacity:.5; }
.geo-crumb .here{ color:var(--text); }

.geo-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(36px,4.5vw,72px);
  align-items:start;
}

/* ---------- left intro ---------- */
.geo-title{
  font-size:clamp(40px,4.6vw,62px);
  font-weight:500; line-height:1.02; letter-spacing:-.03em;
  margin:0 0 26px;
}
.geo-lead{
  font-size:clamp(16px,1.25vw,19px);
  font-weight:300; line-height:1.55; color:var(--text);
  max-width:46ch; opacity:.92;
}

/* ---------- section rule heading ---------- */
.geo-rule{
  display:flex; align-items:center; gap:18px;
  margin:48px 0 30px;
}
.geo-rule h2{
  font-size:clamp(19px,1.5vw,23px); font-weight:600;
  letter-spacing:-.02em; white-space:nowrap; margin:0;
}
.geo-rule .line{ flex:1; height:1px; background:var(--border); }

/* ---------- generation stat tiles ---------- */
.geo-stats{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:34px; row-gap:30px;
}
.geo-stat{ position:relative; padding-top:22px; }
.geo-stat::before{
  content:""; position:absolute; top:0; left:0; right:0;
  height:1px; background:var(--border);
}
.geo-stat .ico{
  width:80px; height:80px; margin-bottom:16px;
  color:var(--navy); display:block;
}
html[data-theme="dark"] .geo-stat .ico{ color:var(--skyblue); }
.geo-stat .ico svg{ width:100%; height:100%; display:block; }
.geo-stat .num{
  font-size:clamp(30px,3vw,40px); font-weight:600;
  line-height:1; letter-spacing:-.02em; display:flex; align-items:baseline; gap:7px;
}
.geo-stat .num .unit{ font-size:.42em; font-weight:500; color:var(--muted); letter-spacing:0; }
.geo-stat .lab{ margin-top:10px; font-size:16px; color:var(--black); font-weight:400; }
.geo-stat.is-total .num{ color:var(--black); }

.geo-note{ margin:26px 0 0; font-size:12.5px; color:var(--muted); font-style:italic; }

/* ---------- charts ---------- */
.geo-charts{
  display:grid; grid-template-columns:1fr 1fr; gap:30px;
  margin-top:42px; padding-top:34px; border-top:1px solid var(--border);
}
.geo-chart{ text-align:center; }
.geo-chart h3{
  font-size:17px; font-weight:600; letter-spacing:-.01em;
  margin:0 0 18px;
}
.geo-chart .canvas-wrap{
   margin:0 auto;
}
.geo-chart .legend{
  display:flex; justify-content:center; gap:18px; margin-top:16px;
  font-size:12.5px; color:var(--muted);
}
.geo-chart .legend span{ display:inline-flex; align-items:center; gap:7px; }
.geo-chart .legend i{ width:11px; height:11px; border-radius:50%; }

/* ---------- right column: presence ---------- */
.geo-presence > h2{
  font-size:clamp(20px,1.6vw,24px); font-weight:600; letter-spacing:-.02em;
  margin:0 0 22px;
}
.geo-states{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px 16px;
}
.geo-state{
  background:var(--geo-card);
  border:1px solid var(--border);
  border-radius:10px;
  padding:11px 12px 12px;
}
.gs-head{
  font-size:12.5px; line-height:1.25; color:var(--text);
  display:flex; align-items:baseline; gap:5px; flex-wrap:wrap;
}
.gs-no{ color:var(--muted); font-weight:500; }
.gs-name{ font-weight:400; }
.gs-total{ font-weight:700; margin-left:auto; white-space:nowrap; }
.gs-bar{
  display:flex; height:12px; border-radius:0; overflow:hidden;
  margin:11px 0 9px; background:var(--geo-soft); gap:0px;
}
.gs-seg{ background:var(--c); min-width:5px; border-radius:0; }
.gs-vals{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:5px 12px;
  font-size:12px; font-weight:600; color:var(--text);
}
.gs-vals li{ display:inline-flex; align-items:center; gap:6px; }
.gs-vals li::before{
  content:""; width:9px; height:9px; border-radius:50%;
  background:var(--c); flex:none;
}

/* fuel colour map (drives both bar segments + value dots) */
.f-thermal{ --c:var(--f-thermal); }
.f-solar{ --c:var(--f-solar); }
.f-wind{ --c:var(--f-wind); }
.f-hydro{ --c:var(--f-hydro); }

.f-trans{ --c:var(--f-trans); }
.f-coal{ --c:var(--f-coal); }
.f-cmines{ --c:var(--f-cmines); }
.f-dis{ --c:var(--f-dis); }

/* legend */
.geo-legend{
  display:flex; flex-wrap:wrap; gap:9px 20px; margin-top:20px;
  font-size:12.5px; color:var(--muted);
}
.geo-legend span{ display:inline-flex; align-items:center; gap:8px; }
.geo-legend i{ width:11px; height:11px; border-radius:50%; background:var(--c); }

/* ---------- capacity headline numbers ---------- */
.geo-caps{
  display:flex; flex-wrap:wrap; gap:34px 56px;
  margin:40px 0 8px; padding-top:30px; border-top:1px solid var(--border);
}
.geo-cap .num{
  font-size:clamp(34px,3.4vw,46px); font-weight:300; line-height:1;
  letter-spacing:-.02em; display:flex; align-items:baseline; gap:8px;
}
.geo-cap .num .unit{ font-size:.4em; font-weight:500; color:var(--muted); }
.geo-cap .lab{ margin-top:9px; font-size:14.5px; color:var(--muted); }

/* ---------- maps ---------- */
.geo-maps{
  display:grid; grid-template-columns:0.78fr 1fr;
  gap:20px; align-items:center; margin-top:26px;
}
.geo-mapcard{
  background:#f1f8fc;
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  display:flex; flex-direction:column; align-items:center;
}
html[data-theme="dark"] .geo-mapcard{ background:#eef6fb; border-color:rgba(255,255,255,.08); }
.geo-mapcard img{ width:100%; height:auto; display:block; }
.geo-mapcard .cap{
  margin-top:8px; font-size:11.5px; color:#5b6675; align-self:flex-end;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1080px){
  .geo-grid{ grid-template-columns:1fr; gap:50px; }
  .geo-states{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:760px){
  .geo-stats{ column-gap:24px; }
  .geo-states{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .geo-maps{ grid-template-columns:1fr; }
  .geo-mapcard{ max-width:440px; margin:0 auto; }
  /* let the long section heading wrap instead of forcing horizontal scroll */
  .geo-rule{ align-items:flex-start; }
  .geo-rule h2{ white-space:normal; }
  .geo-rule .line{ margin-top:12px; }
}
@media (max-width:540px){
  .geo-page{ padding-top:24px; }
  .geo-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:18px; row-gap:24px; }
  .geo-charts{ gap:18px; }
  .geo-states{ grid-template-columns:1fr 1fr; }
  .geo-caps{ gap:24px 36px; }
}
@media (max-width:380px){
  .geo-states{ grid-template-columns:1fr; }
}


[data-theme="dark"] .geo-page {
  background: transparent;
}

[data-theme="dark"] .canvas-wrap {
  background: #e8f6fe;
}