/* =============================================================================
   Opsy website — the corporate governance page (Bolagsstyrning).

   Two groups of people, the board and the management. A person is a card: the
   head -- photo, name, role -- on a mint panel, and the person's facts under
   it in two columns.

   Flat plain CSS on the kit's tokens, `op-` prefix, as css/site.css. The
   opening is the other pages' (css/home.css, Opening), used as it stands.
   Spec: docs/specs/2026-10-06-website-bolagsstyrning-page.md
   ========================================================================== */

/* --- A group ------------------------------------------------------------------ */
/* A group of people is a section: the section step under it, so the next
   group, or the footer, starts a full step below. The opening above the
   first group leaves the whole gap to it (css/home.css, Opening), so a group
   adds none on top. */
.op-people {
  padding-bottom: var(--op-space-section);
}
/* The people, one under the other: the intro step under the group's heading,
   and the near step between two people, who are parts of one section. */
.op-people__list {
  display: flex;
  flex-direction: column;
  gap: var(--op-space-near);
  margin-top: var(--op-space-intro);
}

/* --- A person ----------------------------------------------------------------- */
/* An address can end in a board member's name (#arne-thor) and open the page
   at that card: the jump stops clear of the header, which stays in place
   (css/site.css, Header). 40px and not less: on a phone the header is two
   rows, taller than the height named there. */
.op-bio {
  scroll-margin-top: calc(var(--op-header-h) + var(--space-10));
}
/* The head: who it is, on a mint panel the page's width -- the closing
   panel's ground, clear border, corner and 40px at the sides (css/home.css,
   .op-closing__panel; css/about.css, .op-principle), so the site's mint
   panels are one kind. 24px above and below, tight round the photo, as the
   picture sent has it. The mint is a primitive, as there: the kit's only
   alias for this step names a hover. */
.op-bio__head {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-6) var(--space-10);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background: var(--genoa-100);
}
/* The photo: a square, grey as the site has always shown its portraits --
   the files themselves are in colour. It keeps its size beside a long role. */
.op-bio__photo {
  flex: none;
  width: 160px;
  height: 160px;
  border-radius: var(--radius-md);
  object-fit: cover;
  filter: grayscale(1);
}
/* Name, role and the bracketed line: 8px under the name, 4px under the
   role; their leading does the rest. */
.op-bio__who {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
/* The role stands out by weight alone -- the kit's bold is semibold. It is
   read, so it takes the body ink by inheritance: the user's ruling (the
   picture sent sets it in teal). */
.op-bio__role {
  margin-top: var(--space-1);
  font-weight: 600;
}
/* The bracketed line, since when in Opsy itself, in the quieter ink: a
   softer line under a title, that ink's first job (website/CLAUDE.md, Text
   ink). */
.op-bio__note {
  color: var(--text-secondary);
}

/* The facts: 40px under the panel -- content of the card, a second row
   under the first: the kit's largest step and none of the page's named gaps
   (css/about.css, .op-principle) -- and in at the sides by what the panel
   keeps, its 40px and its 1px border, so they start on the photo's left
   edge, as the picture has it. Two equal columns with 80px between, the
   split the page has always had: who the person is on the left, their
   assignments and their holding on the right. */
.op-bio__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: calc(var(--space-10) * 2);
  margin-top: var(--space-10);
  padding-inline: calc(var(--space-10) + 1px);
}
/* A column: a list of facts, 16px apart. */
.op-bio__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
/* A fact: a label and its text, a pair in a description list. Both are set
   inline, so the label runs into the text and the pair reads as one
   paragraph. The label by weight alone, in the body ink: the user's ruling
   (the picture sent sets it in teal). */
.op-bio__list dt,
.op-bio__list dd {
  display: inline;
}
.op-bio__list dt {
  font-weight: 600;
}

/* --- Narrow ------------------------------------------------------------------- */
/* One column: a person's facts read as one list from top to bottom, so the
   two lists stand as far apart as two facts do. */
@media (max-width: 960px) {
  .op-bio__facts {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-4);
  }
}
/* A phone: the mint panels' 24px at the sides (css/about.css, .op-principle),
   and the facts with them, still on the photo's edge. The photo, at the size
   it has always had on a phone, stands above the name: beside it the longest
   role would run to four lines. */
@media (max-width: 560px) {
  .op-bio__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-6);
  }
  .op-bio__photo {
    width: 112px;
    height: 112px;
  }
  .op-bio__facts {
    padding-inline: calc(var(--space-6) + 1px);
  }
}