/* =============================================================================
   Barba page transitions

   Loaded after martynas-auz.webflow.css so it survives a Webflow re-export.
   ========================================================================== */

/* Full-screen overlay the DrawSVG stroke is painted into. It lives outside the
   Barba container so it persists across page swaps. */
.transition {
  z-index: 2000;
  pointer-events: none;
  position: fixed;
  inset: 0;
  overflow: hidden;
  overflow: clip;
}

.transition__shape {
  /* Stroke colour — the path draws with `stroke="currentColor"`. Not the brand
     green: that is the hero's own background, so the wipe would be invisible
     leaving the home page. */
  color: #131313;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* Oversized and offset so the thickening stroke covers the viewport corners. */
.transition__svg {
  width: 130%;
  height: 130%;
  position: absolute;
  top: -15%;
  left: -15%;
}

/* `.body` is a centred flex column and every page section used to be a direct
   child of it. The Barba container now sits in between, so it repeats the same
   flex context to keep the layout identical. */
main[data-barba="container"] {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  display: flex;
}

/* =============================================================================
   Gallery masonry — murals + paintings

   The Webflow export lays the gallery out as a wrapping flex row, so every row
   is as tall as its tallest image and the shorter ones leave dead space
   underneath. `.is-masonry` — added by initMasonryGrids() in js/site.js once it
   can measure the items — swaps in a grid built on a 1px row raster: each item
   is given a row span matching its own height, which packs the columns
   Pinterest-style. DOM order is untouched, so the lightbox's trigger-to-slide
   index mapping still lines up. With JS off, the flex fallback stays as-is.
   ========================================================================== */

.gallery-grid-2.is-masonry {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* JS spans each item across as many of these rows as it is tall. */
  grid-auto-rows: 1px;
  /* The row gutter is the items' margin-bottom instead, so the span maths does
     not have to divide the gap out of a fractional number of rows. */
  row-gap: 0;
  align-items: start;
  display: grid;
}

.gallery-grid-2.is-masonry > .gallery-grid__item-2 {
  /* The flex percentage would shrink the item inside its own grid column. */
  width: auto;
  margin-bottom: 2px;
}

@media screen and (max-width: 767px) {
  .gallery-grid-2.is-masonry {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 479px) {
  .gallery-grid-2.is-masonry > .gallery-grid__item-2 {
    margin-bottom: .5em;
  }
}

/* The gallery images carry width/height attributes so their aspect ratio is
   reserved before they load — masonry needs the real height as early as it can
   get it. Without this the height attribute would win and squash them. */
.gallery-item__img-2 {
  height: auto;
}

/* =============================================================================
   Gallery lightbox stacking

   The lightbox exports at z-index 100, which leaves the centered navigation
   (z-index 500, and the only place the burger shows below 992px) painting on
   top of the darkened overlay. Lift the lightbox over the nav, but keep it
   under the page transition overlay (z-index 2000) so the wipe still covers it.
   ========================================================================== */

.lightbox-wrap {
  z-index: 1000;
}