/* ==========================================================================
   /privatlivspolitik/ — Privacy/legal page
   Override af praktisk-page.css' masonry-grid (.praktisk-gdpr) til
   sekventielt læsbar layout. Legal-tekst skal scannes oppefra og ned,
   ikke springes rundt i mellem 3-4 kort-kolonner.

   Fixes:
   - .praktisk-gdpr-grid → single-column key-value-liste (max 65ch).
   - Cookies-tabel: mobile data-labels hardcodet i praktisk-page.css peger
     på SLA-kolonner ("Åbningstid", "Messedøgn"). Vi overrider med korrekte
     labels for denne side (Formål / Levetid).
   - Cookies-tabel desktop: hold tre kolonner, men sørg for at lange celler
     ikke knækker layoutet på smalle viewports — wrap i en horizontal-scroll
     container under 640px.
   ========================================================================== */

/* ── Sekventiel læsbar liste (erstatter masonry-grid) ─────────────────── */
.privatlivspolitik .praktisk-gdpr {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  max-width: 65ch;
  margin: var(--space-l) 0 0;
}

.privatlivspolitik .praktisk-gdpr__item {
  /* Behold subtle "kort"-look så afsnittene er visuelt adskilte, men flow
     er stadig sekventielt (én søjle) og bredde matcher tekstkolonnen. */
  padding: var(--space-m) var(--space-l);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand-primary);
  border-radius: var(--radius-md);
  transition: border-color .2s;
}
.privatlivspolitik .praktisk-gdpr__item:hover {
  border-color: var(--border);
  border-left-color: var(--accent);
  transform: none;
}

.privatlivspolitik .praktisk-gdpr__label {
  font-size: 13px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin: 0 0 var(--space-xs);
}

.privatlivspolitik .praktisk-gdpr__body {
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--text);
  margin: 0;
  max-width: 60ch;
}

/* ── Cookies-tabel ─────────────────────────────────────────────────────
   Praktisk-page.css definerer en mobile-stacking på .praktisk-sla__table
   der bruger ::before content fra data-label, MEN hardcoder
   nth-of-type(2/3/4) til "Åbningstid"/"Messedøgn"/"Aften & weekend".
   Det er kun rigtigt for SLA-tabellen. På privacy-siden er kolonnerne
   "Cookie / nøgle / Formål / Levetid" — så vi overrider med korrekte
   labels via data-label på alle tre <td>'er. Markup'en er allerede
   opdateret til at sætte data-label på alle celler.
   ========================================================================== */

@media (max-width: 768px) {
  .privatlivspolitik .praktisk-sla__table td:nth-of-type(2)::before {
    content: attr(data-label);
  }
  .privatlivspolitik .praktisk-sla__table td:nth-of-type(3)::before {
    content: attr(data-label);
  }
  .privatlivspolitik .praktisk-sla__table td:nth-of-type(4)::before {
    content: attr(data-label);
  }
  /* Lidt mere luft mellem key-value-par på mobile */
  .privatlivspolitik .praktisk-sla__table td {
    padding: 8px 0;
  }
  .privatlivspolitik .praktisk-sla__table tr {
    background: var(--surface);
  }
}

/* På meget små viewports (<480px) får cookies-tabellen ekstra padding så
   pri-label og cookie-navn ikke klemmes ind under den tværgående kant.
   Den eksisterende .praktisk-sla__pri-label er allerede block-display. */
@media (max-width: 480px) {
  .privatlivspolitik .praktisk-sla__table tr {
    padding: var(--space-m) var(--space-m);
  }
  .privatlivspolitik .praktisk-sla__table td:first-of-type {
    padding-top: 0;
  }
  .privatlivspolitik .praktisk-sla__pri-label {
    margin-top: 2px;
  }
}

/* ── Container-bredde — undgå "uudfyldt 70% viewport" på desktop ──────
   .container--narrow er allerede max-width: 760px globalt (praktisk-page.css).
   På privacy-siden vil det skabe lange smalle paragraffer, men sammen med
   sekventiel-listen herover bliver det den rigtige læseflow. CTA og
   cookies-tabel skal dog have lidt mere plads til at ånde — vi bryder
   ud af container--narrow ved at hæve max-width for tabel-sektionen og
   CTA. */
.privatlivspolitik #cookies .container--narrow {
  max-width: 880px;
}

/* ── Cookies-tabel: bedre desktop læselighed (3 kolonner) ──────────────
   Tabellen har lange celler i kolonne 2 (Formål). Sæt kolonne-bredder
   og prevent overflow. */
.privatlivspolitik .praktisk-sla__table {
  table-layout: fixed;
  width: 100%;
}
.privatlivspolitik .praktisk-sla__table th:nth-of-type(1),
.privatlivspolitik .praktisk-sla__table td:nth-of-type(1) {
  width: 28%;
}
.privatlivspolitik .praktisk-sla__table th:nth-of-type(2),
.privatlivspolitik .praktisk-sla__table td:nth-of-type(2) {
  width: 52%;
}
.privatlivspolitik .praktisk-sla__table th:nth-of-type(3),
.privatlivspolitik .praktisk-sla__table td:nth-of-type(3) {
  width: 20%;
}
.privatlivspolitik .praktisk-sla__table td {
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

@media (max-width: 768px) {
  .privatlivspolitik .praktisk-sla__table {
    table-layout: auto;
  }
  .privatlivspolitik .praktisk-sla__table td:nth-of-type(1),
  .privatlivspolitik .praktisk-sla__table td:nth-of-type(2),
  .privatlivspolitik .praktisk-sla__table td:nth-of-type(3) {
    width: auto;
  }
}

/* ── Section lead: lidt strammere line-height til legal-tekst ───────── */
.privatlivspolitik .praktisk-section__lead {
  max-width: 65ch;
  line-height: 1.65;
}

/* ── Reduced motion — overrider hover transitions ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .privatlivspolitik .praktisk-gdpr__item { transition: none; }
}

/* ── Dark mode tweaks ────────────────────────────────────────────────── */
[data-theme="dark"] .privatlivspolitik .praktisk-gdpr__item {
  background: var(--surface);
  border-color: var(--border);
  border-left-color: var(--brand-primary);
}
[data-theme="dark"] .privatlivspolitik .praktisk-gdpr__item:hover {
  border-left-color: var(--accent);
}