/* Fitted frames over soft color lighting that fades into the page. */
#certification-grid {
  --credential-paper: #f6f9fb;
  --credential-accent: var(--cyan);
  --credential-wall-light: #39e1f547;
  --credential-wall-blue: #5786ff33;
  --credential-wall-violet: #b781f223;
  position:relative;
  isolation:isolate;
  container-type:inline-size;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 22px;
}
#certification-grid::before {
  content:'';
  position:absolute;
  inset:-22px;
  z-index:-1;
  pointer-events:none;
  background-image:radial-gradient(ellipse, var(--credential-wall-light), var(--credential-wall-blue) 38%, var(--credential-wall-violet) 52%, transparent 74%);
  background-repeat:no-repeat;
  background-size:var(--credential-glow-width, 500px) var(--credential-glow-height, 460px);
  background-position:calc(var(--credential-glow-x, 0px) - var(--credential-glow-width, 500px) / 2) calc(var(--credential-glow-y, 0px) - var(--credential-glow-height, 460px) / 2);
  opacity:0;
  transition:opacity 180ms ease, background-position 160ms ease, background-size 160ms ease;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent), linear-gradient(transparent, #000 7%, #000 93%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent), linear-gradient(transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
#certification-grid.is-spotlit::before { opacity:1; }
body.light-mode #certification-grid {
  --credential-wall-light:#32d4e445;
  --credential-wall-blue:#679fff38;
  --credential-wall-violet:#b795ed32;
}
@media (min-width:1101px) {
  #certification-grid { width:min(1480px, calc(100vw - 80px)); margin-inline:0; position:relative; left:50%; transform:translateX(-50%); }
}
#certification-grid .credential-plaque {
  /* Match the narrowest wall cell, including its card padding and border. */
  --credential-balanced-frame:calc((100cqw - 88px) / 5.2 - 14px);
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  grid-column:var(--credential-wall-column, auto) / span var(--credential-wall-columns, 1);
  grid-row:var(--credential-wall-row, auto) / span var(--credential-wall-span, 1);
  padding:18px 6px;
  overflow:visible;
  border:1px solid transparent;
  border-radius:0;
  background:none;
  color:var(--text);
  font-family:var(--font-mono);
  box-shadow:none;
  transform:none;
  transition:none;
}
#certification-grid .credential-plaque::after { content:none; }
#certification-grid .credential-plaque > * { position:static; z-index:auto; }
#certification-grid .credential-plaque.has-destination:hover,
#certification-grid .credential-plaque:focus-within {
  transform:none;
  border-color:transparent;
  box-shadow:none;
}
.credential-plaque-top { display:flex; align-items:center; align-self:center; width:var(--credential-balanced-frame); max-width:100%; gap:10px; min-height:44px; margin-bottom:16px; }
.credential-plaque .credential-issuer-logo { display:block; flex:0 0 40px; width:40px; height:40px; padding:3px; border-radius:2px; background:var(--credential-paper); object-fit:contain; }
.credential-plaque .credential-issuer { color:var(--text-dim); font-size:11px; font-weight:600; letter-spacing:.01em; }
.credential-plaque .credential-state { margin-left:auto; color:var(--green); font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:.1em; }
.credential-plaque.status-expired .credential-state { color:#deaca3; }
.credential-plaque.status-in-progress .credential-state { color:#d9c28b; }
#certification-grid .credential-plaque .credential-badge-frame {
  position:relative;
  display:grid;
  place-items:center;
  align-self:center;
  width:calc(var(--credential-balanced-frame) * var(--credential-frame-scale, 1));
  max-width:100%;
  margin:0 0 20px;
  padding:0;
  overflow:hidden;
  border:10px solid;
  border-color:#52606a #121a20 #10171d #3a4852;
  outline:1px solid #070b10;
  border-radius:2px;
  background:var(--credential-paper);
  box-shadow:0 2px 0 #a7b9c31f, 2px 7px 10px #0008, 0 0 0 1px #6f7b83;
  transition:box-shadow 180ms ease;
}
#certification-grid .credential-plaque.has-destination:hover .credential-badge-frame,
#certification-grid .credential-plaque:focus-within .credential-badge-frame {
  box-shadow:0 2px 0 #a7b9c32b, 2px 9px 16px #0009, 0 0 0 1px #91a3ae;
}
/* The paper determines its own ratio: no clipping, stretching or empty mat. */
.credential-plaque .credential-badge-image { display:block; position:static; width:100%; height:auto; object-fit:contain; box-shadow:0 0 0 1px #0004; }
#certification-grid .credential-plaque[data-frame-content="badge"] .credential-badge-frame { box-sizing:content-box; width:calc(var(--credential-balanced-frame) * var(--credential-frame-scale, 1) - 20px); max-width:calc(100% - 20px); aspect-ratio:1.294; min-height:0; padding:0; }
.credential-plaque[data-frame-content="badge"] .credential-badge-image { position:absolute; inset:16px; width:calc(100% - 32px); height:calc(100% - 32px); max-height:none; min-height:0; object-fit:contain; box-shadow:none; }
#certification-grid .credential-plaque[data-wall-format="portrait"] { justify-content:center; }
.credential-plaque .credential-monogram { color:#2b4157; font:600 clamp(24px, 3vw, 38px)/1.2 var(--font-display); letter-spacing:-.02em; }
.credential-plaque .credential-monogram[hidden] { display:none; }
.credential-plaque .credential-monogram:not([hidden]) { padding:30px 12px; }
.credential-plaque-copy { display:flex; flex-direction:column; align-items:flex-start; align-self:center; width:var(--credential-balanced-frame); max-width:100%; min-width:0; }
.credential-title-row { display:flex; align-items:flex-start; gap:12px; width:100%; }
.credential-title-row h3 { flex:1; min-width:0; overflow-wrap:anywhere; }
#certification-grid .credential-plaque h3 { margin:0; color:var(--text); font:600 20px/1.25 var(--font-display); letter-spacing:.01em; }
.credential-primary-link { color:inherit; text-decoration:none; }
.credential-primary-link::after { content:''; position:absolute; inset:0; z-index:1; border-radius:2px; }
.credential-primary-link:focus { outline:none; }
.credential-primary-link:focus-visible::after { outline:2px solid var(--credential-accent); outline-offset:5px; }
#certification-grid .credential-plaque .credential-issued { margin:7px 0 16px; color:var(--text-dim); font-size:11px; line-height:1.5; }
.credential-primary-hint { color:var(--text-faint); font-size:10px; line-height:1.5; }
.has-destination .credential-primary-hint { color:var(--credential-accent); }
#certification-grid .credential-plaque .credential-image-link { position:relative; z-index:2; align-self:center; width:var(--credential-balanced-frame); max-width:100%; margin-top:12px; color:var(--text-dim); font-size:10px; text-underline-offset:4px; }
.credential-image-link:focus-visible { outline:2px solid var(--credential-accent); outline-offset:4px; border-radius:2px; }
@media (max-width:1100px) {
  #certification-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  #certification-grid::before { inset-inline:-16px; }
  #certification-grid .credential-plaque { --credential-balanced-frame:min(344px, calc((100cqw - 22px) / 2 - 14px)); grid-column:auto; grid-row:auto; }
  #certification-grid .credential-plaque[data-wall-format="portrait"] { grid-row:span 2; }
}
@media (max-width:620px) {
  #certification-grid { grid-template-columns:1fr; gap:18px; }
  #certification-grid::before { inset:-12px -8px; }
  #certification-grid .credential-plaque { --credential-balanced-frame:min(344px, calc(100cqw - 14px)); padding:18px 6px; }
  #certification-grid .credential-plaque[data-wall-format="portrait"] { grid-row:auto; }
  .credential-plaque .credential-monogram { font-size:38px; }
}
@media (prefers-reduced-motion:reduce) { #certification-grid::before, #certification-grid .credential-plaque .credential-badge-frame { transition:none; } }