/* =========================================================================
   CERTIFICATE FACE — the actual printable/downloadable certificate design.
   Uses only existing brand tokens (navy / gold / red / white).
   ========================================================================= */
.certificate-face{
  width:100%;
  max-width:960px;
  margin:0 auto;
  aspect-ratio:1.42/1; /* landscape, close to A4 landscape ratio */
  background:var(--white);
  box-shadow:0 30px 70px -30px rgba(7,26,73,.35);
  border-radius:var(--r-md);
  overflow:hidden;
}
.certificate-border{
  height:100%;
  margin:14px;
  border:2px solid var(--gold-500);
  border-radius:6px;
  position:relative;
}
.certificate-border::before{
  content:"";
  position:absolute;inset:8px;
  border:1px solid var(--navy-100);
  border-radius:4px;
  pointer-events:none;
}
.certificate-inner{
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:5% 8%;
  position:relative;
}
.certificate-logo{
  width:64px;height:64px;object-fit:contain;margin-bottom:12px;
}
.certificate-academy{
  font-family:var(--font-body);
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--navy-800);
  font-weight:700;
  margin-bottom:18px;
}
.certificate-title{
  font-family:var(--font-display);
  font-size:clamp(22px, 3vw, 32px);
  color:var(--navy-900);
  font-weight:700;
  letter-spacing:.02em;
  margin-bottom:14px;
  position:relative;
  padding-bottom:14px;
}
.certificate-title::after{
  content:"";
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:60px;height:2px;background:var(--gold-500);
}
.certificate-line{
  font-size:14px;
  color:var(--gray-600);
  margin:6px 0;
}
.certificate-name{
  font-family:var(--font-display);
  font-size:clamp(26px, 4vw, 42px);
  color:var(--red-700);
  font-weight:700;
  margin:8px 0 10px;
}
.certificate-course{
  font-family:var(--font-display);
  font-size:clamp(18px, 2.4vw, 24px);
  color:var(--navy-900);
  font-weight:600;
  margin:8px 0 24px;
}
.certificate-footer{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(24px, 8vw, 90px);
  margin-top:8px;
  width:100%;
}
.certificate-sig{
  min-width:140px;
}
.certificate-sig-line{
  font-family:var(--font-display);
  font-size:15px;
  color:var(--navy-900);
  border-bottom:1px solid var(--gray-200);
  padding-bottom:6px;
  margin-bottom:6px;
}
.certificate-sig-label{
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gray-400);
}
.certificate-seal{
  width:56px;height:56px;border-radius:50%;
  border:2px solid var(--gold-500);
  display:flex;align-items:center;justify-content:center;
  color:var(--gold-700);
  font-size:22px;
  background:var(--gold-100);
  flex-shrink:0;
}
.certificate-meta{
  margin-top:22px;
  display:flex;
  gap:28px;
  font-size:11px;
  color:var(--gray-400);
  letter-spacing:.02em;
}
.certificate-meta strong{
  color:var(--gray-600);
}

/* ===== Certificate view page chrome (not part of the printed face) ===== */
.cert-view-toolbar{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--sp-4);
  margin-bottom:var(--sp-8);
}
.cert-view-actions{display:flex;gap:var(--sp-4);flex-wrap:wrap;}
.cert-status-banner{
  display:flex;align-items:center;gap:var(--sp-3);
  max-width:960px;margin:0 auto var(--sp-6);
  padding:var(--sp-4) var(--sp-5);border-radius:var(--r-md);
  font-size:var(--fs-body-sm);font-weight:600;
}
.cert-status-banner.valid{background:#E6F4EA;color:#1E7E34;}
.cert-status-banner.revoked{background:var(--red-100);color:var(--red-700);}

/* ===== Course completion / certificate unlock block (course-details page) ===== */
.cert-unlock-box{
  border:var(--border);border-radius:var(--r-lg);padding:var(--sp-7);
  display:flex;align-items:center;gap:var(--sp-6);flex-wrap:wrap;
}
.cert-unlock-icon{
  width:56px;height:56px;border-radius:50%;background:var(--gold-100);color:var(--gold-700);
  display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;
}
.cert-unlock-box.locked .cert-unlock-icon{background:var(--gray-100);color:var(--gray-400);}
.cert-unlock-box.complete{border-color:var(--gold-500);background:var(--gold-100);}
.cert-unlock-body{flex:1;min-width:220px;}
.cert-unlock-body h4{margin-bottom:6px;}
.cert-progress-inline{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-4);}
.cert-progress-inline .progress-bar{flex:1;margin:0;}

/* ===== Responsive certificate ===== */
@media (max-width:768px){
  .certificate-footer{gap:20px;}
  .certificate-sig{min-width:110px;}
  .cert-view-toolbar{flex-direction:column;align-items:stretch;}
  .cert-unlock-box{flex-direction:column;text-align:center;}
}
@media (max-width:520px){
  .certificate-face{
    max-width:none;
    width:640px; /* fixed min width, wrapped in a horizontal scroller by the page */
  }
}

/* ===== Print rules: certificate only ===== */
@media print{
  body *{ visibility:hidden; }
  .certificate-face, .certificate-face *{ visibility:visible; }
  .certificate-face{
    position:absolute; top:0; left:0; margin:0;
    width:100%; max-width:none; box-shadow:none;
  }
  @page{ size:landscape; margin:0; }
}