/* Certificates page: framed cards, lightbox, dark mode. Scoped to .cert-page / .cert-lightbox. */
.cert-page{
  --cert-bg: var(--hr-cream);
  --cert-card: #fffdf7;
  --cert-mat: #f4eee1;
  --cert-ink: var(--hr-ink);
  --cert-soft: var(--hr-ink-soft);
  --cert-line: rgba(26,26,26,.12);
  --cert-gold: #b8912f;
  --cert-gold-hi: #e3c164;
  --cert-link: #0d3b26;
  --cert-shadow: 0 10px 28px rgba(60,44,10,.14), 0 2px 6px rgba(60,44,10,.08);
  --cert-pending: #8a4b0a;
  --cert-pending-bg: #fbeed5;
  background: var(--cert-bg);
  color: var(--cert-ink);
}
@media (prefers-color-scheme: dark){
  .cert-page{
    --cert-bg: #0f1a14;
    --cert-card: #17261d;
    --cert-mat: #0f1a14;
    --cert-ink: #f1ece0;
    --cert-soft: #c4c9bf;
    --cert-line: rgba(241,236,224,.16);
    --cert-gold: #d4ad4a;
    --cert-gold-hi: #f0d27a;
    --cert-link: #f0d27a;
    --cert-shadow: 0 12px 30px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4);
    --cert-pending: #f6c97a;
    --cert-pending-bg: rgba(246,201,122,.14);
  }
}
.cert-page h1, .cert-page h2, .cert-page .lead{ color: var(--cert-ink); }
.cert-page .lead{ color: var(--cert-soft); max-width: 62ch; }
.cert-hero{ padding-bottom: 8px; }
.cert-note{ margin-top: 18px; max-width: 62ch; font-size: .92rem; color: var(--cert-soft); border-left: 3px solid var(--cert-gold); padding-left: 12px; }
.cert-list{ padding-top: 24px; padding-bottom: clamp(56px,8vw,96px); }

.cert-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(20px, 3vw, 32px); }
.cert-card{
  min-width: 0; display: flex; flex-direction: column;
  background: var(--cert-card); border: 1px solid var(--cert-line); border-radius: 14px;
  padding: 18px; box-shadow: var(--cert-shadow);
}
.cert-card.-pending{ border-style: dashed; }

.cert-frame-wrap{ display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin-bottom: 18px; }
.cert-frame{
  position: relative; display: block; width: 100%; padding: 10px; cursor: zoom-in;
  background: var(--cert-mat); font: inherit; color: inherit;
  border: 3px solid var(--cert-gold); border-radius: 4px;
  outline: 1px solid var(--cert-gold-hi); outline-offset: -8px;
  box-shadow: 0 8px 22px rgba(60,44,10,.18), inset 0 0 0 1px rgba(0,0,0,.05);
  aspect-ratio: 3 / 4; overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.cert-frame:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(60,44,10,.26); }
.cert-frame:focus-visible{ outline: 3px solid var(--cert-link); outline-offset: 3px; }
.cert-frame img{ width: 100%; height: 100%; object-fit: contain; display: block; background: #fff; }
.cert-frame__placeholder{
  position: absolute; inset: 10px; display: none; align-items: center; justify-content: center; text-align: center;
  font-size: .85rem; line-height: 1.5; color: var(--cert-soft);
  background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(184,145,47,.08) 10px 20px);
}
.cert-frame.-missing img{ display: none; }
.cert-frame.-missing .cert-frame__placeholder{ display: flex; }
.cert-frame.-missing{ cursor: default; }
.cert-frame__zoom{
  position: absolute; right: 14px; bottom: 14px; padding: 4px 10px; border-radius: 999px;
  font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  background: rgba(13,59,38,.88); color: #faf5ea; opacity: 0; transition: opacity .2s ease;
}
.cert-frame:hover .cert-frame__zoom, .cert-frame:focus-visible .cert-frame__zoom{ opacity: 1; }
.cert-frame.-missing .cert-frame__zoom{ display: none; }
@media (hover: none){ .cert-frame__zoom{ opacity: 1; } }

.cert-body{ min-width: 0; display: flex; flex-direction: column; flex: 1; }
.cert-body h2{ font-size: 1.3rem; margin: 4px 0 10px; line-height: 1.25; }
.cert-status{ margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cert-link); }
.cert-status.-pending{ align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: var(--cert-pending-bg); color: var(--cert-pending); letter-spacing: .04em; }
.cert-number{ margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.cert-number span{ font-size: .8rem; color: var(--cert-soft); }
.cert-number strong{ font-family: var(--hr-font-mono); font-size: 1.02rem; letter-spacing: .02em; overflow-wrap: anywhere; }
.cert-details{ margin: 0 0 16px; display: grid; gap: 6px; }
.cert-details div{ display: grid; grid-template-columns: minmax(96px, 36%) 1fr; gap: 10px; font-size: .9rem; border-top: 1px solid var(--cert-line); padding-top: 6px; }
.cert-details dt{ color: var(--cert-soft); }
.cert-details dd{ margin: 0; overflow-wrap: anywhere; }
.cert-verify{
  margin-top: auto; align-self: flex-start; display: inline-flex; gap: 6px; align-items: center;
  padding: 10px 14px; border: 1px solid var(--cert-gold); border-radius: 8px; min-height: 44px;
  color: var(--cert-link); font-weight: 600; font-size: .92rem; text-decoration: none;
}
.cert-verify:hover, .cert-verify:focus-visible{ background: var(--cert-gold); color: #1a1a1a; }
.cert-foot{ margin-top: 36px; color: var(--cert-soft); font-size: .95rem; }
.cert-foot a{ color: var(--cert-link); text-decoration: underline; }

/* Lightbox */
.cert-lightbox{
  position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(8,14,10,.9);
}
.cert-lightbox[hidden]{ display: none; }
.cert-lightbox figure{ margin: 0; max-width: 100%; text-align: center; }
.cert-lightbox img{
  max-width: min(96vw, 960px); max-height: 82vh; width: auto; height: auto; background: #fff;
  border: 4px solid #d4ad4a; border-radius: 4px; box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.cert-lightbox figcaption, .cert-lightbox__missing{ margin-top: 12px; color: #f1ece0; font-size: .9rem; padding: 0 8px; }
.cert-lightbox__close{
  position: absolute; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right));
  width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  background: #faf5ea; color: #1a1a1a; font-size: 1.8rem; line-height: 1;
}
body.cert-lock{ overflow: hidden; }
@media (max-width: 520px){
  .cert-card{ padding: 14px; }
  .cert-details div{ grid-template-columns: 1fr; gap: 2px; }
}
@media (prefers-reduced-motion: reduce){ .cert-frame, .cert-frame__zoom{ transition: none; } }

/* Beat the site-wide ".v2 p" / ".v2 a:hover" colour rules so text keeps its contrast in both themes. */
.v2 .cert-page .cert-note,
.v2 .cert-page .cert-number span,
.v2 .cert-page .cert-foot{ color: var(--cert-soft); }
.v2 .cert-page .cert-number strong{ color: var(--cert-ink); }
.v2 .cert-page .cert-status{ color: var(--cert-link); }
.v2 .cert-page .cert-status.-pending{ color: var(--cert-pending); }
.v2 .cert-page a.cert-verify{ color: var(--cert-link); }
.v2 .cert-page a.cert-verify:hover,
.v2 .cert-page a.cert-verify:focus-visible{ background: var(--cert-gold); color: #1a1a1a; }
.v2 .cert-page .cert-foot a{ color: var(--cert-link); }
.v2 .cert-page p.cert-status, .v2 .cert-page p.cert-number{ margin-bottom: 8px; }