/* KuarkTek — the legal pages (privacy, cookie, GDPR).
   Built by scripts/build-legal-pages.mjs on the single-post layout: this
   file adds only what a policy has and an article has not — a lead under the
   title, the three-page row at the foot — and keeps the reading column calm. */

/* the title row has one pill, so it sits with the title's baseline */
.legal-page .single-post-hero__heading { margin-bottom: var(--gap-6); }

/* the lead: the standfirst an article carries in its image's place */
.legal-lead {
  max-width: 760px;
  margin: 0 0 var(--space-30);
  color: var(--muted);
  font-size: var(--fs-lead);
  font-weight: var(--fw-body);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-reading);
  text-wrap: pretty;
}
.legal-lead a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* the article column starts closer: there is no featured image to clear */
.legal-page .single-post-content { padding-top: var(--space-30); }
.legal-page .single-post-content h2:first-child { margin-top: 0; }

/* ---- the row at the foot: where the other two policies live ---- */
.legal-set {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-3);
  margin-top: var(--space-90);
  padding-top: var(--space-30);
  border-top: 1px solid var(--line);
}
.legal-set__label {
  grid-column: 1 / -1;
  margin: 0 0 var(--gap-2);
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--lh-body);
}
.single-post-content .legal-set__link,
.single-post-content .legal-set__link:hover {
  text-decoration: none;
}
.legal-set__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-3);
  min-height: 64px;
  padding: var(--gap-4) var(--gap-5);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--lh-body);
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.legal-set__arrow {
  display: inline-grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line);
  transition: inherit;
}
.legal-set__arrow svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur) var(--ease);
}
.legal-set__link:hover { background: var(--ink); border-color: var(--ink); color: var(--white); transform: translateY(-2px); }
.legal-set__link:hover .legal-set__arrow { border-color: rgba(255, 255, 255, .4); }
.legal-set__link:hover .legal-set__arrow svg { transform: translate(1px, -1px); }
.legal-set__link:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
/* the page you are on: marked, not a link to follow */
.legal-set__link.is-current { background: var(--surface); color: var(--muted); pointer-events: none; }
.legal-set__link.is-current .legal-set__arrow { visibility: hidden; }

@media (max-width: 900px) {
  .legal-set { grid-template-columns: 1fr; }
}