/* Certificates, in the studio's own hand.
   Shared by the 3D concept panel and the 2D portfolio, so every colour is read from
   whichever token set the host provides and falls back to the paper palette. */
.certificates-view,.certificates-section{
 --cert-ink:var(--ink,var(--border,#171614));
 --cert-paper:var(--white,var(--surface,#fffefa));
 --cert-ground:var(--paper,var(--bg-base,#fff4d5));
 --cert-coral:var(--coral,var(--primary,#ef5b4f));
 --cert-teal:var(--teal,var(--secondary,#35aebf));
 --cert-yellow:var(--yellow,var(--accent,#ffe46f));
 --cert-muted:var(--muted,var(--text-muted,#686052));
 color:inherit;font-family:inherit;
}
.cert-intro{line-height:1.7;max-width:64ch;margin:0 0 22px;font-size:15px}

.cert-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:22px;padding:10px 4px 6px}

/* Each certificate is a taped-up sheet, like every other card in the studio. */
.cert-card{position:relative;display:flex;flex-direction:column;background:var(--cert-paper);
 border:2px solid var(--cert-ink);border-radius:9px 5px 9px 5px;box-shadow:4px 4px 0 var(--cert-ink);
 padding:0;min-width:0;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
.cert-card:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--cert-ink)}
.cert-card:nth-child(3n+2){border-radius:5px 9px 5px 9px}
.cert-card:before{content:'';position:absolute;z-index:2;top:-9px;left:50%;width:74px;height:20px;
 margin-left:-37px;transform:rotate(-3deg);background:var(--cert-yellow);
 border:1.5px solid var(--cert-ink);opacity:.92}
.cert-card:nth-child(even):before{transform:rotate(2.5deg)}

.cert-card-caption{display:flex;justify-content:space-between;align-items:center;gap:10px;
 padding:15px 14px 9px;font:700 9px/1.5 Jet,ui-monospace,monospace;letter-spacing:.13em;text-transform:uppercase;
 color:var(--cert-muted)}
.cert-type{background:var(--cert-teal);color:var(--cert-ink);border:1.5px solid var(--cert-ink);
 border-radius:2px;padding:2px 7px;letter-spacing:.09em}

/* The document itself, framed the way the project covers are. */
.cert-preview{display:block;position:relative;margin:0 14px;border:2px solid var(--cert-ink);
 border-radius:3px;background:var(--cert-ground);overflow:hidden;aspect-ratio:4/3;text-decoration:none;color:inherit}
.cert-preview-image{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.cert-preview-open{position:absolute;left:0;right:0;bottom:0;padding:7px 10px;background:var(--cert-yellow);
 border-top:2px solid var(--cert-ink);font:800 11px Bricolage,system-ui,sans-serif;color:var(--cert-ink);
 transform:translateY(100%);transition:transform .18s ease}
.cert-preview:hover .cert-preview-open,.cert-preview:focus-visible .cert-preview-open{transform:none}
.cert-preview-failed{position:absolute;inset:0;display:grid;place-items:center;padding:14px;text-align:center;
 font-size:12px;color:var(--cert-muted)}

.cert-no-preview{display:grid;place-items:center;gap:8px;padding:16px;text-align:center}
.cert-no-preview p{margin:0;font-size:12px;color:var(--cert-muted)}
.cert-document{position:relative;width:78px;height:100px;background:var(--cert-paper);
 border:2px solid var(--cert-ink);box-shadow:3px 3px 0 var(--cert-ink);padding:12px 9px;transform:rotate(-3deg)}
.cert-filetype{display:block;text-align:center;font:800 11px/1.2 Jet,ui-monospace,monospace;overflow-wrap:anywhere}
.cert-rule{display:block;height:2px;background:var(--cert-ink);opacity:.22;margin-top:12px}
.cert-rule.short{width:62%;margin-top:7px}
.cert-seal{position:absolute;bottom:-9px;right:-9px;width:26px;height:26px;display:grid;place-items:center;
 background:var(--cert-coral);color:var(--cert-paper);border:2px solid var(--cert-ink);border-radius:50%;font-size:12px}

.cert-details{display:flex;flex-direction:column;gap:5px;padding:14px;flex:1}
.cert-issuer{margin:0;font:700 9px/1.5 Jet,ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--cert-coral)}
.cert-details h3{margin:0;font:800 17px/1.25 Bricolage,system-ui,sans-serif}
.cert-date{margin:0;font:700 11px Jet,ui-monospace,monospace;color:var(--cert-muted)}
.cert-description{margin:4px 0 0;font-size:13px;line-height:1.6}

.cert-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:12px}
.cert-download{display:inline-flex;align-items:center;justify-content:center;gap:8px;
 background:var(--cert-paper);color:inherit;border:2px solid var(--cert-ink);border-radius:2px;
 box-shadow:3px 3px 0 var(--cert-ink);padding:8px 11px;min-height:36px;
 font:700 11px Bricolage,system-ui,sans-serif;text-decoration:none;cursor:pointer}
.cert-download:hover{filter:brightness(1.03)}
.cert-download:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--cert-ink)}
.cert-open{background:var(--cert-coral);color:var(--cert-paper)}
.cert-filename{display:block;margin-top:10px;padding-top:9px;border-top:1.5px dashed color-mix(in srgb,var(--cert-ink) 32%,transparent);
 font:700 9px/1.5 Jet,ui-monospace,monospace;letter-spacing:.06em;color:var(--cert-muted);overflow-wrap:anywhere}

.cert-empty{grid-column:1/-1;display:grid;place-items:center;gap:10px;padding:34px 18px;text-align:center;
 background:var(--cert-paper);border:2px dashed var(--cert-ink);border-radius:9px 5px 9px 5px}
.cert-empty span{font-size:26px;color:var(--cert-coral)}
.cert-empty p{margin:0;font-size:14px}

.cert-manage{display:inline-flex;margin-top:16px;font:700 11px Jet,ui-monospace,monospace;letter-spacing:.08em;
 text-transform:uppercase;color:var(--cert-teal)}

@media (max-width:650px){
 .cert-items{grid-template-columns:1fr;gap:18px;padding:8px 2px}
 .cert-card{box-shadow:3px 3px 0 var(--cert-ink)}
 .cert-details h3{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
 .cert-card,.cert-preview-open{transition:none}
 .cert-card:hover{transform:none}
}
/* The fallback line only appears when the preview actually failed. */
.cert-preview-failed[hidden]{display:none}

/* In the 2D portfolio the folder sits inside a normal section, so it follows that rhythm. */
.certificates-section .cert-intro{margin-bottom:26px}
.cert-items{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.cert-preview{aspect-ratio:3/2}
@media (max-width:900px){.cert-items{grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}}