/* CERTIFICATIONS SECTION — text left, center-emphasis carousel right */
.about-certs-section { background: var(--bg); padding: var(--space-section) var(--site-pad-x); border-top: 1px solid var(--clr-divider); }
.about-certs-inner { max-width: var(--site-max-w); margin: 0 auto; }
.about-certs-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: center;
}
.about-certs-content h2 { margin: 0 0 18px; }
.about-certs-content p {
  font-family: var(--p-font, 'Inter', sans-serif);
  font-size: clamp(15px, 1.4vw, 17px);
  color: var(--fg-muted);
  line-height: 1.75;
  margin: 0 0 28px;
}

.about-certs-carousel { min-width: 0; }
.cert-carousel-row { display: flex; align-items: center; gap: 14px; }

.cert-carousel-nav {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--surface-card);
  border: 1px solid var(--border);
  box-shadow: 0 4px 14px rgba(10,15,30,0.08);
  color: var(--fg-primary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease, color 0.25s ease;
}
.cert-carousel-nav [data-lucide] { width: 20px; height: 20px; stroke-width: 2; }
.cert-carousel-nav:hover {
  background: var(--text-gradient) border-box;
  border-color: transparent;
  color: var(--on-accent);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(var(--accent-rgb), 0.35);
}

.cert-carousel-viewport { overflow: hidden; flex: 1; min-width: 0; padding: 64px 0; margin: -64px 0; }
.cert-carousel-track {
  display: flex;
  align-items: center;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
/* No card "frame" — just the certificate itself, edge to edge. Height */
.cert-card {
  flex: 0 0 180px;
  margin: 0 12px;
  border-radius: 14px;
  overflow: hidden;
  transform: scale(0.86);
  opacity: 0.55;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease, box-shadow 0.5s ease;
}
.cert-card a { display: block; cursor: pointer; }
.cert-card img {
  width: 100%;
  aspect-ratio: 210 / 297;
  object-fit: contain;
  display: block;
}
.cert-card.cert-card-active {
  transform: scale(1.32);
  opacity: 1;
  z-index: 2;
}

/* margin-top looks generous on paper, but `.cert-card-active` is a */
.cert-carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 44px; }
.cert-carousel-dots .hw-dot {
  width: 44px; height: 44px;
  border-radius: 999px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.cert-carousel-dots .hw-dot::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.25);
  transition: background 0.25s ease, width 0.25s ease, border-radius 0.25s ease;
}
.cert-carousel-dots .hw-dot.active::before {
  width: 22px;
  border-radius: 4px;
  background: var(--text-gradient);
}

@media (max-width: 1100px) {
  /* The active .cert-card is `transform: scale(1.32)` and bleeds well past */
  .about-certs-grid { grid-template-columns: 1fr; gap: 80px; }
  .cert-card { flex: 0 0 150px; }
}
/* Phones: the heading and text are centred, and the button comes AFTER the carousel instead of before it. The markup keeps the
   button inside the text block (desktop, tablet), so on phones that block stops being a box (display: contents) and its four
   children are ordered as grid items: heading, text, carousel, button. The 80px gap the stacked layout had between the text and
   the carousel is kept as the text's bottom margin (the active card scales up and bleeds past the row); the grid gap goes. */
@media (max-width: 767px) {
  .about-certs-grid { gap: 0; }
  .about-certs-content { display: contents; }
  .about-certs-content h2 { order: 1; text-align: center; }
  .about-certs-content p { order: 2; text-align: center; margin: 0 auto 80px; }
  .about-certs-carousel { order: 3; }
  .about-certs-content .cta-btn { order: 4; justify-self: center; margin-top: 56px; }
}
/* Tap targets — hit area around the pagination dots */
@media (max-width: 767px), (pointer: coarse) {
  .hw-dot { position: relative; }
  .hw-dot::after { content: ''; position: absolute; inset: -12px -4px; }
}