/* ==========================================================================
   Component: Lightbox — no Figma frame.
   One shared <dialog> built by initLightbox() in main.js; opens the full-size
   ISO certificates from the Certificates cards and the About badge.
   ========================================================================== */

.trustav-lightbox {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: var(--space-3xl) var(--space-4xl);
  border: 0;
  background: transparent;
  color: var(--c-white);
}

.trustav-lightbox[open] {
  display: grid;
  place-items: center;
}

html:has(.trustav-lightbox[open]) {
  overflow: hidden;
}

.trustav-lightbox::backdrop {
  background-color: var(--c-overlay);
}

.trustav-lightbox__figure {
  display: grid;
  gap: var(--space-sm);
  justify-items: center;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
}

.trustav-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - var(--space-3xl) * 2 - var(--space-2xl));
  width: auto;
  height: auto;
  background-color: var(--c-white);
}

.trustav-lightbox__caption {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  text-align: center;
  color: var(--c-neutral-3);
}

.trustav-lightbox__btn {
  position: fixed;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: var(--border-width) solid var(--c-secondary);
  border-radius: var(--radius-pill);
  background-color: var(--c-black);
  color: var(--c-white);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.trustav-lightbox__btn:hover,
.trustav-lightbox__btn:focus-visible {
  border-color: var(--c-accent);
  background-color: var(--c-primary);
}

.trustav-lightbox__btn:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

.trustav-lightbox__btn[hidden] {
  display: none;
}

.trustav-lightbox__btn--close {
  top: var(--space-md);
  right: var(--space-md);
}

.trustav-lightbox__btn--prev,
.trustav-lightbox__btn--next {
  top: 50%;
  translate: 0 -50%;
}

.trustav-lightbox__btn--prev {
  left: var(--space-md);
}

.trustav-lightbox__btn--next {
  right: var(--space-md);
}

.trustav-lightbox__btn--next svg {
  rotate: 180deg;
}

/* Phones: the certificate takes the full width, arrows sit under it. */
@media (max-width: 640px) {
  .trustav-lightbox {
    padding: var(--space-4xl) var(--space-sm);
  }

  .trustav-lightbox__img {
    max-height: calc(100vh - var(--space-4xl) * 2 - var(--space-2xl));
  }

  .trustav-lightbox__btn--prev,
  .trustav-lightbox__btn--next {
    top: auto;
    bottom: var(--space-md);
    translate: none;
  }

  .trustav-lightbox__btn--prev {
    left: calc(50% - 56px);
  }

  .trustav-lightbox__btn--next {
    right: calc(50% - 56px);
  }
}

/* Clickable certificate images (Certificates cards, About badge). */
.trustav-certs__zoom,
.trustav-about__cert-badge {
  cursor: zoom-in;
}