/* ===== Certifications Section ===== */
#certifications {
  padding: 3rem 7% 4rem;
  background: rgb(var(--bg));
  text-align: center;
}

/* Section header (reuse global pattern but with spacing for this section) */
#certifications .section_header {
  margin-bottom: 2.5rem;
}

#certifications .section_title {
  font-size: var(--font-size-4xl);
  font-weight: 700;
  color: rgb(var(--text));
}

/* ===== Grid wrapper ===== */
#certifications > div:last-of-type {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Max 3 per row */
  gap: 1.5rem;
  justify-items: center;
}

/* ===== Certification Cards ===== */
#certifications > div:last-of-type img {
  display: block;

  /* uniform sizing */
  width: 220px;
  height: 300px;
  object-fit: contain;

  /* paper card look */
  background: #fff;
  padding: 1rem;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);

  /* 3D shadow stack */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 6px 18px rgba(0, 0, 0, 0.1),
    0 18px 42px rgba(0, 0, 0, 0.08);

  /* interaction */
  transition: transform 200ms ease, box-shadow 220ms ease, filter 200ms ease;
}

/* Hover lift effect */
#certifications > div:last-of-type img:hover,
#certifications > div:last-of-type img:focus {
  transform: translateY(-6px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), 0 14px 32px rgba(0, 0, 0, 0.16),
    0 26px 60px rgba(0, 0, 0, 0.12);
  filter: saturate(1.02);
}

/* ===== Responsive breakpoints ===== */
@media (max-width: 900px) {
  #certifications > div:last-of-type {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 550px) {
  #certifications > div:last-of-type {
    grid-template-columns: 1fr;
  }
}