/* ==========================================================================
   Gallery — the picture wall at the foot of the front page.

   Not a section about any one project or role: everything is mixed on one
   masonry wall, and what each picture is shows only on hover, as the
   project and what kind of work it was. The case pages tell stories; this
   is the wall of things made.

   The order is set in the markup: each project's tiles are spread evenly
   over the run, so no two neighbours share a project. The first tile,
   Saro Robotics' cover, is there on purpose: it was pulled to the top of
   the left column by hand.
   ========================================================================== */

.gallery {
  /* same tokens, read off <body>, so the section follows the LYS/MØRK
     toggle rather than being fixed to light */
  --gallery-paper: var(--token-520d2e3b-0e8d-44c4-9def-6dead0a14a09, #e6e6ea);
  --gallery-card: var(--token-efe52457-0798-421a-a43d-7626270e2f62, #f4f4f6);
  --gallery-border: var(--token-b0e8a66a-44db-44c4-a7ba-ed8a67dcacad, #e4e4f1);
  --gallery-border-soft: var(--token-6c6119a4-5ee9-4e38-94a2-c60081d8bafe, #dadae7);
  --gallery-muted: var(--token-b819ff3b-80ad-45f2-8389-6a403046bb14, #656572);
  --gallery-ink: var(--token-43464fc0-8f12-4214-bfdd-fa0c6aa29267, #141415);
  --gallery-font-body: 'Inter Display', 'Inter Display Placeholder', sans-serif;
  /* the gap between wall tiles, and the only spacing unit in here */
  --gallery-gap: 16px;
  position: relative;
  /* The opening gap is kept short on purpose. It used to be the case
     pages' 96/176px, and below the about cards that read as the end of the
     page: nothing on screen said there was more to scroll to. */
  /* no side padding: #main already has its gutter, and the wall should
     line up with the project cards and the about cards above it */
  padding: 48px 0 120px;
  background: var(--gallery-paper);
  /* #main centres its children, so without a width the section shrinks
     to its content and sits a few pixels in from the cards above */
  width: 100%;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

@media (min-width: 810px) {
  .gallery {
    padding-top: 72px;
  }
}

@media (max-width: 640px) {
  .gallery {
    padding-bottom: 88px;
  }
}

/* ---------- what opens the section ----------

   One heading, ranged left. No eyebrow chip over it: the site dropped
   those. It takes the scale .summary-heading and .pitch-intro-line use,
   32px stepping to 40px at Framer's 810px breakpoint. Keep them in step by
   hand if any of them changes. */
.gallery-intro {
  margin: 0 auto;
  padding: 0 0 48px;
  text-align: left;
}

.gallery-intro-line {
  margin: 0;
  font-family: var(--gallery-font-body);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.15em;
  letter-spacing: -0.01em;
  color: var(--gallery-ink);
}

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

/* ---------- the wall ----------

   CSS columns rather than grid. The pictures come in five different
   aspect ratios — 16:9 slides, 4:3 photos, 9:16 stories, square Instagram
   posts, the wide 1.63:1 illustrations — and a grid would either crop them
   to one shape or leave ragged holes under the short ones. Columns let
   every picture keep its own proportions and still leave no gaps, which is
   the whole argument for a masonry wall here.

   What it costs is reading order: columns fill top to bottom, so the eye
   goes down column one before it reaches column two. That is fine for a
   wall that is mixed on purpose and not sequenced — nothing here is a step
   in anything — and the lightbox walks the pictures in DOM order
   regardless, so the one place order does matter is unaffected. */
.gallery-grid {
  column-count: 2;
  column-gap: var(--gallery-gap);
  margin: 0 auto;
}

@media (min-width: 810px) {
  .gallery-grid {
    column-count: 3;
  }
}

@media (min-width: 1200px) {
  .gallery-grid {
    column-count: 4;
  }
}

/* A button, not a figure with an onclick: the whole tile opens the
   lightbox, so it has to be the thing the keyboard tabs to and Enter
   activates. Everything below the first two lines is undoing what a
   browser does to a <button> by default. */
.gallery-item {
  display: block;
  position: relative;
  /* `inline-block` is what columns need to not split a tile across the
     column break; `break-inside: avoid` alone is not honoured everywhere */
  width: 100%;
  margin: 0 0 var(--gallery-gap);
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: zoom-in;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

.gallery-item img {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  border-radius: 16px;
  /* the same 1px border every other image on the site carries */
  border: 1px solid var(--gallery-border);
  background: var(--gallery-card);
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.gallery-item:hover img,
.gallery-item:focus-visible img {
  transform: scale(1.012);
}

.gallery-item:focus-visible {
  outline: 2px solid var(--gallery-ink);
  outline-offset: 3px;
  border-radius: 18px;
}

/* ---------- what the picture is ----------

   Two lines over the bottom-left corner, shown on hover or keyboard focus:
   the project, and under it what kind of work it was (grafisk profil,
   nettside, illustrasjon, markedsføring …). The wall is mixed,
   so without this there is no telling where one job ends and the next
   begins. It is a chip rather than plain text because it lands on
   whatever the photo has in that corner, a white studio wall in one tile
   and a black sign in the next, and has to stay readable on both. */
.gallery-item__label {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  max-width: calc(100% - 24px);
  box-sizing: border-box;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--gallery-border-soft);
  background: var(--gallery-paper);
  font-family: var(--gallery-font-body);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
  pointer-events: none;
}

.gallery-item__project {
  font-size: 14px;
  color: var(--gallery-ink);
}

.gallery-item__type {
  font-size: 12px;
  color: var(--gallery-muted);
}

.gallery-item:hover .gallery-item__label,
.gallery-item:focus-visible .gallery-item__label {
  opacity: 1;
  transform: none;
}

/* A phone never fires hover, and a tap opens the lightbox instead of
   revealing anything, so on touch the label would be unreachable. Kept
   visible there it covered a corner of every picture on the wall, so on
   touch there is no label: the wall is just the pictures. */
@media (hover: none) {
  .gallery-item__label {
    display: none;
  }
}

/* ---------- the lightbox ----------

   Several of these pictures are A4 pages and presentation slides with type
   on them: a 300px-wide tile shows that something was designed, not what
   it says. Opening one full-screen is the only way the wall works as a
   portfolio rather than as decoration.

   Hidden with the `hidden` attribute rather than a class, so the markup is
   inert and unreachable by tab before gallery.js ever runs. */
.gallery-lightbox[hidden] {
  display: none;
}

.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* dark in both themes, deliberately: the pictures are the only thing lit
     in here, and half of them are light-on-white brand sheets that need a
     dark surround to read as objects rather than as the page */
  background: rgba(10, 10, 12, 0.92);
  backdrop-filter: blur(6px);
  animation: gallery-fade 0.18s ease;
}

@keyframes gallery-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.gallery-lightbox img {
  display: block;
  /* leaves the arrows a lane of their own on either side, so a wide
     picture is never the thing they are drawn on top of */
  max-width: calc(100% - 128px);
  /* leaves room for the counter and the close button above and below */
  max-height: calc(100vh - 128px);
  width: auto;
  height: auto;
  border-radius: 8px;
  object-fit: contain;
}

/* The three controls share a look: a small square that only shows its
   surface when you are pointing at it. */
.gallery-lightbox button {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  /* dark rather than a white film: these sit at the edge of the picture,
     and a light control disappears the moment the picture behind it is
     light — which half of these brand sheets are */
  background: rgba(16, 16, 18, 0.66);
  color: #fff;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.gallery-lightbox button:hover,
.gallery-lightbox button:focus-visible {
  background: rgba(16, 16, 18, 0.88);
  border-color: rgba(255, 255, 255, 0.45);
}

.gallery-lightbox__close {
  top: 20px;
  right: 20px;
}

.gallery-lightbox__prev {
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.gallery-lightbox__next {
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.gallery-lightbox__count {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--gallery-font-body, sans-serif);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

/* Below the point where a 44px arrow either overlaps the picture or eats
   the margin it needs, the arrows go: swipe is not implemented, but tap
   through is — the picture itself advances to the next one. */
@media (max-width: 640px) {
  .gallery-lightbox {
    padding: 16px;
  }

  .gallery-lightbox__prev,
  .gallery-lightbox__next {
    display: none;
  }

  .gallery-lightbox img {
    /* the arrows are gone at this width, so the lane they had goes back
       to the picture */
    max-width: 100%;
    max-height: calc(100vh - 112px);
    cursor: e-resize;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-item img,
  .gallery-item__label {
    transition: none;
  }

  .gallery-item:hover img,
  .gallery-item:focus-visible img {
    transform: none;
  }

  .gallery-lightbox {
    animation: none;
  }
}