/* ============================================================
   Course completion certificate — printable view + public verify.
   Scoped to the Courses module. Loaded per-page (not in the global
   import list) via <link> in the certificate document / the verify
   view's head section. Print-first: @media print hides chrome and
   lays the certificate out to a single clean page.
   ============================================================ */

.cert-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-6);
  padding: var(--s-10) var(--s-5);
  background: var(--bg, #F5F7FC);
  box-sizing: border-box;
}

/* The certificate sheet — fixed A4-landscape-ish aspect, centred. */
.cert {
  position: relative;
  width: 100%;
  max-width: 960px;
  aspect-ratio: 1.414 / 1;
  background: var(--surface, #fff);
  color: var(--text, #0B1B3A);
  border-radius: var(--r-xl, 18px);
  box-shadow: var(--shadow-xl, 0 24px 60px rgba(10, 42, 122, .18));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  isolation: isolate;
}

/* Decorative brand frame + corner flourishes. */
.cert::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 2px solid transparent;
  border-radius: var(--r-lg, 14px);
  background: var(--brand-grad, linear-gradient(120deg, #0A2A7A, #16B8F5)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
}
.cert::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  width: 40%;
  height: 8px;
  background: var(--brand-grad, linear-gradient(120deg, #0A2A7A, #16B8F5));
  z-index: 0;
}

.cert__inner {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--s-4);
  padding: clamp(24px, 6%, 64px);
}

.cert__brand {
  font-family: var(--font-display, inherit);
  font-weight: 700;
  font-size: var(--fz-lg, 1.125rem);
  letter-spacing: .02em;
  color:var(--brand-fg);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.cert__brand .icon { width: 26px; height: 26px; }

.cert__eyebrow {
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: var(--fz-xs, .75rem);
  color: var(--muted, #8593B0);
  margin: 0;
}

.cert__heading {
  font-family: var(--font-display, inherit);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 700;
  margin: 0;
  line-height: 1.1;
}

.cert__lead {
  font-size: var(--fz-md);
  color: var(--muted, #8593B0);
  margin: 0;
}

.cert__name {
  font-family: var(--font-display, inherit);
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 700;
  margin: 0;
  padding-block-end: var(--s-2);
  background: var(--brand-grad, linear-gradient(120deg, #0A2A7A, #16B8F5));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  border-block-end: 2px solid var(--line);
  min-width: min(60%, 420px);
}

.cert__course {
  font-size: clamp(1.05rem, 2.6vw, 1.4rem);
  font-weight: 600;
  margin: 0;
}

.cert__meta {
  margin-block-start: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6);
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  padding-block-start: var(--s-6);
}
.cert__meta-block { text-align: start; }
.cert__meta-label {
  display: block;
  font-size: var(--fz-xs, .75rem);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted, #8593B0);
  margin-block-end: 2px;
}
.cert__meta-value {
  font-weight: 600;
  font-size: var(--fz-sm);
  font-variant-numeric: tabular-nums;
}
.cert__meta-value--serial { letter-spacing: .08em; }

/* Actions bar (screen only). */
.cert-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  justify-content: center;
}
.cert-verify-note {
  font-size: var(--fz-sm);
  color: var(--muted, #8593B0);
  text-align: center;
  max-width: 60ch;
}
.cert-verify-note a {
  color:var(--brand-fg);
  font-weight: 600;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0% 1.5px no-repeat;
  transition: background-size var(--dur-slow) var(--ease), color var(--dur) var(--ease);
}
.cert-verify-note a:hover { background-size: 100% 1.5px; }
[dir="rtl"] .cert-verify-note a { background-position: 100% 100%; }

/* -------- Verify page -------- */
.verify-wrap {
  max-width: 640px;
  margin-inline: auto;
  padding-block: var(--s-10);
}
.verify-card { text-align: center; }
.verify-badge {
  width: 72px; height: 72px;
  border-radius: var(--r-full, 999px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-block-end: var(--s-4);
}
.verify-badge .icon { width: 40px; height: 40px; }
.verify-badge--ok { background: color-mix(in srgb, var(--accent-green) 16%, transparent); color: var(--success-fg); }
.verify-badge--bad { background: color-mix(in srgb, var(--accent-red) 16%, transparent); color: var(--danger-fg); }
.verify-dl {
  margin-block-start: var(--s-6);
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--s-2) var(--s-5);
  text-align: start;
}
.verify-dl dt { color: var(--muted, #8593B0); font-size: var(--fz-sm); }
.verify-dl dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Player sidebar "download certificate" button (injected by course-player.js
   once the course is complete). Uses the .btn design classes for its look; this
   only spaces it within the sidebar head. */
.player__certificate {
  margin-block-start: var(--s-3);
  width: 100%;
  justify-content: center;
}

/* ============================= PRINT ============================= */
@media print {
  :root { --bg: #fff; }
  body { background: #fff; }
  .cert-page {
    padding: 0;
    min-height: auto;
    gap: 0;
  }
  .no-print,
  .cert-actions,
  .cert-verify-note { display: none !important; }
  .cert {
    max-width: none;
    width: 100%;
    box-shadow: none;
    border-radius: 0;
    aspect-ratio: auto;
    height: 100vh;
    break-inside: avoid;
    /* Force brand colours to print. */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  @page { size: A4 landscape; margin: 8mm; }
}