/** Alster+ Beiträge Carousel — scoped styles, no theme or font dependencies. */

.alster-posts {
  --alster-posts-gap: 20px;
  --alster-posts-columns: 3;
  --alster-posts-fallback-width: calc((100% - 40px) / 3);
  --alster-posts-colour: #fff;

  position: relative;
  box-sizing: border-box;

  width: 100%;
  min-width: 0;
  max-width: none;

  margin: 0;
  padding: 0 0 0 30px;

  overflow: visible;

  color: var(--alster-posts-colour);
  background: transparent;

  font-family: "neue-haas-unica", sans-serif;

  direction: ltr;
}

.alster-posts--dark {
  --alster-posts-colour: #191919;
}

.alster-posts *,
.alster-posts *::before,
.alster-posts *::after {
  box-sizing: border-box;
}

.alster-posts [hidden] {
  display: none !important;
}


/* ==========================================================================
   Viewport
   ========================================================================== */

.alster-posts .alster-posts__viewport {
  width: 100%;
  max-width: none;

  padding: 0;

  overflow-x: auto;
  overflow-y: hidden;

  overscroll-behavior-x: contain;

  scrollbar-width: none;

  scroll-behavior: auto;

  -webkit-overflow-scrolling: touch;
}

.alster-posts__viewport::-webkit-scrollbar {
  display: none;
}


/*
 * Once JS is active, the carousel is moved with transform.
 * Vertical gestures stay available to the page.
 * Horizontal gestures are handled by the carousel JS.
 */
.alster-posts.is-ready .alster-posts__viewport {
  overflow: hidden;

  touch-action: pan-y;
  -ms-touch-action: pan-y;

  overscroll-behavior-x: none;

  -webkit-overflow-scrolling: touch;
}


/* ==========================================================================
   Track
   ========================================================================== */

.alster-posts .alster-posts__track {
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;

  gap: var(--alster-posts-gap);

  width: 100%;

  margin: 0;
  padding: 0;

  transition: none !important;

  touch-action: pan-y;
  -ms-touch-action: pan-y;
}

.alster-posts.is-moving .alster-posts__track {
  will-change: transform;
}


/* ==========================================================================
   Cards
   ========================================================================== */

.alster-posts .alster-posts__card {
  display: block;

  flex: 0 0 var(
    --alster-posts-card-width,
    var(--alster-posts-fallback-width)
  );

  width: var(
    --alster-posts-card-width,
    var(--alster-posts-fallback-width)
  );

  min-width: 0;
  max-width: none;

  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 0;

  background: none;

  box-shadow: none;
}


/* ==========================================================================
   Link
   ========================================================================== */

.alster-posts .alster-posts__link {
  display: block;

  height: 100%;

  margin: 0;
  padding: 0;

  border: 0;

  color: var(--alster-posts-colour) !important;

  text-decoration: none !important;

  background: none;

  box-shadow: none;

  -webkit-user-drag: none;

  touch-action: pan-y;
  -ms-touch-action: pan-y;

  -webkit-tap-highlight-color: transparent;
}


/* ==========================================================================
   Image
   ========================================================================== */

.alster-posts .alster-posts__image {
  position: relative;

  display: block;

  width: 100%;

  aspect-ratio: 3 / 4;

  overflow: hidden;

  border-radius: 0;

  background: rgba(127, 127, 127, .16);

  -webkit-user-select: none;
  user-select: none;

  touch-action: pan-y;
  -ms-touch-action: pan-y;
}

.alster-posts .alster-posts__image img,
.alster-posts .alster-posts__placeholder {
  display: block;

  width: 100% !important;
  height: 100% !important;
  max-width: none;

  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 0;

  object-fit: cover;
  object-position: center;

  -webkit-user-drag: none;

  -webkit-user-select: none;
  user-select: none;

  pointer-events: none;
}


/* ==========================================================================
   Title
   ========================================================================== */

.alster-posts h2.alster-posts__title {
  margin: 8px 0 0 !important;
  padding: 0 !important;

  color: var(--alster-posts-colour) !important;

  font-family: "neue-haas-unica", sans-serif !important;

  font-size: 24px !important;
  font-weight: 400 !important;
  font-style: normal;

  line-height: 36px !important;

  letter-spacing: 0 !important;

  text-transform: none !important;
  text-decoration: none !important;

  overflow-wrap: anywhere;
}

.alster-posts .alster-posts__link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -3px;
}


/* ==========================================================================
   Controls
   ========================================================================== */

.alster-posts .alster-posts__controls {
  display: none;

  align-items: center;
  justify-content: flex-end;

  gap: 8px;

  width: 100%;

  margin: 40px 0 0;

  padding: 0 30px 0 0;
}

.alster-posts.is-ready .alster-posts__controls {
  display: flex;
}

.alster-posts .alster-posts__pagination {
  display: flex;
  flex-wrap: wrap;

  align-items: center;
  justify-content: flex-end;

  gap: 0;

  min-width: 0;
}


/* ==========================================================================
   Dots / pause button
   ========================================================================== */

.alster-posts .alster-posts__dot,
.alster-posts .alster-posts__toggle {
  appearance: none;
  -webkit-appearance: none;

  position: relative;

  display: inline-flex;
  flex: 0 0 24px;

  align-items: center;
  justify-content: center;

  width: 24px;
  min-width: 24px;

  height: 24px;
  min-height: 24px;

  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 0;

  color: var(--alster-posts-colour) !important;

  background: transparent !important;

  box-shadow: none !important;

  cursor: pointer;

  line-height: 1;

  transition: none;
}

.alster-posts .alster-posts__dot::before {
  content: "";

  display: block;

  width: 7px;
  height: 7px;

  border: 0;
  border-radius: 50%;

  background: currentColor;

  opacity: .38;

  transition: opacity .15s ease;
}

.alster-posts .alster-posts__dot[aria-current="true"]::before,
.alster-posts .alster-posts__dot:hover::before {
  opacity: 1;
}

.alster-posts .alster-posts__dot::after,
.alster-posts .alster-posts__toggle::before,
.alster-posts .alster-posts__toggle::after {
  content: none;
}

.alster-posts .alster-posts__dot:focus-visible,
.alster-posts .alster-posts__toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}


/* ==========================================================================
   Play / pause icon
   ========================================================================== */

.alster-posts .alster-posts__toggle-icon {
  display: block;

  width: 9px;
  height: 10px;

  border-right: 3px solid currentColor;
  border-left: 3px solid currentColor;

  opacity: .75;
}

.alster-posts
.alster-posts__toggle[aria-pressed="true"]
.alster-posts__toggle-icon {
  width: 0;
  height: 0;

  margin-left: 2px;

  border-top: 5px solid transparent;
  border-right: 0;
  border-bottom: 5px solid transparent;
  border-left: 8px solid currentColor;
}


/* ==========================================================================
   Accessible status
   ========================================================================== */

.alster-posts .alster-posts__status {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;

  overflow: hidden !important;

  clip-path: inset(50%);

  white-space: nowrap;
}


/* ==========================================================================
   Drag state
   ========================================================================== */

.alster-posts.is-dragging {
  -webkit-user-select: none;
  user-select: none;
}

.alster-posts.is-dragging .alster-posts__viewport {
  touch-action: none;
}

@media (hover: hover) and (pointer: fine) {

  .alster-posts.is-draggable .alster-posts__viewport {
    cursor: grab;
  }

  .alster-posts.is-dragging .alster-posts__viewport {
    cursor: grabbing;
  }
}


/* ==========================================================================
   Impeka / WPBakery overflow

   Optional:
   put "alster-posts-row" in the row's Extra Class Name.
   ========================================================================== */

.alster-posts-row,
.alster-posts-row > .grve-container,
.alster-posts-row .grve-row,
.alster-posts-row .grve-column,
.alster-posts-row .grve-column-wrapper,
.alster-posts-row .grve-column-content,
.alster-posts-row .vc_row,
.alster-posts-row .vc_column_container,
.alster-posts-row .vc_column-inner,
.alster-posts-row .wpb_wrapper {
  overflow: visible !important;
}


/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 1023px) {

  .alster-posts {
    --alster-posts-columns: 2;
    --alster-posts-fallback-width:
      calc((100% - 20px) / 2);
  }
}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 639px) {

  .alster-posts {
    --alster-posts-columns: 1;
    --alster-posts-fallback-width: 100%;

    padding-left: 15px;
  }

  .alster-posts .alster-posts__controls {
    padding-right: 15px;
  }

  /*
   * On touch devices the carousel itself handles horizontal movement.
   * Vertical gestures continue to scroll the page.
   */
  .alster-posts.is-ready .alster-posts__viewport,
  .alster-posts.is-ready .alster-posts__track,
  .alster-posts.is-ready .alster-posts__link,
  .alster-posts.is-ready .alster-posts__image {
    touch-action: pan-y;
    -ms-touch-action: pan-y;
  }

  .alster-posts.is-dragging .alster-posts__viewport,
  .alster-posts.is-dragging .alster-posts__track {
    touch-action: none;
    -ms-touch-action: none;
  }
}


/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  .alster-posts .alster-posts__dot::before {
    transition: none;
  }
}