/* Standard page template (U7) — page header, optional hero image, Action
   Text body at the 68ch reading width (design-system.md §5). */
@layer pages {
  .pk-page-header {
    max-width: 68ch;
    margin-bottom: var(--pk-space-6);
  }

  .pk-page-title {
    font-size: var(--pk-text-h1);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--pk-steel);
    line-height: 1.1;
    margin: 0 0 var(--pk-space-4);
    text-wrap: balance;
  }

  .pk-page-lead {
    font-size: var(--pk-text-body-lg);
    color: var(--pk-slate);
    line-height: 1.55;
    margin: 0;
  }

  .pk-page-hero {
    margin: 0 0 var(--pk-space-6);
  }

  /* A hero with no photos behind it keeps its own proportions. */
  .pk-page-hero:not(.pk-page-hero--slides) img {
    display: block;
    width: 100%;
    max-width: 960px;
    height: auto;
    border-radius: var(--pk-radius-lg);
  }

  /* With photos, the hero becomes a fixed-ratio box the images rotate through.
     The ratio is the hero's own (inline, from its blob dimensions), so the
     hero still shows uncropped and the photos are cropped to match it. */
  .pk-page-hero--slides {
    position: relative;
    max-width: 960px;
    overflow: hidden;
    border-radius: var(--pk-radius-lg);
    background: var(--pk-paper);
  }

  /* Long-form prose caps at 68ch (DS §5). */
  .pk-page-body {
    max-width: 68ch;
  }

  .pk-page-contact {
    max-width: 68ch;
    margin-top: var(--pk-space-7);
  }

  .pk-page-address {
    font-style: normal;
    color: var(--pk-slate);
    line-height: 1.6;
    margin-top: var(--pk-space-5);
  }

  .pk-page-address strong {
    color: var(--pk-steel);
  }
}

/* Rich-text typography for rendered Action Text bodies on the public page. The
   wrapper uses a neutral `.pk-rich-content` class (not Lexxy's own
   `.lexxy-content`) so the Lexxy content stylesheet loaded on admin pages never
   restyles our rendered prose — the app owns this look. These rules are scoped
   to `.pk-page-body`; the admin translation source preview reuses the same
   wrapper and gets its own matching rules in admin/translate.css. Kept unlayered
   so it wins on specificity regardless of the editor CSS present. */
.pk-page-body .pk-rich-content {
  line-height: 1.6;
  color: var(--pk-ink);
}

.pk-page-body .pk-rich-content p,
.pk-page-body .pk-rich-content div {
  margin-bottom: var(--pk-space-4);
}

.pk-page-body .pk-rich-content a {
  color: var(--pk-marine);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.pk-page-body .pk-rich-content a:hover {
  color: var(--pk-marine-hover);
}

.pk-page-body .pk-rich-content ul,
.pk-page-body .pk-rich-content ol {
  margin-bottom: var(--pk-space-4);
  padding-left: var(--pk-space-5);
}

.pk-page-body .pk-rich-content ul {
  list-style: disc;
}

.pk-page-body .pk-rich-content ol {
  list-style: decimal;
}

.pk-page-body .pk-rich-content li {
  margin-bottom: var(--pk-space-2);
}

.pk-page-body .pk-rich-content li:last-child {
  margin-bottom: 0;
}

/* Standard rich-text marks (Lexxy's full toolbar). The page's own <h1> is the
   title, so body headings start at h2. All use the design system's type scale
   and spacing tokens so authored content matches the site. */
.pk-page-body .pk-rich-content h2,
.pk-page-body .pk-rich-content h3,
.pk-page-body .pk-rich-content h4 {
  font-family: var(--pk-font-sans);
  font-weight: 600;
  color: var(--pk-ink);
  line-height: 1.25;
  margin-block: var(--pk-space-6) var(--pk-space-3);
}

.pk-page-body .pk-rich-content h2 { font-size: var(--pk-text-h2); }
.pk-page-body .pk-rich-content h3 { font-size: var(--pk-text-h3); }
.pk-page-body .pk-rich-content h4 { font-size: var(--pk-text-h4); }

.pk-page-body .pk-rich-content h2:first-child,
.pk-page-body .pk-rich-content h3:first-child,
.pk-page-body .pk-rich-content h4:first-child {
  margin-block-start: 0;
}

.pk-page-body .pk-rich-content blockquote {
  margin: var(--pk-space-4) 0;
  padding-inline-start: var(--pk-space-4);
  border-inline-start: 3px solid var(--pk-mist);
  color: var(--pk-slate);
}

.pk-page-body .pk-rich-content pre,
.pk-page-body .pk-rich-content code {
  font-family: var(--pk-font-mono);
  font-size: var(--pk-text-mono);
}

.pk-page-body .pk-rich-content code {
  background: var(--pk-paper);
  padding: 0.1em 0.35em;
  border-radius: var(--pk-radius-sm);
}

.pk-page-body .pk-rich-content pre {
  background: var(--pk-paper);
  padding: var(--pk-space-3);
  border-radius: var(--pk-radius-sm);
  overflow-x: auto;
  margin-bottom: var(--pk-space-4);
}

.pk-page-body .pk-rich-content pre code {
  background: none;
  padding: 0;
}

.pk-page-body .pk-rich-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--pk-space-4);
  font-size: var(--pk-text-small);
}

.pk-page-body .pk-rich-content th,
.pk-page-body .pk-rich-content td {
  border: 1px solid var(--pk-mist);
  padding: var(--pk-space-2) var(--pk-space-3);
  text-align: start;
}

.pk-page-body .pk-rich-content th {
  background: var(--pk-paper);
  font-weight: 600;
}

/* Images and Action Text attachments (Lexxy uploads). */
.pk-page-body .pk-rich-content figure,
.pk-page-body .pk-rich-content .attachment {
  margin: var(--pk-space-5) 0;
}

.pk-page-body .pk-rich-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--pk-radius-sm);
}

.pk-page-body .pk-rich-content figcaption {
  margin-block-start: var(--pk-space-2);
  font-size: var(--pk-text-small);
  color: var(--pk-slate);
}