/* =========================================================
   Page — Legal (م5)

   One narrow column, three documents. Quieter than every other
   marketing page on purpose: no glow, no gradient, no card. A
   visitor opens this page to find out what they agreed to, and
   decoration on a contract reads as an attempt to distract from
   what it says.

   The only colour spent is the brass counter on the headings and
   the amber rule on the draft notice.

   Layer 3 only — every value below reads a token.
   ========================================================= */

/* ---------------------------------------------------------
   The column

   46rem, the same reading edge the contact hero uses, so the
   two pages line up when a visitor moves between them.
   --------------------------------------------------------- */
.lg-doc__column {
  max-width: 46rem;
}

/* ---------------------------------------------------------
   Head
   --------------------------------------------------------- */
.lg-head {
  padding-block: var(--space-20) var(--space-6);
}

.lg-head__title {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

.lg-head__dates {
  margin: 0 0 var(--space-6);
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.lg-head__lead {
  margin: 0;
  color: var(--color-text-secondary);
}

/* The draft notice. Warning tone, but flat — a filled red box on a
   page nobody has agreed to yet reads as an error, not a caveat. */
.lg-draft {
  margin: var(--space-6) 0 0;
  padding-inline-start: var(--space-4);
  border-inline-start: 2px solid var(--color-warning);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
}

/* ---------------------------------------------------------
   Sections

   Numbered by CSS, not by hand: a clause added to config/legal.php
   renumbers the whole document, and no Arabic-Indic figure typed
   into a heading can drift out of step with the page it sits on.
   --------------------------------------------------------- */
.lg-body {
  padding-block: var(--space-6) var(--space-16);
  counter-reset: clause;
}

.lg-section {
  margin-block-start: var(--space-10);
}

.lg-section__head {
  counter-increment: clause;
  position: relative;
  margin: 0 0 var(--space-4);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
}

.lg-section__head::before {
  content: counter(clause) ".";
  margin-inline-end: var(--space-3);
  font-family: var(--font-figures);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  color: var(--color-gold-text);
}

.lg-section__p {
  margin: 0 0 var(--space-4);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
}
.lg-section__p:last-child { margin-bottom: 0; }

.lg-section__list {
  margin: 0 0 var(--space-4);
  padding-inline-start: var(--space-5);
  display: grid;
  gap: var(--space-2);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
}

.lg-section__list li::marker {
  color: var(--color-line-strong);
}

/* ---------------------------------------------------------
   Facts

   Label and value in two columns on a wide screen, stacked on a
   phone. Values read as data, not as prose: the Latin figure face
   and a tighter line, so a register number and a date are legible
   at a glance in either language.
   --------------------------------------------------------- */
.legal-facts {
  margin: var(--space-5) 0 0;
  padding: var(--space-5);
  display: grid;
  gap: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}

.legal-facts__row {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: var(--space-2) var(--space-5);
  align-items: baseline;
}

.legal-facts__label {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
}

.legal-facts__value {
  margin: 0;
  line-height: var(--lh-snug);
  color: var(--color-text);
}

/* An unresolved fact. Deliberately unlovely: dashed, muted, and set
   in the figure face so it never passes for a sentence somebody
   wrote. It is a hole in a legal document, and it should look like
   one until .env fills it. */
.legal-gap {
  font-family: var(--font-latin);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  border-block-end: 1px dashed var(--color-warning);
  padding-block-end: 2px;
}

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

/* ---------------------------------------------------------
   The other two
   --------------------------------------------------------- */
.lg-more {
  padding-block: 0 var(--space-24);
}

.lg-more__list {
  margin-block-start: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}