/* Shared sticky-nav scrollytelling case-study template —
   Molnia, LiveVoice, kathTreff. RANDOM uses gallery.css instead. */

/* title + description start at the same 30px as the sidebar nav below
   ("Context"), and the info table keeps the same 30px on the right */
.overview { padding: 60px 30px 70px; }
.overview h1 { max-width: 580px; font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif; font-size: 64px; font-weight: 400; line-height: 1; margin: 0 0 18px; letter-spacing: -0.02em; }
.overview-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.overview .tagline { flex: 1 1 420px; max-width: 580px; font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif; text-transform: none; font-size: 16px; line-height: 1.5; letter-spacing: -0.02em; color: var(--ink); margin: 0; }
/* auto width — sized to whatever it actually contains (links column +
   20px gap + the fixed-width info table), so the visual gap between
   the link and the info box stays a true 20px regardless of how long
   or short that page's link text is. A fixed width here previously
   left dead space inside the links column on pages with short link
   text (e.g. RANDOM's "BEHANCE ↗"), making the *visual* gap look much
   bigger than 20px even though the two boxes' own gap was correct. */
.overview-side { display: flex; align-items: flex-start; gap: 30px; flex: none; width: auto; max-width: 100%; }
.overview-links { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; flex: none; }
/* nowrap — a wrapped link's centered link-flip text would sit visually
   lower than a single line, reading as "not top-aligned" with the
   info box next to it even though the containers themselves are */
.overview-link { font-size: 12px; letter-spacing: 0.3px; color: var(--ink); white-space: nowrap; }
/* label + value in two grid columns: the label column is as wide as the widest
   label of the language in use ("UNTERNEHMEN" is longer than "COMPANY"), so
   the values always line up and never run into the labels */
.overview-meta { flex: none; width: 301px; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 14px; align-items: baseline; }
.overview .meta-row { display: contents; font-size: 12px; }
.overview .meta-label { font-size: 12px; white-space: nowrap; color: var(--muted); letter-spacing: 0.5px; }
.overview .meta-value { font-size: 12px; color: var(--ink); }

.hero-banner { width: 100%; height: 100vh; overflow: hidden; }
.hero-banner picture { display: block; width: 100%; height: 100%; }
.hero-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* left padding only — the right column's images run edge to edge to
   the right border instead of leaving a matching gap there */
.grid { position: relative; display: flex; gap: 50px; padding: 100px 0 140px 30px; z-index: 2; }

/* nav + text share one sticky sidebar, kept to roughly a third of the
   content width so the visuals on the right get the other two thirds
   at any screen size — not a fixed px width, which on a wide screen
   would leave the sidebar a shrinking sliver of the layout — and close
   together within it, since the active label and its copy are one
   unit, not two. Sits flush at the grid's own 30px left padding — no
   extra margin pushing it further in. */
.sidebar { width: 33%; min-width: 260px; flex: none; display: flex; gap: 14px; position: sticky; top: 84px; align-self: flex-start; }

.nav-col { width: 100px; flex: none; display: flex; flex-direction: column; gap: 10px; }
.text-col { flex: 1; min-width: 0; }
.text-col .text-copy { display: none; }
.text-col .text-copy.active { display: block; }

.nav-item { display: block; font-size: 12px; letter-spacing: 0.5px; color: var(--muted); transition: color .1s steps(1); }
.nav-item:hover { color: var(--ink); }
.nav-item.active { color: var(--ink); }
.text-copy { font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif; text-transform: none; font-size: 16px; line-height: 1.5; letter-spacing: -0.02em; color: var(--ink); }
.text-copy p { margin: 0 0 16px; }
.text-copy p:last-child { margin-bottom: 0; }
.text-copy ul { margin: 10px 0 0; padding-left: 18px; }
.text-copy li { margin-bottom: 6px; }
.text-copy p > .inline-link:first-child { margin-right: 6px; }
.text-copy .inline-link {
  display: inline-block;
  font-family: 'B612 Mono', ui-monospace, monospace;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.3px;
  color: var(--ink);
  margin: 4px 0;
}
.status-note {
  font-family: 'B612 Mono', ui-monospace, monospace;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.3px;
  color: var(--accent);
  margin-top: 10px;
}

.img-col { flex: 1; display: flex; flex-direction: column; gap: 0; min-width: 0; }
.cs-section { min-height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; scroll-snap-align: start; }
.cs-section.tall { display: block; min-height: 0; }
.cs-section.tall .frame { height: auto; overflow: visible; display: block; }
.cs-section.tall .frame img { width: 100%; max-width: 100%; height: auto; max-height: none; display: block; }
.frame { width: 100%; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 20px; }
.frame img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.frame.two-up img { max-width: calc(50% - 10px); }

/* ---- desktop layout: three equal columns ----
   Column 1: title + description, then the sticky nav + its text.
   Columns 2-3: pictures (spanning both) — or, in rows without a
   picture, the text split into two columns. The info table and links
   sit in column 3 of the overview. All of it is the same geometry: 30px
   page gutters, --cs-gap between columns, column width
   c = (viewport - 60px - 2 * gap) / 3. The grid below has no right
   padding (pictures bleed to the edge), hence its 100% - 30px. */
:root { --cs-gap: 30px; }
@media (min-width: 768px) {
  .overview h1 { max-width: none; }
  .overview-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--cs-gap);
    align-items: start;
  }
  .overview .tagline { grid-column: 1; flex: none; max-width: none; }
  .overview-side {
    grid-column: 3;
    flex-direction: column-reverse;   /* table first, links under it */
    gap: 20px;
    width: 100%;
  }
  .overview-meta { width: 100%; max-width: 301px; }

  .grid { gap: var(--cs-gap); }
  .sidebar { width: calc((100% - 30px - 2 * var(--cs-gap)) / 3); min-width: 0; }
}

/* picture-less rows (js/text-only-rows.js): the copy leaves the sidebar
   column and takes columns 2 and 3 — where the picture would be —
   split into two equal columns. Pinned at the same 84px as the sidebar
   nav so its top edge stays level with "Context", with extra room
   underneath so it never runs up against the next picture. */
@media (min-width: 768px) {
  .text-copy.is-textonly { display: none !important; }
  .cs-section.is-textonly {
    justify-content: flex-start;
    align-items: flex-start;
    padding-bottom: clamp(100px, 18vh, 220px);
  }
  /* same room above when the row follows a picture (the very first row
     already sits below the overview) */
  .cs-section.is-textonly:not(:first-child) { padding-top: clamp(100px, 18vh, 220px); }
  .cs-section.is-textonly .text-cols {
    flex: none;
    width: calc(100% - 30px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--cs-gap);
    align-items: start;
    position: sticky;
    top: 84px;
  }
  /* one animation for every piece of case-study copy: the outgoing text
     disappears at once and the incoming text fades in a beat later
     (0.2s delay, 0.25s fade) — the sidebar text and the picture-less
     columns share the exact same timing, so they never sit on screen
     together and always behave alike. Both are shown/hidden with
     display, which restarts the animation each time they come back. */
  .text-col .text-copy.active,
  .cs-section.is-textonly .text-cols { animation: cs-text-in .25s ease .2s both; }
  .cs-section.is-textonly.is-inactive .text-cols { display: none; }
  .cs-section.is-textonly .text-cols p { margin: 0; }
  .cs-section.is-textonly .text-cols ul { margin: 0; }
}

@keyframes cs-text-in { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 767px) {
  /* the overview is one full viewport tall — headline+description at
     the top, link+info table pinned to the bottom, same pattern as
     mobile-landing's hero (topbar/photo top, bio+links bottom) */
  .overview { padding: 32px 24px 40px; display: flex; flex-direction: column; }
  .overview h1 { font-size: 40px; }
  /* header still fills the full viewport (.overview keeps
     min-height:100vh below, so the hero banner stays off-screen until
     scrolled to) but the link/info table now sits 20px under the
     headline+description instead of being pushed to the very bottom */
  .overview-row { flex: none; display: flex; flex-direction: column; gap: 20px; }
  /* .tagline's flex:1 1 420px sets a 420px basis meant as a WIDTH on
     desktop's row layout — flipping to flex-direction:column here
     flips that basis to HEIGHT instead, forcing the tagline to a
     420px-tall box regardless of its actual text length */
  .overview .tagline { flex: none; }
  /* link and info table stack vertically on mobile instead of
     competing for a 375px-wide row — they used fixed pixel widths
     (190px + 301px) meant for desktop, which forced the row wider than
     the screen and made the whole page scroll horizontally to reach it */
  .overview-side { width: 100%; flex-direction: column-reverse; gap: 20px; }
  .overview-links, .overview-meta { width: 100%; }
  .hero-banner { height: 60vh; padding: 0 24px; box-sizing: border-box; }

  /* mobile drops the sticky split-screen entirely for a plain stacked
     flow — the whole .grid (including the sidebar's own text-col,
     which would otherwise sit on top of .mobile-sections showing a
     frozen duplicate of the first row's text, since nothing scrolls
     it) is hidden in favor of .mobile-sections below */
  .grid { display: none; }

  .mobile-sections { display: flex; flex-direction: column; padding: 32px 24px 60px; }
  .mobile-section { margin-bottom: 48px; }
  .mobile-section:last-child { margin-bottom: 0; }
  .mobile-section-label { font-size: 12px; letter-spacing: 0.5px; color: var(--muted); margin-bottom: 14px; }
  .mobile-section .frame { position: static; height: auto; display: block; }
  .mobile-section img { width: 100%; height: auto; margin-bottom: 0; display: block; }
  .mobile-section .frame { margin-top: 24px; }
  .mobile-section .frame img { margin-bottom: 0; }
  .mobile-section .text-copy { margin: 0 0 24px; }
  .mobile-section .text-copy:last-child { margin-bottom: 0; }
}
@media (min-width: 768px) {
  .mobile-sections { display: none; }
}