/* RANDOM's page: a visual-identity showcase, not a process-driven
   redesign — no sticky nav, just the overview header then every image
   full viewport width, stacked with zero gap. */

.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; }
.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; }
.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 img { width: 100%; height: 100%; object-fit: cover; display: block; }

.gallery { position: relative; z-index: 2; display: flex; flex-direction: column; }
.gallery-frame { width: 100%; display: block; }
.gallery-frame img,
.gallery-frame video { width: 100%; height: auto; display: block; }

/* desktop: same three-column overview as the other case studies —
   title + description in column 1, info table + links in column 3 */
: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; gap: 20px; width: 100%; }
  .overview-meta { width: 100%; max-width: 301px; }
}

@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; }
  .overview-row { flex: none; display: flex; flex-direction: column; gap: 20px; }
  .overview .tagline { flex: none; }
  .overview-side { width: 100%; flex-direction: column-reverse; gap: 20px; }
  .overview-links, .overview-meta { width: 100%; }
  .gallery-frame { padding: 0 24px; box-sizing: border-box; }
  .hero-banner { height: 60vh; padding: 0 24px; box-sizing: border-box; }
}