/* ============================================================
   prose.css — Flex Europa · finaldesign
   ONE stylesheet for the three editorial pages (§3.6): about.html,
   terms.html and privacy.html. They are the same document type — a
   measured column of running text with a section index beside it — so
   they share a file rather than having three near-identical copies.

   REUSE: .page-head, .breadcrumb, .container, .section-head,
   .mono-label, .spec-row, .btn, .product-grid. This file adds the prose
   column, the sticky section index and the about-page stat band.
   ============================================================ */

.doc { padding-block: var(--space-2xl) var(--space-3xl); }
.doc__layout {
  display: grid;
  grid-template-columns: var(--sidebar-inline-size) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: start;
}

/* ---------------------------------------------------------------- Section index */
.doc__index {
  position: sticky;
  /* Clears the sticky header on internal pages. */
  inset-block-start: var(--anchor-offset);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.doc__index-title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text);
  padding-block-end: var(--space-sm);
  border-block-end: var(--hairline-strong);
}
.doc__index-list { display: flex; flex-direction: column; }
.doc__index-link {
  display: flex;
  align-items: center;
  min-block-size: var(--step-size);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  border-block-end: var(--hairline);
  transition: color var(--transition-fast);
}
.doc__index-link:hover { color: var(--color-text); }
.doc__index-link[aria-current="true"] { color: var(--color-text); font-weight: var(--fw-medium); }

/* ---------------------------------------------------------------- Prose column */
.prose { max-inline-size: var(--measure-prose); }
/* Anchored headings must clear the sticky header when jumped to. */
.prose > * { scroll-margin-block-start: var(--anchor-offset); }
.prose > * + * { margin-block-start: var(--space-md); }

.prose h2 {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  margin-block-start: var(--space-2xl);
  padding-block-end: var(--space-sm);
  border-block-end: var(--hairline);
}
.prose h2:first-child { margin-block-start: 0; }
.prose h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin-block-start: var(--space-xl);
}
.prose p { font-size: var(--fs-md); color: var(--color-text-muted); }
.prose strong { color: var(--color-text); font-weight: var(--fw-semibold); }
.prose a {
  color: var(--color-accent-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prose ul, .prose ol { padding-inline-start: var(--space-lg); }
.prose li { font-size: var(--fs-md); color: var(--color-text-muted); }
.prose li + li { margin-block-start: var(--space-xs); }
/* Lists carry no class, so reset.css leaves their markers alone —
   they are meaningful here. */
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose__updated {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.prose__callout {
  padding: var(--space-md) var(--space-lg);
  background: var(--color-surface);
  border-inline-start: 3px solid var(--color-accent-strong);
  font-size: var(--fs-sm);
}

/* Definition-style rows reuse the drawer's .spec-row. */
.prose__specs { display: flex; flex-direction: column; }

/* ---------------------------------------------------------------- About: stat band */
.stat-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-block: var(--hairline);
}
.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-lg);
  border-inline-start: var(--hairline);
}
.stat:first-child { border-inline-start-color: transparent; }
.stat__figure {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}
.stat__label {
  font-family: var(--font-mono);
  font-size: var(--fs-tiny);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------- Breakpoints */
@media (max-width: 991px) {
  .doc__layout { grid-template-columns: minmax(0, 1fr); }
  /* The index becomes a plain block above the text — sticky would pin a
     tall list over the content it links to. */
  .doc__index { position: static; }
  .stat-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3) { border-inline-start-color: transparent; }
  .stat:nth-child(n + 3) { border-block-start: var(--hairline); }
}

@media (max-width: 575px) {
  .stat-band { grid-template-columns: minmax(0, 1fr); }
  .stat { border-inline-start-color: transparent; }
  .stat + .stat { border-block-start: var(--hairline); }
}