/* ============================================================
   "HARVARD CERTIFIED" — taped certificates + fullscreen viewer
============================================================ */

.harvard {
  width: 100%;
  padding: 5vh 0 7vh;
  background: transparent;
  border-top: 2px solid rgba(8, 38, 110, 0.32);
  overflow: hidden;
}

.harvard-title {
  font-weight: 900;
  color: #0a1628;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.0;
  letter-spacing: 0.01em;
  font-size: clamp(2rem, 5vw, 4.5rem);
  margin-bottom: clamp(28px, 5vh, 64px);
}

/* Shield replaces the "A" in HARVARD */
.harvard-shield {
  display: inline-block;
  height: 0.92em;
  width: auto;
  vertical-align: -0.08em;
  margin: 0 0.02em;
}

/* ── Stage: corners + big center ── */
.harvard-stage {
  display: grid;
  grid-template-columns: 1fr 1.45fr 1fr;
  grid-template-areas:
    "x   ai  w"
    "p   ai  sql";
  gap: clamp(20px, 4vh, 48px) clamp(16px, 3vw, 44px);
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px);
}

.cert-x   { grid-area: x;   justify-self: start; align-self: start; }
.cert-w   { grid-area: w;   justify-self: end;   align-self: start; }
.cert-ai  { grid-area: ai;  justify-self: center; }
.cert-p   { grid-area: p;   justify-self: start; align-self: end; }
.cert-sql { grid-area: sql; justify-self: end;   align-self: end; }

/* ── Certificate card ── */
.cert {
  position: relative;
  --rot: 0deg;
  transform: rotate(var(--rot));
  cursor: zoom-in;
  transition: transform 0.3s ease, filter 0.3s ease;
  width: 100%;
}

.cert img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.28);
  background: #fff;
}

.cert-ai {
  z-index: 2;
  filter: drop-shadow(0 18px 46px rgba(0, 0, 0, 0.25));
}

.cert:hover {
  transform: rotate(var(--rot)) scale(1.04);
  z-index: 3;
}

/* ── Tape strips (two diagonal corners) ── */
.cert::before,
.cert::after {
  content: "";
  position: absolute;
  width: clamp(46px, 6vw, 78px);
  height: clamp(16px, 2vw, 26px);
  background: rgba(233, 222, 178, 0.85);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  z-index: 2;
  pointer-events: none;
}

.cert::before {
  top: -9px;
  right: -16px;
  transform: rotate(42deg);
}

.cert::after {
  bottom: -9px;
  left: -16px;
  transform: rotate(42deg);
}

/* Alternate tape direction on the right-side + center certs */
.cert-w::before, .cert-sql::before, .cert-ai::before {
  right: auto;
  left: -16px;
  transform: rotate(-42deg);
}
.cert-w::after, .cert-sql::after, .cert-ai::after {
  left: auto;
  right: -16px;
  transform: rotate(-42deg);
}

/* ── Fullscreen viewer ── */
.cert-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(6, 16, 32, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.cert-lightbox.open {
  opacity: 1;
}

.cert-lightbox-img {
  max-width: min(96vw, 1100px);
  max-height: 88vh;
  width: auto;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
  transform: scale(0.92);
  transition: transform 0.25s ease;
}

.cert-lightbox.open .cert-lightbox-img {
  transform: scale(1);
}

.cert-lightbox-close {
  position: absolute;
  top: clamp(10px, 2.5vw, 24px);
  right: clamp(14px, 3vw, 30px);
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}

.cert-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.28);
  transform: rotate(90deg);
}

/* ── Mobile ── */
@media (max-width: 700px) {
  .harvard { padding: 4vh 0 5vh; }

  .harvard-title {
    font-size: clamp(1.75rem, 8.5vw, 2.4rem);
    margin-bottom: 24px;
  }

  /* 2-up corners, big AI cert full-width in the middle */
  .harvard-stage {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "x   w"
      "ai  ai"
      "p   sql";
    gap: 22px 14px;
    padding: 0 16px;
  }

  .cert-x, .cert-w, .cert-p, .cert-sql {
    justify-self: stretch;
    align-self: center;
  }

  .cert-ai { width: 92%; }

  .cert::before,
  .cert::after {
    width: 38px;
    height: 13px;
  }

  .cert::before    { top: -6px;    right: -10px; left: auto;  }
  .cert::after     { bottom: -6px; left:  -10px; right: auto; }
  .cert-w::before, .cert-sql::before, .cert-ai::before { left: -10px;  right: auto; }
  .cert-w::after,  .cert-sql::after,  .cert-ai::after  { right: -10px; left: auto;  }
}