/* ============================================================
   ACHIEVEMENTS.CSS — Achievements Page Styles
   ============================================================ */

.achievements-hero {
  padding: calc(var(--nav-height) + 4rem) 0 3rem;
  position: relative;
  z-index: 10;
  text-align: center;
}

/* ── Trophy Cards ── */
.trophy-section { margin-bottom: 5rem; }

.trophy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.trophy-grid-bottom {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.trophy-card {
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-cyan);
  border-radius: 12px;
  padding: 2rem 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: var(--transition);
}

.trophy-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
}

.trophy-card.gold-card::before {
  background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
}

.trophy-card.orange-card::before {
  background: linear-gradient(90deg, transparent, var(--accent-orange), transparent);
}

.trophy-card:hover {
  border-color: var(--border-cyan-bright);
  box-shadow: var(--glow-cyan);
  transform: translateY(-6px);
}

.trophy-card.gold-card:hover {
  box-shadow: 0 0 20px rgba(255,215,0,0.3);
  border-color: rgba(255,215,0,0.5);
}

.trophy-emoji {
  font-size: 3rem;
  display: block;
  margin-bottom: 1rem;
  filter: drop-shadow(0 0 10px rgba(255,215,0,0.5));
}

.trophy-rank {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--accent-gold);
  text-shadow: 0 0 20px rgba(255,215,0,0.5);
  letter-spacing: 0.05em;
  margin-bottom: 0.4rem;
}

.trophy-event {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-primary);
  letter-spacing: 0.1em;
  margin-bottom: 0.4rem;
}

.trophy-year {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-muted);
  letter-spacing: 0.15em;
}

/* ── Stat Counters ── */
.achieve-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-bottom: 5rem;
  padding: 2.5rem;
  background: rgba(0,245,255,0.02);
  border: 1px solid var(--border-cyan);
  border-radius: 12px;
}

.achieve-stat {
  text-align: center;
}

.achieve-stat-number {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 900;
  color: var(--accent-cyan);
  text-shadow: var(--glow-cyan);
  display: block;
  line-height: 1;
}

.achieve-stat-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-muted);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: 0.5rem;
  display: block;
}

/* ── Achievements Table ── */
.table-section {
  margin-bottom: 5rem;
}

.achievements-table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--border-cyan);
  border-radius: 8px;
  box-shadow: var(--glow-cyan);
}

.achievements-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

.achievements-table th {
  background: rgba(0,245,255,0.06);
  color: var(--accent-cyan);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.85rem 1.25rem;
  text-align: left;
  border-bottom: 1px solid var(--border-cyan);
  cursor: none;
  white-space: nowrap;
  position: relative;
}

.achievements-table th.sortable {
  cursor: none;
  user-select: none;
}

.achievements-table th.sortable:hover {
  background: rgba(0,245,255,0.1);
  color: #fff;
}

.sort-indicator {
  display: inline-block;
  margin-left: 0.25rem;
  opacity: 0.4;
  font-size: 0.6rem;
}

th.sort-asc .sort-indicator::after  { content: '▲'; opacity: 1; color: var(--accent-cyan); }
th.sort-desc .sort-indicator::after { content: '▼'; opacity: 1; color: var(--accent-cyan); }
th:not(.sort-asc):not(.sort-desc) .sort-indicator::after { content: '◆'; }

.achievements-table td {
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid rgba(0,245,255,0.06);
  color: var(--text-muted);
  white-space: nowrap;
}

.achievements-table tr:last-child td { border-bottom: none; }

.achievements-table tr:hover td {
  background: rgba(0,245,255,0.03);
  color: var(--text-primary);
}

.achievement-position { color: var(--accent-gold); font-weight: 600; }
.achievement-award    { color: var(--accent-purple); font-weight: 600; }
.achievement-national { color: var(--accent-cyan); }
.achievement-intl     { color: var(--accent-orange); }

/* ── Quote Carousel ── */
.quotes-section { margin-top: 5rem; text-align: center; }

.quote-carousel {
  position: relative;
  max-width: 700px;
  margin: 2rem auto 0;
  min-height: 120px;
}

.quote-slide {
  position: absolute;
  top: 0; left: 0; right: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  padding: 2rem;
  background: var(--bg-card);
  border: 1px solid var(--border-cyan);
  border-radius: 12px;
}

.quote-slide.active { opacity: 1; position: relative; }

.quote-text {
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--text-primary);
  line-height: 1.8;
  font-style: italic;
  margin-bottom: 1rem;
}

.quote-text::before { content: '"'; color: var(--accent-cyan); font-size: 2rem; line-height: 0; vertical-align: -0.4rem; margin-right: 0.2rem; }
.quote-text::after  { content: '"'; color: var(--accent-cyan); font-size: 2rem; line-height: 0; vertical-align: -0.4rem; margin-left: 0.2rem; }

.quote-author {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.quote-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.quote-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--border-cyan);
  transition: var(--transition);
  cursor: none;
}

.quote-dot.active {
  background: var(--accent-cyan);
  box-shadow: 0 0 8px var(--accent-cyan);
}

/* ── Particle Canvas ── */
#particle-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .trophy-grid { grid-template-columns: repeat(2, 1fr); }
  .trophy-grid-bottom { grid-template-columns: repeat(3, 1fr); }
  .achieve-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .trophy-grid { grid-template-columns: 1fr; }
  .trophy-grid-bottom { grid-template-columns: repeat(2, 1fr); }
  .achieve-stats { grid-template-columns: repeat(2, 1fr); }
}