/* =============================================================================
   Opsy website — the Nyheter page and its articles.

   The list: a row per news item -- its date, its title and summary, an
   arrow -- with a fine line between rows and the live site's pager under
   them. The article: the date and the headline centred, and a column in the
   middle of the page whose left edge the way back, the lead and the text
   share.

   Flat plain CSS on the kit's tokens, `op-` prefix, as css/site.css. The
   opening and the closing panel are the other pages' (css/home.css), used as
   they stand. An article's text is Markdown and arrives as bare elements
   with no class names, so its styles hang off one wrapper (.op-prose) and
   say again the values the kit's classes hold.
   Spec: docs/specs/2026-10-06-website-nyheter-page.md
   ========================================================================== */

/* --- The list ------------------------------------------------------------------ */
/* The opening above leaves the whole gap to the first row (css/home.css,
   Opening), so the list adds none on top. The section step under it: the
   footer follows. */
.op-news {
  padding-bottom: var(--op-space-section);
}
/* A row: the date, the text, the arrow. The date's column is a fixed width,
   so the text starts in one place down the whole list. The arrow square's
   side is said once: the date takes it as its height, to stand level with
   the square. */
.op-news__item {
  --op-news-go: 48px;
  position: relative;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) auto;
  column-gap: var(--space-10);
  align-items: start;
  padding-block: var(--space-10);
}
/* A fine line between rows, the reasons grid's (css/home.css,
   .op-reasons__grid); none above the first row. */
.op-news__item + .op-news__item {
  border-top: 1px solid var(--border-subtle);
}
/* The date, in the middle of the arrow square's height: level with it. No
   vertical line in a row -- the user's ruling on seeing the list: with the
   lines between rows there were too many. (The picture sent has two: a short
   tick before the date and an upright line between the date and the text.) */
.op-news__date {
  display: flex;
  align-items: center;
  min-height: var(--op-news-go);
}
/* The title and, where the item has one, its summary. 8px above: the
   title's first line comes level with the date and the arrow. The summary is
   held to the one width of every description (css/home.css,
   .op-intro__lead). */
.op-news__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-2);
}
/* A summary is the team's own text and one came with non-breaking spaces
   between its words: a run the browser may not break, wider than a phone's
   column. Such a run breaks where it must, so it never pushes the page wide. */
.op-news__summary {
  max-width: 800px;
  overflow-wrap: break-word;
}
/* The title is the row's one link, and its click area is stretched over the
   whole row: one link for a screen reader, named by the title alone, and the
   row for a pointer. The area reaches 16px past the row at each side, inside
   the page's 24px margin, so the ring below stands clear of the date and
   the arrow. */
.op-news__link {
  color: inherit;
  text-decoration: none;
  transition: color var(--motion-fast) var(--ease-standard);
}
.op-news__link::after {
  content: '';
  position: absolute;
  inset: 0 calc(var(--space-4) * -1);
  border-radius: var(--radius-sm);
}
.op-news__item:hover .op-news__link {
  color: var(--brand-action);
}
/* The focus ring goes round the row, where the click lands, and not round
   the title's words. */
.op-news__link:focus-visible {
  outline: none;
}
.op-news__link:focus-visible::after {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: calc(var(--focus-ring-width) * -1);
}
/* The arrow in a pale mint square: decoration, the title is the link. The
   square is the large button's height (css/site.css, .op-btn--lg) on the
   tag's corner; its mint deepens when the row is pointed at or focused. */
.op-news__go {
  display: grid;
  place-items: center;
  width: var(--op-news-go);
  height: var(--op-news-go);
  border-radius: var(--radius-sm);
  background: var(--brand-bg);
  color: var(--brand-action);
  transition: background-color var(--motion-fast) var(--ease-standard);
}
.op-news__item:hover .op-news__go,
.op-news__item:focus-within .op-news__go {
  background: var(--brand-bg-hover);
}

/* --- The pager ----------------------------------------------------------------- */
/* Under the list, a heading's step away: an outline button at each side and
   the count between them. Each part names its column, so the count stays in
   the middle on the first and the last page, where one side is absent. */
.op-pager {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--space-4);
  margin-top: var(--op-space-intro);
}
.op-pager__prev {
  grid-column: 1;
  justify-self: start;
}
.op-pager__count {
  grid-column: 2;
}
.op-pager__next {
  grid-column: 3;
  justify-self: end;
}

/* --- The article ----------------------------------------------------------------- */
/* The date and the headline centred on the page's axis, as every page's
   opening is, and the text in a column in the middle of the page,
   left-aligned: the user's ruling on seeing the article on the page's left
   edge, where it stood first. 64px above, the step an opening leaves over its headline
   (css/home.css, Opening); the section step under it, to the closing panel
   or, where an article has none, to the footer. The column's width is said
   once: the one width of every description (css/home.css, .op-intro__lead). */
.op-article {
  --op-article-col: 800px;
  padding-block: calc(var(--space-8) * 2) var(--op-space-section);
}
/* The way back, the date, the headline and the lead, one under the other.
   The date and the headline are centre-aligned. */
.op-article__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}
/* The way back and the lead are boxes of the column's width with their
   content on its left edge, where the text under them starts: the user's
   pick by eye of two arrangements built on the page (the other centred both
   with the date and the headline). */
.op-article__back,
.op-article__lead {
  width: min(100%, var(--op-article-col));
  text-align: left;
}
/* The way back to the list: the text link (css/site.css, .op-link), padded
   to a 32px row as a footer link is. The link is in a wrapper so its click
   area stays its own words and not the column's width. 8px further from the
   date than the head's own gap: it leads to another page, the rest is about
   this one. */
.op-article__back {
  margin-bottom: var(--space-2);
}
.op-article__back .op-link {
  display: inline-block;
  padding-block: var(--space-1-5);
}
/* The headline may run wider than the text under it: at the text's 800px
   the longest, 130 letters, stood on five lines. The kit sets its h1 solid,
   for a page title of one line; a headline of three or four lines takes the
   snug line height the other headings have. */
.op-article__title {
  max-width: 20em;
  line-height: var(--lh-snug);
}
/* The lead under the headline: the secondary ink's job, and 8px further
   under the headline than the head's own gap, as an opening's lead is
   (css/home.css, .op-opening__lead). */
.op-article__lead {
  margin-top: var(--space-2);
  color: var(--text-secondary);
}
/* Läs pressmeddelandet, under the text, on the column's left edge. */
.op-article__more {
  max-width: var(--op-article-col);
  margin: var(--space-8) auto 0;
}

/* --- The article's text ------------------------------------------------------------ */
/* Written as Markdown: bare elements, styled from this wrapper. The values
   are the kit's classes' own, said again (kit/typography.css): body-lg for
   the text, heading-h3 and heading-h4 for the two levels of sub-heading,
   label-md for a table's head row. Only what the articles use is here.
   The type is set on the wrapper and not on its paragraphs: one article has
   lines of text standing bare in it, in no paragraph. A run the browser may
   not break -- words joined by non-breaking spaces, as in one article --
   breaks where it must (see .op-news__summary). */
.op-prose {
  max-width: var(--op-article-col);
  margin: var(--op-space-intro) auto 0;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: var(--lh-relaxed);
  overflow-wrap: break-word;
}
/* 20px between two blocks; 40px and 32px over a sub-heading and 12px under
   it, so it stands with the text it heads. */
.op-prose > * + * {
  margin-top: var(--space-5);
}
.op-prose h2,
.op-prose h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-snug);
}
.op-prose h2 {
  font-size: 24px;
}
.op-prose h3 {
  font-size: 20px;
}
.op-prose > * + h2 {
  margin-top: var(--space-10);
}
.op-prose > * + h3 {
  margin-top: var(--space-8);
}
.op-prose > h2 + *,
.op-prose > h3 + * {
  margin-top: var(--space-3);
}
/* The kit's bold is semibold. */
.op-prose strong {
  font-weight: 600;
}
/* A link in running text is underlined whole: there is no arrow beside it
   to tell it from the text. A bare address may break anywhere, so it never
   pushes a phone's column wide. */
.op-prose a {
  color: var(--text-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
  transition: color var(--motion-fast) var(--ease-standard);
}
.op-prose a:hover {
  color: var(--brand-action-hover);
  text-decoration-thickness: 2px;
}
.op-prose a:active {
  color: var(--brand-action-pressed);
}
/* The page takes bullets and numbers off every list (css/site.css, Page);
   a list in running text gets them back. */
.op-prose ul,
.op-prose ol {
  padding-left: var(--space-6);
}
.op-prose ul {
  list-style: disc;
}
.op-prose ol {
  list-style: decimal;
}
.op-prose li + li {
  margin-top: var(--space-2);
}
.op-prose li::marker {
  color: var(--brand-action);
}
/* A quote: a bar in the action teal at its left -- the date's tick, grown to
   the quote's height -- and the words in medium weight. The browser's own
   side margins go; the page's reset does not reach these two elements. */
.op-prose blockquote,
.op-prose .quote {
  margin-inline: 0;
  margin-bottom: 0;
  padding-left: var(--space-6);
  border-left: 2px solid var(--brand-action);
}
.op-prose blockquote {
  font-weight: 500;
}
.op-prose blockquote > * + * {
  margin-top: var(--space-3);
}
/* A named quote, from the site's quote shortcode: the bar is the figure's,
   so it runs past the name too, and the quote inside carries none. */
.op-prose .quote blockquote {
  padding-left: 0;
  border-left: 0;
}
.op-prose .quote figcaption {
  margin-top: var(--space-3);
  font-size: 16px;
}
/* A table: fine lines under its rows, figures in digits of one width so a
   column of numbers lines up. */
.op-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.op-prose th,
.op-prose td {
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
  vertical-align: top;
}
.op-prose th {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  line-height: var(--lh-snug);
}
/* A picture stands in the middle of the column and keeps its proportions. */
.op-prose img {
  height: auto;
  margin-inline: auto;
}

/* --- Narrow ---------------------------------------------------------------------- */
/* As on the other pages: no phone design pass, the page only stacks sensibly. */
@media (max-width: 960px) {
  /* The date's column at the width of the longest date and its tick. */
  .op-news__item {
    grid-template-columns: 160px minmax(0, 1fr) auto;
    column-gap: var(--space-6);
  }
  /* The headline at heading-h2's size. */
  .op-article__title {
    font-size: 32px;
  }
}
@media (max-width: 720px) {
  /* A row stacks: the date and the arrow on one line, the title and summary
     under them across the row. At this width and not a phone's: beside a
     date column the title's column would be narrower than its longest
     words. */
  .op-news__item {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: var(--space-4);
    padding-block: var(--space-8);
  }
  .op-news__date {
    grid-area: 1 / 1;
  }
  .op-news__go {
    grid-area: 1 / 2;
  }
  .op-news__body {
    grid-area: 2 / 1 / auto / -1;
    padding-top: 0;
  }
}
@media (max-width: 560px) {
  /* The headline at heading-h3's size. */
  .op-article__title {
    font-size: 24px;
  }
  /* A table wider than a phone scrolls sideways inside itself. */
  .op-prose table {
    display: block;
    overflow-x: auto;
  }
  /* A row's title keeps its 24px. On a phone the kit's headings step down a
     size (css/site.css, Narrow) and this one would be 20px; the user left
     the rows of Nyheter and Rapporter as they are (spec
     docs/specs/2026-10-07-website-phone-menu-and-phone-fixes.md, decision 6). */
  .op-news__body > .heading-h3 {
    font-size: 24px;
  }
  /* The pager's three parts are 334px side by side, more than a phone's
     column once a middle page exists. The count takes a row of its own and
     the two buttons the row under it, each at its own end. */
  .op-pager {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    row-gap: var(--space-4);
  }
  .op-pager__count {
    grid-area: 1 / 1 / auto / -1;
    justify-self: center;
  }
  .op-pager__prev {
    grid-area: 2 / 1;
  }
  .op-pager__next {
    grid-area: 2 / 2;
  }
}