/* ============================================================
   KnowYourGujarat — Main Stylesheet (from homepage_design.md)
   ============================================================ */
@import './variables.css';

/* ─── 0. Reset & Base ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { 
  scroll-behavior: smooth; 
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

body {
  background-color: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; outline: none; border: none; }
.text-orange { color: var(--brand-orange); }

/* ─── 1. HEADER / NAV (Section 1 of design spec) ──────────── */
/* Position: fixed, full width, z-index 100, TRANSPARENT background */
.app-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  /* Fully transparent — overlaid on hero photo */
  background: transparent;
}

.header-inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 20px 48px;  /* spec: 20px top/bottom, 48px sides */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* 1A — Logo */
.brand-logo {
  display: flex;
  align-items: center;
  gap: 12px;         /* spec: 12px gap icon→text */
  flex-shrink: 0;
}

.brand-emblem {
  width: 32px; height: 32px;  /* spec: ~32×32px */
  fill: #FFFFFF;
  flex-shrink: 0;
}

.brand-text { display: flex; flex-direction: column; }

/* spec: Inter 700 21px #FFF + Inter 800 21px #FF7A00, on same line */
.brand-name {
  font-size: 21px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.brand-name-orange {
  font-family: 'Yatra One', cursive;
  font-weight: 400;
  color: #0A4FCD !important;
}

/* spec: Noto Sans Gujarati 500 11px #D1D5DB, margin-top 2px */
.brand-tagline-gu {
  font-family: var(--font-gujarati);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-top: 2px;
  letter-spacing: 0.02em;
}

/* 1B — Nav Links */
/* spec: gap 32px between links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

/* spec: Inter 500 14px #D1D5DB default; Inter 600 14px #FFF active */
.nav-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  position: relative;
  padding: 4px 0;
  transition: color 200ms ease;
}
.nav-link:hover { color: var(--text-primary); }
.nav-link.active {
  color: var(--text-primary);
  font-weight: 600;
}
/* spec: orange 2px bar, bottom -6px, full width, border-radius 2px */
.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -6px; left: 0; right: 0;
  height: 2px;
  background: var(--brand-orange);
  border-radius: 2px;
}

/* 1C — Right Actions */
.header-actions { display: flex; align-items: center; gap: 14px; }

/* spec: 38×38px, radius 8px, bg rgba(255,255,255,0.06), border rgba(255,255,255,0.16) */
.theme-toggle {
  width: 38px; height: 38px;
  border-radius: var(--radius-md);
  background: var(--border-nav-btn-bg);
  border: 1px solid var(--border-nav-btn);
  color: var(--text-primary);
  display: flex; align-items: center; justify-content: center;
  transition: background 200ms ease;
}
.theme-toggle:hover { background: rgba(255,255,255,0.12); }

/* spec: #0A4FCD bg, Inter 600 13.5px, padding 9px/18px, radius 8px, icon 17px, gap 7px */
.upload-btn {
  background: #0A4FCD;
  color: #FFFFFF;
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background 200ms ease, transform 200ms ease;
}
.upload-btn:hover {
  background: #083EA5;
  transform: translateY(-1px);
}

/* ─── 2. HERO SECTION (Section 2) ──────────────────────────── */
/* spec: gradient overlay + hero_modhera.jpg, min-height 520px, padding 130px top */
.hero-section {
  position: relative;
  min-height: 520px;
  padding: 130px 48px 40px 48px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
}

/* spec: grid 1.15fr 0.85fr, gap 40px, align-items center */
.hero-grid {
  max-width: var(--content-max-width);
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: center;
}

/* 2A — Left Hero Content */
/* spec: Inter 800 46px line-height 1.14 letter-spacing -0.025em */
.hero-headline {
  font-size: 46px;
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin-bottom: 16px;
}

/* spec: Inter 400 15.5px #D1D5DB lh 1.55 max-width 480px mb 24px */
.hero-subtext {
  font-size: 15.5px;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.55;
  max-width: 480px;
  margin-bottom: 24px;
}

/* 2B — Search Bar */
/* spec: bg white, height 48px, radius 8px, padding 4px 4px 4px 16px, max-width 500px, shadow */
.hero-search-wrap {
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border-radius: var(--radius-md);
  height: 48px;
  padding: 4px 4px 4px 16px;
  max-width: 500px;
  box-shadow: var(--shadow-search);
  border: 1px solid rgba(255,255,255,0.2);
}

/* spec: Inter 500 13.5px #1E293B, placeholder #94A3B8 */
.hero-search-input {
  flex: 1;
  background: transparent;
  color: #1E293B;
  font-size: 13.5px;
  font-weight: 500;
}
.hero-search-input::placeholder { color: var(--text-tertiary); }

/* spec: 40×40px, radius 6px, #FF7A00 bg, white magnifier 18px stroke 2.5 */
.hero-search-btn {
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  background: var(--brand-orange);
  color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 200ms ease;
}
.hero-search-btn:hover { background: var(--brand-orange-hover); }

/* 2C — Category Pills */
/* spec: flex-wrap, gap 8px, margin-top 14px, max-width 540px */
.hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  max-width: 540px;
}

/* spec: Inter 500 13px, padding 7px/14px, radius 8px, bg rgba(15,23,42,0.68), border rgba(255,255,255,0.16), blur(12px) */
.cat-pill {
  font-size: 13px;
  font-weight: 500;
  color: #E2E8F0;
  padding: 7px 14px;
  border-radius: var(--radius-md);
  background: rgba(15, 23, 42, 0.68);
  border: 1px solid var(--border-pill);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
/* spec active: bg rgba(30,41,59,0.85), border rgba(255,122,0,0.6), color #FFF */
.cat-pill.active,
.cat-pill:hover {
  background: rgba(30, 41, 59, 0.85);
  border-color: var(--brand-orange-border);
  color: var(--text-primary);
}
.cat-pill svg { opacity: 0.75; flex-shrink: 0; }

/* 2D — Right Hero Map Card */
/* spec: 440px wide, margin-left auto, bg rgba(10,15,28,0.78), blur(20px), border rgba(255,255,255,0.12), radius 18px, pad 18px, shadow 0 24px 60px */
.hero-map-card {
  width: 440px;
  margin-left: auto;
  background: var(--bg-card-hero);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-card-hero);
  border-radius: var(--radius-2xl);
  padding: 18px;
  box-shadow: var(--shadow-card-hero);
  display: flex;
  flex-direction: column;
  gap: 14px;  /* spec: 14px gap between map + footer */
}

/* spec: height 250px, radius 12px, bg #090E1A */
.hero-map-view {
  height: 250px;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-map);
  position: relative;
}

/* spec: flex space-between align-items center */
.hero-map-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* spec: Inter 700 15px #FFFFFF */
.hero-map-footer-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 3px;
}
/* spec: Inter 400 12px #94A3B8 */
.hero-map-footer-sub {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-tertiary);
}
/* spec: 38×38px circle, #FF7A00, shadow orange glow, hover scale(1.06) */
.hero-map-arrow {
  width: 38px; height: 38px;
  border-radius: var(--radius-full);
  background: var(--brand-orange);
  color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-orange);
  transition: transform 200ms ease;
}
.hero-map-arrow:hover { transform: scale(1.06); }

/* ─── 3. STATISTICS STRIP (Section 3) ──────────────────────── */
/* Wrapper below hero, inside page-container */
.page-container {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--content-padding);
}

/* spec: bg rgba(13,18,30,0.88), blur(20px), border rgba(255,255,255,0.08), radius 16px, pad 18px/24px, mb 32px */
.stats-strip {
  background: var(--bg-stats);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  padding: 18px 24px;
  margin-bottom: 32px;
  box-shadow: var(--shadow-card);
  /* spec: 6 equal columns, gap 14px */
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

/* Each stat item: flex row, align-items center, gap 12px */
.stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* spec: 38×38px circle, bg rgba(255,255,255,0.05) */
.stat-icon-ring {
  width: 38px; height: 38px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.05);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.stat-text { display: flex; flex-direction: column; }

/* spec: Inter 800 20px lh 1.1, per accent color */
.stat-num {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.1;
}

/* spec: Inter 600 11.5px #FFFFFF mt 2px */
.stat-lbl {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 2px;
  white-space: nowrap;
}

/* spec: Inter 400 10.5px #94A3B8 */
.stat-sub {
  font-size: 10.5px;
  font-weight: 400;
  color: var(--text-tertiary);
  white-space: nowrap;
}

/* ─── 4. MAIN 2-COLUMN SECTION (Section 4) ─────────────────── */
/* spec: 0.95fr 1.35fr, gap 22px, mb 36px */
.main-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.35fr;
  gap: 22px;
  margin-bottom: 36px;
}

/* --- Glassmorphism card base (Section 7 formula) --- */
.glass-card {
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  padding: 22px;
  box-shadow: var(--shadow-card);
}

/* 4A — Explore Gujarat on Map (Left Card) */
.map-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* spec: Inter 700 18px #FFFFFF */
.map-card-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

/* spec: 24×24px circle, orange tint bg */
.map-pin-badge {
  width: 24px; height: 24px;
  border-radius: var(--radius-full);
  background: var(--brand-orange-tint);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

/* spec: Inter 400 12.5px #94A3B8 */
.map-card-sub {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--text-tertiary);
  margin-top: 3px;
}

/* spec: 380px height, radius 12px, mt 14px, position relative */
.explore-map-view {
  height: 380px;
  width: 100%;
  border-radius: var(--radius-lg);
  margin-top: 14px;
  position: relative;
  overflow: hidden;
  background: var(--bg-map);
}

/* spec: absolute bottom-left inside map, bg rgba(10,15,28,0.88), blur(10px), border rgba(255,255,255,0.1), radius 8px, pad 8px 12px */
.map-legend {
  position: absolute;
  bottom: 14px;
  left: 14px;
  z-index: 500;
  background: var(--bg-legend);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border-legend);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* spec: each row — 8px dot + label, 11px #E2E8F0 */
.legend-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #E2E8F0;
  font-weight: 400;
}
.legend-dot {
  width: 8px; height: 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

/* 4B — Recent Contributions (Right Card) */
.contribs-card { position: relative; } /* for carousel arrow */

/* spec: flex row space-between align-center */
.contribs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.contribs-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* spec: Inter 700 18px #FFFFFF */
.contribs-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}
/* spec: Inter 600 13.5px #FF7A00, hover #FF9426 */
.view-all-link {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--brand-orange);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: color 200ms ease;
}
.view-all-link:hover { color: #FF9426; }

/* spec: 4 columns, gap 12px, mt 16px */
.contribs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 16px;
}

/* Individual contribution card */
/* spec: bg rgba(15,22,38,0.7), border rgba(255,255,255,0.08), radius 12px, pad 10px */
.contrib-card {
  background: var(--bg-contrib-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  /* spec: hover translateY(-3px), border rgba(255,122,0,0.4) */
  transition: transform 200ms ease, border-color 200ms ease;
}
.contrib-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 122, 0, 0.4);
}

/* spec: 115px height, object-fit cover, radius 8px, position relative */
.contrib-thumb-wrap {
  height: 115px;
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  background: #1E293B;
  flex-shrink: 0;
}
.contrib-thumb {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* spec: absolute top 6px left 6px, Inter 700 9.5px, pad 2px 7px, radius 4px, color #FFF */
.status-badge {
  position: absolute;
  top: 6px; left: 6px;
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  color: #FFFFFF;
  line-height: 1.4;
}

/* spec: Inter 500 11.5px #94A3B8, mt 8px */
.contrib-category {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-tertiary);
  margin-top: 8px;
}

/* spec: Inter 700 13.5px #FFF lh 1.3 mt 2px, ellipsis */
.contrib-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* spec: Inter 400 11.5px #94A3B8 mt 2px, ellipsis */
.contrib-loc {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--text-tertiary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* spec: flex row space-between, Inter 400 11px #64748B, mt 8px */
.contrib-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
}

/* spec: absolute right -12px top 55% translateY(-50%), 32×32px circle, rgba(30,41,59,0.95), border rgba(255,255,255,0.18), hover scale(1.1) */
.carousel-arrow {
  position: absolute;
  right: -12px;
  top: 55%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  border-radius: var(--radius-full);
  background: rgba(30, 41, 59, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--text-primary);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  transition: transform 200ms ease;
  z-index: 10;
}
.carousel-arrow:hover { transform: translateY(-50%) scale(1.1); }

/* ─── 5. MISSION BAR (Section 5) ─────────────────────────── */
/* spec: rgba(11,16,28,0.95), blur(20px), border rgba(255,255,255,0.08), radius 16px, pad 18px/28px, mb 36px */
/* spec: flex, space-between, align-items center, gap 24px */
.mission-bar {
  background: var(--bg-mission);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  padding: 18px 28px;
  margin-bottom: 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

/* spec: min-width 280px */
.mission-left { min-width: 280px; }

/* spec: Inter 700 15px #FF7A00 */
.mission-heading {
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-orange);
  margin-bottom: 4px;
}

/* spec: Inter 400 12px #94A3B8, max-width 320px, lh 1.4 */
.mission-desc {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-tertiary);
  max-width: 320px;
  line-height: 1.4;
}

/* spec: flex row, gap 28px, flex 1, justify-content space-around */
.mission-principles {
  display: flex;
  align-items: center;
  gap: 28px;
  flex: 1;
  justify-content: space-around;
}

.mission-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* spec: 36×36px circle, bg rgba(255,255,255,0.05) */
.mission-icon-circle {
  width: 36px; height: 36px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.05);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* spec: Inter 700 13.5px #FFFFFF */
.mission-item-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}

/* spec: Inter 400 11.5px #94A3B8 */
.mission-item-sub {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--text-tertiary);
}

/* ─── 6. MOBILE BOTTOM NAV (Section 10, Responsive) ────────── */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 64px;
  background: var(--bg-mobile-nav);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255,255,255,0.1);
  z-index: 1000;
  justify-content: space-around;
  align-items: center;
}
.mob-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 500;
}
.mob-nav-item.active { color: var(--brand-orange); }
.mob-nav-upload {
  width: 48px; height: 48px;
  border-radius: var(--radius-full);
  background: var(--brand-orange);
  color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  margin-top: -18px;
  box-shadow: var(--shadow-orange);
}

/* ─── 7. SUBPAGE UTILITY STYLES ─────────────────────────────── */
.page-top { padding-top: calc(var(--header-height) + 28px); padding-bottom: 4rem; }

.section-head {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.section-sub {
  font-size: 14px;
  color: var(--text-tertiary);
  margin-bottom: 2rem;
}

.btn-orange {
  background: var(--brand-orange);
  color: #FFFFFF;
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background 200ms ease, transform 200ms ease;
}
.btn-orange:hover { background: var(--brand-orange-hover); transform: translateY(-1px); }

.form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  font-size: 14px;
  transition: border-color 200ms ease;
}
.form-input:focus { border-color: var(--brand-orange-border); }
.form-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-tertiary);
  display: block;
  margin-bottom: 6px;
}

/* ─── 8. RESPONSIVE (Section 10) ────────────────────────────── */
@media (max-width: 1080px) {
  .header-inner { padding: 16px 24px; }
  .hero-section { padding: 110px 24px 32px; }

  /* Hero stacks to single column */
  .hero-grid { grid-template-columns: 1fr; }
  .hero-map-card { width: 100%; margin-left: 0; }

  /* Stats → 3 columns */
  .stats-strip { grid-template-columns: repeat(3, 1fr); }

  /* Main section → single column */
  .main-grid { grid-template-columns: 1fr; }

  /* Recent cards → 2 columns */
  .contribs-grid { grid-template-columns: repeat(2, 1fr); }

  /* Mission stacks */
  .mission-bar { flex-direction: column; align-items: flex-start; }
  .mission-principles { flex-wrap: wrap; gap: 16px; justify-content: flex-start; }
}

@media (max-width: 768px) {
  /* Hide desktop nav */
  .nav-links, #header-upload-btn { display: none; }

  /* Show mobile bottom nav */
  .mobile-nav { display: flex; }
  body { padding-bottom: 64px; }

  /* Headline shrinks */
  .hero-headline { font-size: 32px; }

  /* Stats → 2 columns */
  .stats-strip { grid-template-columns: repeat(2, 1fr); }

  /* Contributions → 1 column */
  .contribs-grid { grid-template-columns: 1fr; }

  .page-container { padding: 0 16px; }
}

/* ─── 9. LEAFLET MAP OVERRIDES ─────────────────────────────── */
.leaflet-container { background: var(--bg-map) !important; }
.leaflet-popup-content-wrapper {
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
}
.leaflet-popup-content { margin: 0 !important; padding: 0 !important; }
.leaflet-popup-tip { background: #FFFFFF !important; }
.leaflet-control-zoom a {
  background: rgba(10,15,28,0.9) !important;
  color: #FFFFFF !important;
  border-color: rgba(255,255,255,0.15) !important;
}
.leaflet-control-zoom a:hover { background: rgba(20,28,50,0.95) !important; }

/* ============================================================
   EXACT SPEC: EXPLORE BY CATEGORY SECTION
   ============================================================ */
.cat-explore-section {
  position: relative;
  background: #FFFFFF;
  padding: 80px 24px 90px;
  border-bottom: 1px solid #F1F5F9;
}

.cat-explore-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

/* ── Section Header ── */
.cat-explore-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 720px;
}

.cat-explore-pill-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.cat-explore-line {
  display: inline-block;
  width: 40px;
  height: 1.5px;
  background: #93C5FD;
}

.cat-explore-pill-text {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #0A4FCD;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cat-explore-pill-text::before,
.cat-explore-pill-text::after {
  content: '•';
  font-size: 14px;
}

/* Tricolor accent bar */
.cat-explore-accent-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 2px 0 4px;
}

.cat-explore-accent-bar .bar-saffron {
  width: 32px;
  height: 3.5px;
  background: #FF7A00;
  border-radius: 2px;
}

.cat-explore-accent-bar .bar-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #047857;
}

.cat-explore-accent-bar .bar-green {
  width: 32px;
  height: 3.5px;
  background: #047857;
  border-radius: 2px;
}

.cat-explore-title {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: clamp(30px, 3.5vw, 44px);
  font-weight: 800;
  color: #0A1C3E;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
}

.cat-explore-subtitle {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(14px, 1.1vw, 16px);
  color: #64748B;
  font-weight: 400;
  margin: 0;
  line-height: 1.5;
}

/* ── 2-Card Grid ── */
.cat-explore-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px;
  width: 100%;
}

.cat-showcase-card-link {
  display: flex;
  text-decoration: none;
  color: inherit;
  width: 100%;
  height: 100%;
}

.cat-showcase-card-link .cat-showcase-card {
  width: 100%;
}

.cat-showcase-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 28px;
  padding: 44px 36px 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 14px 36px -8px rgba(15, 23, 42, 0.05), 0 4px 12px -2px rgba(15, 23, 42, 0.02);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease;
}

.cat-showcase-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 52px -10px rgba(15, 23, 42, 0.1), 0 8px 20px -4px rgba(15, 23, 42, 0.04);
}

.cat-card-edu:hover {
  border-color: #93C5FD;
}

.cat-card-health:hover {
  border-color: #A7F3D0;
}

/* ── Card Illustration ── */
.cat-showcase-illustration {
  width: 100%;
  max-width: 320px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.cat-showcase-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cat-showcase-card:hover .cat-showcase-svg {
  transform: scale(1.035);
}

/* ── Card Body ── */
.cat-showcase-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  flex: 1;
}

.cat-showcase-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 23px;
  font-weight: 800;
  color: #0A1C3E;
  letter-spacing: 0.03em;
  margin: 0;
  text-transform: uppercase;
}

.cat-title-underline {
  width: 36px;
  height: 3px;
  border-radius: 2px;
  margin: 10px auto 16px;
}

.underline-blue {
  background: #0A4FCD;
}

.underline-green {
  background: #15803D;
}

.cat-showcase-desc {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14.5px;
  color: #475569;
  line-height: 1.65;
  margin: 0 0 28px;
  max-width: 380px;
  flex: 1;
}

/* ── Card Action Buttons ── */
.cat-showcase-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 340px;
  padding: 14px 24px;
  border-radius: 12px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  color: #FFFFFF !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.btn-blue {
  background: #0A4FCD;
}

.btn-blue:hover {
  background: #003882;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(10, 79, 205, 0.35);
}

.btn-green {
  background: #15803D;
}

.btn-green:hover {
  background: #0F5C2C;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(21, 128, 61, 0.35);
}

.btn-arrow {
  font-size: 16px;
  transition: transform 0.2s ease;
}

.cat-showcase-btn:hover .btn-arrow {
  transform: translateX(4px);
}

/* ── Responsive ── */
@media (max-width: 860px) {
  .cat-explore-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .cat-showcase-card {
    padding: 36px 24px 32px;
  }
}