/* =========================
   Block base (make wrapper responsive)
   ========================= */

/* Gutenberg will add .wp-block-grid-carousel-wrapper from the block name.
   We also keep .gc-wrapper for safety. */
.wp-block-grid-carousel-wrapper,
.gc-wrapper{
  display: block;
  box-sizing: border-box;
  inline-size: 100%;      /* width: 100% in logical props */
  max-inline-size: 100%;  /* never exceed its container */
  min-inline-size: 0;     /* allow shrink in flex/grid parents */
}

/* The scrolling track must also never exceed the wrapper width */
.gc-wrapper .gc-track{
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;     /* prevent min-content overflow */
  box-sizing: border-box;
}

/* Media inside slides should never push width */
.gc-wrapper .gc-slide img,
.gc-wrapper .gc-slide video{
  max-width: 100%;
  height: auto;
}


/* =========================
   GRID mode (vars-only)
   ========================= */
.gc-wrapper.is-grid .gc-track{
  display: grid;
  grid-template-columns: var(--gc-template-columns);
  grid-template-rows: var(--gc-template-rows);
  grid-auto-flow: var(--gc-auto-flow);
  column-gap: var(--gc-col-gap);
  row-gap: var(--gc-row-gap);
}

/* Optional neutral baseline (commented)
.gc-wrapper.is-grid .gc-track > * { grid-column: span 3; }
*/

/* =========================
   CAROUSEL mode (FLEX + REAL GAP, with overflow guard)
   ========================= */

/* Keep the page from widening while still allowing the track to scroll */
.gc-wrapper.is-carousel{
  position: relative;
  overflow-x: hidden;
}
@supports (overflow: clip) {
  .gc-wrapper.is-carousel{ overflow-x: clip; overflow-clip-margin: content-box; }
}

.gc-wrapper.is-carousel .gc-track{
  display: flex;
  flex-direction: row;

  /* real, author-defined gap */
  gap: var(--gc-col-gap, 0px);

  /* make sure the track itself never exceeds the wrapper width */
  inline-size: 100%;
  max-inline-size: 100%;
  box-sizing: border-box;

  overflow-x: auto;
  -webkit-overflow-scrolling: touch;

  /* snap mode via var; default mandatory */
  scroll-snap-type: x var(--gc-snap-mode, mandatory);

  /* edge “peek” + snap padding */
  padding-inline: var(--gc-edge-padding, 0);
  scroll-padding-inline: var(--gc-edge-padding, 0);

  /* a little bottom space so the scrollbar doesn't overlap */
  padding-bottom: 2px;

  /* reduce layout jump where supported */
  scrollbar-gutter: stable both-edges;
}

/* Each slide: visible width = (100% - visible gaps)/slides - overflow guard */
.gc-wrapper.is-carousel .gc-track > *{
  /* Overflow guard is usually 0; JS sets a tiny px value only when needed */
  --gc-overflow-guard: 0px;

  flex: 0 0 min(100%, calc(
    (100% - (max(0, var(--gc-slides, 1) - 1) * var(--gc-col-gap, 0px)) - var(--gc-overflow-guard, 0px))
    / max(1, var(--gc-slides, 1))
  ));

  scroll-snap-align: start;

  /* Don’t let min-content blow up the width */
  min-inline-size: 0;
  box-sizing: border-box;
}

/* Equal-height helper (JS sets min-height) */
.gc-wrapper.is-carousel .gc-slide{
  display: block;
}

/* Make typical media behave inside slides */
.gc-wrapper.is-carousel .gc-slide img,
.gc-wrapper.is-carousel .gc-slide video{
  max-width: 100%;
  height: auto;
}

/* Scrollbar completely hidden */
.gc-wrapper.is-carousel .gc-track {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
.gc-wrapper.is-carousel .gc-track::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Trackbar hiding (when toggled in settings) */
.gc-wrapper.is-carousel .gc-track.gc-hide-scrollbar{
  scrollbar-width: none;           /* Firefox */
}
.gc-wrapper.is-carousel .gc-track.gc-hide-scrollbar::-webkit-scrollbar{
  width: 0;
  height: 0;
}


/* =========================
   Arrows
   ========================= */
.gc-wrapper.is-carousel .gc-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  line-height: 0; /* if you add SVGs */
}

/* Inline-aware offsets (LTR/RTL via logical props) */
.gc-wrapper.is-carousel .gc-arrow.gc-prev{
  inset-inline-start: var(--gc-arrows-offset, 16px);
}
.gc-wrapper.is-carousel .gc-arrow.gc-next{
  inset-inline-end: var(--gc-arrows-offset, 16px);
}

/* If you want a visual style, add your own SVG or text and style here */


/* =========================
   Dots (pagination)
   ========================= */
.gc-wrapper.is-carousel .gc-dots{
  display: flex;
  gap: 10px;
  margin-top: 30px;
  justify-content: center; /* default; overridden by align- classes */
}
.gc-wrapper.is-carousel .gc-dots.align-left{
  justify-content: flex-start;
}
.gc-wrapper.is-carousel .gc-dots.align-right{
  justify-content: flex-end;
}
.gc-wrapper.is-carousel .gc-dots button{
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  border: 0;
  background-color: #A3BCBF;
  padding: 0;
  cursor: pointer;
}
.gc-wrapper.is-carousel .gc-dots button[aria-selected="true"]{
  background-color: #4A7B80;
}


/* =========================
   Trackbar
   ========================= */

/* Visually hide scrollbar when requested (toggle in settings) */
.gc-wrapper.is-carousel .gc-track.gc-hide-scrollbar{
  scrollbar-width: none;           /* Firefox */
}
.gc-wrapper.is-carousel .gc-track.gc-hide-scrollbar::-webkit-scrollbar{
  width: 0;
  height: 0;
}



/* =========================
  Masonry layout for desktop GRID mode only
   ========================= */
.gc-wrapper.masonry.is-grid .gc-track{
  /* kill grid so column layout can work */
  display: block !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  grid-auto-flow: unset !important;
  row-gap: 0 !important; /* we'll simulate row gap on items */

  /* multi-column masonry */
  column-count: 2; /* adjust per breakpoint as needed */
  column-gap: var(--gc-col-gap, 25px);
}

/* Each child becomes a masonry block */
.gc-wrapper.masonry.is-grid .gc-track > *{
  display: inline-block;     /* required for column layout */
  width: 100%;
  margin: 0 0 var(--gc-row-gap, 25px);
  break-inside: avoid;

  /* neutralise equal-height carry-overs from themes/GB */
  height: auto !important;
  min-height: 0 !important;
}

/* Optional: responsive columns */
@media (max-width: 1024px){
  .gc-wrapper.masonry.is-grid .gc-track{ column-count: 2; }
}
@media (max-width: 768px){
  .gc-wrapper.masonry.is-grid .gc-track{ column-count: 1; }
}

/* Masonry-center: two real columns + vertical centering (requires tiny JS wrap) */
.gc-wrapper.masonry-center.is-grid .gc-track{
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--gc-col-gap, 25px);
  row-gap: 0 !important;
}

/* Columns as vertical stacks we can center */
.gc-wrapper.masonry-center.is-grid .gc-track .masonry-col{
  display: flex;
  flex-direction: column;
  gap: var(--gc-row-gap, 25px);
  justify-content: center;
  min-height: 100%;
}

/* Children inside columns */
.gc-wrapper.masonry-center.is-grid .gc-track .masonry-col > *{
  height: auto !important;
  min-height: 0 !important;
  width: 100%;
}

/* If both classes present, FORCE grid and neutralise multicol masonry */
.gc-wrapper.masonry-center.is-grid.masonry .gc-track{
  display: grid !important; /* <- this fixes the single-column stacking */
  grid-template-columns: repeat(2, 1fr) !important;
  column-count: initial !important;
  column-gap: var(--gc-col-gap, 25px) !important;
}