/* --- */
/* Organizers Page Specific Styles */

#the-challenge h3 span {
  font-size: 1.25rem;
}

/* Attendee Challenges */
#attendee-challenges {
  background-image: linear-gradient(to top, var(--color-gray-900), var(--color-black));
}
#attendee-challenges .section-heading h2 {
  letter-spacing: -0.02em;
}
.challenge-grid {
  display: grid;
  gap: 2rem;
  margin-top: 2.5rem;
}
@media (min-width: 992px) {
  .challenge-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.challenge-column h3 {
  color: var(--color-white);
  font-weight: 800;
  text-align: center;
  margin-bottom: 1.25rem;
}

.bars {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.bar-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1rem;
  align-items: center;
}
@media (min-width: 768px) {
  .bar-row { grid-template-columns: 1.1fr 2fr; }
}
@media (max-width: 480px) {
  .bar-row { grid-template-columns: 1fr; }
}

.bar-row .label {
  color: var(--color-gray-300);
  font-size: 0.975rem;
}

.bar {
  --max: 30;
  position: relative;
  height: 38px;
  border: 1px solid var(--color-gray-800);
  border-radius: 0.5rem;
  background:
    /* grid ticks every 10 units */
    repeating-linear-gradient(
      to right,
      rgba(255, 255, 255, 0.06) 0 1px,
      transparent 1px 10%
    );
  background-color: var(--color-gray-900);
  overflow: hidden;
}

.bar .fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--value) * 100% / var(--max));
  background: linear-gradient(90deg, var(--color-primary-500), var(--color-primary-600));
  box-shadow: 0 0 20px rgba(51, 212, 197, 0.2) inset;
}

.bar .value {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.85rem;
  color: var(--color-black);
  background: rgba(255,255,255,0.9);
  padding: 0.1rem 0.4rem;
  border-radius: 0.25rem;
  mix-blend-mode: screen;
}
.bar .value::after {
  content: "%";
  margin-left: 2px;
}

/* Proof of Engagement Section */
#proof-engagement .section-heading h2 {
  max-width: 46rem;
}

.engagement-card {
  margin-top: 2rem;
  padding: 1.25rem;
  border-radius: 0.75rem;
  border: 1px solid var(--color-gray-800);
  background: linear-gradient(180deg, #3a002a 0%, #2a0126 40%, #161b22 100%);
  box-shadow: 0 10px 25px rgba(0,0,0,0.35);
}
@media (min-width: 640px) { .engagement-card { padding: 1.5rem; } }
@media (min-width: 768px) { .engagement-card { padding: 2rem; } }

.engagement-card .card-header h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-white);
}
@media (min-width: 768px) { .engagement-card .card-header h3 { font-size: 1.5rem; } }

.stats-grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.25rem;
}

.stat-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: center;
}
@media (max-width: 480px) {
  .stat-row { grid-template-columns: 1fr; }
}

.stat-number {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--color-white);
  line-height: 1;
}
@media (min-width: 768px) { .stat-number { font-size: 3rem; } }

.stat-detail { display: flex; flex-direction: column; gap: 0.5rem; }
.stat-caption { color: var(--color-gray-300); font-size: 0.95rem; }

/* People row (10 icons) */
.people-row {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 0.4rem;
}
@media (min-width: 640px) { .people-row { gap: 0.5rem; } }

/* Person icon built with CSS: body + head */
.person {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 26px;
  border-radius: 6px 6px 4px 4px; /* shoulders */
  background-color: rgba(255, 110, 150, 0.25);
  border: 1px solid rgba(255, 110, 150, 0.35);
}
@media (min-width: 768px) { .person { width: 20px; height: 28px; } }
.person::before {
  content: "";
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 110, 150, 0.25);
  border: 1px solid rgba(255, 110, 150, 0.35);
}

.person.active,
.person.active::before {
  background: linear-gradient(180deg, #ff6ea0, #ff4d85);
  border-color: rgba(255, 120, 160, 0.9);
}

#proof-engagement .cta-container { margin-top: 2rem; text-align: left; }
@media (max-width: 480px) { #proof-engagement .cta-container { text-align: center; } }

/* Sponsorship Growth (CSS-only SVG line chart) */
#sponsorship-growth .section-heading h2 { max-width: 56rem; }

.chart-card {
  margin-top: 2rem;
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--color-gray-800);
  background-color: var(--color-gray-900);
  overflow: hidden;
}
@media (min-width: 640px) { .chart-card { padding: 1.25rem; } }
@media (min-width: 768px) { .chart-card { padding: 1.5rem; } }

.chart-wrap {
  width: 100%;
  aspect-ratio: 16 / 8; /* responsive height */
  background: #0f141a;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,0.35);
}
.chart-wrap svg { width: 100%; height: 100%; display: block; }

/* Axes and grid */
.chart-wrap .axes line { stroke: rgba(255,255,255,0.35); stroke-width: 2; stroke-linecap: round; }
.chart-wrap .y-grid line { stroke: rgba(255,255,255,0.15); stroke-width: 1; }
.chart-wrap text { fill: rgba(255,255,255,0.8); font-size: 14px; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; }
.chart-wrap .y-labels text { text-anchor: end; }

/* Series styling */
.chart-wrap .series polyline { fill: none; stroke-width: 3.5; filter: drop-shadow(0 0 6px rgba(0,0,0,0.6)); }
.chart-wrap .series circle { stroke: rgba(255,255,255,0.85); stroke-width: 1.5; }

.chart-wrap .series.sophisticated polyline { stroke: #33d4c5; }
.chart-wrap .series.sophisticated circle { fill: #33d4c5; }

.chart-wrap .series.standard polyline { stroke: #8bc7cf; }
.chart-wrap .series.standard circle { fill: #8bc7cf; }

.chart-legend {
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  margin-top: 0.75rem;
  color: var(--color-gray-300);
  flex-wrap: wrap;
}
.chart-legend .key {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
}
.chart-legend .key::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}
.chart-legend .key-a::before { background: #33d4c5; }
.chart-legend .key-b::before { background: #8bc7cf; }