/* ============================================================
   Legal pages - Imprint (6198:3506), Terms of service (6199:3599),
   Privacy policy (6200:3692). One shared layout:
   01 Hero (Web/Section Head) + 02 Document (ruled sections).
   ============================================================ */

/* ---- 01 Hero ---- */
.legal-hero{
  padding:128px 0 var(--space-7); /* Figma Spacing/10 = 128 (no token in ezee.css) */
  background:var(--surface);
}
.legal-hero__head{max-width:820px}           /* Terms / Privacy section head width */
.legal-hero__head--narrow{max-width:760px}   /* Imprint section head width */

/* ---- 02 Document ---- */
.legal-doc{
  padding:var(--space-7) 0 var(--section-y);
  background:var(--surface);
  overflow-wrap:break-word;
}
.legal-doc__list{display:flex;flex-direction:column;gap:var(--space-7)}

.legal-sec{
  display:flex;flex-direction:column;gap:var(--space-4);
  padding-top:var(--space-6);
  border-top:1px solid var(--border);
}

/* Links inside the copy: Figma styles them as plain body text, so they keep
   the text colour; the underline is the only marker. */
.legal-sec a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color .15s var(--ease)}
.legal-sec a:hover{color:var(--brand)}

/* ---- Placeholder: dashed grey box "To be supplied ..." ----
   Figma: fill Surface/subtle, 1px inside stroke Border/strong, dash 6 / gap 4,
   Radius/md. A CSS dashed border can't set the dash length, so the stroke is
   drawn by an SVG background (#B9BDC7 = --border-strong; vars don't reach
   inside data URIs). The transparent 1px border keeps the stroke's space. */
.legal-note{
  display:flex;flex-direction:column;gap:var(--space-2);
  padding:var(--space-3) var(--space-5);
  border:1px solid transparent;
  border-radius:var(--radius-md);
  background:var(--surface-subtle) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' rx='12' ry='12' fill='none' stroke='%23B9BDC7' stroke-width='2' stroke-dasharray='6 4'/%3E%3C/svg%3E") border-box;
}
.legal-note__title{color:var(--text-primary)}
.legal-note__text{color:var(--text-secondary)}

/* Variants exactly as drawn in Figma */
.legal-note--roomy{padding:var(--space-5);gap:var(--space-1)}   /* p24, gap 4 */
.legal-note--gap-lg{gap:var(--space-3)}                         /* gap 12 */
.legal-note--muted .legal-note__title{color:var(--text-secondary)}
.legal-note--muted .legal-note__text{color:var(--text-muted)}

/* ---- Responsive ---- */
@media (max-width:1100px){
  .legal-hero{padding-top:var(--space-9)}
}
@media (max-width:640px){
  .legal-hero{padding-top:var(--space-8);padding-bottom:var(--space-6)}
  .legal-doc{padding-top:var(--space-6)}
  .legal-doc__list{gap:var(--space-6)}
  .legal-sec{padding-top:var(--space-5)}
  .legal-note,.legal-note--roomy{padding-inline:var(--space-4)}
}