/* ==========================================================================
   v281 — Gallery layouts (Zap editor "סגנון הגלריה" + gallery page style).
   diamond (diagonal collage) · polaroid · mosaic   (grid / masonry / two_col / one_col live in style.css)
   ========================================================================== */

/* ---------- DIAGONAL COLLAGE ("קולאז׳ באלכסון", key: diamond) — v301 ----------
   A dense collage of RECTANGULAR tiles of mixed sizes (wide / tall / big),
   small gaps and rounded corners; the WHOLE grid is rotated 32deg (--zg-dia-rot, matches the reference slant) and scaled
   up inside a fixed-height frame (overflow:hidden) so the frame is filled edge
   to edge with no empty corners. Images rotate with their tiles, object-fit
   cover. The reveal engine never touches the rotated grid: data-animate sits on
   the outer .zg-diag-frame only, and the grid carries data-zg-no-motion
   (excluded in theme-motion.js). */
.zg-diag-frame {
  position: relative; overflow: hidden;
  height: clamp(420px, 62vw, 760px);
  border-radius: 18px;
  margin-inline: auto;
  container-type: size;
}
.zg-diag-frame > .gallery-grid.gallery-grid--diamond {
  --zg-dia-cols: 4;
  --zg-dia-rot: 32deg;
  position: absolute; top: 50%; left: 50%;
  width: 130cqw;
  display: grid !important;
  grid-template-columns: repeat(var(--zg-dia-cols), minmax(0, 1fr)) !important;
  grid-auto-rows: 24cqh;
  grid-auto-flow: dense;
  gap: var(--zg-gal-gap, 10px) !important;
  columns: auto !important; column-count: auto !important;
  margin: 0 !important; padding: 0 !important; max-width: none !important;
  transform: translate(-50%, -50%) rotate(var(--zg-dia-rot)) scale(1.15) !important;
  transform-origin: 50% 50%;
  opacity: 1 !important; clip-path: none !important; filter: none !important;
}
/* Frameless fallback (older markup): still a rectangle collage, not rotated. */
.gallery-grid.gallery-grid--diamond {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-rows: clamp(110px, 14vw, 200px);
  grid-auto-flow: dense;
  gap: var(--zg-gal-gap, 10px) !important;
  columns: auto !important; column-count: auto !important;
}
.gallery-grid.gallery-grid--diamond > .gallery-item {
  grid-column: span 1; grid-row: span 1;
  width: auto !important; height: auto !important; aspect-ratio: auto !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important;
  border-radius: 12px !important; overflow: hidden; break-inside: avoid;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
  -webkit-clip-path: none; clip-path: none;
  transform: none !important; rotate: none !important; opacity: 1 !important;
}
/* Repeating span pattern (period 8): big, small, tall, wide ... */
.gallery-grid.gallery-grid--diamond > .gallery-item:nth-child(8n+1) { grid-column: span 2; grid-row: span 2; }
.gallery-grid.gallery-grid--diamond > .gallery-item:nth-child(8n+3) { grid-row: span 2; }
.gallery-grid.gallery-grid--diamond > .gallery-item:nth-child(8n+4) { grid-column: span 2; }
.gallery-grid.gallery-grid--diamond > .gallery-item:nth-child(8n+6) { grid-column: span 2; }
.gallery-grid.gallery-grid--diamond > .gallery-item:nth-child(8n+7) { grid-row: span 2; }
.gallery-grid.gallery-grid--diamond > .gallery-item img,
.gallery-grid.gallery-grid--diamond > .gallery-item video,
.gallery-grid.gallery-grid--diamond > .gallery-item iframe,
.gallery-grid.gallery-grid--diamond > .gallery-item .zg-gallery-auto {
  width: 100% !important; height: 100% !important; max-width: none;
  aspect-ratio: auto !important;
  object-fit: cover; display: block; rotate: none;
  transform: none; transition: transform .5s ease;
}
.gallery-grid.gallery-grid--diamond > .gallery-item:hover img,
.gallery-grid.gallery-grid--diamond > .gallery-item:focus-visible img { transform: scale(1.06); }
.gallery-grid.gallery-grid--diamond > .gallery-item .gallery-overlay { border-radius: 12px; }
@media (max-width: 1024px) {
  .zg-diag-frame { height: clamp(460px, 80vw, 700px); }
  .zg-diag-frame > .gallery-grid.gallery-grid--diamond { --zg-dia-cols: 3; width: 150cqw; grid-auto-rows: 24cqh; }
  .gallery-grid.gallery-grid--diamond { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
  .zg-diag-frame { height: 125vw; max-height: 620px; border-radius: 14px; }
  .zg-diag-frame > .gallery-grid.gallery-grid--diamond { --zg-dia-cols: 2; width: 170cqw; grid-auto-rows: 20cqh; gap: var(--zg-gal-gap, 8px) !important; }
  .gallery-grid.gallery-grid--diamond { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: 34vw; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-grid.gallery-grid--diamond > .gallery-item img { transition: none; }
}

/* ---------- POLAROID ("פולרואיד") ---------- */
.gallery-grid.gallery-grid--polaroid {
  display: grid !important; columns: auto !important; column-count: auto !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: var(--zg-gal-gap, 26px) !important;
}
.gallery-grid.gallery-grid--polaroid > .gallery-item {
  background: #fff; padding: 12px 12px 44px !important; margin: 0 !important;
  border-radius: 4px !important; aspect-ratio: auto; height: auto !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .14), 0 2px 6px rgba(0, 0, 0, .08);
  transition: box-shadow .35s ease;
}
.gallery-grid.gallery-grid--polaroid > .gallery-item:hover { box-shadow: 0 20px 40px rgba(0, 0, 0, .2); }
.gallery-grid.gallery-grid--polaroid > .gallery-item img,
.gallery-grid.gallery-grid--polaroid > .gallery-item video {
  width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; object-fit: cover; display: block; border-radius: 2px;
}
.gallery-grid.gallery-grid--polaroid > .gallery-item .gallery-overlay { inset: 12px 12px 44px 12px; }

/* ---------- MOSAIC ("פסיפס") — featured large tiles ---------- */
.gallery-grid.gallery-grid--mosaic {
  display: grid !important; columns: auto !important; column-count: auto !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-rows: clamp(140px, 18vw, 230px); grid-auto-flow: dense;
  gap: var(--zg-gal-gap, 10px) !important;
}
.gallery-grid.gallery-grid--mosaic > .gallery-item { margin: 0 !important; height: auto !important; aspect-ratio: auto !important; border-radius: 10px; overflow: hidden; }
.gallery-grid.gallery-grid--mosaic > .gallery-item:nth-child(6n+1) { grid-column: span 2; grid-row: span 2; }
.gallery-grid.gallery-grid--mosaic > .gallery-item:nth-child(6n+4) { grid-column: span 2; }
.gallery-grid.gallery-grid--mosaic > .gallery-item img,
.gallery-grid.gallery-grid--mosaic > .gallery-item video { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
@media (max-width: 700px) {
  .gallery-grid.gallery-grid--mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: 150px; }
}

/* v303 — diagonal collage, user refinement: the IMAGES stay upright and centred
   (only the tile shape is diagonal), and the collage is NOT cropped by a square
   frame — its outer tile edges are fully visible. The grid keeps its rotation but
   is scaled to fit the width; each image is counter-rotated and oversized so it
   still covers its diagonal tile. Decorative clones are no longer needed. */
/* v307 — back to the v303 look the user preferred (upright photos inside
   diagonal tiles, whole tiles, ragged diagonal outer edges, NO square crop),
   without the empty corners and without riding over the text above:
   assets/js/gallery-diag.js hides the tiles that fall outside the frame
   (visibility only) and gives the frame margins equal to the tile overhang.
   Until the script runs (or without JS) the frame clips, as a safe fallback. */
.zg-diag-frame {
  position: relative !important; overflow: hidden; isolation: isolate;
  height: clamp(380px, 46vw, 600px); border-radius: 0 !important;
  container-type: normal !important; padding: 0 !important;
  margin-inline: auto;
}
.zg-diag-frame.zg-dia-ready { overflow: visible; }
:is(section, main):has(.zg-diag-frame) { overflow-x: clip; }
.zg-diag-frame > .gallery-grid.gallery-grid--diamond {
  --zg-dia-cols: 8;
  position: absolute !important; top: 50% !important; left: 50% !important;
  width: 170% !important; margin: 0 !important;
  grid-auto-rows: clamp(84px, 9vw, 130px) !important;
  transform: translate(-50%, -50%) rotate(var(--zg-dia-rot)) !important;
}
.zg-diag-frame .gallery-item.zg-dia-off { visibility: hidden !important; pointer-events: none !important; }
.zg-diag-frame > .gallery-grid.gallery-grid--diamond > .gallery-item { position: relative; }
.zg-diag-frame > .gallery-grid.gallery-grid--diamond > .gallery-item img,
.zg-diag-frame > .gallery-grid.gallery-grid--diamond > .gallery-item video,
.zg-diag-frame > .gallery-grid.gallery-grid--diamond > .gallery-item .zg-gallery-auto {
  position: absolute !important; top: 50%; left: 50%;
  width: 200% !important; height: 200% !important; max-width: none !important;
  object-fit: cover;
  transform: translate(-50%, -50%) rotate(calc(var(--zg-dia-rot) * -1)) !important;
  transition: transform .5s ease;
}
.zg-diag-frame > .gallery-grid.gallery-grid--diamond > .gallery-item:hover img,
.zg-diag-frame > .gallery-grid.gallery-grid--diamond > .gallery-item:focus-visible img {
  transform: translate(-50%, -50%) rotate(calc(var(--zg-dia-rot) * -1)) scale(1.06) !important;
}
@media (max-width: 1024px) {
  .zg-diag-frame { height: clamp(380px, 62vw, 560px); }
  .zg-diag-frame > .gallery-grid.gallery-grid--diamond { --zg-dia-cols: 6; width: 180% !important; grid-auto-rows: clamp(80px, 12vw, 120px) !important; }
}
@media (max-width: 600px) {
  .zg-diag-frame { height: 96vw; max-height: 540px; }
  .zg-diag-frame > .gallery-grid.gallery-grid--diamond { --zg-dia-cols: 6; width: 210% !important; grid-auto-rows: 17vw !important; }
}
@media (prefers-reduced-motion: reduce) {
  .zg-diag-frame > .gallery-grid.gallery-grid--diamond > .gallery-item img { transition: none; }
}

/* v308 — diagonal collage: only the real photos, whole collage scaled to fit the
   width (assets/js/gallery-diag.js sets --zg-dia-s and the frame height), and a
   per-tile entrance instead of the motion engine's frame clip (square outline). */
.zg-diag-frame > .gallery-grid.gallery-grid--diamond {
  --zg-dia-cols: 3;
  width: 100% !important;
  grid-auto-rows: clamp(120px, 14vw, 210px) !important;
  transform: translate(-50%, -50%) rotate(var(--zg-dia-rot)) scale(var(--zg-dia-s, .62)) !important;
}
.zg-diag-frame.zg-dia-anim:not(.zg-dia-in) > .gallery-grid.gallery-grid--diamond > .gallery-item { opacity: 0 !important; scale: .6; }
.zg-diag-frame.zg-dia-anim > .gallery-grid.gallery-grid--diamond > .gallery-item {
  transition: opacity .6s ease calc(var(--zg-dia-i, 0) * 90ms), scale .8s cubic-bezier(.34, 1.4, .64, 1) calc(var(--zg-dia-i, 0) * 90ms);
}
@media (max-width: 1024px) {
  .zg-diag-frame > .gallery-grid.gallery-grid--diamond { --zg-dia-cols: 3; width: 100% !important; grid-auto-rows: clamp(100px, 18vw, 170px) !important; }
}
@media (max-width: 600px) {
  .zg-diag-frame > .gallery-grid.gallery-grid--diamond { --zg-dia-cols: 2; width: 100% !important; grid-auto-rows: 36vw !important; }
}
@media (prefers-reduced-motion: reduce) {
  .zg-diag-frame.zg-dia-anim > .gallery-grid.gallery-grid--diamond > .gallery-item { transition: none; opacity: 1 !important; scale: none; }
}

/* v310 — POLAROID matches the picker preview: the WHOLE photo (natural aspect,
   never cropped — the base .gallery-grid mosaic spans/180px rows used to crop
   it), white frame with a thicker caption strip, slight alternating tilt. */
.gallery-grid.gallery-grid--polaroid { grid-auto-rows: auto !important; grid-auto-flow: row !important; align-items: start; padding: 10px 6px !important; }
.gallery-grid.gallery-grid--polaroid > .gallery-item {
  grid-column: auto !important; grid-row: auto !important;
  overflow: visible !important; padding: 12px 12px 0 !important;
  border-radius: 3px !important; transform: rotate(-2deg); transition: transform .35s ease, box-shadow .35s ease;
}
.gallery-grid.gallery-grid--polaroid > .gallery-item:nth-child(even) { transform: rotate(1.8deg); }
.gallery-grid.gallery-grid--polaroid > .gallery-item:nth-child(3n) { transform: rotate(-.8deg); }
.gallery-grid.gallery-grid--polaroid > .gallery-item:hover,
.gallery-grid.gallery-grid--polaroid > .gallery-item:focus-visible { transform: rotate(0) translateY(-4px); z-index: 2; }
.gallery-grid.gallery-grid--polaroid > .gallery-item img,
.gallery-grid.gallery-grid--polaroid > .gallery-item video {
  width: 100% !important; height: auto !important; max-height: none; aspect-ratio: auto !important;
  object-fit: contain !important; background: #f3f2ee; transform: none !important;
}
.gallery-grid.gallery-grid--polaroid > .gallery-item:hover img { transform: none !important; }
.gallery-grid.gallery-grid--polaroid > .gallery-item .zg-pol-cap {
  display: block; min-height: 44px; padding: 10px 4px 12px; box-sizing: border-box;
  font-size: 15px; line-height: 1.35; text-align: center; color: #333;
  font-family: var(--font-handwriting, var(--font-heading, inherit));
  overflow-wrap: anywhere;
}
.gallery-grid.gallery-grid--polaroid > .gallery-item:not(:has(.zg-pol-cap)) { padding-bottom: 44px !important; }
.gallery-grid.gallery-grid--polaroid > .gallery-item .gallery-overlay { inset: 12px 12px auto 12px; bottom: 44px; }
@media (prefers-reduced-motion: reduce) { .gallery-grid.gallery-grid--polaroid > .gallery-item { transition: none; } }

/* v310 — DIAGONAL COLLAGE laid out BY ROWS (assets/js/gallery-diag.js):
   rows of different lengths and offsets, a few wide tiles, so the rotated
   silhouette is jagged / irregular instead of a clean rotated rectangle.
   The script positions every tile, rotates + scales the whole set so its true
   (tile-corner) bounding box fits the frame width, and sizes the frame to it. */
.zg-diag-frame.zg-dia-rows > .gallery-grid.gallery-grid--diamond {
  display: block !important; top: 0 !important; left: 0 !important;
  transform-origin: 0 0 !important;
}
.zg-diag-frame.zg-dia-rows > .gallery-grid.gallery-grid--diamond > .gallery-item {
  position: absolute !important; grid-column: auto; grid-row: auto;
}