/* ═══════════════════════════════════════════
   certifications.css — Credentials section
   ═══════════════════════════════════════════ */

.certifications {
  padding: 100px 0;
  background: var(--navy);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.certifications .section-header h2 { color: #F5F3EE; }
.certifications .section-tag { color: var(--terra2); }

.certs-grid-display {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  padding: 0 clamp(24px, 6vw, 80px);
}

/* Individual cert card — add new certs in index.html only */
.cert-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 28px 24px 22px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-top: 3px solid var(--cert-color, var(--terra2));
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
  min-height: 130px;
}
.cert-card:hover {
  background: rgba(255,255,255,0.07);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.3);
}

.cert-issuer-row {
  display: flex; align-items: center; gap: 8px;
}
.cert-issuer-icon {
  width: 3px; height: 16px; border-radius: 2px;
  background: var(--cert-color, var(--terra2));
  flex-shrink: 0; opacity: 0.8;
}
.cert-issuer-name {
  font-family: var(--mono); font-size: 0.6rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(245,243,238,0.38);
}
.cert-title {
  font-family: var(--sans); font-size: 0.92rem; font-weight: 500;
  color: #F0EBE0; line-height: 1.45; flex: 1;
}
.cert-link-arrow {
  font-family: var(--mono); font-size: 0.62rem;
  color: var(--cert-color, var(--terra2));
  letter-spacing: 0.08em;
  opacity: 0; transition: opacity 0.2s; margin-top: 4px;
}
.cert-card:hover .cert-link-arrow { opacity: 1; }