/* =============================================================================
   Opsy website — the Om oss page.

   Two sections and the closing call: Vad vi tror på, a picture beside the
   heading and its two paragraphs, with the principle on a mint panel under
   them; and Snabbt, enkelt, säkert, three plain columns.

   Flat plain CSS on the kit's tokens, `op-` prefix, as css/site.css. Most of
   the page is other pages' parts, used as they stand: the opening, the
   section intro, the picture panel, the small line drawings and the closing
   panel (css/home.css), and the picture's leads and people
   (css/process.css). What is here is this page's own arrangement of them.
   Spec: docs/specs/2026-10-06-website-om-oss-page.md
   ========================================================================== */

/* --- Vad vi tror på ---------------------------------------------------------- */
/* The opening above leaves the whole gap to the section's first block
   (css/home.css, Opening), so the section adds none on top. The section step
   under it: a new section follows. */
.op-belief {
  padding-bottom: var(--op-space-section);
}
/* The section's first block: the picture on the left and, on the right, the
   heading over its two paragraphs -- the section intro as it stands
   (css/home.css, .op-intro), the way the price section sets a heading and
   its paragraphs beside a panel (css/products.css, .op-price__grid), with
   its 64px between. The picture takes 5 of the row's 12, the share a
   product's picture has (css/products.css, --op-pic-share): the user's
   ruling. It had 7 first, with the heading above the row, and stood too
   large beside two short paragraphs. The places are set here and not in the
   markup, where the text comes first: a screen reader meets the heading
   before the picture at every width. In one column the picture is placed
   above the text all the same (Narrow, below). */
.op-belief__row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: calc(var(--space-8) * 2);
  align-items: center;
}
.op-belief__text {
  grid-area: 1 / 2;
}
.op-belief__media {
  grid-area: 1 / 1;
}

/* --- The principle ------------------------------------------------------------ */
/* A mint panel under the row: the closing panel's ground, clear border,
   corner and 40px at the sides (css/home.css, .op-closing__panel), so the
   page's two mint panels are one kind. 40px above and below as well, the
   user's ruling: it had that panel's 56px first, which stood too tall round
   one line of text. It is content of its section, a second row under the
   first: 40px, the kit's largest step, and none of the page's named gaps.
   The mint is a primitive, as there: the kit's only alias for this step
   names a hover. */
.op-principle {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-10);
  padding: var(--space-10);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background: var(--genoa-100);
}
/* Two sentences at a section title's size: the user's ruling (the picture
   sent sets them larger). On one line where the panel is wide enough, so
   the panel is a line lower -- their ruling too; they stood on a line each
   first. A row that wraps: on a narrower screen the second sentence goes
   under the first. 24px between the two on a line, 4px between two lines.
   A paragraph and not a heading -- it heads nothing -- so its lines are
   evened here, as a heading's are by default. */
.op-principle__statement {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-6);
  text-wrap: balance;
}
/* The second sentence on a marker: the closing panel's highlight
   (css/home.css, .op-closing__live) -- its padding, its 8px corner and its
   mint, one step deeper than the panel's. One block around the whole
   sentence, as the product page's highlighted sentence is
   (css/products.css, .op-ai__claim), and not a stroke per line: these
   letters stand taller than a heading's line, so on a phone, where the
   sentence takes two lines, the second stroke would cover the feet of the
   first. Pulled back by its side padding: on a line of its own its first
   letter stays on the line above's edge and the marker overhangs into the
   panel's padding; on a shared line the marker starts 12px after the first
   sentence and its letters the row's 24px. */
.op-principle__lit {
  margin-left: calc(var(--space-3) * -1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--genoa-200);
}

/* --- Snabbt, enkelt, säkert --------------------------------------------------- */
.op-values {
  padding-bottom: var(--op-space-section);
}
/* Three plain columns with no line between them: the user's ruling (the
   picture sent has hairlines). The offers' grid (css/home.css,
   .op-offers__grid): equal columns, 32px between. */
.op-values__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--space-8);
  margin-top: var(--op-space-intro);
}
/* A value: its drawing, then 24px down to the title, as in a reasons cell
   (css/home.css, .op-reason). The drawing starts on the column's left edge,
   over the title; a reasons cell sets its own at the far end. */
.op-value {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.op-value .op-spot {
  align-self: flex-start;
}
/* 12px from title to text, as in a reasons cell: the same pair of type
   styles. */
.op-value__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 40ch;
}

/* --- Closing ------------------------------------------------------------------ */
/* The closing panel holds a row for a text under its heading (css/home.css,
   .op-closing__panel); this page's has none. One row then: the heading and
   the action level with each other, each in the middle of the panel's
   height. */
.op-about__closing {
  grid-template-rows: auto;
  align-items: center;
}
.op-about__closing .op-closing__action {
  grid-row: auto;
}

/* --- Narrow ------------------------------------------------------------------- */
/* As on the other pages: no phone design pass, the page only stacks sensibly. */
@media (max-width: 960px) {
  /* One column: the picture, then the text, as a product's picture stands
     above its name once that page stacks (css/products.css); and the three
     values one under the other. The text came first here, in the markup's
     order; the user's ruling on seeing it (spec
     docs/specs/2026-10-06-website-om-oss-page.md, Rev 3). The order is the
     grid's and not the markup's, for the reason given at the row. */
  .op-belief__row,
  .op-values__list {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-10);
  }
  .op-belief__media {
    grid-area: 1 / 1;
  }
  .op-belief__text {
    grid-area: 2 / 1;
  }
  /* A picture alone in a column keeps a picture's width, on the left edge
     (css/products.css, .op-product__frame). */
  .op-belief__media {
    max-width: 560px;
  }
}
@media (max-width: 560px) {
  /* The closing panel's 24px at the sides on a phone; 40px above and below,
     as on a wide screen. */
  .op-principle {
    padding: var(--space-10) var(--space-6);
  }
}