/* Document gallery: details on hover/focus, permanent captions on touch screens. */
.skills-page { background: var(--bg); }
.credentials { max-width: 1440px; padding-top: 136px; padding-bottom: 112px; }
.credentials-header { display: flex; flex-direction: column; align-items: center; margin-bottom: 44px; text-align: center; }
.credentials-header .back-link { align-self: flex-start; margin-bottom: 36px; min-height: 44px; display: inline-flex; align-items: center; }
.credentials-header h1 { font-size: clamp(32px, 3.2vw, 44px); line-height: 1.15; letter-spacing: -.04em; font-weight: 550; margin: 0 0 14px; color: #edf2fb; }
.credentials-header p { font-size: 16px; line-height: 1.65; color: #9eacbe; margin: 0; }
.credentials-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.credential { min-width: 0; }
.credential-link { position: relative; display: block; height: 100%; border-radius: 10px; background: #101522; color: #edf2fb; isolation: isolate; }
.credential-preview { aspect-ratio: 1.414; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 10px; overflow: hidden; }
.credential-preview img { display: block; width: 100%; height: 100%; object-fit: contain; transition: filter .24s ease; }
.credential-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 16px; border: 1px solid #aebdd047; border-radius: 10px; background: #101522ed; text-align: center; opacity: 0; transition: opacity .24s ease; }
.credential h2 { margin: 0 0 10px; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.25; font-weight: 650; letter-spacing: -.02em; }
.credential-issuer { margin: 0 0 4px; font-size: 13px; line-height: 1.5; color: #c3d3e7; }
.credential-type, .credential-overlay time { display: block; color: #acbbce; font-size: 12px; line-height: 1.5; margin: 0; }
.credential-overlay time { margin-top: 4px; }
.credential-action { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; line-height: 1.5; color: #d7e6fa; }
.credential-action > span[aria-hidden] { font-size: 17px; }
.credential-link:focus-visible { outline: 2px solid #b6cde9; outline-offset: 5px; }
.credential-link:focus-visible .credential-overlay { opacity: 1; }
.credential-link:focus-visible .credential-preview img { filter: blur(3px); }
@media (hover: hover) {
  .credential-link:hover .credential-overlay { opacity: 1; }
  .credential-link:hover .credential-preview img { filter: blur(3px); }
}
@media (max-width: 1199px) {
  .credentials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; margin-inline: auto; }
  .credential h2 { font-size: 22px; }
}
@media (max-width: 900px) {
  .credentials { padding-top: 112px; padding-bottom: 72px; }
}
@media (hover: none), (pointer: coarse), (max-width: 900px) {
  .credential-preview { border-radius: 10px 10px 0 0; }
  .credential-overlay { position: static; height: auto; opacity: 1; padding: 22px 18px; border-top: 0; border-radius: 0 0 10px 10px; }
  .credential-link .credential-preview img { filter: none; }
  .credential-action { min-height: 44px; margin-top: 6px; }
}
@media (max-width: 540px) {
  .credentials { padding-top: 108px; }
  .credentials-header { margin-bottom: 32px; }
  .credentials-header .back-link { margin-bottom: 26px; }
  .credentials-header p { font-size: 15px; }
  .credentials-grid { grid-template-columns: 1fr; max-width: 420px; gap: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .credential-preview img, .credential-overlay { transition: none; }
}