/* Landing page. The hero always sits on satellite imagery, so its text is light in both themes. */
.landing { background: var(--bg); }
.l-top { position: absolute; z-index: 10; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 16px clamp(16px, 4vw, 48px); }
.l-brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 700; font-size: 18px; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.l-controls { display: flex; gap: 8px; }
.l-top .seg { background: rgba(8, 20, 30, .55); border-color: rgba(255, 255, 255, .25); backdrop-filter: blur(6px); }
.l-top .seg button { color: #e8f0f5; }
.l-top .seg button[aria-pressed="true"] { background: #e8f0f5; color: #0b1d2b; }

.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; color: #f3f7fa;
  background: radial-gradient(120% 90% at 30% 40%, #1d4a5e 0%, #0e2a3a 45%, #07151f 100%); }
#hero-map { position: absolute; inset: 0; }
.hero-map .maplibregl-ctrl-attrib { display: none; } /* credited in the footer and under the gauge */
.hero-scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(5, 14, 21, .82) 0%, rgba(5, 14, 21, .32) 46%, rgba(5, 14, 21, .05) 70%, rgba(5, 14, 21, .55) 100%),
              linear-gradient(0deg, rgba(5, 14, 21, .7) 0%, transparent 40%); }
.hero-inner { position: relative; width: 100%; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: clamp(24px, 5vw, 72px);
  align-items: end; padding: 120px clamp(16px, 4vw, 48px) clamp(28px, 6vh, 64px); }
.hero-date { margin: 0 0 14px; font-size: 16px; font-weight: 600; color: #ffd27a; }
.hero h1 { font-size: clamp(34px, 5.2vw, 68px); line-height: 1.04; letter-spacing: -0.015em; max-width: 15ch; font-weight: 700; text-wrap: balance; }
html[lang="hi"] .hero h1 { line-height: 1.22; letter-spacing: 0; max-width: 16ch; }
.hero-lede { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.5; max-width: 52ch; color: #d5e2ea; margin: 18px 0 26px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-lg { font-size: 16px; padding: 12px 20px; border-radius: 10px; text-decoration: none; display: inline-block; }
.landing .btn-primary { background: #5aa6e8; border-color: #5aa6e8; color: #06131c; }
.btn-ghost { background: transparent; border: 1.5px solid rgba(255, 255, 255, .55); color: #f3f7fa; font-size: 16px; padding: 11px 18px; border-radius: 10px; text-decoration: none; }
.btn-ghost:hover { background: rgba(255, 255, 255, .1); }

/* The gauge: the 7 ghats in alert order. The row the camera is visiting is marked. */
.gauge { background: rgba(6, 17, 26, .72); border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; padding: 16px 16px 12px; backdrop-filter: blur(8px); }
.gauge h2 { font-size: 15px; font-weight: 600; color: #cfe0ea; margin-bottom: 8px; }
.gauge ol { list-style: none; margin: 0; padding: 0; }
.gauge li { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 8px; border-left: 3px solid transparent; }
.gauge li.here { background: rgba(255, 255, 255, .09); border-left-color: #ffd27a; }
.gauge li a { color: #f3f7fa; text-decoration: none; font-weight: 600; font-size: 15px; }
.gauge li a:hover { text-decoration: underline; }
.gauge .g-dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; border: 2px solid rgba(255, 255, 255, .85); }
.gauge .g-lv { font-size: 12.5px; font-weight: 700; text-align: right; white-space: nowrap; }
.gauge .g-sub { display: block; font-size: 12px; font-weight: 400; color: #a9bfcc; }
.gauge-note { font-size: 12.5px; color: #c4b5fd; margin: 10px 2px 4px; }
.g-lv.c-critical { color: #ff9fc0; } .g-lv.c-warning { color: #ffb47e; } .g-lv.c-advisory { color: #f1d777; } .g-lv.c-normal { color: #6ee0d2; } .g-lv.c-nodata { color: #c9b0ff; }
.motion-btn { margin-top: 6px; background: none; border: 0; color: #a9bfcc; font-size: 12.5px; cursor: pointer; text-decoration: underline; padding: 2px; }

/* Hover card over the hero map. In the hero text only the buttons take the pointer, so pins behind the heading can be hovered. */
.hero-inner { pointer-events: none; }
.hero-cta a, .gauge { pointer-events: auto; }
.hero-map .maplibregl-marker:hover { z-index: 2; } /* lift a half-covered pin (Rani Kamlapati and Khatlapura nearly touch) */
.peek { z-index: 3; }
/* maplibre-gl.css loads after style.css on this page and would reset the card to white */
.peek .maplibregl-popup-content { background: var(--panel); color: var(--ink); padding: 0; overflow: hidden; width: 320px; max-width: calc(100vw - 32px); }
.peek-table .maplibregl-popup-content { width: 440px; }
.peek-fig { margin: 0; background: #fff; border-bottom: 1px solid var(--line); }
.peek-fig img { display: block; width: 100%; height: auto; }
.peek-photo .peek-fig img { max-height: 240px; object-fit: cover; }
.peek-table .peek-fig { padding: 6px; }
.peek-body { padding: 10px 14px 12px; }
.peek-h { display: flex; gap: 8px; align-items: center; font-size: 15.5px; line-height: 1.25; }
.peek-h .dot { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.peek-sub { font-size: 12.5px; color: var(--muted); margin: 2px 0 6px 30px; }
.peek-cap { font-size: 12.5px; line-height: 1.4; color: var(--ink-2); margin: 0 0 8px; }
.peek-link { font-size: 13.5px; font-weight: 600; }

.l-band { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.l-band-inner { max-width: 1180px; margin: 0 auto; padding: clamp(28px, 5vw, 56px) clamp(16px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.l-band h2 { font-size: clamp(22px, 2.4vw, 30px); max-width: 22ch; margin-bottom: 10px; }
.l-band p { color: var(--ink-2); max-width: 60ch; margin: 0; font-size: 16px; }
.l-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.l-facts li { padding-left: 14px; border-left: 3px solid var(--accent); font-size: 15.5px; color: var(--ink); }
.l-facts li.gap { border-left-color: var(--data); color: var(--data-text); }
.l-foot { max-width: 1180px; margin: 0 auto; padding: 24px clamp(16px, 4vw, 48px) 40px; color: var(--muted); font-size: 14px; }
.l-foot a { color: var(--muted); }

@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; padding-top: 96px; }
  .hero { align-items: flex-end; }
  .l-band-inner { grid-template-columns: 1fr; }
  .gauge li { padding: 6px; }
}
@media (max-width: 420px) {
  .l-brand span { display: none; }
}

/* Phones: the copy covers most of the hero, so pins there would sit under the text.
   The alert list right below names every ghat; the map stays as a quiet backdrop. */
@media (max-width: 860px) {
  .hero .pin { display: none; }
  .hero-scrim { background: linear-gradient(0deg, rgba(5, 14, 21, .88) 0%, rgba(5, 14, 21, .62) 55%, rgba(5, 14, 21, .45) 100%); }
}

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }