/* ==========================================================================
   NOVAURA — Laboratory Results & Certificates of Analysis

   Namespaced .nva-labs / .nva-labcard / .nva-coa. Deliberately NOT .nva-lab__,
   which Phase 5's product accordion already uses.
   ========================================================================== */

/* ==========================================================================
   Landing
   ========================================================================== */
.nva-labs { padding: var(--nva-s-40) 0 var(--nva-s-24); }

.nva-labs__inner {
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: var(--nva-s-6);
}

.nva-labs__eyebrow {
  font-family: var(--nva-font-body);
  font-size: 12px;
  font-weight: var(--nva-w-semi);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--nva-gold);
}

.nva-labs__heading {
  margin-top: var(--nva-s-5);
  font-family: var(--nva-font-heading);
  font-size: clamp(2.4rem, 4.4vw, 4rem);
  font-weight: var(--nva-w-semi);
  line-height: 1.08;
  letter-spacing: var(--nva-ls-tight);
  color: var(--nva-ink);
}

.nva-labs__lead {
  max-width: 32rem;
  margin-top: var(--nva-s-7);
  font-family: var(--nva-font-body);
  font-size: 16px;
  line-height: 1.8;
  color: var(--nva-ink-muted);
}

.nva-labs__rule {
  display: block;
  width: 100%;
  height: 1px;
  margin-top: var(--nva-s-12);
  background-color: var(--nva-line);
}

.nva-labs__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--nva-s-8);
  margin-top: var(--nva-s-12);
}

/* --------------------------------------------------------------------------
   Product card
   -------------------------------------------------------------------------- */
.nva-labcard {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--nva-s-6);
  border: 1px solid var(--nva-line);
  border-radius: 18px;
  background-color: var(--nva-surface);
  transition: box-shadow var(--nva-d-slow) var(--nva-ease),
              border-color var(--nva-d-slow) var(--nva-ease);
}
.nva-labcard:hover {
  border-color: rgba(0,0,0,0.14);
  box-shadow: 0 24px 48px -16px rgba(0,0,0,0.14);
}

.nva-labcard__media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 210px;
  color: var(--nva-ink-20);
}

/* The reference multiplies the vial render onto the card. */
.nva-labcard__img {
  height: 200px;
  width: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
  user-select: none;
}

.nva-labcard__fallback { width: 48px; height: 48px; stroke-width: 1.2; }

.nva-labcard__name {
  font-family: var(--nva-font-body);
  font-size: 18px;
  font-weight: var(--nva-w-bold);
  letter-spacing: 0.01em;
  color: var(--nva-ink);
}

.nva-labcard__label {
  margin-top: 0.375rem;
  font-family: var(--nva-font-body);
  font-size: 12px;
  font-weight: var(--nva-w-medium);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--nva-ink-50);
}

.nva-labcard__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: var(--nva-s-5);
  font-family: var(--nva-font-body);
  font-size: 13px;
  font-weight: var(--nva-w-medium);
  letter-spacing: 0.02em;
  color: var(--nva-ink);
}
.nva-labcard__cta .nva-icon { transition: transform var(--nva-d-slow) var(--nva-ease); }
.nva-labcard:hover .nva-labcard__cta .nva-icon { transform: translateX(6px); }

/* --------------------------------------------------------------------------
   Empty states
   -------------------------------------------------------------------------- */
.nva-labs__empty,
.nva-coa__missing {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--nva-s-12);
  padding: var(--nva-s-20) var(--nva-s-8);
  border: 1px solid var(--nva-line);
  border-radius: 18px;
  background-color: var(--nva-surface);
  text-align: center;
}

.nva-labs__empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--nva-line);
  border-radius: var(--nva-r-full);
  color: var(--nva-ink-35);
}

.nva-labs__empty-title,
.nva-coa__missing-title {
  margin-top: var(--nva-s-6);
  font-family: var(--nva-font-heading);
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: var(--nva-w-medium);
  letter-spacing: var(--nva-ls-tight);
  color: var(--nva-ink);
}

.nva-labs__empty-body,
.nva-coa__missing-body {
  max-width: 30rem;
  margin-top: var(--nva-s-3);
  font-family: var(--nva-font-body);
  font-size: 15px;
  line-height: 1.75;
  color: var(--nva-ink-55);
}

.nva-labs__empty-action {
  display: inline-flex;
  align-items: center;
  margin-top: var(--nva-s-7);
  padding: 0.875rem var(--nva-s-7);
  background-color: var(--nva-ink);
  color: var(--nva-on-dark);
  font-family: var(--nva-font-body);
  font-size: 12px;
  font-weight: var(--nva-w-semi);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  transition: background-color var(--nva-d-base) var(--nva-ease);
}
.nva-labs__empty-action:hover { background-color: var(--nva-ink-hover); color: var(--nva-on-dark); }

/* ==========================================================================
   Certificate page
   ========================================================================== */
.nva-coa { padding: var(--nva-s-40) 0 var(--nva-s-24); }

.nva-coa__inner {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--nva-s-6);
}

.nva-coa__back {
  display: inline-flex;
  align-items: center;
  gap: var(--nva-s-2);
  font-family: var(--nva-font-body);
  font-size: 13px;
  font-weight: var(--nva-w-medium);
  letter-spacing: 0.04em;
  color: var(--nva-ink-60);
  transition: color var(--nva-d-fast) var(--nva-ease);
}
.nva-coa__back:hover { color: var(--nva-ink); }
.nva-coa__back .nva-icon { transition: transform var(--nva-d-slow) var(--nva-ease); }
.nva-coa__back:hover .nva-icon { transform: translateX(-4px); }

.nva-coa__header { margin-top: var(--nva-s-10); }

.nva-coa__eyebrow {
  font-family: var(--nva-font-body);
  font-size: 12px;
  font-weight: var(--nva-w-semi);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--nva-gold);
}

.nva-coa__heading {
  margin-top: var(--nva-s-5);
  font-family: var(--nva-font-heading);
  font-size: clamp(2.4rem, 4.4vw, 4rem);
  font-weight: var(--nva-w-semi);
  line-height: 1.08;
  letter-spacing: var(--nva-ls-tight);
  color: var(--nva-ink);
}

.nva-coa__lead {
  max-width: 32rem;
  margin-top: var(--nva-s-7);
  font-family: var(--nva-font-body);
  font-size: 16px;
  line-height: 1.8;
  color: var(--nva-ink-muted);
}

/* Only rendered when an administrator supplied the values. */
.nva-coa__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nva-s-8);
  margin-top: var(--nva-s-8);
}
.nva-coa__meta dt {
  font-family: var(--nva-font-body);
  font-size: 10px;
  font-weight: var(--nva-w-semi);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--nva-ink-40);
}
.nva-coa__meta dd {
  margin: 0.375rem 0 0;
  font-family: var(--nva-font-body);
  font-size: 14px;
  font-weight: var(--nva-w-medium);
  color: var(--nva-ink);
}

/* --------------------------------------------------------------------------
   Document card
   -------------------------------------------------------------------------- */
.nva-coa__document {
  margin-top: var(--nva-s-14);
  overflow: hidden;
  border: 1px solid var(--nva-line);
  border-radius: 18px;
  background-color: var(--nva-surface);
  box-shadow: 0 18px 44px -22px rgba(0,0,0,0.14);
}

.nva-coa__doc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--nva-s-4);
  padding: var(--nva-s-5) var(--nva-s-6);
  border-bottom: 1px solid var(--nva-line);
}

.nva-coa__doc-label {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--nva-font-body);
  font-size: 13px;
  font-weight: var(--nva-w-medium);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--nva-ink-muted);
}

.nva-coa__open {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem var(--nva-s-5);
  border: 1px solid var(--nva-line);
  border-radius: var(--nva-r-full);
  font-family: var(--nva-font-body);
  font-size: 11px;
  font-weight: var(--nva-w-semi);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--nva-ink);
  transition: background-color var(--nva-d-base) var(--nva-ease),
              color var(--nva-d-base) var(--nva-ease);
}
.nva-coa__open:hover { background-color: var(--nva-ink); color: var(--nva-on-dark); }

.nva-coa__preview {
  display: flex;
  justify-content: center;
  padding: var(--nva-s-8) var(--nva-s-6);
  background-color: #ffffff;
}
.nva-coa__preview-img {
  width: 100%;
  max-width: 860px;
  height: auto;
  object-fit: contain;
  user-select: none;
}

/* A4 placeholder — the PDF is never rendered inline. */
.nva-coa__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1.414;
  padding: var(--nva-s-10);
  background-color: rgba(0,0,0,0.02);
  text-align: center;
}

.nva-coa__placeholder-label {
  font-family: var(--nva-font-body);
  font-size: 11px;
  font-weight: var(--nva-w-medium);
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--nva-ink-40);
}

.nva-coa__placeholder-body {
  max-width: 22rem;
  margin-top: var(--nva-s-4);
  font-family: var(--nva-font-body);
  font-size: 14px;
  line-height: 1.7;
  color: var(--nva-ink-muted);
}
.nva-coa__placeholder .nva-labs__empty-action { margin-top: var(--nva-s-8); }

/* --------------------------------------------------------------------------
   Previous certificates — intentionally understated
   -------------------------------------------------------------------------- */
.nva-coa__history { margin-top: var(--nva-s-12); }

.nva-coa__history-title {
  font-family: var(--nva-font-body);
  font-size: 11px;
  font-weight: var(--nva-w-semi);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--nva-ink-45);
}

.nva-coa__history-list {
  margin-top: var(--nva-s-4);
  border-top: 1px solid var(--nva-line);
  list-style: none;
}

.nva-coa__history-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nva-s-3) var(--nva-s-5);
  padding-block: var(--nva-s-4);
  border-bottom: 1px solid var(--nva-line);
  transition: background-color var(--nva-d-fast) var(--nva-ease);
}
.nva-coa__history-row:hover { background-color: rgba(0,0,0,0.015); }

.nva-coa__history-main {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--nva-font-body);
  font-size: 14px;
  font-weight: var(--nva-w-medium);
  color: var(--nva-ink);
}
.nva-coa__history-main .nva-icon { color: var(--nva-ink-35); }

.nva-coa__history-batch {
  font-family: var(--nva-font-body);
  font-size: 12px;
  color: var(--nva-ink-50);
}

.nva-coa__history-open {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
  font-family: var(--nva-font-body);
  font-size: 10px;
  font-weight: var(--nva-w-semi);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--nva-ink-45);
}
.nva-coa__history-row:hover .nva-coa__history-open { color: var(--nva-ink); }

.nva-coa__product-link {
  margin-top: var(--nva-s-12);
  padding-top: var(--nva-s-8);
  border-top: 1px solid var(--nva-line);
}
.nva-coa__product-link a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--nva-font-body);
  font-size: 12px;
  font-weight: var(--nva-w-semi);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--nva-ink-60);
  transition: color var(--nva-d-fast) var(--nva-ease);
}
.nva-coa__product-link a:hover { color: var(--nva-ink); }

/* ==========================================================================
   Responsive — 1 / 2 / 3 column grid, matching the reference
   ========================================================================== */
@media (min-width: 640px) {
  .nva-labs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .nva-labs__inner,
  .nva-coa__inner { padding-inline: var(--nva-s-16); }
  .nva-labs__grid { gap: var(--nva-s-10); }
  .nva-labs__lead,
  .nva-coa__lead { font-size: 17px; }
  .nva-coa__preview { padding: var(--nva-s-12) var(--nva-s-10); }
}

@media (min-width: 1024px) {
  .nva-labs,
  .nva-coa { padding-top: var(--nva-s-48); padding-bottom: var(--nva-s-32); }
  .nva-labs__inner,
  .nva-coa__inner { padding-inline: var(--nva-s-24); }
  .nva-labs__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .nva-labcard,
  .nva-labcard__cta .nva-icon,
  .nva-coa__back .nva-icon { transition: none; }
  .nva-labcard:hover .nva-labcard__cta .nva-icon,
  .nva-coa__back:hover .nva-icon { transform: none; }
}