/* ============================================================
   ORON — SEKSJON 3 · integrasjoner
   Publiseringsdiagram, ikke logostripe: artikkelen Oron skriver
   ligger som ett kort øverst, en hårstrek faller ned, brer seg ut
   i en brakett og ender i seks navngitte utganger.
   Ingen oppdiktede logoer — bare ordmerker som endepunkter.
   Ingen bevegelse, ingen hover: ingenting her er klikkbart.
   ============================================================ */

.s-integrasjoner {
  /* Navngitte avgjørelser, ikke løse tall. Alt i diagrammet henger
     sammen med disse fire. */
  --int-fall:  var(--s-12);   /* loddrett fall fra kortet ned til braketten */
  --int-albue: var(--s-8);    /* brakettens høyde — under --r-sm × 2 bryter buen */
  --int-strek: var(--or-border-strong);
  --int-tittel: 6px;          /* tittellinja i kortet: tyngre enn brødlinjene */
  --int-ring: 3px;            /* haloen rundt ferskhets-prikken */
  --int-tracking: 0.01em;     /* ordmerkene: presens fra størrelse, ikke fra sperring */
}

/* Uten JS legger base.css [data-reveal] på opacity: 0 og .is-in kommer aldri.
   Lokal vakt her, slik at seksjonen står ferdig lest også med JS av. */
html:not(.js-ready) .s-integrasjoner [data-reveal] {
  opacity: 1;
  transform: none;
}

.integrasjoner-vev {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------- Overskriften (liten, per COPY.md) ---------- */
.integrasjoner-etikett {
  margin-bottom: var(--s-8);
  /* Aldri under 14 px, og vokser til 15 px fra ~1440 der en 14 px-etikett
     forsvinner i båndet. */
  font-size: clamp(0.875rem, 0.82rem + 0.2vw, 0.9375rem);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-body);
  color: var(--or-ink-500);
  text-align: center;
}

/* ---------- Kilden: artikkelen ---------- */
.integrasjoner-kort {
  width: 14.5rem;
  padding: var(--s-4);
  background: var(--or-white);
  border: 1px solid var(--or-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}

.integrasjoner-kort__hode {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--or-border-soft);
}

.integrasjoner-kort__merke {
  display: block;
  color: var(--or-ink-900);
}

/* Seksjonens eneste flate oransje: prikken som sier at kortet er ferskt. */
.integrasjoner-kort__puls {
  width: var(--s-2);
  height: var(--s-2);
  border-radius: var(--r-pill);
  background: var(--or-orange);
  box-shadow: 0 0 0 var(--int-ring) var(--or-orange-tint);
}

.integrasjoner-kort__ark {
  display: grid;
  gap: var(--s-2);
  padding-top: var(--s-4);
}

.integrasjoner-kort__linje {
  height: var(--s-1);
  border-radius: var(--r-pill);
  background: var(--or-border-strong);
}

.integrasjoner-kort__linje--tittel {
  height: var(--int-tittel);
  width: 74%;
  margin-bottom: var(--s-1);
  background: var(--or-ink-300);
}

.integrasjoner-kort__linje--kort  { width: 88%; }
.integrasjoner-kort__linje--slutt { width: 56%; }

/* ---------- Grafen ---------- */
.integrasjoner-graf {
  position: relative;
  width: 100%;
  /* Braketten vokser med vinduet: 64 rem gir seks kolonner på ~170 px rundt
     1024–1200 px, og på brede skjermer strekker den seg ut til hele målet
     (75 rem = containerens 1200 px) slik at ytterpunktene lander på samme
     kant som resten av siden — ikke som en liten figur midt i et tomt bånd. */
  max-width: clamp(64rem, 40rem + 30vw, 75rem);
  padding-top: calc(var(--int-fall) + var(--int-albue));
}

/* Fallet fra kortet. Starter i kortets underkant, treffer braketten på midten.
   De øverste pikslene er oransje og slukner ned i hårstreken: retningen på
   signalet, ikke en beskjed — meningen ligger i diagrammet og i overskriften. */
.integrasjoner-stamme {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: var(--int-fall);
  transform: translateX(-50%);
  background: linear-gradient(180deg, var(--or-orange) 0%, var(--int-strek) 58%);
}

/* Braketten: toppstreken går fra midten av første til midten av siste kolonne
   (1/12 og 11/12 av raden), og sidekantene er de to ytterste nedstikkene.
   −0,5 px fordi border-boksen legger streken innenfor kanten. */
.integrasjoner-bru {
  position: absolute;
  top: var(--int-fall);
  left: calc(100% / 12 - 0.5px);
  right: calc(100% / 12 - 0.5px);
  height: var(--int-albue);
  border: 1px solid var(--int-strek);
  border-bottom: 0;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}

.integrasjoner-rad {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.integrasjoner-punkt {
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: var(--s-4);
  padding-inline: var(--s-2);
  min-width: 0;
}

/* De fire midterste nedstikkene. Første og siste kommer fra brakettens
   sidekanter — to streker på samme sted ville blitt 2 px. */
.integrasjoner-punkt::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--int-albue));
  left: 50%;
  width: 1px;
  height: var(--int-albue);
  transform: translateX(-50%);
  background: var(--int-strek);
}

.integrasjoner-punkt:first-child::before,
.integrasjoner-punkt:last-child::before {
  display: none;
}

.integrasjoner-navn {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--int-tracking);
  color: var(--or-ink-900);
  white-space: nowrap;
}

/* ============================================================
   Responsivt
   ------------------------------------------------------------
   Ned til 720 px har braketten plass til seks kolonner — det smaleste
   mellomrommet (WordPress · Shopify) er da fortsatt ~30 px. Under det
   legges diagrammet ned som en ryggrad med tre par utganger: alle seks
   navn leses samtidig, ingenting kuttes, ingenting beveger seg.
   ============================================================ */
@media (max-width: 719px) {
  .s-integrasjoner {
    --int-fall: var(--s-8);
    --int-rad: var(--s-12);   /* radhøyde i ryggraden */
  }

  .integrasjoner-graf {
    max-width: 25rem;
    padding-top: var(--int-fall);
  }

  .integrasjoner-bru { display: none; }

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

  /* Ryggraden stopper i midten av siste rad — en strek som fortsetter
     ut i ingenting leser som en feil. */
  .integrasjoner-rad::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: calc(var(--int-rad) / 2);
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    background: var(--int-strek);
  }

  .integrasjoner-punkt {
    align-items: center;
    min-height: var(--int-rad);
    padding-top: 0;
    padding-inline: 0;
  }

  /* Nedstikkene blir sidestikk: en kort strek fra ryggraden til navnet. */
  .integrasjoner-punkt::before,
  .integrasjoner-punkt:first-child::before,
  .integrasjoner-punkt:last-child::before {
    display: block;
    top: 50%;
    left: auto;
    width: var(--s-4);
    height: 1px;
    transform: translateY(-50%);
  }

  .integrasjoner-punkt:nth-child(odd) {
    justify-content: flex-end;
    padding-inline-end: var(--s-6);
  }
  .integrasjoner-punkt:nth-child(odd)::before { right: 0; }

  .integrasjoner-punkt:nth-child(even) {
    justify-content: flex-start;
    padding-inline-start: var(--s-6);
  }
  .integrasjoner-punkt:nth-child(even)::before { left: 0; }
}

/* Smale telefoner: kortet krymper litt så luften rundt holder seg. */
@media (max-width: 419px) {
  .integrasjoner-kort { width: 12.5rem; }
}