/* ==========================================================================
   Gallery Plugin — styles
   Two auto-scrolling rows, drag-to-scroll, grayscale -> color on hover.
   ========================================================================== */

.gbp-gallery {
  --gbp-row-height: 220px;
  --gbp-gap: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--gbp-gap);
  background: #000;
  padding: var(--gbp-gap) 0;
  box-sizing: border-box;

  /* full-bleed: break out of whatever centered/padded container (theme
     content column, page-builder wrapper, etc.) this sits inside and span
     the full browser width edge-to-edge, regardless of nesting. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.gbp-row {
  width: 100%;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y; /* let vertical page scroll pass through, we handle horizontal drag ourselves */
}

.gbp-row.gbp-dragging {
  cursor: grabbing;
}

.gbp-track {
  display: flex;
  align-items: center;
  gap: var(--gbp-gap);
  will-change: transform;
  /* transform is set inline by gallery.js on every frame / drag update */
}

.gbp-item {
  flex: 0 0 auto;
  height: var(--gbp-row-height);
  display: block;
}

.gbp-item img {
  height: 100%;
  width: auto;      /* preserves the image's own aspect ratio: portrait stays
                        narrow, landscape/wide stays wide — only the row's
                        height is fixed, never the width */
  max-width: none;
  display: block;
  border-radius: 50px;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter 0.35s ease;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: auto;
}

.gbp-item img:hover {
  filter: grayscale(0);
}