/* =========================
   archivements.css
========================= */
.page-achievements .achievement-card,
.achievement-card {
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.achievement-card:hover,
.page-achievements .achievement-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-soft);
}

.achievement-card img { max-height: 420px; object-fit: cover; }
.achievement-card h3 { color: var(--text-main); }
.achievement-card p { color: var(--text-muted); }

/* ---------- Skill Badges ---------- */
.badge-skill {
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

body.light-mode .badge-networking { background: rgba(13, 110, 253, 0.12); color: #0d6efd; }
body.dark-mode .badge-networking { background: rgba(13, 110, 253, 0.28); color: #ffffff; }

body.light-mode .badge-linux { background: rgba(25, 135, 84, 0.12); color: #198754; }
body.dark-mode .badge-linux { background: rgba(25, 135, 84, 0.28); color: #d1fae5; }

body.light-mode .badge-competition { background: rgba(111, 66, 193, 0.12); color: #6f42c1; }
body.dark-mode .badge-competition { background: rgba(111, 66, 193, 0.30); color: #f3e8ff; }

/* ---------- Modals ---------- */
.custom-modal {
  position: fixed; inset: 0; display: none; place-items: center; background: rgba(0,0,0,0.55); z-index: 999;
}
.custom-modal.active { display: grid; }
.custom-modal-content {
  background: var(--bg-surface); color: var(--text-main); border-radius: var(--radius-lg);
  padding: var(--space-md); max-width: 900px; width: 90%; box-shadow: var(--shadow-soft);
  animation: modalFade 0.25s ease;
}
.custom-modal-content img { width: 100%; border-radius: var(--radius-md); }
.custom-modal-close {
  position: absolute; top: 16px; right: 20px; font-size: 1.8rem; cursor: pointer; color: var(--text-muted);
}
.custom-modal-close:hover { color: var(--text-main); }
@keyframes modalFade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.modal-content { background: var(--bg-modal); color: var(--text-main); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); border: none; }
.modal-header { border-bottom: 1px solid rgba(255,255,255,0.08); }
body.light-mode .modal-header { border-bottom: 1px solid rgba(0,0,0,0.08); }
.modal-title { color: var(--text-main); }
.btn-close { filter: invert(1); opacity: 0.7; }
body.light-mode .btn-close { filter: none; }
.btn-close:hover { opacity: 1; }
.modal-backdrop.show { opacity: 0.55; }