/* Sections, the section with one photo and copy, and the about-us page (/o-nas). Their classes also stand in the
   pages' saved content (page_components, db/seeds/pages): keep their names. */

@layer pages {
  .kl__section { padding: clamp(56px, 8vw, 104px) 0; }

  .kl__split { display: grid; grid-template-columns: .85fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
  .kl__split-figure { margin: 0; }
  .kl__split-img { width: 100%; height: auto; display: block; border-radius: var(--radius-media); background: var(--sky); }
  .kl__split-copy p { color: var(--ink-soft); max-width: 52ch; }
  .kl__split-copy p + p { margin-top: 14px; }

  /* Longer, story-like copy on the .kl__split layout: explicit paragraph margins (no browser defaults), a display
     lead and subheading, and a closing line set off by a short line of the tone — the accent lives in lines. */
  .kl__about p { margin: 0; }
  .kl__about p + p { margin-top: 14px; }
  .kl__about .kl__about-lead {
    margin-bottom: 20px;
    font-family: var(--font-display);
    font-weight: var(--weight-light);
    font-size: var(--heading-md);
    line-height: 1.35;
    color: var(--ink);
  }
  .kl__about .kl__about-signoff { position: relative; margin-top: 24px; padding-top: 18px; color: var(--ink); }
  .kl__about-signoff::before { content: ""; position: absolute; top: 0; left: 0; width: 48px; border-top: 1px solid var(--tone); }
  /* The about-us page (/o-nas): its two sections closer together, the first close under the navbar. Each is the home
     page's story band — the photo and the copy side by side on one mist wash — the photo on alternate sides. */
  .kl__about-page .kl__section { padding: clamp(16px, 2vw, 24px) 0; }
  .kl__about-page .kl__section:first-child { padding-top: clamp(24px, 4vw, 44px); }
  .kl__about-page .kl__section:last-child { padding-bottom: clamp(56px, 8vw, 88px); }
  .kl__about-page .kl__split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; align-items: stretch; background: var(--mist); }
  .kl__about-page .kl__split:not(:has(> .kl__split-figure)) { grid-template-columns: minmax(0, 1fr); }
  .kl__about-page .kl__section:nth-child(even) .kl__split-figure { order: 1; }
  .kl__about-page .kl__split-figure { position: relative; min-height: 560px; }
  .kl__about-page .kl__split-img { position: absolute; inset: 0; height: 100%; object-fit: cover; }
  .kl__about-page .kl__split-copy { display: flex; flex-direction: column; justify-content: center; padding: 64px clamp(32px, 5vw, 96px); }
  .kl__about-page .kl__split-copy :is(.kl__h2, .kl__h3):first-child { margin-top: 0; }
  /* :where() keeps these under the story copy's own lead and sign-off (.kl__about). */
  .kl__about-page :where(.kl__split-copy p) { margin: 0; font-weight: var(--weight-light); }
  .kl__about-page :where(.kl__split-copy p + p) { margin-top: 14px; }

  @media (max-width: 900px) {
    .kl__about-page .kl__split { grid-template-columns: minmax(0, 1fr); }
    .kl__about-page .kl__section:nth-child(even) .kl__split-figure { order: 0; }
    .kl__about-page .kl__split-figure { min-height: 0; aspect-ratio: 4 / 3; }
    .kl__about-page .kl__split-copy { padding: 36px clamp(20px, 5vw, 40px) 44px; }
  }
}