/* ==========================================================================
   Pavilion — Legal pages (privacy.html, terms.html)
   Figma: "Privacy Policy – Dektop (1440)" / "– Mobile (402)",
          "Terms & Conditions – Dektop (1440)" / "– Mobile (402)"
   ========================================================================== */

.legal {
  background: var(--color-off-white);
  padding: 80px var(--gutter) 160px;
  max-width: var(--page-max); margin: 0 auto;
  display: grid;
  grid-template-columns: 353px minmax(0, 760px);
  grid-template-areas: "title date" "title body";
  grid-template-rows: auto 1fr;
  column-gap: 80px; row-gap: 56px;
}
.legal__title { grid-area: title; color: var(--color-maroon); align-self: start; }
.legal__date  { grid-area: date; color: var(--color-gray-400); }
.legal__body  { grid-area: body; display: flex; flex-direction: column; gap: 56px; color: var(--color-black); }

.legal__section { display: flex; flex-direction: column; gap: 20px; }
.legal__section h2 { color: var(--color-maroon); font-weight: 400; }
.legal__section ul { list-style: disc; margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 10px; }
.legal__section li::marker { color: var(--color-black); }
.legal strong { font-weight: 500; }
.legal a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.legal a:hover { color: var(--color-maroon); }
.legal__section { scroll-margin-top: 120px; }

/* ---------- Tablet 768–1099: single column ---------- */
@media (max-width: 1099px) {
  .legal {
    grid-template-columns: minmax(0, 760px);
    grid-template-areas: "title" "date" "body";
    grid-template-rows: auto; row-gap: 0; padding-bottom: 120px;
  }
  .legal__date { margin: 16px 0 48px; }
}

/* ---------- Mobile <768 ---------- */
@media (max-width: 767px) {
  .legal { padding: 32px 20px 80px; }
  .legal__date { margin: 12px 0 40px; }
  .legal__body { gap: 40px; }
  .legal__section { gap: 16px; }
  .legal__section ul { gap: 8px; }
}