/* =============================================================================
   Opsy website — the Säkerhet page.

   One section, five topics under one title, all of one weight: four cards,
   two by two, then a band across the page with four marks. The section's
   title is the small section label (css/site.css, .op-eyebrow) and the
   topics' titles are the largest type under it -- the user's rulings (spec,
   Revs 1 and 5); the page first set three of the topics as rows with
   headings as large as the section's own.

   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 trust strip's cells and the small line drawings
   (css/home.css). What is here is this page's own arrangement of them.
   Spec: docs/specs/2026-10-06-website-sakerhet-page.md
   ========================================================================== */

/* --- The section ------------------------------------------------------------ */
/* The opening above leaves the whole gap to the heading (css/home.css,
   Opening), so the section adds none on top. The section step under it: the
   footer follows. */
.op-security {
  /* A card's padding and the gap between two cards, said once: the cards take
     them, and the band reads them to put its own content on the cards'
     content edges (The band, below). The closing panel's 40px of padding
     (css/home.css, .op-closing__panel), and 24px between cards. */
  --op-card-pad: var(--space-10);
  --op-card-gap: var(--space-6);
  padding-bottom: var(--op-space-section);
}
/* The section's label is centred: on the axis of the opening just above it,
   over the middle of the grid it labels -- the user's ruling (spec, Rev 7).
   The site's one exception to left-aligned section labels
   (docs/specs/2026-10-05-website-spacing-and-alignment.md). It stood on the
   cards' outer edge first, then on their text edge. */
.op-security__label {
  text-align: center;
}

/* --- Four cards ------------------------------------------------------------- */
/* Two by two, equally wide. A grid stretches its cells, so the two cards of a
   row are as tall as the one with the longer text.
   Under the section's label by the cards' own gap, so the label reads as
   part of the grid -- the user's pick. The page's intro step, 48px, is sized
   for a large heading, and the title here is a label (spec, Rev 5). */
.op-security__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--op-card-gap);
  margin-top: var(--op-card-gap);
}
/* A card: a flat fill and nothing else -- no outline, no hover, since it does
   nothing. The panels' corner. The text starts at the card's top; the
   drawing stands at the far end, in the middle of the card's height.
   The grounds are a checkerboard, by position: grey, and mint on the first
   and the fourth, so no two cards of one tone share an edge. Both are
   primitives, as on the panels that already wear them: the picture panel's
   grey (css/home.css, .op-offer__media), whose two aliases are a border and
   a pressed state, and the price panel's mint (css/products.css,
   .op-price__panel), whose only alias names a hover. */
.op-topic {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  padding: var(--op-card-pad);
  border-radius: var(--radius-lg);
  background: var(--submarine-100);
}
.op-topic:nth-child(4n + 1),
.op-topic:nth-child(4n) {
  background: var(--genoa-100);
}
/* 12px from title to text, as in an offer card: the same pair of type styles
   one step up. The band's text takes this block too, so all five topics read
   alike. */
.op-topic__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
/* Evened lines, as the headings have: in a column this narrow a card's one
   sentence otherwise breaks at the hyphen of its last word. */
.op-topic__body p {
  text-wrap: balance;
}
/* A card's drawing: the small line drawing (css/home.css, .op-spot) at one
   and a half times its size, since a card is a larger room than a reasons
   cell. Its outline stays the 2px it is there: the picture has a render of
   its own at this size (drawings/art.css, Marks). */
.op-topic .op-spot {
  align-self: center;
  width: 132px;
  height: 108px;
}
/* --- The band --------------------------------------------------------------- */
/* Regelefterlevnad inbyggd: a band across the page on the brand's pale mint,
   with the trust band's own padding (css/home.css, .op-trust). The near step
   above it: the five topics are one section. */
.op-security__band {
  margin-top: var(--op-space-near);
  padding-block: calc(var(--space-9) * 2);
  background: var(--brand-bg);
}
/* Its content is a fifth row of the cards' grid: padded at the sides like a
   card, in two equal columns whose gap is the cards' gap and two paddings.
   So the text starts on the left cards' text edge, and the panel of marks
   spans the right cards' content, from their text edge to where their
   drawings' slots end -- three edges shared down the page, and they cannot
   drift, since both read the same two lengths. The user's ruling (spec,
   Rev 3): the band's content stood on the page's own edges first, in the
   price section's 7 to 5 split. */
.op-security__band > .op-wrap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: calc(var(--op-card-gap) + var(--op-card-pad) * 2);
  align-items: center;
  padding-inline: var(--op-card-pad);
}
/* The four marks: the home page's strip (css/home.css, .op-trust__marks) two
   by two -- one white panel, a hairline between cells, no cell outlined: the
   user's ruling, where the picture sent has four outlined tiles. A mark and
   its label start at the cell's left, so the two columns each keep one edge;
   the strip centres them.
   The hairlines are said in full and one class heavier than the strip's,
   whose phone rules (a list, a line above each row) would otherwise reach
   in. Order matters: the fourth cell is both even and in the second row. */
.op-security__marks {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
}
.op-security__marks .op-trust__mark {
  justify-content: flex-start;
  min-height: 88px;
  padding-inline: var(--space-6);
}
.op-security__marks .op-trust__mark:nth-child(odd) {
  border-left: 0;
}
.op-security__marks .op-trust__mark:nth-child(even) {
  border-top: 0;
  border-left: 1px solid var(--brand-border);
}
.op-security__marks .op-trust__mark:nth-child(n + 3) {
  border-top: 1px solid var(--brand-border);
}

/* --- Narrow ----------------------------------------------------------------- */
/* As on the other pages: no phone design pass, the page only stacks sensibly. */
@media (max-width: 960px) {
  /* One column: the cards one over the other, and in the band the text and
     then the marks. */
  .op-security__cards,
  .op-security__band > .op-wrap {
    grid-template-columns: minmax(0, 1fr);
  }
  /* In one column a checkerboard would stack two greys: the tones alternate
     down the page instead. */
  .op-topic:nth-child(odd) {
    background: var(--genoa-100);
  }
  .op-topic:nth-child(even) {
    background: var(--submarine-100);
  }
  .op-security__band > .op-wrap {
    row-gap: var(--space-10);
  }
  /* The panel of marks keeps a panel's width, on the left edge
     (css/products.css, .op-product__frame). */
  .op-security__marks {
    max-width: 560px;
  }
}
@media (max-width: 560px) {
  /* A card is padded like a phone's panel, and the band's sides with it. */
  .op-security {
    --op-card-pad: var(--space-6);
  }
  /* A card's drawing above its text, at the small drawing's own size and
     outline. */
  .op-topic {
    flex-direction: column-reverse;
    gap: var(--space-6);
  }
  .op-topic .op-spot {
    align-self: flex-start;
    width: 88px;
    height: 72px;
  }
  /* The marks as a list, as the home strip is on a phone: a mark a row, a
     hairline between rows. */
  .op-security__marks {
    grid-template-columns: minmax(0, 1fr);
  }
  .op-security__marks .op-trust__mark {
    min-height: 64px;
  }
  .op-security__marks .op-trust__mark:nth-child(even) {
    border-left: 0;
  }
  .op-security__marks .op-trust__mark:nth-child(n + 2) {
    border-top: 1px solid var(--brand-border);
  }
}