/* =========================================================
   RL Card Carousel – base
   ========================================================= */

.rl-carousel {
  position: relative;
  outline: none;
}

/* After JS runs, these wrappers exist */
.rl-carousel__inner {
  min-height: 1px;
}

.rl-carousel__controls {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .75rem;
  width: 100%;
}

.rl-carousel[data-controls-placement="top"] .rl-carousel__controls {
  margin-top: 0;
  margin-bottom: .75rem;
}

/* Alignment modes */
.rl-carousel__controls.rl-controls--left   { justify-content: flex-start; }
.rl-carousel__controls.rl-controls--center { justify-content: center; }
.rl-carousel__controls.rl-controls--right  { justify-content: flex-end; }
.rl-carousel__controls.rl-controls--split  { justify-content: space-between; }

/* Controls internal row (the locked Group) */
.rl-carousel__controls .rl-controls-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  justify-content: inherit;
}

.rl-carousel__controls.rl-controls--split .rl-controls-row {
  justify-content: space-between;
}

.rl-controls-left,
.rl-controls-right {
  flex: 0 0 auto;
}

/* Counter */
.rl-counter {
  font-variant-numeric: tabular-nums;
  opacity: .75;
  margin: 0;
}

.rl-carousel[data-show-counter="0"] .rl-counter {
  display: none !important;
}

.rl-carousel__controls.rl-controls--split .rl-counter {
  flex: 1;
  text-align: center;
}

/* Optional card look (class is automatic in template; user can duplicate cards) */
.rl-carousel .rl-card,
.rl-carousel .wp-block-group.rl-card {
  padding: 1rem;
/*
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 14px;
*/
}

/* Animation */
.rl-animate .rl-cards--stack {
  position: relative;
  overflow: hidden;
  transition: height 220ms ease;
}

.rl-animate .rl-cards--stack > .rl-card-item {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}

.rl-animate .rl-cards--stack > .rl-card-item.is-active {
  position: relative;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* =========================================================
   Editor layout helpers
   - We keep a single InnerBlocks tree in the editor.
   - These rules make placement/alignment visible in the editor too.
   ========================================================= */

/* Gap between controls (first block) and cards */
.rl-editor-layout > .block-editor-inner-blocks > .block-editor-block-list__layout {
  display: flex;
  flex-direction: column;
  gap: .75rem; /* <-- ez a kért távolság */
}

/* Controls placement: if Top, controls stay first (default).
   If Bottom, move the controls group to the end visually (order) */
.rl-editor-controls-bottom
  > .block-editor-inner-blocks
  > .block-editor-block-list__layout
  > .wp-block.rl-controls-row {
  order: 999;
}

/* Horizontal alignment of the controls row in the editor */
.rl-editor-align-left
  > .block-editor-inner-blocks
  > .block-editor-block-list__layout
  > .wp-block.rl-controls-row {
  justify-content: flex-start;
}

.rl-editor-align-center
  > .block-editor-inner-blocks
  > .block-editor-block-list__layout
  > .wp-block.rl-controls-row {
  justify-content: center;
}

.rl-editor-align-right
  > .block-editor-inner-blocks
  > .block-editor-block-list__layout
  > .wp-block.rl-controls-row {
  justify-content: flex-end;
}

/* Split in editor: full width controls, with counter centered */
.rl-editor-align-split
  > .block-editor-inner-blocks
  > .block-editor-block-list__layout
  > .wp-block.rl-controls-row {
  width: 100%;
  justify-content: space-between;
}

.rl-editor-align-split
  > .block-editor-inner-blocks
  > .block-editor-block-list__layout
  > .wp-block.rl-controls-row
  .rl-counter {
  flex: 1;
  text-align: center;
}

/* Make sure the controls row doesn't wrap weirdly in editor */
.rl-editor-layout
  > .block-editor-inner-blocks
  > .block-editor-block-list__layout
  > .wp-block.rl-controls-row {
  align-items: center;
  gap: .5rem;
}

/* =========================================================
   Hide counter (editor + frontend)
   ========================================================= */

/* Frontend (data attribute) */
.rl-carousel[data-show-counter="0"] .rl-counter {
  display: none !important;
}

/* Editor (class-based) */
.rl-editor-hide-counter .rl-counter {
  display: none !important;
}