/* ===========================================================
   Case-study pages (SunSaver, CatGym, FriendVerse, Busken) — shared content styling.
   Formerly sunsaver.css; every case page links this one file so the layout stays identical.
   Layout language borrowed from the "Modern Product Launch" Figma Sites template:
   white page, large section titles, small uppercase labels, columns and numbered
   lists separated by thin rules, big rounded image surfaces and lots of whitespace.
   The HTML/content is unchanged; only this stylesheet was reworked.

   Loaded alongside style.css, which still owns the shared header/curtain/footer — this
   file only styles what lives inside <main class="ss-case"> (plus the page background
   and the reading-progress bar).

   Custom properties are prefixed --ss- because style.css's own :root already defines
   --paper/--ink/--ease with DIFFERENT values for the header; reusing those names here
   would silently overwrite them everywhere. Same reasoning om-meg.css follows (--om-).

   Font: Inter throughout (Google Fonts, loaded in <head>).
   =========================================================== */

:root {
  --ss-bg:        #ffffff;  /* sidebakgrunn */
  --ss-surface:   #ffffff;  /* avrundede flater (mockups, bildeplassholdere) */
  --ss-ink:       #1c1a17;  /* overskrifter */
  --ss-body:      #4b4740;  /* brødtekst — mørk nok til å lese i 18px (kontrast ~9:1) */
  --ss-muted:     #6f6a60;  /* undertekst, bildetekst */
  --ss-label:     #8a6410;  /* små etiketter: mørk gull, leselig på hvitt */
  --ss-gold:      #d6a324;  /* "Saver" i tittelen, fremdriftslinje */
  --ss-rule:      rgba(28, 26, 23, 0.12);

  /* Everything is set in Inter, as the page was before the layout rework. --ss-serif /
     --ss-mono keep their role names so each rule still says which job it does. */
  --ss-sans:  Inter, Helvetica, Arial, sans-serif;
  --ss-serif: var(--ss-sans);
  --ss-mono:  var(--ss-sans);

  --ss-pad-x:    clamp(20px, 6vw, 88px);
  --ss-pad-y:    clamp(64px, 9vw, 128px);
  --ss-measure:  1120px;
  --ss-radius:   24px;
  --ss-ease:     cubic-bezier(0.2, 0.7, 0.2, 1);
}

body:has(.ss-case) {
  background: var(--ss-bg);
}

.ss-case {
  font-family: var(--ss-sans);
  font-size: 18px;
  line-height: 1.65;
  color: var(--ss-body);
  -webkit-font-smoothing: antialiased;
}

.ss-case a { color: var(--ss-ink); }
.ss-case a:hover { color: var(--ss-muted); }
.ss-case p { text-wrap: pretty; }
.ss-case strong { color: var(--ss-ink); font-weight: 600; }

/* ===== Lesefremdrift ===== */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  background: transparent;
  z-index: 200;
}

.progress__bar {
  height: 100%;
  width: 0%;
  background: var(--ss-gold);
}

/* ===== Seksjoner =====
   Whitespace separates sections (as in the template), not background bands or borders. */
.ss-case .section { padding: var(--ss-pad-y) var(--ss-pad-x); }
.ss-case .section + .section { padding-top: 0; }

.ss-case .section__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ss-case .section__title {
  font-family: var(--ss-serif);
  font-size: clamp(34px, 4.2vw, 52px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ss-ink);
}

.ss-case .section__sub {
  font-size: 18px;
  color: var(--ss-muted);
}

/* ===== Layout-primitiver ===== */
.ss-case .stack {
  max-width: var(--ss-measure);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 64px);
}

.ss-case .stack--wide { gap: clamp(64px, 8vw, 104px); }

.ss-case .split {
  max-width: var(--ss-measure);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
}

.ss-case .split__aside {
  grid-column: span 4;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ss-case .split__body {
  grid-column: 6 / span 7;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Feature-row: each column sits under its own thin rule, like the template's benefits row. */
.ss-case .cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(28px, 4vw, 48px);
}


.ss-case .col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--ss-rule);
}

.ss-case .col p {
  font-size: 17px;
  line-height: 1.65;
}

.ss-case .col__title {
  font-family: var(--ss-serif);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ss-ink);
}

.ss-case .col__title--lg { font-size: clamp(22px, 2.2vw, 26px); }

/* ===== Typografiske roller ===== */
.ss-case .kicker,
.ss-case .eyebrow,
.ss-case .label {
  font-family: var(--ss-mono);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ss-label);
}

.ss-case .lead {
  font-family: var(--ss-serif);
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  max-width: 26ch;
  color: var(--ss-ink);
}

.ss-case .pull {
  font-family: var(--ss-serif);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  max-width: 28ch;
  color: var(--ss-ink);
}

/* ===== 1. Intro — centered serif title over a rounded mockup surface ===== */
.ss-hero-section {
  padding: clamp(56px, 8vw, 104px) var(--ss-pad-x) var(--ss-pad-y);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 5vw, 64px);
}

.ss-hero-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.ss-hero-title {
  font-family: var(--ss-serif);
  font-size: clamp(3.5rem, 11vw, 9rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

.ss-hero-title__a { color: var(--ss-ink); }
.ss-hero-title__b { color: var(--ss-gold); }

.ss-phones {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  max-width: var(--ss-measure);
  padding: clamp(40px, 6vw, 72px) 16px;
  background: var(--ss-surface);
  border-radius: var(--ss-radius);
  overflow: hidden;
}

.ss-phone {
  width: clamp(120px, 17vw, 220px);
  height: auto;
  display: block;
  filter: drop-shadow(0 20px 40px rgba(28, 26, 23, 0.14));
}

.ss-phone--side {
  position: relative;
  z-index: 1;
  margin-bottom: 4%;
}

.ss-phone--main {
  width: clamp(140px, 20vw, 250px);
  z-index: 2;
  margin: 0 -4%;
}

/* Hero variant with a single image (CatGym, FriendVerse) instead of the phone trio. */
.ss-hero-media {
  width: 100%;
  max-width: var(--ss-measure);
}

.ss-hero-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--ss-radius);
}

/* Placeholder hero for a project that has no visuals yet (Busken). */
.ss-hero-media--empty {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--ss-rule);
  border-radius: var(--ss-radius);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ss-muted);
}

/* ===== Bildeplassholdere =====
   Bytt ut med <img> eller <video> — behold .block for ramme/format. */
.ss-case .block {
  background: var(--ss-surface);
  border-radius: var(--ss-radius);
  border: 1px solid var(--ss-rule); /* keeps empty placeholders visible on the white page */
  display: flex;
  align-items: flex-end;
  padding: 20px;
  transition: transform 0.5s var(--ss-ease);
  overflow: hidden;
}

.ss-case .block img,
.ss-case .block video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ss-case .block__caption {
  font-family: var(--ss-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ss-muted);
}

.ss-case .block--1x1  { aspect-ratio: 1 / 1; }
.ss-case .block--4x3  { aspect-ratio: 4 / 3; }
.ss-case .block--4x5  { aspect-ratio: 4 / 5; }
.ss-case .block--16x9 { aspect-ratio: 16 / 9; width: 100%; }

/* Real images: the frame follows the picture's own shape (never cropped) — no
   placeholder border, padding or fixed aspect ratio. */
.ss-case .block--img {
  aspect-ratio: auto;
  padding: 0;
  border: none;
  background: none;
  display: block;
}

.ss-case .block--img img {
  height: auto;
  object-fit: contain;
  border-radius: var(--ss-radius);
  border: 1px solid var(--ss-rule);
}

/* Full-width image row under a case's text (Prototyping: 3-screen + 2-screen shots).
   Columns sized 787:527 — the two images' own widths — so every phone screen in the
   row ends up the same size. */
.ss-case .case__media {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 787fr 527fr;
  gap: 24px;
  align-items: start;
}

@media (max-width: 700px) {
  .ss-case .case__media { grid-template-columns: 1fr; }
}

/* On desktop the zigzag rules pin aside/body to row 1, so the image row goes to row 2. */
@media (min-width: 901px) {
  .ss-case .case__media { grid-row: 2; }
}

/* Two images side by side (team photo + timeline); stacks on narrow screens. */
.ss-case .media-pair {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 24px;
  align-items: center;
}

@media (max-width: 700px) {
  .ss-case .media-pair { grid-template-columns: 1fr; }
}

/* Full-width images (timeline, user flow), kept to a comfortable size. */
.ss-case .block--wide {
  max-width: 880px;
  width: 100%;
  margin: 0 auto;
}

/* ===== 4. Designprosess =====
   Each case: label + title + image on the left, the story as one paragraph on the right. */
.ss-case .case {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px;
  /* Center the story vertically against the (much taller) image column, so the
     paragraph doesn't sit at the top with a big empty area beneath it. */
  align-items: center;
}

.ss-case .case__aside {
  grid-column: span 5;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ss-case .case__aside .block { margin-top: 12px; }

.ss-case .case__title {
  font-family: var(--ss-serif);
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ss-ink);
}

.ss-case .case__body {
  grid-column: 7 / span 6;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Zigzag: every second case puts its image on the right and the story on the left,
   so the media isn't stacked down one side of the page. Desktop only — on narrow
   screens everything stacks (see the 900px breakpoint below). */
@media (min-width: 901px) {
  .ss-case .case:nth-of-type(even) .case__aside {
    grid-column: 8 / span 5;
    grid-row: 1;
  }

  .ss-case .case:nth-of-type(even) .case__body {
    grid-column: 1 / span 6;
    grid-row: 1;
  }
}

/* Running text for the case stories and Læring: one connected paragraph, set larger
   than the column text so it reads comfortably. */
.ss-case .prose {
  font-size: clamp(18px, 1.5vw, 20px);
  line-height: 1.75;
  max-width: 58ch;
}

/* Utfordringer: stacked items (label + title + paragraph) instead of columns. */
.ss-case .prose-list {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4vw, 48px);
  max-width: 62ch;
}

.ss-case .prose-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ===== 5. Ferdig produkt — portrait demo video beside the flow description ===== */
.ss-case .product {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px;
  align-items: center;
}

.ss-case .product__video {
  grid-column: 2 / span 4;
  margin: 0;
}

.ss-case .product__video video {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  margin: 0 auto;
  border-radius: 28px;
  border: 1px solid var(--ss-rule);
  box-shadow: 0 24px 48px rgba(28, 26, 23, 0.12);
  background: var(--ss-surface);
}

.ss-case .product .prose {
  grid-column: 7 / span 6;
}

@media (max-width: 900px) {
  .ss-case .product__video,
  .ss-case .product .prose { grid-column: 1 / -1; }
  .ss-case .product__video video { max-width: 280px; }
}

/* ===== 6. Resultat — big display numbers, like the template's 01 / 02 / 03 row ===== */
.ss-case .stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 32px;
}

.ss-case .stat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--ss-rule);
}

.ss-case .stat__value {
  font-family: var(--ss-serif);
  font-size: clamp(44px, 5vw, 64px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ss-ink);
}

.ss-case .stat__label {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ss-muted);
}

/* ===== Forrige / neste — pill buttons ===== */
.ss-case .case-nav {
  max-width: var(--ss-measure);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
}

.ss-case .btn {
  border-radius: 999px;
  padding: 12px 22px;
  font-size: 15px;
}

/* ===== Animasjon =====
   .is-hidden settes av case.js — uten JS vises alt normalt. */
.ss-case [data-reveal].is-hidden {
  opacity: 0;
  transform: translateY(18px);
}

.ss-case [data-reveal] {
  transition: opacity 0.7s var(--ss-ease), transform 0.7s var(--ss-ease);
}

.ss-case [data-lift]:hover { transform: translateY(-6px); }

@media (prefers-reduced-motion: reduce) {
  .ss-case [data-reveal],
  .ss-case [data-reveal].is-hidden {
    opacity: 1 !important;
    transform: none !important;
    transition: none;
  }
  .ss-case [data-lift]:hover { transform: none; }
}

/* ===== Responsiv ===== */
@media (max-width: 900px) {
  .ss-case .case__aside,
  .ss-case .case__body,
  .ss-case .split__aside,
  .ss-case .split__body {
    grid-column: 1 / -1;
  }

  .ss-case .case,
  .ss-case .split { gap: 24px; }
}

@media (max-width: 600px) {
  .ss-case { font-size: 17px; }
  .ss-case .col p { font-size: 17px; }

  /* Three phones side by side have to shrink with the screen to fit the surface. */
  .ss-phones { padding: 32px 12px; }
  .ss-phone { width: 27vw; }
  .ss-phone--main { width: 32vw; }
}