/* ============================================================
   SQLISM — CERTIFICATE ARTWORK (includes/cert-card.php)
   Fixed "paper" look in both site themes — a certificate is a
   document, so it never goes dark. Every size is a container unit
   (cqw) of .cert-frame, so the artwork scales as one piece from a
   phone preview to an A4 landscape print.
   ============================================================ */

.cert-frame {
    container-type: inline-size;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}
.cert {
    --cert-ink: #0b1026;
    --cert-ink-soft: #3c4560;
    --cert-muted: #6b7189;
    --cert-gold: #b08a2e;
    --cert-gold-soft: #d9bd73;
    --cert-paper: #fffdf7;
    position: relative;
    aspect-ratio: 1.414 / 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 5.2cqw 6.2cqw 4.4cqw;
    box-sizing: border-box;
    color: var(--cert-ink);
    background:
        radial-gradient(120% 90% at 50% 0%, #ffffff 0%, var(--cert-paper) 55%, #f8f1df 100%);
    border-radius: 0.9cqw;
    box-shadow:
        0 0.2cqw 0.4cqw rgba(11, 16, 38, 0.06),
        0 3cqw 6cqw -2cqw rgba(11, 16, 38, 0.35);
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    text-align: center;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.cert *, .cert *::before, .cert *::after { box-sizing: border-box; }
.cert-guilloche { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cert-border {
    position: absolute;
    inset: 1.6cqw;
    border: 0.22cqw solid var(--cert-ink);
    border-radius: 0.5cqw;
    pointer-events: none;
}
.cert-border::after {
    content: '';
    position: absolute;
    inset: 0.55cqw;
    border: 0.1cqw solid var(--cert-gold-soft);
    border-radius: 0.3cqw;
}

/* --- top row --- */
.cert-top { position: relative; display: flex; justify-content: space-between; align-items: flex-start; }
.cert-brand { display: flex; align-items: center; gap: 1cqw; }
.cert-logo svg { display: block; width: 3.4cqw; height: 3.4cqw; }
.cert .cert-wordmark { font-size: 2.3cqw; font-weight: 800; letter-spacing: -0.03em; color: var(--cert-ink); }
.cert-id { text-align: right; line-height: 1.25; }
.cert .cert-id span { display: block; font-size: 0.95cqw; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--cert-muted); }
.cert .cert-id strong { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 1.35cqw; font-weight: 600; color: var(--cert-ink); letter-spacing: 0.02em; }

/* --- body --- */
.cert-body { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; }
.cert .cert-kicker {
    margin: 0;
    font-size: 1.35cqw;
    font-weight: 800;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--cert-gold);
    padding-left: 0.42em; /* optically centre letter-spaced text */
}
.cert .cert-presents { margin: 1.6cqw 0 0.2cqw; font-size: 1.45cqw; color: var(--cert-muted); font-weight: 500; }
.cert .cert-name {
    margin: 0;
    max-width: 88%;
    font-family: 'Lora', Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: 600;
    font-size: 5.6cqw;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--cert-ink);
    overflow-wrap: anywhere;
}
.cert-rule { width: 46%; margin: 1.2cqw auto 1.3cqw; display: flex; align-items: center; justify-content: center; }
.cert-rule span { display: block; width: 100%; height: 0.14cqw; background: linear-gradient(90deg, transparent, var(--cert-gold) 20%, var(--cert-gold) 80%, transparent); position: relative; }
.cert-rule span::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 0.9cqw; height: 0.9cqw;
    background: var(--cert-gold);
    transform: translate(-50%, -50%) rotate(45deg);
}
.cert .cert-desc { margin: 0; font-size: 1.45cqw; color: var(--cert-ink-soft); max-width: 70%; line-height: 1.5; }
.cert .cert-title {
    margin: 0.9cqw 0 0;
    font-size: 3.15cqw;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    background: linear-gradient(90deg, #0b1026, #3b2fa8 60%, #0e7490);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.cert .cert-skills { list-style: none; margin: 1.5cqw 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7cqw; }
.cert .cert-skills li {
    padding: 0.45cqw 1.2cqw;
    border-radius: 99cqw;
    font-size: 1.1cqw;
    font-weight: 700;
    color: #3b2fa8;
    background: rgba(124, 92, 255, 0.08);
    border: 0.1cqw solid rgba(124, 92, 255, 0.28);
}

/* --- footer --- */
.cert-foot { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 2cqw; }
.cert-meta { display: flex; gap: 2.6cqw; text-align: left; flex-wrap: wrap; }
.cert-meta div { line-height: 1.3; }
.cert .cert-meta span, .cert .cert-verify-text span {
    display: block;
    font-size: 0.9cqw;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--cert-muted);
}
.cert .cert-meta strong { display: block; margin-top: 0.25cqw; font-size: 1.35cqw; font-weight: 700; color: var(--cert-ink); }
.cert-meta .cert-issuer { flex-basis: 100%; }
.cert-seal svg { display: block; width: 11cqw; height: 11cqw; filter: drop-shadow(0 0.5cqw 0.8cqw rgba(156, 115, 23, 0.35)); }
.cert-verify { display: flex; align-items: flex-end; justify-content: flex-end; gap: 1.2cqw; text-align: right; }
.cert-qr { width: 7.4cqw; height: 7.4cqw; flex: none; padding: 0.35cqw; background: #fff; border-radius: 0.4cqw; border: 0.1cqw solid #e7e2d2; }
.cert-qr:empty { display: none; }
.cert-qr svg { display: block; width: 100%; height: 100%; }
.cert .cert-verify-text strong {
    display: block;
    margin-top: 0.25cqw;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 1.05cqw;
    font-weight: 600;
    color: var(--cert-ink);
    white-space: nowrap;
    line-height: 1.35;
}

/* --- sample overlay (hub preview) --- */
.cert-sample-band {
    position: absolute;
    top: 4.2cqw; right: -6.5cqw;
    width: 26cqw;
    transform: rotate(35deg);
    padding: 0.7cqw 0;
    font-size: 1.3cqw;
    font-weight: 800;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(90deg, #7c5cff, #22d3ee);
    box-shadow: 0 0.4cqw 1cqw rgba(0, 0, 0, 0.15);
}

/* Text rules above are written as `.cert .cert-x` on purpose: pages put
   generic rules like `.ct-main h2 { color: ... }` on their own content,
   and the artwork must look identical in light and dark site themes. */

/* --- print / Save as PDF: one A4 landscape page, edge to edge ---
   The page-level rules that hide everything except the certificate
   live with each page (certification.css "PRINT"); these size it. */
@media print {
    @page { size: A4 landscape; margin: 0; }
    html, body { width: 297mm !important; height: 210mm !important; margin: 0 !important; padding: 0 !important; background: #fff !important; overflow: hidden !important; }
    .cert-frame { width: 297mm !important; max-width: none !important; margin: 0 !important; }
    .cert { width: 297mm !important; height: 210mm !important; aspect-ratio: auto !important; border-radius: 0 !important; box-shadow: none !important; }
    /* background-clip:text prints with a hairline box in Chromium */
    .cert .cert-title { background: none !important; color: #231a7a !important; }
    .cert-sample-band { display: none !important; }
}