/* ---------- Photo mat + factual caption (the proof device) ---------- */
.photo-mat {
  background: var(--c-vit);
  padding: 8px;
  box-shadow: var(--shadow-card);
  border-radius: var(--r-lg);
}

.photo-mat img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-cap {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--tx-muted);
  padding: 10px 4px 2px;
}

/* ---------- Tags & link rows ---------- */
.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-gran);
  background: var(--c-dis);
  border-radius: var(--r-sm);
  padding: 4px 10px;
}

/* Compact internal link chips (extracted content + "andra orter") */
.pill-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pill-links a {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 0.88rem;
  color: var(--tx);
  transition: border-color var(--speed), color var(--speed), background var(--speed);
}

.pill-links a:hover {
  border-color: var(--c-gran);
  color: var(--c-gran);
  background: var(--c-dis);
}

/* ---------- Prose & content lists ---------- */
.prose p + p { margin-top: 14px; }

.prose h3 { margin-block: 20px 8px; }

.prose p { color: var(--tx-muted); }

/* Feature list: spruce hairline left border, plain type */
.feature-list li {
  padding: 10px 0 10px 18px;
  border-left: 2px solid var(--c-gran);
  color: var(--tx-muted);
}

.feature-list li + li { margin-top: 10px; }

.feature-list b { color: var(--tx); }

/* Definition rows: term / description on a hairline grid */
.def-list div {
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr;
  gap: 8px 28px;
  padding-block: 14px;
  border-top: 1px solid var(--line);
}

.def-list div:last-child { border-bottom: 1px solid var(--line); }

.def-list dt {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--tx);
}

.def-list dd { color: var(--tx-muted); }

@media (max-width: 640px) {
  .def-list div { grid-template-columns: 1fr; gap: 2px; }
}

/* The role-toggle mount (forms.js renders into it) sits below the form title */
[data-role-toggle] { margin-top: 22px; }

/* CTA card: white card, hairline, primary action */
.cta-card {
  background: var(--c-vit);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: clamp(28px, 4vw, 44px);
  text-align: center;
}

.cta-card h3 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin-bottom: 10px; color: var(--c-granit); }

.cta-card p { color: var(--c-ink-muted); max-width: 56ch; margin-inline: auto; }

.cta-card .btn-row { justify-content: center; margin-top: 22px; }

/* Narrow CTA card inline with article prose (blog posts) */
.cta-card--narrow { max-width: 760px; margin-top: 34px; }

/* ---------- FAQ (native <details>) ---------- */
.faq-item {
  border-top: 1px solid var(--line);
}

.faq-item:last-of-type { border-bottom: 1px solid var(--line); }

.faq-item summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--tx);
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--c-gran);
  transition: transform var(--speed) var(--ease);
}

.faq-item[open] summary::after { transform: rotate(45deg); }

.faq-item .faq-body {
  padding: 0 4px 22px;
  color: var(--tx-muted);
  max-width: 70ch;
}

.faq-item .faq-body ul {
  list-style: disc;
  padding-left: 20px;
  margin-top: 8px;
}