/* ============================================================
   Certificate stylesheet — A4 landscape, two-sheet structure.
   Designed for screen (aspect-ratio scaling) + print (physical mm).
   ============================================================ */

.cert-page {
  background: linear-gradient(180deg, var(--bg) 0%, var(--surface-muted) 100%);
  padding: 32px 16px 96px;
}
.cert-page__inner { max-width: 1140px; margin: 0 auto; }
.cert-page__intro { margin-bottom: 24px; display: flex; flex-direction: column; gap: 10px; }
.cert-page__intro h1 { font-family: var(--serif); font-size: 32px; letter-spacing: -0.01em; }
.cert-page__intro p { color: var(--fg-muted); max-width: 60ch; }
.cert-page__actions { margin-top: 6px; display: flex; gap: 10px; flex-wrap: wrap; }

/* ============================================================
   .cert-doc — wrapper for one or more A4 sheets
   ============================================================ */
.cert-doc { display: grid; gap: 28px; }

/* ============================================================
   .cert-sheet — one A4 landscape page (297mm x 210mm)
   ============================================================ */
.cert-sheet {
  /* Paper palette (mastery default — overridden for --self) */
  --paper: #fbf7ee;
  --ink: #14223a;
  --ink-soft: #4b5a76;
  --gold: #b08754;
  --gold-deep: #8a6a40;
  --rule: #d8cdb6;

  position: relative;
  width: 100%;
  aspect-ratio: 297 / 210;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow: 0 30px 80px -30px rgba(20, 34, 58, 0.25),
              0 6px 16px -10px rgba(20, 34, 58, 0.12);
  overflow: hidden;

  /* All internal sizing in em → scales with sheet font-size,
     which scales with viewport via clamp. */
  font-family: var(--serif);
  font-size: clamp(10px, 1.05vw, 13px);
  line-height: 1.5;

  padding: 4.2% 5.6%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  row-gap: 1.4em;
}

/* Decorative inner frames — never overlap content (positioned, pointer-events off) */
.cert-sheet::before {
  content: ""; position: absolute; inset: 0.7em;
  border: 1px solid var(--rule); pointer-events: none;
}
.cert-sheet::after {
  content: ""; position: absolute; inset: 1.05em;
  border: 1px solid var(--gold); opacity: 0.4; pointer-events: none;
}

/* ─── Header band (top of every sheet) ──────────────────────────────── */
.cert-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 1em;
  padding-bottom: 0.9em;
  border-bottom: 1px solid var(--rule);
}
.cert-head__brand { display: flex; align-items: center; gap: 0.7em; }
.cert-head__mark {
  width: 2.6em; height: 2.6em;
  display: grid; place-items: center;
  background: var(--ink); color: var(--paper);
  border-radius: 0.5em;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.4em;
  line-height: 1;
}
.cert-head__issuer { display: flex; flex-direction: column; gap: 0.1em; }
.cert-head__name { font-weight: 600; font-size: 1.05em; }
.cert-head__tag {
  font-size: 0.78em; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.14em;
  font-family: var(--sans);
}
.cert-head__type { text-align: right; font-family: var(--sans); }
.cert-head__type-label {
  margin-top: 0.2em;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.5em;
  letter-spacing: 0.06em;
  line-height: 1.1;
  color: var(--ink);
}
.cert-head__type-kicker {
  font-size: 0.78em; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.22em;
}

/* ─── Recipient hero ────────────────────────────────────────────────── */
.cert-hero { text-align: center; align-self: center; }
.cert-hero__present {
  font-family: var(--sans); font-style: italic;
  color: var(--ink-soft); font-size: 0.95em;
}
.cert-hero__recipient {
  margin-top: 0.4em;
  font-size: 3.0em;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.cert-hero__divider {
  width: 14em; height: 1px;
  margin: 0.55em auto 0;
  background: var(--gold); opacity: 0.7;
}
.cert-hero__present-2 {
  margin-top: 0.7em;
  font-family: var(--sans); font-style: italic;
  color: var(--ink-soft); font-size: 0.95em;
}
.cert-hero__course-title {
  margin-top: 0.3em;
  font-size: 1.55em;
  font-weight: 500;
  line-height: 1.2;
}

/* ─── Skills section (showcase, mastery) ────────────────────────────── */
.cert-section {
  display: grid;
  align-content: start;
  row-gap: 0.7em;
}
.cert-section__title {
  font-family: var(--sans);
  font-size: 0.72em;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.cert-skills {
  display: grid;
  row-gap: 0.45em;
}
.cert-skill {
  display: grid;
  grid-template-columns: 1.2em 1fr auto auto;
  column-gap: 1em;
  align-items: baseline;
  padding: 0.45em 0;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.95em;
}
.cert-skill:first-child { border-top: 0; padding-top: 0; }
.cert-skill__mark { color: var(--gold); font-weight: 700; line-height: 1; }
.cert-skill__name { font-weight: 500; color: var(--ink); }
.cert-skill__level {
  font-size: 0.78em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.18em 0.55em;
  border-radius: 999px;
  background: rgba(176, 135, 84, 0.12);
  color: var(--gold-deep);
  white-space: nowrap;
}
.cert-skill__hours {
  font-family: ui-monospace, monospace;
  font-size: 0.86em;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* ─── Footer (signature + credential) ───────────────────────────────── */
.cert-foot {
  display: grid;
  grid-template-columns: 1.4fr auto 1.4fr;
  align-items: end;
  gap: 1.4em;
  padding-top: 0.9em;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
}
.cert-foot__signer { display: grid; align-content: end; }
.cert-foot__sig-line {
  font-family: "Fraunces", "Snell Roundhand", "Brush Script MT", cursive;
  font-style: italic;
  font-size: 1.9em;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 0.05em;
  margin-bottom: 0.3em;
  line-height: 1.05;
}
.cert-foot__sig-meta {
  font-size: 0.78em;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}
.cert-foot__seal { display: grid; place-items: center; align-self: center; }
.cert-foot__credential {
  text-align: right;
  font-size: 0.78em;
  color: var(--ink-soft);
  display: grid;
  row-gap: 0.2em;
  align-content: end;
}
.cert-foot__credential code {
  font-family: ui-monospace, monospace;
  color: var(--ink);
  font-size: 1.1em;
  letter-spacing: 0.06em;
}
.cert-foot__credential a { color: var(--gold-deep); }

/* ─── Page 2 (detail mastery) ───────────────────────────────────────── */
.cert-sheet--detail .cert-head__type-label { font-size: 1.2em; }
.cert-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.6em;
  row-gap: 1.4em;
}
.cert-detail-col { display: grid; row-gap: 0.7em; align-content: start; }
.cert-detail-list {
  display: grid;
  row-gap: 0;
  font-family: var(--sans);
  font-size: 0.95em;
}
.cert-detail-list__row {
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 0.45em 0;
  border-top: 1px dotted var(--rule);
}
.cert-detail-list__row:first-child { border-top: 0; }
.cert-detail-list__label { color: var(--ink-soft); }
.cert-detail-list__value { font-weight: 600; color: var(--ink); }

.cert-verify {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.4em;
  align-items: center;
  padding: 1em 1.2em;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--rule);
  border-radius: 0.5em;
  font-family: var(--sans);
}
.cert-verify__qr {
  width: 7em; height: 7em;
  background: var(--paper);
  border: 1px solid var(--rule);
  display: grid; place-items: center;
  border-radius: 0.3em;
}
.cert-verify__body { font-size: 0.95em; }
.cert-verify__body strong { display: block; font-size: 1.05em; }
.cert-verify__url {
  font-family: ui-monospace, monospace;
  color: var(--gold-deep);
  word-break: break-all;
  font-size: 0.92em;
  margin-top: 0.3em;
}
.cert-verify__note {
  margin-top: 0.5em;
  font-size: 0.85em; color: var(--ink-soft); line-height: 1.5;
}

/* ─── Self certificate (walkself) palette + variants ────────────────── */
.cert-sheet--self {
  --paper: #f4ecd9;
  --ink: #1f1a24;
  --ink-soft: #5b5363;
  --gold: #b08754;
  --gold-deep: #7a5c34;
  --rule: #d6c8a3;
}
.cert-sheet--self .cert-head__type-label { font-style: italic; font-weight: 500; }
.cert-sheet--self .cert-hero__present {
  font-style: normal;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 0.78em;
  font-family: var(--sans);
}

.cert-paths { display: grid; row-gap: 0.55em; }
.cert-path {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 1em;
  align-items: baseline;
  padding: 0.7em 0.9em;
  border: 1px solid var(--rule);
  border-radius: 0.5em;
  background: rgba(255, 255, 255, 0.45);
  font-family: var(--sans);
}
.cert-path--top {
  border-color: var(--gold);
  background: rgba(176, 135, 84, 0.08);
}
.cert-path__rank {
  font-size: 0.72em;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.cert-path__name { margin-top: 0.18em; font-family: var(--serif); font-size: 1.1em; }
.cert-path--top .cert-path__name { font-size: 1.35em; }
.cert-path__why { margin-top: 0.18em; font-size: 0.82em; color: var(--ink-soft); }
.cert-path__align {
  font-family: ui-monospace, monospace;
  font-size: 1.4em;
  color: var(--gold-deep);
  letter-spacing: -0.02em;
}
.cert-path--top .cert-path__align { font-size: 1.85em; font-weight: 600; }
.cert-path__bar {
  grid-column: 1 / -1;
  margin-top: 0.5em;
  height: 0.2em;
  border-radius: 999px;
  background: rgba(176, 135, 84, 0.15);
  overflow: hidden;
}
.cert-path__bar > i { display: block; height: 100%; background: var(--gold); }

.cert-self-foot {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: end;
  gap: 1em;
  padding-top: 0.9em;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.85em;
}
.cert-self-foot__col { display: grid; row-gap: 0.15em; }
.cert-self-foot__label {
  font-size: 0.82em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.cert-self-foot__value { color: var(--ink); font-weight: 600; }
.cert-self-foot__sub { font-size: 0.82em; color: var(--ink-soft); }
.cert-self-foot__col--right { text-align: right; }
.cert-self-foot__col--right code {
  font-family: ui-monospace, monospace; color: var(--ink); font-size: 1.05em; letter-spacing: 0.06em;
}

.cert-self-quote {
  margin: 0; text-align: center;
  font-style: italic; font-size: 1.5em; line-height: 1.4;
  color: var(--ink); max-width: 26em; margin-inline: auto;
}
.cert-self-quote::before, .cert-self-quote::after {
  content: "—"; color: var(--gold); margin: 0 0.4em;
}

.cert-shadow-list {
  display: grid; row-gap: 0.7em;
  font-family: var(--sans);
  font-size: 0.95em;
}
.cert-shadow-list li {
  padding: 0.55em 0.9em;
  border-left: 3px solid var(--gold);
  background: rgba(255, 255, 255, 0.45);
  border-radius: 0 0.4em 0.4em 0;
  color: var(--ink);
  line-height: 1.5;
}

.cert-disclaimer {
  padding: 1em 1.2em;
  border-left: 3px solid var(--gold);
  background: rgba(176, 135, 84, 0.08);
  font-family: var(--sans);
  font-size: 0.92em;
  color: var(--ink);
  line-height: 1.6;
  border-radius: 0 0.4em 0.4em 0;
}

/* ─── Original SVG seal ──────────────────────────────────────────────── */
.seal {
  --seal-size: 7em;
  width: var(--seal-size); height: var(--seal-size);
  position: relative;
  filter: drop-shadow(0 4px 8px rgba(20, 34, 58, 0.10));
  color: var(--gold-deep);
}
.seal svg { width: 100%; height: 100%; display: block; }
.seal text { fill: var(--gold-deep); font-family: var(--sans); }
.seal__center text { fill: var(--ink); font-family: var(--serif); }
.cert-head .seal { --seal-size: 4.6em; }

/* ─── Print: physical A4 dimensions, one sheet per page ──────────────── */
@media print {
  body { background: white; }
  .cert-page { padding: 0; background: white; }
  .cert-page__intro, .cert-page__actions,
  .site-header, .site-footer, .dev-switcher { display: none !important; }

  @page { size: A4 landscape; margin: 0; }

  .cert-doc { gap: 0; }
  .cert-sheet {
    width: 297mm;
    height: 210mm;
    aspect-ratio: auto;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 14mm 18mm;
    font-size: 10.5pt;
    page-break-after: always;
    break-after: page;
  }
  .cert-sheet:last-child { page-break-after: auto; break-after: auto; }
}

/* ─── Mobile viewport scaling (defensive — mobile.css handles details) ─ */
@media (max-width: 720px) {
  .cert-sheet { font-size: clamp(8.5px, 2.6vw, 11px); padding: 5% 6%; }
  .cert-hero__recipient { font-size: 2.4em; }
  .cert-foot { grid-template-columns: 1fr auto; gap: 1em; }
  .cert-foot__credential { text-align: left; }
  .cert-self-foot { grid-template-columns: 1fr; row-gap: 0.6em; }
  .cert-self-foot__col--right { text-align: left; }
  .cert-detail-grid { grid-template-columns: 1fr; }
}