/* =================================================================
   1) Base Embla styles (minimal)
   - .embla is the overflow wrapper (position:relative if you still need it; can remain)
   - .embla__container is the flex container of slides
   - .embla__slide is each slide; enforce 3:4 aspect-ratio
   ================================================================= */
.embla {
  overflow: hidden;
  position: relative; /* optional: if you need future overlays */
  width: 100%;
}

.embla__container {
  display: flex!important;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  margin-left: 0; /* hide default scrollbars */
  margin-bottom: 0;
  padding: 0;
  list-style: none;
  gap: 2rem;
}

.embla__container.acf__gallery__slide.gallery,
.embla__container.embla_carousel_gallery_block{
	margin-bottom: 0em;
}

.embla__slide {
    position: relative;
    flex: 0 0 75%;         /* 1 slide per row on very small screens */
    aspect-ratio: 3 / 4 !important;     /* force width:height = 3:4 (portrait orientation) */
    overflow: hidden;        /* if content inside overflows, it’ll be clipped */
}

.embla__slide.embla_service_slide {
    aspect-ratio: initial!important;
}

.embla__slide.acf__gallery__slide,
.embla__slide.embla_carousel_gallery_block{
  aspect-ratio: 1 / 1 !important;     /* force width:height = 3:4 (portrait orientation) */
}

.embla__slide.acf__gallery__slide img,
.embla__slide.embla_carousel_gallery_block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;   /* remove any inline spacing/gaps */
}


/* =================================================================
   2) Responsive breakpoints: 1 / 2 / 3 slides per view
   - < 640px: 100%   (1 slide per row)
   - ≥ 640px:  50%   (2 slides per row)
   - ≥ 1024px: 33.33% (3 slides per row)
   The aspect-ratio:3/4 still applies, but slide-width changes.
   ================================================================= */
@media (min-width: 640px) {
  .embla__slide {
    flex: 0 0 35%;      /* two cards per row */
    /* height auto: (width × 4/3) */
  }
  .embla__slide.embla_service_slide {
    flex: 0 0 40%;      /* two cards per row */
    /* height auto: (width × 4/3) */
  }
}

@media (min-width: 1024px) {
  .embla__slide {
    flex: 0 0 20%; /* three cards per row */
    /* height auto: (width × 4/3) */
  }

  .embla__slide.embla_carousel_gallery_block {
    flex: 0 0 30%; /* three cards per row */
    /* height auto: (width × 4/3) */
  }
  .embla__slide.embla_service_slide{
    flex: 0 0 25%; /* three cards per row */
  }

}

/* =================================================================
   3) Controls container below the carousel
   - .embla__controls sits immediately after .embla
   - align-items: center if you want vertical centering of buttons
   - justify-content: flex-end to push them to the right
   - gap: space between the prev/next buttons
   - margin-top: space above the controls so they're not stuck to the slides
   ================================================================= */
.embla__controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;        /* spacing between Prev and Next buttons */
  margin-top: 0.75rem; /* space from the carousel content above */
  /* Optionally, you could give it: width: 100%; so it always spans the carousel’s width */
}

/* =================================================================
   4) Arrow button styles (no longer absolutely positioned)
   - size: 2.5rem × 2.5rem, circular
   - background: semi-transparent black
   - white arrow (‹ / ›) inside
   - hidden by default, only shown when .embla.is-draggable exists
   ================================================================= */
.embla__button, .embla__button:focus {
  background: rgba(0, 0, 0, 0);
  border: 1px solid var(--contrast-3);
  color: var(--contrast-3);
  padding: 0px;
  font-size: 1.5rem;
  line-height: 1;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  user-select: none;
  opacity: 0.8;
  /* remove any absolute or bottom/right, since they’re now in a flex container below */
}

.embla__button:hover {
  opacity: 1;
  background: var(--contrast-3);
  color: var(--base-2);
}

.embla__button:focus {
  outline: 2px solid #fff;
}

/* We no longer need .embla__button--prev { right:… } etc. 
   Instead, their order in HTML / flex container determines placement.
   By default in the JS, we append Prev first, then Next, so they’ll appear
   left-to-right as: [Prev] [Next], aligned right by .embla__controls. */

/* =================================================================
   5) Only show arrows if there is more than one slide
   (.embla gains .is-draggable when > 1 “slide” width)
   ================================================================= */
/*.embla__button {
  display: none;
}*/

.embla.is-draggable + .embla__controls > .embla__button {
  display: flex;
}

/*
  Explanation:
  - When Embla initializes and there is more than one slide, the root
    .embla element gets the class .is-draggable.
  - Because our controls DIV is inserted immediately after .embla (a sibling),
    we can use `.embla.is-draggable + .embla__controls > .embla__button`
    to reveal both buttons. If there’s only one slide, .is-draggable is absent,
    so the buttons remain hidden.
*/