/* #certificates (P3): night section. Blueprint 3.5 = P07/P08 split (text left, certificate pile hung by two pegs
   right), P05 pegged step cards, then the 20 certificate names as tags on cords: static wrapped rows (one cord per
   row) from 768 px up, two slowly moving cords on phones (js/certificates.js pauses them on touch).
   Semantic variables only (kit.md 3), so dark mode is a variable swap. */

/* ---------- 1. top: copy left, certificate pile right ---------- */
#certificates .cert-top { display: grid; gap: 40px; align-items: start; }
#certificates .cert-copy { display: grid; gap: 22px; justify-items: start; }
#certificates .cert-copy h2 { max-width: 13em; }
#certificates .cert-copy h2 .mk { white-space: nowrap; } /* keep "Can Show." / "Can Check." whole, as the original layout breaks them */
#certificates .cert-copy .lead { max-width: 40ch; }
#certificates .cert-copy .row-btns { margin-top: 10px; }
@media (width >= 992px) {
  #certificates .cert-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(48px, 5vw, 72px); }
  #certificates .cert-copy { padding-top: 64px; } /* text starts under the cord that holds the pile (CALL-E #todo) */
}

/* the pile: a photo print of the certificate with two sheets behind it, clipped to the cord by two pegs */
#certificates .cert-vis { justify-content: center; padding-bottom: 104px; }
#certificates .cert-pile { width: min(100%, 560px); }
#certificates .cert-print { position: relative; z-index: 1; padding: 10px; border-radius: 10px; }
#certificates .cert-print img { display: block; width: 100%; height: auto; border-radius: 4px; }
/* the certificate sheet has its own paper and shadow; its image bleeds out by the transparent shadow margin
   (64/1562) so the visible sheet fills the box and the pegs bite its top edge */
#certificates .cert-print.sheet { padding: 0; border-radius: 0; }
#certificates .cert-print.sheet img { width: 108.2%; max-width: none; margin: -4.1%; border-radius: 0; }
#certificates .cert-sheet {
  position: absolute; z-index: 0; inset: 0; border-radius: 6px; transform-origin: 50% 0;
  box-shadow: var(--sh-paper), inset 0 0 0 1px var(--hair);
}
#certificates .cert-sheet.one { transform: rotate(3.4deg) translate(6px, 3px); }
#certificates .cert-sheet.two { transform: rotate(-2.6deg) translate(-8px, 9px); }

/* LinkedIn-style card: a small tag pegged over the print's bottom-right corner (nested .hg, net tilt +3deg) */
/* hangs mostly below the sheet so the certificate's QR receipt (ID, check) stays readable */
#certificates .cert-li { position: absolute; z-index: 4; right: -22px; bottom: -96px; width: 246px; }
#certificates .cert-li-in { padding: 16px 16px 16px 18px; border-radius: 12px; font-size: 15px; }
#certificates .cert-li-k { display: block; font: 400 11px/1.4 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg3); }
#certificates .cert-li-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
#certificates .cert-li-star {
  display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 8px;
  background: var(--paper-yel); color: var(--n);
}
#certificates .cert-li-star svg { display: block; }
#certificates .cert-li-txt { min-width: 0; }
#certificates .cert-li-txt b { display: block; font-weight: 600; font-size: 15px; line-height: 1.25; }
#certificates .cert-li-txt i { display: block; margin-top: 3px; font: 400 12px/1.3 var(--mono); font-style: normal; text-transform: uppercase; color: var(--fg3); }

/* ---------- 2. three pegged step cards (P05 colours sand / cream / yellow) ---------- */
#certificates .cert-steps { margin-top: 64px; }
#certificates .cert-card { display: grid; gap: 12px; align-content: start; padding: 34px 28px 28px; }
#certificates .cert-n { font: 400 15px/1.2 var(--mono); text-transform: uppercase; }
#certificates .cert-card h3 { font-size: clamp(20px, 0.4vw + 16px, 22px); }
@media (width >= 992px) {
  #certificates .cert-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px clamp(24px, 3vw, 43px); }
}
/* tablet: one card per cord (kit .stack.stack-t), cards keep a readable width */
@media (768px <= width <= 991px) {
  #certificates .cert-steps { align-items: flex-start; row-gap: 16px; }
  #certificates .cert-steps > .hrow { width: 100%; }
  #certificates .cert-steps .hg { max-width: 600px; }
}
@media (width <= 767px) {
  #certificates .cert-steps { row-gap: 16px; }
  #certificates .cert-card { padding: 30px 22px 24px; }
}

/* ---------- 3. certificates you can earn: tags on cords ---------- */
#certificates .cert-earn { margin-top: 104px; }
/* one full-bleed box; every wrapped row of fixed-height tags gets its own cord, painted at a fixed pitch */
#certificates .cert-runs {
  --h: 50px; --gap: 46px; --gx: 16px; --pitch: calc(var(--h) + var(--gap));
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--gap) var(--gx);
  margin: 20px calc(50% - 50vw) 0; padding: 36px calc(50vw - 50%) 0;
  background-image: var(--cord-img), var(--cord-img), var(--cord-img), var(--cord-img), var(--cord-img),
    var(--cord-img), var(--cord-img), var(--cord-img), var(--cord-img), var(--cord-img);
  background-repeat: repeat-x;
  background-size: 12px 28px;
  background-position: 0 12px, 0 calc(12px + var(--pitch)), 0 calc(12px + 2 * var(--pitch)),
    0 calc(12px + 3 * var(--pitch)), 0 calc(12px + 4 * var(--pitch)), 0 calc(12px + 5 * var(--pitch)),
    0 calc(12px + 6 * var(--pitch)), 0 calc(12px + 7 * var(--pitch)), 0 calc(12px + 8 * var(--pitch)),
    0 calc(12px + 9 * var(--pitch));
}
#certificates .cert-run { display: contents; }
#certificates .cert-runs .dup { display: none; }
#certificates .cert-runs .hg { flex: none; }
#certificates .cert-runs .tag {
  display: flex; align-items: center; height: var(--h); padding: 3px 18px 0;
  font-size: 16px; line-height: 1; white-space: nowrap;
}
#certificates .cert-runs:focus-visible { outline-offset: -2px; }
@media (768px <= width <= 991px) {
  #certificates .cert-runs { --gx: 12px; }
  #certificates .cert-runs .tag { padding-inline: 15px; font-size: 15px; }
}

/* phones: two cords (10 names each) drift in opposite directions; clones are aria-hidden; the cords stay still */
@media (width <= 767px) {
  #certificates .cert-earn { margin-top: 80px; }
  #certificates .cert-runs {
    --h: 46px; --gap: 42px; --gx: 14px;
    display: block; overflow-x: clip; padding: 36px 0 0; background-position: 0 12px, 0 calc(12px + var(--pitch));
    background-image: var(--cord-img), var(--cord-img);
  }
  #certificates .cert-run { display: flex; width: max-content; animation: cert-run-l 60s linear infinite; }
  #certificates .cert-run.r { margin-top: var(--gap); animation-name: cert-run-r; animation-duration: 66s; }
  #certificates .cert-run > .hg { margin-right: var(--gx); }
  #certificates .cert-runs .dup { display: block; }
  #certificates .cert-runs .tag { padding: 3px 15px 0; font-size: 15px; }
  #certificates .cert-runs:focus-within .cert-run, #certificates .cert-runs.hold .cert-run,
  #certificates .cert-runs.off .cert-run { animation-play-state: paused; }
}
@media (width <= 767px) and (hover: hover) {
  #certificates .cert-runs:hover .cert-run { animation-play-state: paused; }
}
@keyframes cert-run-l { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes cert-run-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* reduced motion on phones: no drift, no clones; both cords scroll sideways together */
@media (width <= 767px) and (prefers-reduced-motion: reduce) {
  #certificates .cert-runs {
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--gut);
    scrollbar-width: none; padding-bottom: 40px; margin-bottom: -40px;
  }
  #certificates .cert-runs::-webkit-scrollbar { display: none; }
  #certificates .cert-run { animation: none; padding-inline: var(--gut); }
  #certificates .cert-run > .hg { scroll-snap-align: start; }
  #certificates .cert-runs .dup { display: none; }
}

/* ---------- 4. phones ---------- */
@media (width <= 767px) {
  #certificates .cert-top { gap: 32px; }
  #certificates .cert-steps { margin-top: 48px; }
  #certificates .cert-li { right: -6px; bottom: -92px; width: 232px; }
  #certificates .cert-li-in { padding: 14px 12px 14px 14px; }
  #certificates .cert-li-row { gap: 10px; }
  #certificates .cert-li-star { width: 32px; height: 32px; }
  #certificates .cert-li-txt i { font-size: 11px; white-space: nowrap; }
}
@media (width <= 479px) {
  #certificates .cert-copy h2 { font-size: min(36px, 9.75vw); } /* 360 px: "Skills You Can Show." stays on one line */
  #certificates .cert-copy .btn { padding-inline: 18px; font-size: 14px; }
}