/*
-----------------------------------------
BASE
1. Reset och bas
2. Layout (page, main, container, section)
3. Brödtext ur en rich text editor och sektionsrubrik
Alla värden kommer från tokens.css.
-----------------------------------------
*/

/* ---- Reset och bas ------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
dl,
dd,
blockquote,
address {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

address {
  font-style: normal;
}

img {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

:focus-visible {
  outline: var(--border-width-focus) solid var(--focus-ring-color);
  outline-offset: var(--border-width-focus);
}

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(100%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: var(--space-gutter);
  z-index: var(--z-drawer);
  padding: var(--space-8) var(--space-16);
  background: var(--surface-page);
  color: var(--text-heading);
  transform: translateY(-100%);
}

.skip-link:focus {
  transform: none;
}

/* ---- Layout ------------------------------------------------------------------- */

.page {
  display: flex;
  flex-direction: column;
  min-block-size: var(--size-viewport);
}

.main {
  flex: 1 0 auto;
}

/* Innehållet är 1504 px brett och centrerat; ytorna går i full bredd */
.container {
  inline-size: 100%;
  max-inline-size: calc(var(--size-content) + 2 * var(--space-gutter));
  margin-inline: auto;
  padding-inline: var(--space-gutter);
}

.section {
  padding-block: var(--space-section);
}

.section--white {
  background: var(--surface-page);
}

.section--light {
  background: var(--surface-light);
}

.section--soft {
  background: var(--surface-soft);
}

/* Rutnät: tre (eller två) kolumner från 1024 px, två från 640 px, en under (Figma visar bara 1728 px) */
.grid-3,
.grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

@media (width >= 40rem) {
  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width >= 64rem) {
  .grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- Brödtext ur en rich text editor ------------------------------------------- */

.rich-text {
  font: var(--font-body);
  color: var(--text-body);
}

.rich-text > * + * {
  margin-block-start: var(--space-24);
}

.rich-text h2 {
  font: var(--font-section);
  color: var(--text-heading);
}

.rich-text h3 {
  font: var(--font-h3);
  color: var(--text-body);
}

.rich-text > * + h2 {
  margin-block-start: var(--space-40);
}

/* Figma: Juryns motivering är ett block med 12 px fyllnad i 24 px-flödet, så 36 px före rubriken och efter citatet */
.rich-text > * + h3,
.rich-text > blockquote + * {
  margin-block-start: var(--space-36);
}

.rich-text > h2 + *,
.rich-text > h3 + * {
  margin-block-start: var(--space-20);
}

/* Rubrik 4: liten versal etikett (Figma: FORSKNING, FÖRENINGAR) med texten 8 px under */
.rich-text h4 {
  font: var(--font-label);
  color: var(--text-heading);
  text-transform: uppercase;
}

.rich-text > h4 + * {
  margin-block-start: var(--space-8);
}

.rich-text strong {
  font-weight: var(--font-weight-semibold);
}

.rich-text a {
  color: var(--text-heading);
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
}

/* Punktlistan: blå punkt i en egen kolumn, 16 px till texten (Figma: Koncernens initiativ) */
.rich-text ul > li {
  display: grid;
  grid-template-columns: var(--size-bullet) minmax(0, 1fr);
  column-gap: var(--space-16);
}

.rich-text ul > li + li {
  margin-block-start: var(--space-8);
}

.rich-text ul > li::before {
  content: "•";
  color: var(--text-heading);
}

.rich-text ol {
  padding-inline-start: var(--space-24);
  list-style: decimal;
}

/* Citat (Figma: Jurycitat): grå ruta med svart kant till vänster, kursiv */
.rich-text blockquote {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  padding: var(--space-28);
  border-inline-start: var(--border-width-quote) solid var(--border-quote);
  background: var(--surface-light);
  font: var(--font-quote);
}

/* Extern länk i texten: pilen snett uppåt 12 px efter texten (Figma: Filmlänk) */
.rich-text a[target="_blank"]::after {
  content: "";
  display: inline-block;
  inline-size: var(--size-icon-small);
  block-size: var(--size-icon-small);
  margin-inline-start: var(--space-12);
  vertical-align: middle;
  background: url("../assets/icons/extern-mork.svg") center / contain no-repeat;
}

/* Bild i texten (Umb.Tiptap.Image): textens bredd, aldrig bredare än sin egen fil */
.rich-text img {
  display: block;
  inline-size: 100%;
  max-inline-size: max-content;
  margin-block: var(--space-16) var(--space-8);
}

.rich-text hr {
  margin-block: 0 var(--space-16);
  border: 0;
  border-block-start: 1px solid var(--border-subtle);
}

/* Figma: Om Ohlssons ligger 24 px under texten och har 16 px fyllnad ovanför linjen */
.rich-text > * + hr {
  margin-block-start: var(--space-40);
}

.rich-text > hr + h3 + * {
  margin-block-start: var(--space-16);
}

.rich-text > hr + * {
  margin-block-start: 0;
}

.rich-text--inverse,
.rich-text--inverse h2,
.rich-text--inverse h3 {
  color: var(--text-inverse);
}

/* ---- Sektionsrubrik (Ohlssons/sectionHeader) ----------------------------------- */

.section-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.section-header__eyebrow {
  font: var(--font-label);
  color: var(--text-muted);
  text-transform: uppercase;
}

.section-header__title {
  font: var(--font-section-auto);
  color: var(--text-heading);
  text-transform: uppercase;
}

.section-header__text {
  max-inline-size: var(--size-intro-text);
  font: var(--font-intro);
  color: var(--text-intro);
}

/* Rubrik med textlänk till höger (Våra bolag, Aktuellt) */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24) var(--space-intro);
  margin-block-end: var(--space-40);
}

.section-head > .section-header {
  flex: 1 1 var(--size-card-min);
}