/* ============================================================
   Credentials (certificate grid) + Lightbox
   ============================================================ */
.cert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cert {
    background: linear-gradient(180deg, rgba(17,25,45,0.96), rgba(11,16,32,0.96));
    border: 1px solid rgba(97,214,255,0.12);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    transition: transform .25s, border-color .25s;
}
.cert:hover, .cert:focus-visible { transform: translateY(-5px); border-color: rgba(245,199,106,0.5); outline: none; }
.cert__imgwrap { position: relative; aspect-ratio: 4 / 3; background: var(--panel-2); overflow: hidden; }
.cert__imgwrap img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .4s; }
.cert:hover .cert__imgwrap img { transform: scale(1.05); }
.cert__zoom {
    position: absolute; bottom: 12px; right: 12px;
    padding: 6px 14px; border-radius: 999px;
    background: rgba(5,7,13,0.82); border: 1px solid rgba(97,214,255,0.2);
    font-size: .78rem; color: var(--gold-soft);
    opacity: 0; transition: opacity .25s; pointer-events: none;
}
.cert:hover .cert__zoom { opacity: 1; }

/* Placeholder shown only if an image fails to load */
.cert__placeholder {
    display: none; position: absolute; inset: 0;
    flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    text-align: center; padding: 16px;
    background:
        radial-gradient(circle at 24% 18%, rgba(255,255,255,0.10), transparent 32%),
        linear-gradient(180deg, rgba(12,17,30,0.96), rgba(8,10,18,0.98));
}
.cert__placeholder small { color: var(--muted); font-size: .72rem; opacity: .7; word-break: break-all; }
.cert--missing { cursor: default; }
.cert--missing img { display: none; }
.cert--missing .cert__placeholder { display: flex; }
.cert--missing .cert__zoom { display: none; }
.cert__seal {
    width: 72px; height: 72px; border-radius: 50%;
    display: grid; place-items: center;
    border: 1px solid rgba(97,214,255,0.14);
    background: var(--gold-grad);
    color: #1a1405; font-size: 1.9rem; font-weight: 800;
    box-shadow: 0 16px 30px rgba(212,175,55,0.22);
}
.cert figcaption { padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.cert figcaption strong { font-size: .92rem; }
.cert figcaption span { color: var(--muted); font-size: .76rem; }

/* Lightbox */
.lightbox {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(3,5,10,0.93);
    display: none; align-items: center; justify-content: center; padding: 30px;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 92%; max-height: 88vh; border-radius: 10px; box-shadow: var(--shadow); }
.lightbox__close {
    position: absolute; top: 22px; right: 30px;
    background: none; border: 0; color: #fff; font-size: 2.6rem; line-height: 1; cursor: pointer;
}