/* ---------- Galerija page ---------- */
/* Reuses tokens and utilities from styles.css. Mobile-first.
   Layout reproduces Sketch exact positions via absolute positioning
   inside aspect-ratio containers. Coords from figma-cache/galerija-{mobile,desktop}.json. */

.site-header { color: var(--color-fg); }

/* Mobile flow defaults (kept simple — matches Sketch mobile approximately). */
.gallery-page {
  padding-top: calc(var(--space-9) + var(--space-7));
}

.gallery-page__intro {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-7);
}

.gallery-page__title { margin: 0; }

.gallery-page__count {
  font-size: var(--fs-md);
  letter-spacing: -0.04em;
  color: var(--color-fg-muted);
}

/* ---------- Desktop: pixel-match Sketch (1440 art) ---------- */
/* Container is 1440px (matches Sketch artboard width exactly). Heading and
   count are absolutely positioned at their Sketch coords. Grid is pushed down
   so its first item lands at design y=424. Compare overlay also renders at
   natural 1440 width so HTML and overlay align edge-to-edge. */
@media (min-width: 1024px) {
  .gallery-page {
    max-width: 1440px;
    margin-inline: auto;
    /* top: 424px to push grid to design y=424.
       bottom: 147px gap before footer (Sketch grid ends y=4080, footer y=4227). */
    padding: 424px 0 147px;
    position: relative;
  }
  .gallery-page__intro {
    position: absolute;
    top: 314px;
    left: 0;
    right: 0;
    height: 110px;
    margin: 0;
    display: block;
  }
  /* Sketch text props (from attributedString.attributes):
       font-size 130, line-height 110, kerning -13, font Inter-Regular.
       Both elements have a 647x110 frame; "(24)" is right-aligned inside
       its frame (x=770→x=1417), so the visible "(24)" sits flush at x≈1417. */
  .gallery-page__title,
  .gallery-page__count {
    position: absolute;
    top: 0;
    width: 647px;
    height: 110px;
    margin: 0;
    font-size: 130px;
    line-height: 110px;
    letter-spacing: -13px;
    color: var(--color-fg);
    font-weight: 400;
  }
  .gallery-page__title {
    left: 8px;
    text-align: left;
    text-transform: uppercase;
  }
  .gallery-page__count {
    left: 770px;
    text-align: right;
  }
}

/* ---------- Editorial scatter grid (absolute positioning) ----------
   Mobile origin: artboard y=55, total grid height 3390 (y=55 → y=3445).
   Sketch artboard 375 wide.
   Items are positioned with --x/--y/--w/--h CSS vars (percentages of container). */
.gallery-page__grid {
  position: relative;
  aspect-ratio: 375 / 3445;
}

.gallery-page__item {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  margin: 0;
  overflow: hidden;
  background: #ddd;
}

.gallery-page__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

/* Locomotive parallax headroom: when the figure has data-scroll-speed, the
   inner image must be taller than the figure so Locomotive's translateY
   doesn't expose gaps at the top/bottom edges. Speeds set per-item in HTML;
   speed varies 1–3 to give the editorial scatter visual rhythm. */
.gallery-page__item[data-scroll-speed] img {
  height: 180%;
  margin-top: -40%;
}

.gallery-page__item:hover img { transform: scale(1.03); }

/* Mobile positions (375 wide, 3390 tall, origin y=55).
   Sketch coords (x, y_sketch, w, h) →
     %x = x/375, %y = (y-55)/3390, %w = w/375, %h = h/3390 */
.gallery-page__item--p1 { --x:  4.00%; --y:  0.00%; --w: 44.00%; --h:  5.93%; } /* 15/55  165x201 */
.gallery-page__item--p2 { --x: 35.73%; --y:  9.09%; --w: 60.27%; --h:  4.93%; } /* 134/363 226x167 */
.gallery-page__item--p3 { --x:  4.00%; --y: 15.25%; --w: 60.00%; --h:  9.59%; } /* 15/572 225x325 */
.gallery-page__item--p4 { --x: 20.00%; --y: 26.46%; --w: 76.00%; --h:  6.23%; } /* 75/952 285x211 */
.gallery-page__item--booking
                        { --x:  4.00%; --y: 35.55%; --w: 92.00%; --h: 11.80%; } /* 15/1260 345x400 */
.gallery-page__item--p5 { --x: 36.00%; --y: 48.67%; --w: 44.00%; --h:  8.53%; } /* 135/1705 165x289 */
.gallery-page__item--p6 { --x:  4.00%; --y: 58.06%; --w: 60.00%; --h:  9.00%; } /* 15/2023 225x305 */
.gallery-page__item--p7 { --x: 20.00%; --y: 71.49%; --w: 76.00%; --h:  9.32%; } /* 75/2478 285x316 */
.gallery-page__item--p8 { --x:  4.00%; --y: 85.22%; --w: 70.67%; --h:  5.81%; } /* 15/2944 265x197 */
.gallery-page__item--p9 { --x: 20.00%; --y: 92.51%; --w: 60.00%; --h:  7.49%; } /* 75/3191 225x254 */

/* ---------- Booking tile content overlay ---------- */
.gallery-page__item--booking {
  display: block;
  text-decoration: none;
  color: #fff;
  background: #000;
}

.gallery-page__item--booking img {
  position: absolute;
  inset: 0;
  opacity: 0.55;
}

.gallery-page__booking-text {
  position: absolute;
  top: 5%;
  left: 5.8%;
  right: 5.8%;
  font-size: clamp(1.25rem, 4.5vw, 2rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  font-weight: 400;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.gallery-page__booking-circle {
  position: absolute;
  bottom: 5%;
  right: 5.8%;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #fff;
  color: #000;
  display: grid;
  place-items: center;
  transition: transform 0.2s ease;
}

.gallery-page__booking-circle svg { width: 24px; height: 15px; }

.gallery-page__item--booking:hover .gallery-page__booking-circle { transform: scale(1.06); }
.gallery-page__item--booking:hover img { transform: none; }

/* ---------- Desktop (≥768): swap to 1440 art positions ---------- */
@media (min-width: 1024px) {
  .gallery-page__grid {
    /* Sketch desktop: items from y=424 to y=4080 = 3656 tall, 1440 wide */
    aspect-ratio: 1440 / 3656;
  }

  /* Desktop positions:
       %x = x/1440, %y = (y-424)/3656, %w = w/1440, %h = h/3656 */
  .gallery-page__item--p1 { --x:  1.39%; --y:  0.00%; --w: 31.46%; --h: 15.07%; } /* 20/424 453x551 */
  .gallery-page__item--p2 { --x: 66.94%; --y:  3.42%; --w: 31.46%; --h:  9.22%; } /* 964/549 453x337 */
  .gallery-page__item--p3 { --x:  9.58%; --y: 18.90%; --w: 39.72%; --h: 22.62%; } /* 138/1115 572x827 */
  .gallery-page__item--p4 { --x: 58.89%; --y: 26.67%; --w: 31.46%; --h:  9.22%; } /* 848/1399 453x337 */
  .gallery-page__item--booking
                          { --x: 34.10%; --y: 45.49%; --w: 31.46%; --h: 13.68%; } /* 491/2087 453x500 */
  .gallery-page__item--p5 { --x: 75.35%; --y: 49.92%; --w: 23.06%; --h: 15.95%; } /* 1085/2249 332x583 */
  .gallery-page__item--p6 { --x:  9.51%; --y: 65.87%; --w: 31.46%; --h: 16.77%; } /* 137/2832 453x613 */
  .gallery-page__item--p7 { --x: 67.29%; --y: 68.08%; --w: 31.46%; --h: 13.68%; } /* 969/2913 453x500 */
  .gallery-page__item--p8 { --x: 58.89%; --y: 84.49%; --w: 23.19%; --h:  6.81%; } /* 848/3513 334x249 */
  .gallery-page__item--p9 { --x:  1.39%; --y: 86.05%; --w: 31.46%; --h: 13.95%; } /* 20/3570 453x510 */
}