/* ============================================================
   Vulnium — NIS2 & third-party validation page
   Depends on style.css tokens + pythia.css (.phero, .feat-grid)
   ============================================================ */

/* ---------- Hero attestation card ---------- */
.attest-card {
  width: min(360px, 100%);
  margin-inline: auto;
  background: linear-gradient(160deg, rgba(124, 108, 240, 0.14), rgba(76, 201, 240, 0.06));
  border: 1px solid rgba(124, 108, 240, 0.35);
  border-radius: var(--radius);
  padding: 28px 26px 20px;
  backdrop-filter: blur(10px);
  box-shadow: 0 24px 60px rgba(10, 9, 22, 0.55);
}
.attest-card__seal {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 14px;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid rgba(124, 108, 240, 0.4);
  margin-bottom: 16px;
}
.attest-card__seal svg { width: 30px; height: 30px; }
.attest-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
}
.attest-card__type {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--accent-2);
  margin: 6px 0 16px;
}
.attest-card__rows { display: grid; gap: 8px; }
.attest-card__row {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 13.5px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.attest-card__row span {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  flex-shrink: 0;
}
.attest-card__row--dim { opacity: 0.6; }
.attest-card__foot {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}

/* ---------- Law facts ---------- */
.law-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.law {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 22px;
}
.law__stat {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 10px;
}
.law p { font-size: 14px; color: var(--text-dim); }
.law p strong { color: var(--text); }
.law__ref {
  display: block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--accent);
  opacity: 0.8;
}

/* ---------- Attested activities ---------- */
.as-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
.as-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 24px;
}
.as-card--hot {
  border-color: rgba(124, 108, 240, 0.4);
  background: linear-gradient(170deg, rgba(124, 108, 240, 0.1), var(--surface));
}
.as-card__code {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--accent-2);
  border: 1px solid rgba(76, 201, 240, 0.4);
  background: rgba(76, 201, 240, 0.08);
  border-radius: 999px;
  padding: 3px 12px;
  margin-bottom: 14px;
}
.as-card h3 {
  font-family: var(--font-display);
  font-size: 19px;
  margin-bottom: 2px;
}
.as-card__ro {
  font-style: italic;
  font-size: 12.5px;
  color: var(--text-dim);
  margin-bottom: 12px;
  opacity: 0.85;
}
.as-card > p:last-child { font-size: 14px; color: var(--text-dim); }

/* ---------- Scope / independence panel ---------- */
.scope {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 16px;
}
.scope__main,
.scope__aside {
  border-radius: var(--radius);
  padding: 26px 26px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.scope__aside {
  border-color: rgba(76, 201, 240, 0.35);
  background: linear-gradient(170deg, rgba(76, 201, 240, 0.08), var(--surface));
}
.scope h3, .scope h4 {
  font-family: var(--font-display);
  margin-bottom: 10px;
}
.scope h3 { font-size: 19px; }
.scope h4 { font-size: 16px; }
.scope p { font-size: 14.5px; color: var(--text-dim); }
.scope p strong { color: var(--text); }
.scope p em { color: var(--text); font-style: normal; font-weight: 500; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .law-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .as-grid { grid-template-columns: 1fr; }
  .scope { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .law-grid { grid-template-columns: 1fr; }
}