/* ==========================================================
   Credentials page
   Every size below is taken directly from the spec. Two values had
   no spec given (outer certificate frame padding, since the mockup
   is a screenshot, not a Figma export) — marked APPROXIMATED below.
   ========================================================== */

.cred-wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 81px); }
.cred-hero { width: min(1038px, 100%); margin: 0 auto; padding: 56px 0 8px; }
.cred-h1 { font: 700 40px/1.15 var(--font-display); letter-spacing: -0.02em; color: var(--bottle-900); }
.cred-label { font: 500 22px/1.3 var(--font-body); margin: 48px 0 20px; color: var(--bottle-900); }

/* ---------- Resume card: 1038 x 272, 60px padding, radius 24 ---------- */
.resume-card {
  width: min(1038px, 100%); min-height: 272px; margin: 0 auto;
  padding: clamp(24px, 5vw, 60px); border-radius: 24px;
  background: var(--bg-raised); box-shadow: var(--shadow-sm);
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
.resume-icon {
  flex: none; width: 80px; height: 80px; border-radius: 18px;
  padding: 23px 16px; box-sizing: border-box;
  background: var(--salad-400); color: var(--bottle-900);
  display: grid; place-items: center;
}
.resume-icon svg { width: 37.5px; height: 37.5px; }
.resume-body { flex: 1; min-width: 220px; }
.resume-name { font: 600 32px/1.2 var(--font-display); letter-spacing: -0.01em; color: var(--bottle-900); }
.resume-role { font: 500 22px/1.35 var(--font-body); color: var(--bottle-900); margin-top: 4px; }
.resume-desc { font: 500 16px/1.5 var(--font-body); color: var(--text-secondary); margin-top: 10px; max-width: 58ch; }
.resume-dl {
  flex: none; width: 158px; height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 15px; border-radius: 999px; background: var(--action-primary); color: var(--btn-label, var(--text-on-action));
  font: 600 14px/1 var(--font-display); text-decoration: none; transition: background-color .2s, transform .15s;
}
.resume-dl:hover { background: var(--action-primary-hover); }
.resume-dl:active { transform: translateY(1px); }
.resume-dl svg { width: 16px; height: 16px; }

/* ---------- Certification frame: 1038 x 803, radius 24 ---------- */
/* APPROXIMATED: the spec gives the outer frame and the inner image size (1000x773) but not the
   padding between them, since the source was a screenshot rather than a Figma export. The values
   below split the 38px width gap and 30px height gap evenly, with extra room at the top for the
   "Verify Certificate" label, which sits on the green frame above the white card in the mockup. */
.cert-frame {
  width: min(1038px, 100%); aspect-ratio: 1038 / 803; margin: 0 auto;
  border-radius: 24px; background: var(--salad-400);
  padding: 58px 19px 19px; box-sizing: border-box;
  position: relative;
}
.cert-verify {
  position: absolute; top: 22px; right: 24px;
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 18px/1 var(--font-body); color: var(--bottle-900); text-decoration: none;
}
.cert-verify:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.cert-verify svg { width: 18px; height: 18px; }
.cert-card { width: 100%; height: 100%; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: var(--shadow-md); }
.cert-card img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }

.cert-note { margin-top: 14px; font: 500 13px/1.5 var(--font-body); color: var(--text-secondary); }

@media (max-width: 760px) {
  .cred-h1 { font-size: 32px; }
  .resume-card { flex-direction: column; align-items: flex-start; text-align: left; }
  .resume-dl { width: 100%; }
  .cert-frame { padding: 52px 12px 12px; border-radius: 20px; }
  .cert-card { border-radius: 14px; }
  .cert-verify { font-size: 15px; top: 16px; right: 16px; }
}