/* About: who Atlantis is, what it stands for, who it works with, how it works.
   Layout comes from the text-pages system in site.css (rail, blocks, titles).
   This file only holds what is particular to About. */

/* ---------- header: a photo strip above the shared page head (S6) ---------- */
.who__pic { height: clamp(12rem, 28vw, 24rem); }
.who__pic img { object-position: 50% 78%; }
.page-head .page-title span { white-space: nowrap; }

/* ---------- statement: facts on the side, the statement on the rail (S1) ---------- */
.about__facts { display: grid; gap: var(--space-s); align-content: start; font-weight: 500; line-height: 1.35; }
.about__facts li { max-width: 24ch; padding-top: var(--space-xs); border-top: 1px solid var(--line); }
.about__facts .link { display: inline-flex; align-items: center; min-height: 44px; margin-block: calc(-1 * var(--space-xs)); }
.about__facts .meta { display: block; margin-top: var(--space-2xs); font-weight: 400; }
.about__text .lead { max-width: 52ch; }
.about__soft { color: var(--muted); }

/* Section titles stay beside their section while it scrolls past. */
.values .rail__side > h2, .clients .rail__side > h2, .method .rail__side > h2 { position: sticky; top: var(--space-l); }

/* ---------- media on the rail: crops show the work, not sky (S7) ---------- */
.values__pic { aspect-ratio: 3 / 2; }
.values__pic img { object-position: 50% 66%; }
.clients__pic { aspect-ratio: 16 / 9; }
.clients .lead + .clients__pic { margin-top: var(--space-l); }
.method__film video { aspect-ratio: 16 / 9; height: auto; }

/* ---------- lists of items (S8): equal columns on the rail, top hairlines ---------- */
.rail__main > .about-items { display: grid; column-gap: var(--gutter); max-width: none; margin-top: var(--space-xl); }
.about-items > li { border-top: 1px solid var(--line); padding-top: var(--space-m); }
.about-items h3 + p { margin-top: var(--space-s); max-width: 44ch; }
/* Values: two by two; each column is four grid columns wide, so edges meet column 9. */
.about-items--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); }
/* Clients and steps: one item per row, the name in columns 5–8, the text from column 9. */
.about-items--rows > li { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: first baseline; column-gap: var(--gutter); padding-bottom: var(--space-l); }
.about-items--rows > li:last-child { padding-bottom: 0; }
.about-items--rows h3 + p { margin-top: 0; }

.method__link { display: inline-flex; align-items: center; gap: 0.5em; min-height: 44px; margin-top: var(--space-m); font-weight: 500; }

@media (max-width: 860px) {
  .who__pic { height: clamp(11rem, 52vw, 16rem); }
  .who__pic img { object-position: 46% 70%; }
  .page-head .page-title span { white-space: normal; }

  .about__facts li { max-width: none; }
  .values .rail__side > h2, .clients .rail__side > h2, .method .rail__side > h2 { position: static; }

  .values__pic, .clients__pic, .method__film { margin-inline: calc(-1 * var(--margin)); }
  .values__pic { aspect-ratio: 4 / 3; }
  .method__film .caption { padding-inline: var(--margin); }

  .about-items--grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-l); }
  .about-items--rows > li { grid-template-columns: minmax(0, 1fr); }
  .about-items--rows h3 + p { margin-top: var(--space-s); }
}

/* The film's pause control sits in the video's corner, above the caption. */
.method__film { position: relative; }