/* Grid Gallery — front-end styles (scoped, won't leak into the theme) */
.grid-gallery-block{
  --grid-gap: 10px;
  --grid-row-height: 220px;
  --grid-radius: 3px;
  --grid-accent: #E8A33D;
  box-sizing: border-box;
}
.grid-gallery-block *{ box-sizing: border-box; }

.grid-gallery-rows{ width:100%; }
.grid-row{
  display:flex;
  gap: var(--grid-gap);
  margin-bottom: var(--grid-gap);
  justify-content:flex-start;
}

/* Grid-template layout: each band gets one fixed height (see
   grid-frontend.js) and every tile in it — big cell or stacked small
   cells alike — is stretched/cropped (object-fit:cover) to fill that
   height exactly, so no tile ever leaves empty space below it.
   Single-row bands (banner, four-across) reuse .grid-row above. Mixed
   bands (a big cell plus stacked small cells) use a row of independently
   sized columns instead. */
.grid-mixed-row{
  display:flex;
  align-items:flex-start;
  gap: var(--grid-gap);
  margin-bottom: var(--grid-gap);
}
.grid-mixed-col{
  display:flex;
  flex-direction:column;
  gap: var(--grid-gap);
}
.grid-mixed-col .grid-tile{ width:100%; }

.grid-tile{
  position:relative;
  overflow:hidden;
  border-radius: var(--grid-radius);
  cursor:pointer;
  background:#1d1f24;
  flex:0 0 auto;
}
.grid-tile img,
.grid-tile video{
  width:100%;
  height:100%;
  display:block;
  -webkit-transition: -webkit-transform .35s ease; /* Older Safari and Chrome */
  -moz-transition: -moz-transform .35s ease; /* Older Firefox */
  -o-transition: -o-transform .35s ease; /* Older Opera */
  transition: transform .35s ease; /* Standard */
}
.grid-tile img,
.grid-tile video{ object-fit:cover; object-position:center; }
/* Flat single-row template bands — the full-width banner and the
   2/3/4-across equal-column rows — always show every tile's whole
   image or video uncropped. Each tile's box there is already scaled
   to that image's own aspect ratio (see sizeRow in grid-frontend.js),
   so contain and cover look identical in the normal case; contain
   just guarantees no cropping even in an edge case (e.g. rounding)
   where the two could differ. */
.grid-template-row .grid-tile img,
.grid-template-row .grid-tile video{ object-fit:contain; }
/* Mixed bands (big-center, big-left, big-right, and every wide/half/
   split variant): the first (master) column is meant to show its
   image/video at its own natural aspect ratio uncropped — but a photo
   there can still be floored up to "Minimum tile height", making its
   box taller than the image's natural size. object-fit:cover would
   crop that overflow; contain shows the whole tile instead (adding
   letterbox space against the tile's dark background rather than
   trimming the image). Every other column in the band keeps the
   default object-fit:cover above, cropping as needed to match the
   band height exactly. */
.grid-mixed-col:first-child .grid-tile img,
.grid-mixed-col:first-child .grid-tile video{ object-fit:contain; }
.grid-tile:hover img,
.grid-tile:hover video{
  -webkit-transform:scale(1.04); /* Older Safari and Chrome */
  -moz-transform:scale(1.04); /* Older Firefox */
  -o-transform:scale(1.04); /* Older Opera */
  transform:scale(1.04); /* Standard */
}
.grid-tile:focus{ outline:2px solid var(--grid-accent); outline-offset:2px; }

/* Video tiles */
.grid-tile.is-video video{ pointer-events:none; background:#000; }

/* Grid Template - Classic 2, Classic 3 and Classic 4: every video tile
   shows its full frame uncropped (never cover-cropped, even in the
   non-master columns of a big-left/big-center/big-right band, which
   otherwise default to object-fit:cover for photos). The video fills
   the tile's full width and its height is left auto (its own natural
   aspect ratio) rather than stretched/cropped to the tile's fixed
   height, and the black video backdrop is dropped so no letterbox
   bars ever show behind it. grid-frontend.js listens for each
   video's real dimensions and resizes its row/band to match, so this
   auto height and the row's set height line up almost immediately;
   overflow stays visible here purely as a safety net for the brief
   moment before that correction runs (or if a video is slow to
   report metadata). */
.grid-layout-template-classic-2 .grid-tile.is-video,
.grid-layout-template-classic-3 .grid-tile.is-video,
.grid-layout-template-classic-4 .grid-tile.is-video{ overflow:visible; }
.grid-layout-template-classic-2 .grid-tile video,
.grid-layout-template-classic-3 .grid-tile video,
.grid-layout-template-classic-4 .grid-tile video{ width:100%; height:auto; object-fit:unset; }
.grid-layout-template-classic-2 .grid-tile.is-video,
.grid-layout-template-classic-2 .grid-tile.is-video video,
.grid-layout-template-classic-3 .grid-tile.is-video,
.grid-layout-template-classic-3 .grid-tile.is-video video,
.grid-layout-template-classic-4 .grid-tile.is-video,
.grid-layout-template-classic-4 .grid-tile.is-video video{ background:transparent; }
.grid-play-icon{
  position:absolute; top:50%; left:50%;
  -webkit-transform:translate(-50%,-50%); /* Older Safari and Chrome */
  -moz-transform:translate(-50%,-50%); /* Older Firefox */
  -o-transform:translate(-50%,-50%); /* Older Opera */
  transform:translate(-50%,-50%); /* Standard */
  width:52px; height:52px; border-radius:50%;
  background:rgba(10,10,11,.55);
  color:#EDEBE6;
  display:flex; align-items:center; justify-content:center;
  -webkit-transition: background .2s ease, -webkit-transform .2s ease; /* Older Safari and Chrome */
  -moz-transition: background .2s ease, -moz-transform .2s ease; /* Older Firefox */
  -o-transition: background .2s ease, -o-transform .2s ease; /* Older Opera */
  transition: background .2s ease, transform .2s ease; /* Standard */
  pointer-events:none;
}
.grid-tile.is-video:hover .grid-play-icon{
  background: var(--grid-accent);
  color:#1d1f24;
}

/* Lightbox */
.grid-lightbox{
  position:fixed; inset:0;
  background:rgba(10,10,11,.94);
  display:none;
  align-items:center; justify-content:center;
  z-index:99999;
  flex-direction:column;
}
.grid-lightbox.is-open{ display:flex; }
.grid-lightbox-top{
  position:absolute; top:0; left:0; right:0;
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 24px;
}
.grid-lightbox-counter{
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size:12px; color:#8A8D93; letter-spacing:.05em;
}
.grid-lightbox-counter b{ color: var(--grid-accent); font-weight:600; }
.grid-lightbox-close{
  background:transparent; border:1px solid #34363D; color:#EDEBE6;
  width:36px; height:36px; border-radius:50%;
  font-size:18px; line-height:1; cursor:pointer;
}
.grid-lightbox-close:hover{ border-color: var(--grid-accent); color: var(--grid-accent); }
.grid-lightbox-stage{
  max-width:90vw; max-height:80vh;
  display:flex; align-items:center; justify-content:center;
}
.grid-lightbox-stage img,
.grid-lightbox-stage video{
  max-width:90vw; max-height:80vh;
  object-fit:contain;
  border-radius:2px;
  -webkit-box-shadow:0 20px 60px rgba(0,0,0,.5); /* Older Safari and Chrome */
  -moz-box-shadow:0 20px 60px rgba(0,0,0,.5); /* Older Firefox */
  box-shadow:0 20px 60px rgba(0,0,0,.5); /* Standard */
}
.grid-lb-video{ display:none; background:#000; }
.grid-lightbox-arrow{
  position:absolute; top:50%;
  -webkit-transform:translateY(-50%); /* Older Safari and Chrome */
  -moz-transform:translateY(-50%); /* Older Firefox */
  -o-transform:translateY(-50%); /* Older Opera */
  transform:translateY(-50%); /* Standard */
  background:rgba(255,255,255,.05); border:1px solid #34363D; color:#EDEBE6;
  width:46px; height:46px; border-radius:50%;
  font-size:20px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.grid-lightbox-arrow:hover{ border-color: var(--grid-accent); color: var(--grid-accent); }
.grid-lightbox-arrow.prev{ left:20px; }
.grid-lightbox-arrow.next{ right:20px; }

@media (max-width:600px){
  .grid-lightbox-arrow{ width:38px; height:38px; font-size:16px; }
  .grid-lightbox-arrow.prev{ left:8px; }
  .grid-lightbox-arrow.next{ right:8px; }
  .grid-play-icon{ width:40px; height:40px; }
}