/* Wrapper */
.catalyst-card-carousel{
  position: relative;
}

/* Header row: title left, arrows right (JS injects .cgc-arrow) */
.cgc-header{
  display: flex;
  /* align-items: center; */
  justify-content: space-between;
  gap: 16px;
  margin: 0 auto;
  margin-bottom: 42px;
  padding-right: var(--wp--style--root--padding-right);
  padding-left: var(--wp--style--root--padding-left);
  max-width: var(--wp--style--global--wide-size);
  /* width: 100vw; */
}

/* Optional: tidy title */
.cgc-title{
  margin: 0;
}

/* Viewport hides overflow; track scrolls horizontally */
.cgc-viewport{
  overflow: hidden;
}

/* Track becomes the horizontal scroller */
.cgc-track{
  display: flex;
  flex-wrap: nowrap;
  gap: var(--cgc-gap, 24px);
  /* padding-left: var(--wp--style--root--padding-left); */
  /* padding-right: var(--wp--style--root--padding-right); */

  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;

  /* Optional: hide scrollbar */
  scrollbar-width: none;

  padding-right: var(--wp--style--root--padding-right);
  padding-left: var(--wp--style--root--padding-left);

}
.cgc-track::-webkit-scrollbar{ display:none; }

/* Each direct child block becomes a "slide" */
.cgc-track > *{
  flex: 0 0 auto;

  /* Auto min/max width */
  width: clamp(var(--cgc-min, 360px), 30vw, var(--cgc-max, 600px));

  /* Gutenberg often adds vertical spacing between blocks */
  margin-block-start: 0 !important;
}

@media (hover: none) and (pointer: coarse) {
  .cpc-arrow-container {
    display: none !important;
  }
}
@media (max-width: 400px) {
  .cpc-arrow-container {
    display: none !important;
  }
}

/* Arrow bar (JS injects this into header) */
.cgc-arrow-container{
  /* width: 100%; */
  /* margin: 0 auto; */
  /* background: #000; */
  /* max-width: var(--wp--style--global--wide-size); */
  padding-right: 10px;
}
.cgc-arrow{
  display: inline-flex;
  gap: 10px;
}

.cgc-arrow button{
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 6px;
  line-height: 1;
  border-radius: 999px;

  /* Feel free to tie these into theme variables */
  background: var(--wp--preset--color--brand-dark-grey);
  color: white;
}

has-brand-dark-grey-background-color .cgc-arrow button{
  background: rgba(255,255,255,.85);
  color: #000;
}


.cgc-arrow button svg{
  width: 34px;
  height: 34px;
  display: block;
  fill: currentColor;
}

/* Flip left arrow */
.cgc-btn--left svg{
  transform: scaleX(-1);
}