/* ═══════════════════════════════════════════════════════════
   FogoFi Grants — Fogo-real brand alignment + 3D card system
   + new sections (featured spotlight, urgency strip, live counter).
   Loaded AFTER grants.css so :root + rules here win.
   ═══════════════════════════════════════════════════════════ */

/* Real Fogo display font */
@import url('https://fonts.googleapis.com/css2?family=Funnel+Display:wght@400;500;600;700;800&display=swap');

/* ── Fogo real palette (matches fogofi.com / app.fogofi.com) ── */
:root{
  --bg:#0a0806;               /* warm ember black */
  --bg2:#131018;
  --orange:#ff3d00;           /* Fogo real flame */
  --orange-dim:rgba(255,61,0,.15);
  --orange-glow:rgba(255,61,0,.32);
  --cyan:#66ceff;             /* Fogo accent */
  --cyan-dim:rgba(102,206,255,.14);
  --glass:rgba(255,255,255,.035);
  --glass-border:rgba(255,255,255,.07);
  --sg:'Funnel Display','Space Grotesk',sans-serif;
  --display:'Funnel Display',sans-serif;
}

/* warm-tint the base so the ember palette reads as one product */
body{ background:
  radial-gradient(1200px 600px at 80% -10%, rgba(255,61,0,.06), transparent 60%),
  radial-gradient(900px 500px at -10% 10%, rgba(102,206,255,.045), transparent 55%),
  var(--bg); }

/* headings on the real Fogo font, tighter tracking */
.hero-title,.section-title,.explore-title,.promo-title,.modal-title,
.nav-logo,.card-title,.feat-title{ font-family:var(--display); letter-spacing:-.015em; }

/* prominent orange glows re-tinted to Fogo flame */
.glow-text{ text-shadow:0 0 30px rgba(255,61,0,.35), 0 0 64px rgba(255,61,0,.12); }
.btn-glow{ box-shadow:0 4px 22px rgba(255,61,0,.32); }
.btn-glow:hover{ box-shadow:0 8px 34px rgba(255,61,0,.45); }

/* hero "Up For Grabs" stat gets the flame + cyan under-glow */
#statFunding{ color:var(--orange); }
.stat-card{ transform-style:preserve-3d; }

/* ═══ 3D CARD SYSTEM ═══════════════════════════════════════
   Rule: perspective lives on the STAGE (the grid), never on the
   moving element. Interactive children ride the highest translateZ
   so they keep the pointer. Only on real pointers, never touch. */
@media (hover:hover) and (pointer:fine){

  .program-grid{ perspective:1500px; }

  /* entrance: fade only, so the resting tilt transform always applies */
  .stagger-grid .program-card{ animation:cardFade .5s ease both; }
  @keyframes cardFade{ from{opacity:0} to{opacity:1} }

  .program-card{
    overflow:visible;
    transform-style:preserve-3d;
    transform:
      rotateY(var(--rx,0deg)) rotateX(var(--ry,0deg))
      translateZ(0) translateY(calc(var(--lift,0px) * -1));
    transition:transform .16s ease, box-shadow .3s ease, border-color .3s ease;
    will-change:transform;
  }
  .program-card:hover{
    border-color:var(--orange-glow);
    transform:
      rotateY(var(--rx,0deg)) rotateX(var(--ry,0deg))
      translateY(calc(var(--lift,0px) * -1));
    box-shadow:
      0 26px 60px rgba(0,0,0,.55),
      0 0 0 1px var(--orange-dim),
      0 18px 50px rgba(255,61,0,.14);
  }
  /* depth layers */
  .program-card .card-header{ transform:translateZ(30px); }
  .program-card .card-title{ transform:translateZ(34px); }
  .program-card .card-desc{ transform:translateZ(16px); }
  .program-card .card-tags{ transform:translateZ(22px); }
  .program-card .card-status-row{ transform:translateZ(24px); }
  .program-card .card-footer{ transform:translateZ(20px); }
  .program-card .card-type-badge{ transform:translateZ(46px); }
  .program-card .card-bookmark{ transform:translateZ(50px); } /* interactive, on top */
  /* top accent line inset so it clears the rounded corners */
  .program-card::before{ left:14px; right:14px; }
  /* pointer-tracked sheen */
  .program-card::after{
    content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%), rgba(255,61,0,.12), transparent 42%);
    opacity:0; transition:opacity .3s; z-index:1;
  }
  .program-card:hover::after{ opacity:1; }
  .program-card > *{ position:relative; z-index:2; }

  /* hero stat cards get a gentle tilt too */
  .hero-stats{ perspective:1200px; }
  .stat-card{
    transform:rotateY(var(--rx,0deg)) rotateX(var(--ry,0deg)) translateY(calc(var(--lift,0px) * -1));
    transition:transform .16s ease, box-shadow .3s ease, border-color .3s ease;
  }
}

/* ═══ LIVE "UP FOR GRABS" HERO EMPHASIS ═══════════════════ */
.hero-stats .stat-card:nth-child(2){
  border-color:var(--orange-dim);
  background:linear-gradient(180deg, rgba(255,61,0,.08), var(--glass));
  box-shadow:0 10px 40px rgba(255,61,0,.10);
}
.hero-stats .stat-card:nth-child(2) .stat-num{
  text-shadow:0 0 26px rgba(255,61,0,.4);
}

/* ═══ FEATURED / SPOTLIGHT CARD ═══════════════════════════ */
#featuredSection{ perspective:1600px; }
.feat-card{
  position:relative;
  display:grid;
  grid-template-columns:1fr 260px;
  gap:24px;
  padding:28px;
  border-radius:20px;
  background:
    linear-gradient(135deg, rgba(255,61,0,.10), rgba(102,206,255,.05) 60%, var(--glass));
  border:1px solid var(--orange-dim);
  cursor:pointer;
  overflow:hidden;
  transform-style:preserve-3d;
  transform:rotateY(var(--rx,0deg)) rotateX(var(--ry,0deg)) translateY(calc(var(--lift,0px) * -1));
  transition:transform .18s ease, box-shadow .35s ease, border-color .35s ease;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.feat-card:hover{
  border-color:var(--orange);
  box-shadow:0 30px 80px rgba(0,0,0,.55), 0 20px 60px rgba(255,61,0,.16);
}
.feat-glow{
  position:absolute; top:-40%; right:-10%;
  width:420px; height:420px; pointer-events:none;
  background:radial-gradient(circle, rgba(255,61,0,.16), transparent 68%);
  animation:promoFloat 7s ease infinite;
}
.feat-badge{
  align-self:flex-start; display:inline-block; margin-bottom:10px;
  padding:5px 12px; border-radius:14px;
  background:var(--orange); color:#0a0806;
  font-family:var(--display); font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.6px;
}
.feat-main{ position:relative; z-index:2; transform:translateZ(26px); min-width:0; }
.feat-head{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.feat-logo,.feat-logo-ph{
  width:56px; height:56px; border-radius:14px; flex-shrink:0; object-fit:cover;
}
.feat-logo-ph{ background:var(--orange-dim); display:flex; align-items:center; justify-content:center; font-size:26px; }
.feat-title{ font-size:24px; font-weight:700; line-height:1.15; margin-bottom:3px; }
.feat-type{ font-size:12px; color:var(--cyan); text-transform:uppercase; letter-spacing:.6px; font-weight:600; }
.feat-desc{ font-size:14px; color:var(--text2); line-height:1.6; margin-bottom:14px; max-width:52ch; }
.feat-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.feat-side{
  position:relative; z-index:2; transform:translateZ(34px);
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  gap:6px; padding-left:24px; border-left:1px solid var(--glass-border);
}
.feat-amount{ font-family:var(--display); font-size:40px; font-weight:800; color:var(--orange); line-height:1; text-shadow:0 0 30px rgba(255,61,0,.35); }
.feat-amount-lbl{ font-size:12px; color:var(--text3); text-transform:uppercase; letter-spacing:.6px; margin-bottom:8px; }
.feat-cd{ font-family:var(--mono); font-size:13px; color:var(--cyan); margin-bottom:12px; }
.feat-cta{ width:100%; justify-content:center; }

/* ═══ CLOSING-SOON URGENCY STRIP (marquee) ════════════════ */
.urgency-strip{
  max-width:1200px; margin:0 auto; padding:0 20px;
}
.urgency-inner{
  display:flex; align-items:center; gap:14px;
  border:1px solid var(--glass-border); border-radius:14px;
  background:linear-gradient(90deg, rgba(255,61,0,.06), var(--glass));
  padding:10px 14px; overflow:hidden;
}
.urgency-label{
  flex-shrink:0; display:inline-flex; align-items:center; gap:7px;
  font-family:var(--display); font-size:13px; font-weight:700; color:var(--orange);
  text-transform:uppercase; letter-spacing:.5px;
}
.urgency-label .u-flame{ width:7px; height:7px; border-radius:50%; background:var(--orange); box-shadow:0 0 8px var(--orange); animation:pulse 1.5s infinite; }
.urgency-viewport{ flex:1; min-width:0; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.urgency-track{ display:flex; gap:10px; width:max-content; animation:uScroll 40s linear infinite; }
.urgency-viewport:hover .urgency-track{ animation-play-state:paused; }
.u-chip{
  flex-shrink:0; display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; border-radius:20px; cursor:pointer;
  background:var(--glass); border:1px solid var(--glass-border);
  color:var(--text2); font-size:13px; font-weight:500; transition:all .2s ease;
}
.u-chip:hover{ border-color:var(--orange); color:var(--text1); transform:translateY(-1px); }
.u-chip .u-dot{ width:6px; height:6px; border-radius:50%; background:var(--cyan); }
.u-chip.u-warn .u-dot{ background:var(--orange); }
.u-chip.u-urgent .u-dot{ background:var(--red); box-shadow:0 0 6px var(--red); animation:pulse 1.4s infinite; }
.u-chip .u-name{ max-width:220px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.u-chip .u-days{ font-family:var(--mono); font-size:12px; color:var(--orange); font-weight:600; }
.u-chip.u-urgent .u-days{ color:var(--red); }
@keyframes uScroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ═══ RESPONSIVE ═══════════════════════════════════════════ */
@media (max-width:768px){
  .feat-card{ grid-template-columns:1fr; gap:16px; padding:20px; }
  .feat-side{ padding-left:0; border-left:none; border-top:1px solid var(--glass-border); padding-top:16px; }
  .feat-amount{ font-size:32px; }
  .feat-title{ font-size:20px; }
  .urgency-label span:not(.u-flame){ display:none; }
  .u-chip .u-name{ max-width:150px; }
}
@media (prefers-reduced-motion: reduce){
  .urgency-track{ animation:none; }
  .feat-glow{ animation:none; }
}

/* ── Overlap fixes: reserve room so the type badge never sits on the title ── */
.program-card .card-title-wrap{ padding-right:98px; }
.program-card .card-type-badge{ z-index:3; white-space:nowrap; }
/* source pill for aggregated non-Karma programs */
.tag.src-st{ background:var(--cyan-dim); color:var(--cyan); font-weight:600; }
.feat-title{ padding-right:8px; }

/* ═══ EXPLORE redesign + numbered pagination + active filters ═══ */
.explore-title{ font-size:34px; }
.search-bar{ max-width:680px; }
.search-input{ border-radius:14px; padding:14px 84px 14px 44px; }
.search-input:focus{ border-color:var(--orange); box-shadow:0 0 0 3px var(--orange-dim); }
.filter-sidebar{
  background:linear-gradient(180deg, rgba(255,61,0,.045), var(--glass));
  border:1px solid var(--glass-border); border-radius:16px; padding:18px 16px;
  top:110px; max-height:calc(100vh - 130px);
}
.filter-header h3{ font-family:var(--display); }
.filter-group h4{ color:var(--orange); }
.eco-chip.active{ background:var(--orange-dim); border-color:var(--orange); color:var(--orange); }
.sort-select:hover,.sort-select:focus{ border-color:var(--orange-dim); }
.result-count{ font-family:var(--display); font-weight:600; color:var(--text1); }

.active-filters{ display:flex; flex-wrap:wrap; gap:8px; margin:-4px 0 16px; align-items:center; }
.af-chip{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:16px;
  background:var(--orange-dim); border:1px solid var(--orange-dim); color:var(--orange);
  font-size:12px; font-weight:600; cursor:pointer; transition:all .2s ease; }
.af-chip:hover{ border-color:var(--orange); background:rgba(255,61,0,.2); }
.af-chip .af-x{ font-size:14px; line-height:1; opacity:.8; }
.af-clear{ padding:5px 12px; border-radius:16px; background:none; border:1px solid var(--glass-border);
  color:var(--text2); font-size:12px; cursor:pointer; }
.af-clear:hover{ border-color:var(--text3); color:var(--text1); }

.pager{ display:flex; justify-content:center; align-items:center; gap:6px; flex-wrap:wrap; padding:28px 0 8px; }
.pg-btn,.pg-num{ min-width:38px; height:38px; padding:0 12px; border-radius:10px;
  background:var(--glass); border:1px solid var(--glass-border); color:var(--text2);
  font-family:var(--display); font-size:14px; font-weight:600; cursor:pointer; transition:all .2s ease; }
.pg-btn:hover:not([disabled]),.pg-num:hover{ border-color:var(--orange); color:var(--text1); transform:translateY(-1px); }
.pg-btn[disabled]{ opacity:.4; cursor:not-allowed; }
.pg-num.active{ background:var(--orange); border-color:var(--orange); color:#0a0806; }
.pg-ellipsis{ color:var(--text3); padding:0 4px; }
@media (max-width:768px){
  .pg-btn,.pg-num{ min-width:34px; height:34px; font-size:13px; padding:0 10px; }
  .explore-title{ font-size:26px; }
}

/* ═══ Tools row + Match + Calendar + Pipeline ═══ */
.home-tools{ max-width:1200px; margin:0 auto; padding:4px 20px 0; display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.home-tools a{ display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:22px; background:var(--glass); border:1px solid var(--glass-border); color:var(--text1); font-family:var(--display); font-weight:600; font-size:14px; transition:all .2s ease; }
.home-tools a:hover{ border-color:var(--orange); transform:translateY(-1px); text-decoration:none; }

/* Match */
.match-form{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:16px; }
.match-form .sort-select{ min-width:160px; }
.match-kw{ flex:1; min-width:240px; padding:11px 14px; background:var(--glass); border:1px solid var(--glass-border); border-radius:12px; color:var(--text1); font-size:15px; font-family:var(--inter); outline:none; }
.match-kw:focus{ border-color:var(--orange); box-shadow:0 0 0 3px var(--orange-dim); }
.match-why{ display:inline-block; margin-bottom:8px; padding:4px 10px; border-radius:12px; background:var(--cyan-dim); color:var(--cyan); font-size:11px; font-weight:600; }

/* Calendar */
.cal-topnav{ display:flex; align-items:center; gap:16px; margin-top:14px; }
.cal-label{ font-family:var(--display); font-weight:700; font-size:20px; min-width:200px; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal-dow{ text-align:center; font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--text3); padding:6px 0; font-weight:600; }
.cal-cell{ min-height:96px; border:1px solid var(--glass-border); border-radius:10px; padding:6px; background:var(--glass); display:flex; flex-direction:column; gap:3px; }
.cal-cell.cal-empty{ background:transparent; border:none; }
.cal-cell.cal-has{ border-color:var(--orange-dim); }
.cal-cell.cal-today{ border-color:var(--orange); box-shadow:0 0 0 1px var(--orange-dim) inset; }
.cal-num{ font-size:12px; color:var(--text3); font-family:var(--mono); }
.cal-cell.cal-today .cal-num{ color:var(--orange); font-weight:700; }
.cal-item{ text-align:left; width:100%; padding:3px 6px; border-radius:6px; background:var(--orange-dim); color:var(--orange); border:none; font-size:10.5px; font-weight:600; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-item:hover{ background:rgba(255,61,0,.28); }
.cal-more{ font-size:10px; color:var(--text3); }
.cal-list{ margin-top:24px; }
.cal-row{ display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--glass-border); flex-wrap:wrap; }
.cal-row-t{ flex:1; min-width:180px; text-align:left; background:none; border:none; color:var(--text1); font-family:var(--display); font-weight:600; font-size:15px; cursor:pointer; }
.cal-row-t:hover{ color:var(--orange); }
.cal-row-m{ font-family:var(--mono); font-size:13px; color:var(--text2); }
.cal-ics{ padding:6px 12px; border-radius:9px; background:var(--glass); border:1px solid var(--glass-border); color:var(--cyan); font-size:12px; font-weight:600; cursor:pointer; }
.cal-ics:hover{ border-color:var(--cyan); }

/* Pipeline */
.pipe-board{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.pipe-col{ background:var(--glass); border:1px solid var(--glass-border); border-radius:14px; padding:14px; min-height:120px; }
.pipe-h{ font-family:var(--display); font-weight:700; font-size:15px; margin-bottom:12px; display:flex; justify-content:space-between; align-items:center; }
.pipe-h span{ font-family:var(--mono); font-size:12px; color:var(--orange); background:var(--orange-dim); border-radius:10px; padding:1px 8px; }
.pipe-card{ background:rgba(255,255,255,.03); border:1px solid var(--glass-border); border-radius:10px; padding:10px; margin-bottom:10px; }
.pipe-t{ font-family:var(--display); font-weight:600; font-size:13px; cursor:pointer; margin-bottom:8px; line-height:1.3; }
.pipe-t:hover{ color:var(--orange); }
.pipe-sel{ width:100%; padding:5px 8px; border-radius:8px; background:var(--bg2); border:1px solid var(--glass-border); color:var(--text1); font-size:12px; margin-bottom:6px; }
.pipe-note{ width:100%; min-height:44px; resize:vertical; padding:6px 8px; border-radius:8px; background:var(--bg2); border:1px solid var(--glass-border); color:var(--text2); font-size:12px; font-family:var(--inter); outline:none; }
.pipe-note:focus{ border-color:var(--orange-dim); }
/* modal pipeline control */
.pipe-ctl{ margin-bottom:12px; padding:14px; border:1px solid var(--glass-border); border-radius:var(--radius-sm); background:var(--glass); }
.pipe-ctl-lbl{ font-size:12px; text-transform:uppercase; letter-spacing:.6px; color:var(--text3); margin-bottom:8px; }
.pipe-ctl-row{ display:flex; gap:8px; flex-wrap:wrap; }
.pipe-btn{ padding:8px 14px; border-radius:9px; background:var(--bg2); border:1px solid var(--glass-border); color:var(--text2); font-size:13px; font-weight:600; cursor:pointer; transition:all .2s; }
.pipe-btn:hover{ border-color:var(--orange); color:var(--text1); }
.pipe-btn.on{ background:var(--orange); border-color:var(--orange); color:#0a0806; }
.pipe-btn.ics{ color:var(--cyan); }
.pipe-btn.ics:hover{ border-color:var(--cyan); }

@media(max-width:900px){ .pipe-board{ grid-template-columns:1fr 1fr; } }
@media(max-width:768px){ .cal-cell{ min-height:70px; } .cal-item{ font-size:9px; } .pipe-board{ grid-template-columns:1fr; } .match-form{ flex-direction:column; align-items:stretch; } .match-form .sort-select,.match-kw{ min-width:0; width:100%; } }

/* one-tap share button on cards (next to bookmark) */
.card-share{ position:absolute; bottom:16px; right:46px; background:none; border:none; color:var(--text3); font-size:15px; cursor:pointer; padding:4px; line-height:1; transition:color .25s ease, transform .25s ease; z-index:3; }
.card-share:hover{ color:var(--cyan); transform:scale(1.18); }
@media (hover:hover) and (pointer:fine){ .program-card .card-share{ transform:translateZ(50px); } .program-card .card-share:hover{ transform:translateZ(50px) scale(1.18); } }