/* ---------- 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 (repeats every 10 tiles) ----------
   The design defines ONE 10-tile scatter block (9 photos + the booking CTA).
   To show ANY number of images the pattern repeats: the view chunks tiles into
   blocks of 10 and each block is an absolute-positioned scatter.

   Positions are design pixels (--sx/--sy/--sw/--sh, block-local) converted to
   container-relative lengths via --u (= 1 design px, using cqw). Sizing off the
   block's WIDTH (not its height) frees each block's height to fit its content,
   so the final partial block auto-crops via the :has(:nth-child) rules below —
   no trailing whitespace. Slots are Y-ordered top→bottom, so the highest slot
   present in a block equals its child count.
   Mobile art 375 wide, block-local origin y=55, block 3390 tall. */
.gallery-page__blocks {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.gallery-page__grid {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 375 / 3390; /* full block, mobile — fallback when :has unsupported */
}

/* Crop a partial block to the bottom of its lowest occupied slot. Equal
   specificity → the highest matching :nth-child rule (last in source) wins. */
.gallery-page__grid:has(> :nth-child(1))  { aspect-ratio: 375 / 201; }
.gallery-page__grid:has(> :nth-child(2))  { aspect-ratio: 375 / 475; }
.gallery-page__grid:has(> :nth-child(3))  { aspect-ratio: 375 / 842; }
.gallery-page__grid:has(> :nth-child(4))  { aspect-ratio: 375 / 1108; }
.gallery-page__grid:has(> :nth-child(5))  { aspect-ratio: 375 / 1605; }
.gallery-page__grid:has(> :nth-child(6))  { aspect-ratio: 375 / 1939; }
.gallery-page__grid:has(> :nth-child(7))  { aspect-ratio: 375 / 2273; }
.gallery-page__grid:has(> :nth-child(8))  { aspect-ratio: 375 / 2739; }
.gallery-page__grid:has(> :nth-child(9))  { aspect-ratio: 375 / 3086; }
.gallery-page__grid:has(> :nth-child(10)) { aspect-ratio: 375 / 3390; }

.gallery-page__item {
  --u: calc(100cqw / 375); /* 1 design px, mobile art width */
  position: absolute;
  left:   calc(var(--sx) * var(--u));
  top:    calc(var(--sy) * var(--u));
  width:  calc(var(--sw) * var(--u));
  height: calc(var(--sh) * var(--u));
  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 slot positions (block-local design px; origin y=55 already removed). */
.gallery-page__item--slot1  { --sx: 15;  --sy: 0;    --sw: 165; --sh: 201; }
.gallery-page__item--slot2  { --sx: 134; --sy: 308;  --sw: 226; --sh: 167; }
.gallery-page__item--slot3  { --sx: 15;  --sy: 517;  --sw: 225; --sh: 325; }
.gallery-page__item--slot4  { --sx: 75;  --sy: 897;  --sw: 285; --sh: 211; }
.gallery-page__item--slot5  { --sx: 15;  --sy: 1205; --sw: 345; --sh: 400; } /* booking */
.gallery-page__item--slot6  { --sx: 135; --sy: 1650; --sw: 165; --sh: 289; }
.gallery-page__item--slot7  { --sx: 15;  --sy: 1968; --sw: 225; --sh: 305; }
.gallery-page__item--slot8  { --sx: 75;  --sy: 2423; --sw: 285; --sh: 316; }
.gallery-page__item--slot9  { --sx: 15;  --sy: 2889; --sw: 265; --sh: 197; }
.gallery-page__item--slot10 { --sx: 75;  --sy: 3136; --sw: 225; --sh: 254; }

/* ---------- 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: swap to 1440 art positions ----------
   Sketch desktop block: items from y=424 to y=4080 = 3656 tall, 1440 wide. */
@media (min-width: 1024px) {
  .gallery-page__grid { aspect-ratio: 1440 / 3656; }

  .gallery-page__grid:has(> :nth-child(1))  { aspect-ratio: 1440 / 551; }
  .gallery-page__grid:has(> :nth-child(2))  { aspect-ratio: 1440 / 551; }
  .gallery-page__grid:has(> :nth-child(3))  { aspect-ratio: 1440 / 1518; }
  .gallery-page__grid:has(> :nth-child(4))  { aspect-ratio: 1440 / 1518; }
  .gallery-page__grid:has(> :nth-child(5))  { aspect-ratio: 1440 / 2163; }
  .gallery-page__grid:has(> :nth-child(6))  { aspect-ratio: 1440 / 2408; }
  .gallery-page__grid:has(> :nth-child(7))  { aspect-ratio: 1440 / 3021; }
  .gallery-page__grid:has(> :nth-child(8))  { aspect-ratio: 1440 / 3021; }
  .gallery-page__grid:has(> :nth-child(9))  { aspect-ratio: 1440 / 3338; }
  .gallery-page__grid:has(> :nth-child(10)) { aspect-ratio: 1440 / 3656; }

  .gallery-page__item { --u: calc(100cqw / 1440); }

  /* Desktop slot positions (block-local design px; origin y=424 removed). */
  .gallery-page__item--slot1  { --sx: 20;   --sy: 0;    --sw: 453; --sh: 551; }
  .gallery-page__item--slot2  { --sx: 964;  --sy: 125;  --sw: 453; --sh: 337; }
  .gallery-page__item--slot3  { --sx: 138;  --sy: 691;  --sw: 572; --sh: 827; }
  .gallery-page__item--slot4  { --sx: 848;  --sy: 975;  --sw: 453; --sh: 337; }
  .gallery-page__item--slot5  { --sx: 491;  --sy: 1663; --sw: 453; --sh: 500; } /* booking */
  .gallery-page__item--slot6  { --sx: 1085; --sy: 1825; --sw: 332; --sh: 583; }
  .gallery-page__item--slot7  { --sx: 137;  --sy: 2408; --sw: 453; --sh: 613; }
  .gallery-page__item--slot8  { --sx: 969;  --sy: 2489; --sw: 453; --sh: 500; }
  .gallery-page__item--slot9  { --sx: 848;  --sy: 3089; --sw: 334; --sh: 249; }
  .gallery-page__item--slot10 { --sx: 20;   --sy: 3146; --sw: 453; --sh: 510; }
}

/* ---------- Masonry layout (admin-selectable alternative to the scatter) ----------
   Enabled from the gallery admin ("Masonry raspored"). Drops the fixed design
   scatter for CSS-columns masonry so every photo renders at its natural aspect
   ratio. No parallax here — heights are content-driven, so the 180% headroom
   trick the scatter relies on would crop the images. */
.gallery-page__masonry {
  columns: 2;
  column-gap: var(--space-4);
  margin-top: 2em; /* breathing room below the "Galerija" heading */
}

.gallery-page__masonry-item {
  break-inside: avoid;
  margin: 0 0 var(--space-4);
  display: block;
  overflow: hidden;
  background: #ddd;
}

.gallery-page__masonry-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s ease;
}

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

/* Booking CTA tile keeps the design's dark, overlaid card look. */
.gallery-page__masonry-item--booking {
  position: relative;
  aspect-ratio: 345 / 400;
  text-decoration: none;
  color: #fff;
  background: #000;
}

.gallery-page__masonry-item--booking img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}

.gallery-page__masonry-item--booking:hover img { transform: none; }

@media (min-width: 1024px) {
  .gallery-page__masonry {
    columns: 3;
    column-gap: var(--space-5);
  }
  .gallery-page__masonry-item { margin-bottom: var(--space-5); }
}