/* ==========================================================================
   Pitch section — editorial case-study layout referenced from
   bryce-jones.com/work/assembly-global: a normal-flowing content column
   of alternating text/image chapters. No scroll-jacking, no pinned hero
   box, no per-line highlight — just a page that reads top to bottom like
   the reference does.

   One rule governs the whole section: images never sit beside each other,
   only under each other. A chapter is its text in one column and all of
   its images stacked in the other, and the next chapter swaps the two
   sides. That gives every picture on the page the same width and the same
   two edges to line up against, and it is why there is no mosaic grid and
   no full-bleed frame here any more — both of those broke the alternation
   by putting images across the whole column instead of in one side of it.

   The reference also keeps a thin filmstrip of every image pinned along
   the left edge as a persistent map of the reel. That was built here and
   has since been removed; with it went pitch-section.js, whose only job
   was to track the scroll position and light up the matching thumbnail.
   No script is left: the chapter text used to hang in place while its
   images scrolled past (pitch-sticky.js), and that has gone too, so the
   text scrolls with the page like everything else.

   Shared by all project pages. Only the markup — blocks, images, captions
   — differs per page; this stylesheet is identical across all four.
   ========================================================================== */

.pitch {
  /* pull straight from the site's own theme tokens (set on <body>) so this
     section follows the LYS/MØRK toggle instead of being fixed to light */
  --pitch-paper: var(--token-520d2e3b-0e8d-44c4-9def-6dead0a14a09, #e6e6ea);
  --pitch-card: var(--token-efe52457-0798-421a-a43d-7626270e2f62, #f4f4f6);
  --pitch-border: var(--token-b0e8a66a-44db-44c4-a7ba-ed8a67dcacad, #e4e4f1);
  --pitch-border-soft: var(--token-6c6119a4-5ee9-4e38-94a2-c60081d8bafe, #dadae7);
  --pitch-muted: var(--token-b819ff3b-80ad-45f2-8389-6a403046bb14, #656572);
  --pitch-muted-soft: var(--token-a6b9dd68-a1cb-491e-bd6a-fb24b574eb34, #85858f);
  --pitch-ink: var(--token-43464fc0-8f12-4214-bfdd-fa0c6aa29267, #141415);
  --pitch-font-body: 'Inter Display', 'Inter Display Placeholder', sans-serif;
  position: relative;
  /* Horizontal padding matches the rest of the site's gutter exactly (24px
     at >=810px, 16px below — same breakpoint the rest of the page uses).
     The top padding is the gap that opens the section — and since the
     section carries no heading of its own, that gap is the only thing
     marking the boundary. It stays above the gap between chapters inside
     it (89/169px incl. the divider, see the rules below) so the start of
     the section still reads as a bigger break than the breaks within it:
     96px here, 176px from 810px up. */
  padding: 96px 16px 120px;
  background: var(--pitch-paper);
  color: var(--pitch-ink);
  font-family: var(--pitch-font-body);
  /* the rest of the page lives inside a div capped at max-width:1920px
     (centered) — this section is appended after that wrapper, outside it,
     so it needs the same cap explicitly or it stretches full viewport
     width on screens wider than 1920px */
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

@media (min-width: 810px) {
  .pitch {
    padding-top: 176px;
    padding-left: 24px;
    padding-right: 24px;
  }
}

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

/* The filmstrip that used to sit in a 76px column here is gone, so this is
   a single column now and .pitch-layout is only still in the markup to
   avoid rewriting four exported pages for one wrapper. */
.pitch-layout {
  display: block;
}

.pitch-content {
  min-width: 0;
}

/* ---------- Content blocks: alternating text / image ---------- */

.pitch-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  padding: 44px 0;
}

/* ---------- What follows the Oppsummering ----------

   Without a marker, the chapters just start, and a reader who has only
   read the summary above has no way of knowing whether the rest is more
   of the same or the whole thing. The heading names the shift, says how
   much is coming and how it is ordered.

   There was a "Dypdykk" eyebrow above it, matching .process-intro on the
   front page, which opened its section the same way. Both are gone: the
   heading under them already said what the word did. The section opening
   used to be centred with a .pitch-divider under it too, which made the
   boundary read as a rule drawn across the page rather than as the start
   of something — and it was the one section opening on the site that did
   not look like the others. That divider is gone from the markup as well;
   the ones between chapters stay.

   The heading takes .process-title's scale, 32px stepping to 40px at
   Framer's own 810px breakpoint — the same scale .summary-heading uses at
   the top of the page. Keep the three in step by hand if any changes.

   The wrapper is left in place around the one heading rather than folded
   into it, because it carries the padding that opens the section, and
   flex-start is what keeps the heading from being stretched to the
   column's full width — its 20ch measure needs the shrink-to-fit box. */
.pitch-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
}

/* The heading stands the same distance above its chapters as
   .summary-heading does above the summary's first entry at the top of the
   page: 64px from 810px up, 24px below it. The two are the same move — a
   section heading over the text it introduces — so they get the same gap,
   and reading down the page the second one no longer opens wider than the
   first.

   It is set on the chapter rather than under the heading because a chapter
   carries its own padding (44px, 84px from 810px up) and the two would
   add. .pitch-intro gives up the 40px it had, and the first chapter's top
   padding is replaced outright with the number the gap should be. Two
   classes, so this outranks .pitch-block's own padding wherever it sits in
   the file; the chapters after the first keep it. */
.pitch-intro + .pitch-block {
  padding-top: 24px;
}

@media (min-width: 810px) {
  .pitch-intro + .pitch-block {
    padding-top: 64px;
  }
}

.pitch-intro-line {
  margin: 0;
  /* Wide enough for "Hele sluttpresentasjonen." on one line. In em, not
     ch: ch is the width of the font's zero, which is narrow in Brown next
     to its letters, and a measure in ch left "Hele" on a line of its own.
     On phones the size comes down a little so the line still fits across
     the screen. */
  max-width: 13em;
  font-family: var(--pitch-font-body);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.15em;
  letter-spacing: -0.01em;
  color: var(--pitch-ink);
}

@media (min-width: 810px) {
  .pitch-intro-line {
    font-size: 40px;
  }
}

/* The intro is the first thing in the column now, so the chapter that
   follows the divider takes the ordinary between-chapter padding rather
   than the tightened top the old first chapter had. */

@media (min-width: 760px) {
  .pitch-block {
    grid-template-columns: 1fr 1fr;
    /* the section's one spacing unit: also the gap between two stacked
       images inside .pitch-block-media, so the space around an image is
       the same whichever side of it you measure */
    gap: 16px;
    align-items: start;
  }

  /* Same measure as the Oppsummering block at the top of the page: its
     text column is .framer-pk4hc6, capped at max-width:316px and centred
     in its panel by a parent with align-items:center. Copied here rather
     than referenced, because that class belongs to a Framer wrapper this
     section sits outside of.

     Centring is what leaves room on the side facing the image, so the
     24px of horizontal padding that used to do that job is gone; only
     the vertical half remains. Being centred, it needs no --reverse
     variant — both sides get the same slack either way. */
  .pitch-block-text {
    padding: 24px 0;
    max-width: 316px;
    margin-left: auto;
    margin-right: auto;
  }

  .pitch-block--reverse .pitch-block-media {
    order: 2;
  }

  .pitch-block--reverse .pitch-block-text {
    order: 1;
  }
}

/* A chapter's images stack here, one per row, at the same 16px rhythm the
   grid gap uses — so the vertical gap between two images in a column
   matches the horizontal gap between the text and the images beside it. */
.pitch-block-media {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-content: start;
}

.pitch-block-media img {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  border-radius: 16px;
  /* the same 1px border used on every image elsewhere on the site (the
     work-grid thumbnails on the homepage, etc.) */
  border: 1px solid var(--pitch-border);
  background: var(--pitch-card);
}

.pitch-block-label {
  /* exactly the Oppsummering section's h4 subheading style (e.g. "Hvordan
     kan politiet skape mer trygghet og tillit?") — no pill, no border.
     The 20px below matches that block's own heading-to-paragraph gap. */
  display: block;
  font-family: var(--pitch-font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4em;
  letter-spacing: 0;
  color: var(--pitch-ink);
  margin: 0 0 20px;
}

.pitch-block-text p {
  /* exactly the Oppsummering section's paragraph style: Inter Display
     16px, 1.6 line-height, muted color — not the ink/heading treatment.
     Spacing between paragraphs is carried entirely by the tick below, so
     the paragraph itself has no margin of its own. */
  font-family: var(--pitch-font-body);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--pitch-muted);
  margin: 0;
}

/* The 1x40px vertical tick that separates the Oppsummering's blocks —
   the site's own idiom, also used between the experience entries on the
   front page. There it is a real element (.framer-1c17w2b, "Line") sitting
   between two flex items with a 64px gap on both sides; here it is drawn
   as a pseudo-element on every paragraph after the first, so the four
   exported pages need no extra markup to carry it.

   The 64px margin above and below reproduces that flex gap exactly, and
   `auto` on the sides centres the tick in the column the same way the
   Oppsummering's align-items:center does. Colour is the same token: the
   soft border, not the stronger one. */
.pitch-block-text p + p::before {
  content: "";
  display: block;
  width: 1px;
  height: 40px;
  margin: 64px auto;
  background-color: var(--pitch-border-soft);
}

/* The gap between chapters is matched to the Overview section's own rhythm
   — the space it leaves between "Problem", "Løsning" and so on. That gap
   is 88px on narrow screens and 168px from 810px up, which is why the
   padding steps at the same breakpoint. The 1px divider sits in the middle
   of it, so each side carries half. */
@media (min-width: 810px) {
  .pitch-block {
    padding-top: 84px;
    padding-bottom: 84px;
  }
}

/* ---------- Divider between chapters: a 1px horizontal rule across the
   content column. This section did once use the site's 1x40px vertical
   tick instead (the idiom the front page's experience entries use), but a
   horizontal rule is what's wanted here — full-width stacked chapters
   read as separated by a line across them, not by a small centred mark.

   Being 1px, it costs nothing against the spacing budget: a break inside
   the section must not read as wider than the 96px gap that introduces
   the section, and 40 + 1 + 40 lands at 81px. ---------- */

.pitch-divider {
  width: 100%;
  height: 1px;
  margin: 0;
  background-color: var(--pitch-border-soft);
}

@media (max-width: 640px) {
  .pitch {
    /* no padding-top override here: the base 96px already clears the 89px
       between chapters at this width */
    padding-bottom: 88px;
  }
}

/* ---------- Footer ----------
   Moved to site-footer.css and renamed .site-footer: every page now ends
   on the same element, so the rules no longer belong to this stylesheet. */