/*
 * Site — Privacy Policy page.
 *
 * Loaded on is_page_template('page-privacy-policy.php') via
 * `site-page-privacy` handle in theme/inc/60-enqueue.php.
 * Template: page-privacy-policy.php.
 *
 * Two-column reading layout: section headings on the left, body
 * paragraphs on the right — same vocabulary as logo-block /
 * mentions-block on the project detail. Collapses to a single
 * column on tablet and mobile.
 */

.page-header { padding-bottom: 24px; }

.privacy-intro {
  padding: 36px var(--gutter) calc(60px * var(--scale));
  display: grid; grid-template-columns: 220px 1fr; gap: 60px; align-items: start;
  border-bottom: 1px solid var(--rule);
}
.privacy-intro .meta {
  display: flex; flex-direction: column; gap: 4px;
}
.privacy-intro .meta .label {
  font-size: calc(13px * var(--read-scale));
  color: var(--accent); letter-spacing: 0.06em; font-weight: 500;
  text-transform: uppercase;
}
.privacy-intro .meta .date {
  font-size: calc(14px * var(--read-scale));
  color: var(--ink-dim); font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.privacy-intro .lead {
  font-size: calc(20px * var(--read-scale)); line-height: 1.55;
  color: var(--ink); max-width: 720px;
  text-wrap: pretty;
}

.privacy-sections {
  padding: calc(40px * var(--scale)) var(--gutter) calc(100px * var(--scale));
  display: flex; flex-direction: column;
}
/* Dvouřádkový grid: nahoře `num + title` vedle sebe (číslo má stejnou
   velikost jako title, mezi nimi pevná mezera), pod tím `body` přes
   celou šířku (využije i prostor, kde dříve seděl 60px sloupec čísla).
   `line-height: 1` na .num/.title vyrovná text na baseline. */
.privacy-section {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    'num title'
    'body body';
  column-gap: 18px;
  row-gap: 18px;
  padding: calc(40px * var(--scale)) 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.privacy-section .num   { grid-area: num; }
.privacy-section .title { grid-area: title; }
.privacy-section .body  { grid-area: body; }
.privacy-section:last-child { border-bottom: 0; }
.privacy-section .num {
  font-size: calc(22px * var(--read-scale));
  color: var(--ink-mute); letter-spacing: -0.015em; font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.privacy-section .title {
  font-size: calc(22px * var(--read-scale)); font-weight: 500;
  letter-spacing: -0.015em; color: var(--ink);
  line-height: 1;
  text-wrap: balance;
  margin: 0;
}
.privacy-section .body {
  display: flex; flex-direction: column; gap: 18px;
  margin-top: 6px;
  /* body teď zabírá obě sloupce (grid-area 'body body'), takže text
     využívá celou šířku page-content až k pravému page gutteru. */
}
.privacy-section .body > :first-child { margin-top: 0; }
.privacy-section .body p {
  font-size: calc(16px * var(--read-scale)); line-height: 1.7;
  color: var(--ink); text-wrap: pretty;
  text-align: justify; hyphens: auto;
  margin: 0;
}

/* ─── Tablet (769–1024px) — stack num+title nahoře, body pod tím */
@media (min-width: 769px) and (max-width: 1024px) {
  .privacy-intro {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .privacy-section {
    grid-template-columns: auto 1fr;
    column-gap: 14px;
    row-gap: 12px;
  }
}

/* ─── Mobile (≤768px) ─────────────────────────────────────── */
@media (max-width: 768px) {
  .privacy-intro {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 24px var(--gutter) 32px;
  }
  .privacy-intro .lead { font-size: 16px; line-height: 1.55; }

  .privacy-sections {
    padding: 32px var(--gutter) 60px;
  }
  .privacy-section {
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    row-gap: 12px;
    padding: 28px 0;
  }
  .privacy-section .num   { font-size: 19px; }
  .privacy-section .title { font-size: 19px; }
  .privacy-section .body  { margin-top: 8px; }
  .privacy-section .body p {
    font-size: 15px; line-height: 1.65;
  }
}