@import url('honor-grid-vector.css');

/* Honor Grid preview polish — intentionally layered over the core design */

@media (min-width: 981px) {
  .site-header {
    min-height: 68px !important;
    padding: 11px 4.2vw !important;
  }

  .site-header .logo-brand img {
    width: clamp(156px, 13vw, 198px) !important;
  }

  .site-header nav {
    gap: 8px 14px !important;
    font-size: 11px !important;
  }

  .site-header nav a:not(.donate-cta) {
    white-space: nowrap;
  }

  .site-header .donate-cta {
    min-height: 42px;
    padding: 0 16px;
  }

  .home-hero,
  .grid-hero {
    min-height: calc(100vh - 68px) !important;
  }
}

@media (min-width: 981px) and (max-width: 1240px) {
  .site-header {
    padding-right: 3vw !important;
    padding-left: 3vw !important;
  }

  .site-header .logo-brand img {
    width: 166px !important;
  }

  .site-header nav {
    gap: 7px 11px !important;
    font-size: 10px !important;
  }

  .site-header .donate-cta {
    padding: 0 13px;
  }
}

/* National/regional map controls. */
.grid-map-controls {
  position: absolute;
  z-index: 700;
  top: 22px;
  right: 22px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.grid-view-switch {
  display: inline-flex;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(7,9,11,.84);
  backdrop-filter: blur(12px);
}

.grid-view-switch button,
.grid-expand-button {
  min-height: 38px;
  border: 0;
  background: transparent;
  color: #aeb6be;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}

.grid-view-switch button {
  padding: 0 13px;
  border-right: 1px solid rgba(255,255,255,.12);
}
.grid-view-switch button:last-child { border-right: 0; }
.grid-view-switch button.is-active {
  background: #ffd400;
  color: #090b0e;
}
.grid-expand-button {
  padding: 0 13px;
  border: 1px solid rgba(255,212,0,.32);
  background: rgba(7,9,11,.84);
  color: #f4f4ef;
  backdrop-filter: blur(12px);
}
.grid-expand-button:hover,
.grid-expand-button:focus-visible { border-color: #ffd400; }

.grid-map-frame.is-expanded {
  position: fixed;
  z-index: 3500;
  inset: 18px;
  width: auto;
  height: auto;
  min-height: 0;
  margin: 0;
  border-color: rgba(255,212,0,.42);
  box-shadow: 0 28px 100px rgba(0,0,0,.72);
}
.grid-map-frame.is-expanded #honor-grid-map { min-height: 100%; height: 100%; }
body.grid-map-expanded { overflow: hidden; }
body.grid-map-expanded::before {
  content: "";
  position: fixed;
  z-index: 3400;
  inset: 0;
  background: rgba(0,0,0,.82);
  backdrop-filter: blur(7px);
}

/* Business model: four ways into the same light system. */
.light-model-rail {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.08);
  gap:1px;
}
.light-model-rail article {
  min-height:300px;
  display:flex;
  flex-direction:column;
  padding:30px;
  background:#0d1014;
}
.light-model-rail article>span {
  color:#ffd400;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
}
.light-model-rail strong {
  margin-top:48px;
  color:#f7f7f3;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(25px,2.5vw,36px);
  line-height:1.04;
}
.light-model-rail p {
  margin:15px 0 0;
  color:#ffd400;
  font-weight:900;
  font-size:14px;
}
.light-model-rail small {
  margin-top:auto;
  padding-top:28px;
  color:#8e979f;
  font-size:13px;
  line-height:1.6;
}
.light-model-note {
  max-width:900px;
  margin:24px 0 0;
  color:#77818a;
  font-size:12px;
  line-height:1.65;
}
.partner-layer-actions{display:flex;gap:22px;flex-wrap:wrap}

/* City status drawer becomes the live funding + impact story. */
.honor-map-link { display:none !important; }
.deployment-panel.city-status-panel {
  width:min(510px,96vw);
  background:#0a0d10;
}
.city-status-panel-body { padding:82px 34px 38px; }
.city-status-eyebrow {
  margin:0 0 10px;
  color:#ffd400;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:9px;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.city-status-panel h2 {
  margin:0 0 30px;
  color:#f7f7f3;
  font-size:clamp(42px,5vw,60px);
  line-height:.96;
  letter-spacing:-.045em;
}
.city-light-summary {
  display:grid;
  grid-template-columns:1fr 1fr;
  border:1px solid rgba(255,255,255,.12);
}
.city-light-summary>div { padding:17px; }
.city-light-summary>div+div { border-left:1px solid rgba(255,255,255,.12); }
.city-light-summary strong {
  display:block;
  color:#f7f7f3;
  font-size:24px;
  letter-spacing:-.03em;
}
.city-light-summary span {
  display:block;
  margin-top:5px;
  color:#68727c;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:8px;
  font-weight:900;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.city-light-track {
  height:5px;
  margin:16px 0 8px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}
.city-light-track i {
  display:block;
  height:100%;
  background:#ffd400;
  box-shadow:0 0 12px rgba(255,212,0,.7);
}
.city-light-meta {
  margin:0 0 28px;
  color:#7d8790;
  font-size:11px;
}
.city-status-list { border-top:1px solid rgba(255,255,255,.14); }
.city-status-row {
  --status-color:#ffd400;
  --row-progress:0%;
  display:grid;
  grid-template-columns:14px minmax(0,1fr) minmax(105px,auto);
  gap:13px;
  align-items:center;
  min-height:88px;
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.11);
}
.city-status-dot {
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--status-color);
  box-shadow:0 0 13px color-mix(in srgb,var(--status-color) 70%,transparent);
}
.city-status-copy { min-width:0; }
.city-status-name {
  display:block;
  color:#f3f4f0;
  font-size:15px;
  font-weight:850;
}
.city-status-copy small {
  display:block;
  margin-top:4px;
  color:#747e87;
  font-size:10px;
  line-height:1.4;
}
.city-status-progress {
  display:block;
  width:100%;
  height:2px;
  margin-top:10px;
  background:rgba(255,255,255,.07);
  overflow:hidden;
}
.city-status-progress i {
  display:block;
  width:var(--row-progress);
  height:100%;
  background:var(--status-color);
  box-shadow:0 0 7px var(--status-color);
}
.city-status-action { text-align:right; }
.city-status-state {
  display:block;
  color:#6f7882;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:8px;
  font-weight:900;
  letter-spacing:.07em;
  line-height:1.4;
  text-transform:uppercase;
}
.city-status-add {
  display:inline-block;
  margin-top:8px;
  color:#f0f1ed;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.city-status-add b { color:var(--status-color);padding-left:3px; }
.city-status-row.is-activated .city-status-state,
.city-status-row.is-progress .city-status-state,
.city-status-row.is-funded .city-status-state { color:var(--status-color); }
.city-status-row.is-open .city-status-dot { opacity:.28;box-shadow:none; }
.city-status-row.is-open .city-status-name { color:#a5adb5; }
.city-status-row.is-progress .city-status-dot { animation:statusBreath 2.4s ease-in-out infinite; }
.city-status-row.is-funded .city-status-dot { box-shadow:0 0 16px var(--status-color),0 0 28px color-mix(in srgb,var(--status-color) 45%,transparent); }
.city-status-row.is-na { opacity:.34; }
.city-status-row.is-na .city-status-dot { background:#69727b;box-shadow:none; }
.city-status-row.is-na .city-status-progress { display:none; }
@keyframes statusBreath {
  0%,100% { opacity:.48;box-shadow:0 0 6px var(--status-color); }
  50% { opacity:1;box-shadow:0 0 18px var(--status-color); }
}
.city-status-history {
  display:grid;
  grid-template-columns:1fr 1fr;
  margin-top:28px;
  border:1px solid rgba(255,255,255,.10);
}
.city-status-history p {
  min-height:78px;
  margin:0;
  padding:15px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.city-status-history p:nth-child(odd) { border-right:1px solid rgba(255,255,255,.08); }
.city-status-history span {
  display:block;
  color:#68727b;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:8px;
  font-weight:900;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.city-status-history strong {
  display:block;
  margin-top:7px;
  color:#f1f2ee;
  font-size:15px;
}
.city-status-history .city-partner strong { color:#ffd400; }
.city-status-footer {
  margin-top:26px;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.12);
}
.city-status-footer p { margin:0 0 16px;color:#7f8992;font-size:11px;line-height:1.55; }
.city-status-footer p strong { color:#aeb6bd; }
.city-status-footer>a {
  display:block;
  min-height:48px;
  padding:15px 16px;
  background:#ffd400;
  color:#080a0c;
  font-size:11px;
  font-weight:950;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.city-status-footer>a.city-partner-link {
  margin-top:8px;
  border:1px solid rgba(255,255,255,.18);
  background:transparent;
  color:#e5e7e2;
}

/* Give the editorial statement room to breathe instead of stacking into five short lines. */
@media (min-width: 1051px) {
  .home-network {
    grid-template-columns:minmax(455px,.95fr) minmax(520px,1.05fr) !important;
  }
  .home-network-copy { padding-right:5vw !important; }
  .home-network h2 {
    max-width:740px !important;
    font-size:clamp(46px,4.7vw,70px) !important;
    line-height:.96;
    text-wrap:balance;
  }
}
.home-map-status { border-color:rgba(255,212,0,.24) !important; }
.home-map-caption { background:rgba(7,9,11,.72) !important; }

@media (max-width:1100px) {
  .light-model-rail { grid-template-columns:1fr 1fr; }
}
@media (max-width:760px) {
  .grid-map-controls {
    top:auto;
    right:12px;
    left:12px;
    bottom:90px;
    justify-content:space-between;
  }
  .grid-view-switch { flex:1; }
  .grid-view-switch button { flex:1;padding:0 8px; }
  .grid-expand-button { flex:0 0 auto; }
  .grid-map-frame.is-expanded { inset:8px; }
  .light-model-rail { grid-template-columns:1fr; }
  .light-model-rail article { min-height:235px; }
  .city-status-panel-body { padding:76px 24px 24px; }
  .city-status-row { grid-template-columns:12px minmax(0,1fr);gap:10px;padding:14px 0; }
  .city-status-action { grid-column:2;text-align:left; }
  .city-status-history { grid-template-columns:1fr; }
  .city-status-history p:nth-child(odd) { border-right:0; }
}

@media (prefers-reduced-motion: reduce) {
  .grid-system-label::before,
  .city-status-row.is-progress .city-status-dot {
    animation:none !important;
  }
}