/* =============================================================
   CERTIFICATE CARDS + LIGHTBOX
   Isolated from the core design so the existing portfolio remains intact.
   ============================================================= */
.cert-featured{display:flex;flex-direction:column;position:relative}
.cert-featured .cert-thumb{
  width:calc(100% + 52px);padding:0;border:0;color:inherit;text-align:inherit;cursor:zoom-in;
  font:inherit;-webkit-appearance:none;appearance:none;
}
.cert-featured .cert-thumb:focus-visible,
.cert-open:focus-visible,
.certificate-modal__close:focus-visible{outline:3px solid color-mix(in srgb,var(--emerald) 72%,#fff);outline-offset:4px}
.cert-featured .cert-title{margin-top:2px}
.cert-org{position:relative;z-index:2;margin-top:9px;color:var(--ink-2);font-size:.82rem;line-height:1.55}
.cert-date{position:relative;z-index:2;display:block;margin-top:10px;font-family:var(--f-mono);font-size:.67rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.cert-open{
  position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  width:100%;min-height:43px;margin-top:20px;padding:10px 15px;border-radius:10px;
  border:1px solid color-mix(in srgb,var(--emerald) 38%,var(--line));
  background:var(--glow);color:var(--emerald);font-family:var(--f-mono);font-size:.68rem;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  transition:transform .38s var(--ease),box-shadow .38s var(--ease),background .3s,color .3s,border-color .3s;
}
.cert-open svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)}
.cert-open:hover{transform:translateY(-2px);background:var(--emerald);color:var(--on-emerald);border-color:var(--emerald);box-shadow:0 12px 30px color-mix(in srgb,var(--emerald) 22%,transparent)}
.cert-open:hover svg{transform:translateX(4px)}
.cert-featured:hover{box-shadow:var(--shadow-2),0 0 34px color-mix(in srgb,var(--emerald) 11%,transparent)}

.certificate-modal{
  position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:clamp(14px,3vw,34px);
  visibility:hidden;opacity:0;pointer-events:none;transition:opacity .35s var(--ease),visibility 0s linear .35s;
}
.certificate-modal.is-open{visibility:visible;opacity:1;pointer-events:auto;transition-delay:0s}
.certificate-modal__backdrop{position:absolute;inset:0;background:rgba(2,5,8,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.certificate-modal__dialog{
  position:relative;z-index:1;width:min(1180px,96vw);max-height:92vh;padding:clamp(10px,1.5vw,18px);
  border:1px solid rgba(255,255,255,.16);border-radius:clamp(14px,2vw,24px);
  background:rgba(7,12,16,.94);box-shadow:0 30px 100px rgba(0,0,0,.62),0 0 70px rgba(34,201,242,.08);
  transform:translateY(18px) scale(.94);filter:blur(6px);opacity:0;
  transition:transform .48s cubic-bezier(.2,.8,.2,1),filter .48s ease,opacity .35s ease;
}
.certificate-modal.is-open .certificate-modal__dialog{transform:none;filter:none;opacity:1}
.certificate-modal__stage{position:relative;display:grid;place-items:center;min-height:min(70vh,650px);overflow:auto;border-radius:clamp(9px,1.5vw,16px);background:#05090c}
.certificate-modal__stage img{display:block;width:auto;max-width:100%;height:auto;max-height:calc(92vh - 40px);object-fit:contain;opacity:0;transform:scale(.985);transition:opacity .3s ease,transform .45s var(--ease)}
.certificate-modal__stage img.is-loaded{opacity:1;transform:none}
.certificate-modal__close{
  position:absolute;z-index:3;top:clamp(17px,2vw,28px);right:clamp(17px,2vw,28px);
  display:grid;place-items:center;width:43px;height:43px;border-radius:50%;border:1px solid rgba(255,255,255,.25);
  background:rgba(3,7,10,.72);color:#fff;font:300 2rem/1 Arial,sans-serif;cursor:pointer;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .3s var(--ease),background .3s,border-color .3s,box-shadow .3s;
}
.certificate-modal__close:hover{transform:rotate(90deg) scale(1.05);background:rgba(11,138,92,.9);border-color:rgba(255,255,255,.55);box-shadow:0 0 25px rgba(18,224,140,.22)}
.certificate-modal__loader{position:absolute;width:42px;height:42px;border-radius:50%;border:3px solid rgba(255,255,255,.14);border-top-color:#22c9f2;animation:certificate-spin .8s linear infinite}
.certificate-modal.is-image-loaded .certificate-modal__loader{display:none}
@keyframes certificate-spin{to{transform:rotate(360deg)}}
body.cert-modal-open{overflow:hidden;touch-action:none}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

@media(max-width:640px){
  .certificate-modal{padding:8px}
  .certificate-modal__dialog{width:100%;max-height:95vh;padding:8px;border-radius:14px}
  .certificate-modal__stage{min-height:52vh;border-radius:9px}
  .certificate-modal__stage img{max-height:calc(95vh - 20px)}
  .certificate-modal__close{top:16px;right:16px;width:39px;height:39px;font-size:1.75rem}
}
@media(prefers-reduced-motion:reduce){
  .certificate-modal,.certificate-modal__dialog,.certificate-modal__stage img,.certificate-modal__close,.cert-open,.cert-open svg{transition-duration:.001ms!important;animation-duration:.001ms!important}
}
@media print{.certificate-modal{display:none!important}}