/* Legal pages: privacy, terms, cookies, responsible gambling.
   Only what the shared components do not cover inside the .prose column. */

.read { padding-bottom: 64px; }

/* Components inside .prose: the reading typography must not restyle them */
.prose .card h3,
.prose .step h3 { margin-top: 0; font: italic 700 22px/1.1 var(--font-display); }
.prose .card p,
.prose .step p { margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: var(--color-muted); }
.prose .cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); margin-top: 20px; }
.prose .steps { margin-top: 20px; }
.prose .note p { margin: 0; }
.prose .note .icon { flex: none; width: 20px; height: 20px; }

/* Buttons that are links: .prose a would paint them in the brand colour */
.prose a.btn { text-decoration: none; font-weight: 700; }
.prose a.btn--brand, .prose a.btn--brand:hover { color: #fff; }
.prose a.btn--line { color: var(--color-text); }
.prose a.btn--line:hover { color: #fff; }

.legal-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Tables keep their columns and scroll inside .table-wrap on narrow screens */
.prose .table-wrap table { min-width: 600px; }
.prose .table-wrap td:first-child { font-weight: 600; color: var(--color-text); }
.prose code { font-size: .92em; padding: 1px 6px; border-radius: 6px; background: var(--surface-sunken); color: var(--color-text); overflow-wrap: anywhere; }

/* Operator requisites — rendered only when config holds real values */
.legal-req { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px 20px; padding: 16px 18px; border-radius: var(--radius-md); background: var(--surface-card); box-shadow: inset 0 0 0 1px var(--color-border); }
.legal-req dt { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); }
.legal-req dd { margin: 2px 0 0; font-weight: 600; color: var(--color-text); overflow-wrap: anywhere; }

.legal-photo img { aspect-ratio: 21 / 9; }

@media (max-width: 767px) {
  .legal-cta .btn { width: 100%; }
  .prose .card h3, .prose .step h3 { font-size: 20px; }
}