/* ============================================================
   ORON — SECTION: hero
   Left-aligned display type, then a three-pane Oron product panel
   ("Innholdsplan") sharing the headline's left and right edges.

   Orange budget for this section — exactly four:
     1. the eyebrow dot        2. «Nummer en» in the h1
     3. the primary CTA        4. the one line in the chart
   Nothing else in this file may be orange.

   Optical values (dot sizes, 1–7 px nudges, toggle geometry) are kept raw
   and commented; every value that maps onto an --s-* / --fs-* token uses it.
   ============================================================ */

.s-hero {
  padding-top: calc(var(--nav-h) + clamp(40px, 4.2vw + 18px, 92px));
  padding-bottom: clamp(64px, 4vw + 40px, 112px);
  overflow: clip;
  isolation: isolate;
}

.s-hero__copy,
.s-hero__stage { position: relative; z-index: var(--z-base); }

/* ------------------------------------------------------------
   COPY BLOCK
   ------------------------------------------------------------ */
/* Ink label, orange dot. The dot is the section's one accent here. */
.s-hero__eyebrow {
  margin-bottom: clamp(20px, 1.4vw + 14px, 28px);
  color: var(--or-ink-500);
}

/* 68 px, not 74, and semibold rather than bold: at display size the extra
   weight reads as shouting. The tight h1 track carries the precision. */
.s-hero__title {
  font-size: clamp(2.125rem, 1.336rem + 3.24vw, 4.25rem);   /* 34 -> 68 */
  line-height: 1.05;
  letter-spacing: var(--ls-h1);
  word-spacing: 0.02em;
  font-weight: var(--fw-semi);
  color: var(--or-ink-900);
  max-width: none;
}
.s-hero__line { display: block; text-wrap: balance; }
.s-hero__line + .s-hero__line { margin-top: 0.05em; }

/* A full stop carries a left sidebearing that negative tracking never
   absorbs, so at 68 px it detaches and reads «dine .». Pull it back until
   it sits at the same optical distance as the letters before it. */
.s-hero__stop {
  margin-left: -0.05em;
  letter-spacing: 0;
  word-spacing: 0;
}

.s-hero__lead {
  margin-top: clamp(22px, 1.4vw + 16px, 32px);
  max-width: 46ch;
  color: var(--or-ink-500);
  text-wrap: pretty;
}

.s-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  margin-top: clamp(30px, 2vw + 20px, 44px);
}

/* Flat, matte, seated. The shared --or-grad-cta gloss + --sh-cta halo read
   as a 2012 web button and float instead of sitting; this hero-scoped
   override is the flat treatment until tokens.css can carry it site-wide.
   --or-orange-deep is the brand orange that clears AA on white text. */
.s-hero .btn--primary {
  background: var(--or-orange-deep);
  border-color: var(--or-orange-deep);
  box-shadow: var(--sh-sm);
}
.s-hero .btn--primary::after { display: none; }
.s-hero .btn--primary:hover { box-shadow: var(--sh-md); }

/* Three assurances. They wrap as whole claims — never mid-claim. */
.s-hero__micro {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-3);
  margin-top: var(--s-5);
  font-size: var(--fs-small);
  color: var(--or-ink-500);
  letter-spacing: -0.004em;
}
.s-hero__micro span { white-space: nowrap; }
.s-hero__micro span + span::before {
  content: "·";
  margin-right: var(--s-3);
  color: var(--or-ink-300);
}

.s-hero__nb { white-space: nowrap; }

/* ------------------------------------------------------------
   STAGE — flat white, the panel's own shadow carries the depth
   ------------------------------------------------------------ */
.s-hero__stage { margin-top: clamp(44px, 3.4vw + 26px, 76px); }

.s-hero__panel {
  position: relative;
  background: var(--or-white);
  border: 1px solid var(--or-border);
  border-radius: var(--r-2xl);
  box-shadow: var(--sh-xl);
  overflow: hidden;
}

/* ---------- window chrome ---------- */
.s-hero .hp-bar {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: var(--s-14);
  padding: var(--s-2) var(--s-5);
  background: var(--or-gray-50);
  border-bottom: 1px solid var(--or-border);
}
.s-hero .hp-bar__dots { display: flex; gap: var(--s-1); flex: none; }
.s-hero .hp-bar__dots i {
  width: 9px; height: 9px;        /* optical: window dots */
  border-radius: 50%;
  background: var(--or-border-strong);
}
.s-hero .hp-bar__crumbs {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  margin-left: var(--s-2);
}
.s-hero .hp-bar__brand {
  font-size: var(--fs-body);
  font-weight: var(--fw-black);
  letter-spacing: -0.045em;
  color: var(--or-ink-900);
}
.s-hero .hp-bar__sep { color: var(--or-border-strong); flex: none; }
.s-hero .hp-bar__crumb {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semi);
  color: var(--or-ink-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.s-hero .hp-bar__right {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-left: auto;
  flex: none;
}
.s-hero .hp-bar__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semi);
  color: var(--or-ink-700);
  white-space: nowrap;
}
/* toggle geometry is optical — 30x18 with a 12 px knob inset 3 px */
.s-hero .hp-bar__track {
  position: relative;
  width: 30px; height: 18px;
  border-radius: var(--r-pill);
  background: var(--or-ink-900);
  flex: none;
}
.s-hero .hp-bar__track i {
  position: absolute;
  top: 3px; right: 3px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--or-white);
}
.s-hero .hp-tag {
  display: inline-flex;
  align-items: center;
  height: var(--s-6);
  padding-inline: var(--s-3);
  border-radius: var(--r-pill);
  border: 1px solid var(--or-border-strong);
  background: var(--or-white);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: .03em;
  color: var(--or-ink-500);
  white-space: nowrap;
}

/* ---------- three panes ---------- */
.s-hero .hp-body {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 336px;
}

/* ---------- left rail — workflow ---------- */
.s-hero .hp-rail {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--s-6) var(--s-4) var(--s-5);
  background: var(--or-gray-50);
  border-right: 1px solid var(--or-border);
}
.s-hero .hp-rail__label,
.s-hero .hp-side__label {
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--or-ink-500);
}
.s-hero .hp-rail__label { padding-inline: var(--s-3); margin-bottom: var(--s-3); }
.s-hero .hp-nav { display: flex; flex-direction: column; gap: 2px; }
.s-hero .hp-nav__item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  height: calc(var(--s-8) + var(--s-1));   /* 36 */
  padding-inline: var(--s-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--or-ink-500);
  white-space: nowrap;
}
.s-hero .hp-nav__item svg { flex: none; opacity: .72; }
.s-hero .hp-nav__item.is-active {
  background: var(--or-white);
  color: var(--or-ink-900);
  font-weight: var(--fw-semi);
  box-shadow: var(--sh-xs), var(--sh-ring);
}
.s-hero .hp-nav__item.is-active svg { opacity: 1; }

/* the one chart, the one orange line. Label is a metric where "up" is the
   good direction — a rising «Plassering» curve would assert the opposite
   of what the product does. */
.s-hero .hp-tile {
  margin-top: auto;
  padding: var(--s-3) var(--s-3) var(--s-2);
  background: var(--or-white);
  border: 1px solid var(--or-border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
}
.s-hero .hp-tile__label {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semi);
  color: var(--or-ink-700);
  letter-spacing: -0.01em;
  margin-bottom: var(--s-2);
}
/* aspect-ratio matches the viewBox exactly, so the geometry scales
   uniformly at every width — no squashed dot, no shifting slope. */
.s-hero .hp-spark {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 132 / 48;
  color: var(--or-orange);
}
.s-hero .hp-spark__base { stroke: var(--or-border); stroke-width: 1; }
.s-hero .hp-spark__line { stroke: currentColor; stroke-width: 1.5; }
.s-hero .hp-spark__dot  { fill: currentColor; }
.s-hero .hp-tile__foot {
  margin-top: var(--s-2);
  font-size: var(--fs-micro);
  color: var(--or-ink-500);
  letter-spacing: .01em;
}

.s-hero .hp-site {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-4);
  padding: var(--s-4) var(--s-2) 0;
  border-top: 1px solid var(--or-border);
  color: var(--or-ink-500);
  line-height: 1.3;
}
.s-hero .hp-site svg { flex: none; opacity: .7; }
.s-hero .hp-site__txt { display: flex; flex-direction: column; min-width: 0; }
.s-hero .hp-site__label { font-size: var(--fs-micro); }
.s-hero .hp-site b {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semi);
  color: var(--or-ink-700);
}

/* ---------- centre pane — the 7-day plan ---------- */
.s-hero .hp-main {
  min-width: 0;
  padding-block: var(--s-5);
}
.s-hero .hp-main__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 0 var(--s-5) var(--s-4);
  border-bottom: 1px solid var(--or-border);
}
.s-hero .hp-main__title {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  letter-spacing: -0.022em;
  color: var(--or-ink-900);
  line-height: 1.2;
}
.s-hero .hp-main__sub {
  font-size: var(--fs-caption);
  color: var(--or-ink-500);
  white-space: nowrap;
}

.s-hero .hp-rows { display: flex; flex-direction: column; }
/* No hover state: these rows are a still of the product, not controls.
   An affordance that cannot be reached by keyboard is a credibility leak. */
.s-hero .hp-row {
  position: relative;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-5);
}
.s-hero .hp-row + .hp-row::before {
  content: "";
  position: absolute;
  inset-inline: var(--s-5);
  top: 0;
  height: 1px;
  background: var(--or-border-soft);
}

/* the row being written right now — selection marker, links list to detail */
.s-hero .hp-row.is-live {
  background: var(--or-gray-100);
  box-shadow: inset 2px 0 0 var(--or-ink-900);
}
.s-hero .hp-row.is-live::before,
.s-hero .hp-row.is-live + .hp-row::before { background: transparent; }

.s-hero .hp-when {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  min-width: 0;
  white-space: nowrap;
}
.s-hero .hp-num {
  font-family: var(--or-mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  color: var(--or-ink-400);
  letter-spacing: 0;
}
.s-hero .hp-day {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semi);
  color: var(--or-ink-700);
  letter-spacing: -0.01em;
}
.s-hero .hp-row.is-live .hp-num { color: var(--or-ink-700); }
.s-hero .hp-row.is-live .hp-day,
.s-hero .hp-row.is-done .hp-day { color: var(--or-ink-900); }

.s-hero .hp-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.s-hero .hp-art {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--or-ink-800);
  letter-spacing: -0.013em;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.s-hero .hp-row.is-live .hp-art { font-weight: var(--fw-semi); color: var(--or-ink-900); }

.s-hero .hp-kw {
  min-width: 0;
  font-family: var(--or-mono);
  font-size: var(--fs-micro);
  color: var(--or-ink-500);
  letter-spacing: 0;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.s-hero .hp-status { justify-self: end; }
.s-hero .hp-status .badge {
  height: var(--s-7);
  padding-inline: var(--s-3);
  gap: var(--s-2);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semi);
  letter-spacing: -0.006em;
}
/* Green means published — nothing else. In-progress reads as ink. */
.s-hero .hp-badge-live {
  background: var(--or-white);
  color: var(--or-ink-900);
  border-color: var(--or-border-strong);
}
.s-hero .hp-badge-live .livedot,
.s-hero .hp-badge-live .livedot::after { background: var(--or-ink-900); }
.s-hero .hp-badge-live .livedot { width: 7px; height: 7px; }  /* optical */

/* ---------- right pane — the article being written ---------- */
.s-hero .hp-side {
  display: flex;
  flex-direction: column;
  padding: var(--s-5);
  border-left: 1px solid var(--or-border);
  background: var(--or-gray-50);
}
.s-hero .hp-side__label {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
  color: var(--or-ink-700);
}
.s-hero .hp-side__dot {
  width: 7px; height: 7px;        /* optical: matches the badge dot */
  flex: none;
  border-radius: 50%;
  background: var(--or-ink-900);
}
.s-hero .hp-side__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: 1.28;
  letter-spacing: -0.024em;
  color: var(--or-ink-900);
  text-wrap: balance;
}

.s-hero .hp-side__meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--or-border);
}
.s-hero .hp-side__meta dt {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semi);
  color: var(--or-ink-500);
  white-space: nowrap;
}
.s-hero .hp-side__meta dd {
  min-width: 0;
  font-size: var(--fs-caption);
  color: var(--or-ink-700);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.s-hero .hp-steps {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--s-4);
}
.s-hero .hp-steps li {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: calc(var(--s-8) + 2px);
  font-size: var(--fs-caption);
  color: var(--or-ink-500);
  line-height: 1.3;
}
/* connector sits on the 17 px marker's centre line */
.s-hero .hp-steps li + li::before {
  content: "";
  position: absolute;
  left: 8px;
  top: -10px;
  width: 1px;
  height: 12px;
  background: var(--or-border-strong);
}
.s-hero .hp-steps__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px; height: 17px;      /* optical: reads as a checkbox, not a bullet */
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--or-border-strong);
  background: var(--or-white);
  color: transparent;
}
/* Green is reserved for «Publisert». A completed step is ink. */
.s-hero .hp-steps .is-done { color: var(--or-ink-700); }
.s-hero .hp-steps .is-done .hp-steps__mark {
  background: var(--or-ink-900);
  border-color: var(--or-ink-900);
  color: var(--or-white);
}
.s-hero .hp-steps .is-now { color: var(--or-ink-900); font-weight: var(--fw-semi); }
.s-hero .hp-steps .is-now .hp-steps__mark {
  border-color: var(--or-ink-900);
  box-shadow: inset 0 0 0 3px var(--or-white), inset 0 0 0 17px var(--or-ink-900);
}

/* Docked action bar — the pane's footer, not a floating group */
.s-hero .hp-acts {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--or-border);
}
.s-hero .hp-act {
  display: inline-flex;
  align-items: center;
  height: var(--s-8);
  padding-inline: var(--s-3);
  border-radius: var(--r-sm);
  border: 1px solid var(--or-border-strong);
  background: var(--or-white);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semi);
  letter-spacing: -0.008em;
  color: var(--or-ink-700);
  white-space: nowrap;
}
.s-hero .hp-act--main {
  background: var(--or-ink-900);
  border-color: var(--or-ink-900);
  color: var(--or-white);
}

/* ---------- status bar ---------- */
.s-hero .hp-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-6);
  flex-wrap: wrap;
  min-height: var(--s-12);
  padding: var(--s-3) var(--s-5);
  background: var(--or-gray-50);
  border-top: 1px solid var(--or-border);
}
.s-hero .hp-foot__item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--or-ink-500);
}
.s-hero .hp-foot__item svg { flex: none; opacity: .8; }
.s-hero .hp-foot__item--done { color: var(--or-ink-700); }
.s-hero .hp-foot__item--done svg { color: var(--or-green); opacity: 1; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1120px) {
  .s-hero .hp-body { grid-template-columns: 212px minmax(0, 1fr); }
  .s-hero .hp-side { display: none; }
}

@media (max-width: 1024px) {
  .s-hero .hp-row { grid-template-columns: 92px minmax(0, 1fr) auto; gap: var(--s-3); }
}

@media (max-width: 900px) {
  /* stacked: the plan leads, the workflow strip follows it. The pillar
     vocabulary (artikler / lenkebygging / teknisk SEO) stays visible as a
     chip row — it is the panel's strongest silent argument. The chart is
     what gets dropped, not the nav. */
  .s-hero .hp-body { display: flex; flex-direction: column; }
  .s-hero .hp-main { order: 1; }
  .s-hero .hp-rail {
    order: 2;
    flex-direction: row;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-3) var(--s-5);
    border-right: 0;
    border-top: 1px solid var(--or-border);
  }
  .s-hero .hp-rail__label,
  .s-hero .hp-tile { display: none; }
  .s-hero .hp-nav {
    flex: 1 1 auto;
    flex-direction: row;
    gap: var(--s-1);
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .s-hero .hp-nav::-webkit-scrollbar { display: none; }
  .s-hero .hp-nav__item { flex: none; height: var(--s-8); }
  .s-hero .hp-nav__item svg { display: none; }
  .s-hero .hp-site {
    flex: none;
    margin: 0 0 0 auto;
    padding: 0;
    border-top: 0;
  }
}

@media (max-width: 768px) {
  .s-hero__eyebrow { font-size: var(--fs-small); }
  .s-hero .hp-main { padding-block: var(--s-4); }
  .s-hero .hp-main__head { padding-inline: var(--s-4); }
  .s-hero .hp-row { padding-inline: var(--s-4); }
  .s-hero .hp-row + .hp-row::before { inset-inline: var(--s-4); }
  .s-hero .hp-rail { padding-inline: var(--s-4); }
}

/* ---------- phone ---------- */
@media (max-width: 620px) {
  .s-hero {
    padding-top: calc(var(--nav-h) + var(--s-10));
    padding-bottom: var(--s-16);
  }
  .s-hero__lead { max-width: none; }
  .s-hero__actions .btn { width: 100%; }
  /* keeps the orange phrase alone on line 1 instead of orphaning «på» */
  .s-hero__keep { white-space: nowrap; }
  /* one claim per line — no interpunct can strand at a line end */
  .s-hero__micro { flex-direction: column; gap: var(--s-1); }
  .s-hero__micro span + span::before { content: none; }

  .s-hero__panel { border-radius: var(--r-xl); }

  .s-hero .hp-bar { padding-inline: var(--s-4); gap: var(--s-3); min-height: var(--s-12); }
  .s-hero .hp-bar__dots { display: none; }
  .s-hero .hp-bar__crumbs { margin-left: 0; }
  .s-hero .hp-bar__toggle { display: none; }
  .s-hero .hp-bar__crumb { font-size: var(--fs-small); }
  .s-hero .hp-tag { font-size: var(--fs-small); height: var(--s-7); letter-spacing: .01em; }

  /* on a phone the panel is just the plan: chrome, seven days, status */
  .s-hero .hp-rail { display: none; }

  .s-hero .hp-main__head { display: block; padding-bottom: var(--s-3); }
  .s-hero .hp-main__sub { margin-top: 2px; font-size: var(--fs-small); white-space: normal; }

  /* four rows still carry all three states and cut ~450px of scroll */
  .s-hero .hp-row:nth-child(n+5) { display: none; }
  .s-hero .hp-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--s-1) var(--s-3);
    padding: var(--s-3) var(--s-4);
  }
  .s-hero .hp-when { grid-column: 1; grid-row: 1; }
  .s-hero .hp-num,
  .s-hero .hp-day { font-size: var(--fs-small); }
  .s-hero .hp-status { grid-column: 2; grid-row: 1; justify-self: end; }
  .s-hero .hp-status .badge { height: var(--s-7); font-size: var(--fs-small); }
  .s-hero .hp-cell { grid-column: 1 / -1; grid-row: 2; gap: 2px; }
  .s-hero .hp-art { white-space: normal; font-size: var(--fs-small); }
  .s-hero .hp-kw { font-size: var(--fs-small); }

  .s-hero .hp-foot {
    padding: var(--s-4);
    gap: var(--s-3);
    flex-direction: column;
    align-items: flex-start;
  }
  .s-hero .hp-foot__item { font-size: var(--fs-small); }
}